JavaScript基础语法详解
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4　浏览器环境

浏览器宿主环境提供了对HTML操纵的能力，通过暴露出来的document对象可以访问、修改和删除HTML元素，也可以给元素添加事件交互。同时，浏览器还提供了window对象，代表浏览器窗口，从中可以获取历史记录、屏幕信息、设备信息、地理位置等。

在浏览器中运行JavaScript代码最简单的方式是使用开发者工具，本书将使用版本号为87的Chrome浏览器，并且为了保证本书的代码能正常运行，需要安装同样或更高版本的浏览器，对于其他浏览器，例如新版Edge、Firefox、Safari都有类似的功能，这里就不再展示了。

要打开Chrome的开发者工具，可以使用F12键，或者在浏览器主菜单选择更多工具，在弹出的下级菜单中选择开发者工具，也可以在页面空白处右击并选择审查元素来打开。打开之后，选择Console，如图1-2所示。

图1-2　开发者工具

Console是可交互的控制台，可以编写简单的JavaScript代码，如图1-3所示。

这里简单地定义了变量a，并赋值为10，输出它的值，然后输出a+15的和。这里运行的代码执行一次之后就会丢失，一般只用来编写测试代码，日常开发中会把代码写到以.js结尾的文件中，再通过HTML引入进来，引入之后代码就会自动执行。这里如果没有HTML知识也不影响对本书的阅读，只需了解如何使用HTML把JavaScript文件引入。

首先找一个合适的空文件夹新建一个index.js文件，里边编写一些JavaScript代码，代码如下：

图1-3　运行JavaScript代码

     //chapter1/example1/index.js
     let greeting=＂你好!＂;
     console.log(greeting);

然后在同级目录下新建一个index.html文件，代码如下：

     //chapter1/example1/index.html
     <!DOCTYPE html>
     <html lang=＂en＂>
       <head>
         <meta charset=＂UTF-8＂/>
         <meta name=＂viewport＂content=＂width=device-width,initial-scale=1.0＂/>
         <title>Document</title>
       </head>
       <body>
         <script src=＂index.js＂></script>
       </body>
     </html>

这里的<script src=＂index.js＂></script >就是加载了同级目录下的index.js文件，双击index.html文件便可打开，然后使用F12键打开开发者工具就可以在Console面板中看到输出结果了，如图1-4所示。

图1-4　示例运行结果

这里需要注意的是，如果把JS代码写在文件中，则需要使用console.log()才能打印出运行结果，与直接在Console面板中编写代码不同，Console中可以省略console.log()，后边章节的代码示例默认以这种形式执行代码，所以在非必需的情况下会省略console.log()，然后使用注释标注运行结果，代码如下：

     let sum=8+7;
     sum;//15
上一章目录下一章