《Web前端开发》第10章 JavaScript基本语法.pptx

;10.1概述;10.1.2JavaScript组成

JavaScript由三部分组成。

（1）ECMAScript：描述了JavaScript的基本语法规则，包括数据类型、变量、运算符等。

（2）BOM：浏览器对象模型（BrowserObjectModel），通过BOM可以操作浏览器窗口，例如控制浏览器跳转、获取分辨率等。

（3）DOM：文档对象模型（DocumentObjectModel），通过DOM可以操作HTML文档结构、样式或者内容，例如可以单击按钮修改文字颜色等。;10.1.3第一个JavaScript程序;10.1.4JavaScript添加方式

JavaScript添加方式有：行内方式、内嵌方式、外部方式。

（1）行内方式

行内方式添加时，JavaScript会被添加到元素的事件相关属性中，例如。

inputtype=buttonvalue=按钮onclick=alert(HelloWorld)/;（2）内嵌方式

JavaScript代码可以添加到HTML的head或body部分，JavaScript代码添加到页面结束标签/body则所有元素已经加载完，代码执行就不会拖慢网页显示过程，例如。;（3）外部方式

外部方式引入.js文件，这种方式分离了HTML和JavaScript代码，使代码更易于阅读和维护，而且已缓存的JavaScript文件可加速页面加载。

例如，单独创建sayhello.js，输入如下代码。

alert(HelloWorld!);

然后在HTML中引入该文件，代码如下。

scriptsrc=sayhello.js/script

注意：引用外部js文件的script标签中不可以写JavaScript代码，否则会被覆盖掉，不会得到执行。;10.2基本语法;10.2基本语法;10.2基本语法;4.控制台输出

可以使用console.log()将结果写入浏览器控制台，这种后台输出的方式不会影响页面显示，可用于调试代码。

例如，如下代码可将“HelloWorld”写入控制台，单击F12键进入开发者工具，选择“Console”，查看控制台中的结果，如图10-4所示。;10.2.2数据类型

JavaScript包含Number、String、Boolean、null、undefined、Object等数据类型。

（1）数值型Number：例如整数20，浮点数3.14。

数值型中有个特殊的值NaN（NotANumber），表示不是一个数字的值，例如将字符串转换为整数时parseInt(blue)返回结果NaN。

（2）字符串型String：例如HelloWorld，字符串类型的字面量可以是单引号或者双引号括起来。

（3）布尔型Boolean：例如true和fasle。

（4）未定义型undefined：变量声明后未赋值，则默认为undefined。

（5）空值null：本质是对象，可以用于将变量置空等操作，例如。

stuName=null;

console.log(stuName);//输出null;（6）数组Array：本质是对象，定义一组数据集合，每个数据都被称为数组元素，第一个元素下标为0，以此类推，使用方括号引用元素下标，例如。

//声明三个元素的数组stuTypes

letstuTypes=[underGraduate,postGraduate,ph.D];

console.log(stuTypes[0]);//输出underGraduate

（7）对象object：任何事物都可以看作对象，对象是属性与方法的集合，即数据与数据的操作的集合。

//声明只包含两个属性的对象student

letstudent={stuName:LiMing,age:20};

console.log(student.stuName);//输出对象的stuName取值，结果是LiMing。;10.2.3常量和变量

1.变量声明与赋值

JavaScript变量是弱类型的，即变量无特定的类型。声明变量时不需要说明类型，变量保存的数据的类型决定了变量的类型。尽管JavaScript允许不声明变量而直接使用变量，但按照编程规范应该先声明变量。

声明变量可以使用let或者var，尽量使用let声明变量。let声明变量的作用域是当前块或全局，var声明变量的作用域是当前函数或全局，详细区别请参见函数一章。;2.常量

常量就是程序运行期间值保持不变的量，可以使用const关键字定义常量，例如。

constPI=3.14159;

PI=3.14;//改变PI所指内存里面的值，则会出错

3.标识