JavaScript入门基础01
文章目录
-
- JavaScript是什么
- Java和JavaScript的关系
- JavaScript的环境配置
- 解释一下HTML的代码
- 写一个简单的JavaScript程序
JavaScript是什么
JavaScript是一个编程语言，主要是在浏览器中运行。JavaScript是主要领域是处理网页后端，因为主要是和前端的HTML和CSS打交道，所以一般JavaScript被归为前端。
简单认识前端三大件（HTML、CSS、JavaScript）的关系:
HTML是网页页面的基础结构，CSS是用于修饰页面的，JavaScript是用来实现页面的交互的。
简单的理解就是HTML是页面的设计图纸，CSS就是给图纸上色的，JavaScript就是让页面动起来的。
Java和JavaScript的关系
Java也是一门编程语言。Java把面向对象展示地淋漓尽致。JavaScript在创建之初的名字是LiveScript，因为当时Java很火，所以JavaScript就沾了Java的光，于是就把Java的名字拿过来用了。除此之外就没有什么其它关系了，因为都是高级编程语言，所以语法方面也会有类似的地方。
和Java与JavaScript类似名字关系的还有C语言和C++。
一开始C++创建的时候也是借用了C语言的名字，目的就是为了沾一下C语言的光。再加上C++可以大部分兼容C语言，所以也是一个双赢的局面。
JavaScript的环境配置
因为JavaScript的运行环境和C/C++、Java等不同，JavaScript是运行在浏览器上的，所以只有电脑有浏览器就可以运行JavaScript的代码。而C/C++需要编译器将C/C++源代码编译成可执行的二进制文件才能运行，Java是运行在JVM上的，所以需要JDK将Java源代码编译成一个字节码文件然后通过解释器运行Java程序。JavaScript的源代码到运行结果其实是用了浏览器上的JavaScript的解释器，然后进行渲染什么的最后把结果呈现出来。如果只是给程序员开发用的话就用浏览器自带的开发者环境进行调试JavaScript代码。
因为JavaScript是运行在浏览器上的，所以得先有页面才能跑JavaScript程序吧。而页面的基本结构是有HTML完成，所以只需要一个简单的HTML代码就可以将JavaScript环境搭建好。在学习JavaScript的语法初期其实也不需要过多的HTML的知识，只需要把简单的页面环境搭建好即可，然后就注重在JavaScript的语法部分即可。学到后面了在将JavaScript与HTML和CSS结合起来。
写一个简单的HTML代码搭建JavaScript环境。HTML代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="GBK">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script src="简单的测试.js">
script>
body>
html>
这个是使用VSCode的代码自动生成。只需要打一个’!'然后回车即可。如果是使用记事本来写的话就把上面的代码抄一遍就可以了。这个操作比搭配C/C++、Java环境等都简单很多。
解释一下HTML的代码
第一行的表示的是告诉浏览器，我要使用最新的HTML，也就是HTML5。
中的lang是language的缩写，en表示英语，zh-CN表示汉语。这里主要看做出来的网页面对的是人。这里用英文还是中文都是可以的，因为现在主要注重JavaScript语法，所以不需要纠结过多。
表示的是设置字符集是GBK，主要是防止中文乱码的，看电脑的代码字符集是什么格式自己对应改就行了，一般都是GBK和UTF-8，如果这里写GBK，结果是乱码就改成UTF-8，反过来也是一样。后面的两个meta不写也没关系。
接下来的title部分是将页面的标题设置成什么名字，将名字放在中间即可，上面的代码是将当前HTML页面的标题设置成Document。
在body中要加一个。然后在.html文件旁边新建一个名叫简单的测试的js文件。名字可以任意取但是script标签里的src赋值一定是和刚刚的名字对应。
当然也可以直接在script标签里不加src的这个操作，然后在之间写JavaScript代码。但是这样子就不太好看，还是把JavaScript代码放外面吧。把JavaScript代码放外面使整体的代码看起来更加地简洁。对应的人做对应的事情。
写一个简单的JavaScript程序
环境已经搭建好之后就可以写一个简单的JavaScript的程序了。经典HelloWorld程序使用JavaScript实现。
在刚刚建好的.js文件中将一下代码写入。
console.log('HelloWorld');
然后使用浏览器将HTML打开。
然后，你什么都看不到。因为这个代码是给程序员调试使用的。所以是把打印结果放到浏览器的开发者环境中的控制台呈现出来，所以你什么都看不到，因为你打开浏览器，而浏览器最直观的页面是给用户看的，而现在并没有做任何页面上的事情，所以使用浏览器打开HTML文件什么都看不到是正常现象。那现在你只需要按一下键盘的F12键就可以进入开发者环境。选择控制台选项就可以看到熟悉的HelloWorld字样。当然出来使用键盘上的F12键之外，还可以在页面的空白处右击选择检查选项也可以进入开发者环境。
如果想一打开浏览器就可以看到HelloWorld字样怎么办呢？那只需要把原来的代码改成以下代码即可：
alert('HelloWorld');
这样就可以使用浏览器打开HTML文件的时候就可以看到一个文本框，上面有HelloWorld字样。