《JavaScript动态网页设计》课件 1 创建JavaScript程序

项目1创建JavaScript程序主讲：***2024年12月18日JavaScript动态网页设计1子项目2024年12月18日JavaScript动态网页设计2学习任务

任务1搭建开发环境

任务2初识JavaScript

任务3学习JavaScript语法

任务4在网页中添加掌握JavaScript程序的基本应用2024年12月18日JavaScript动态网页设计3任务1搭建开发环境对于Web前端开发人员，一个强大的编辑器可以使开发变得简单、便捷、高效，建议使用类似VisualStudioCode（简写Vscode）这种专注于代码编写、轻量级且功能强的文本编辑工具作为JavaScript代码的编写工具。本书安装的是windowx64的VisualStudioCode，官方简体中文版的安装文件可以在其官方网站下载：。2024年12月18日JavaScript动态网页设计41、VisualStudioCode下载与安装步骤如下：（1）下载VisualStudioCode软件，如图1-1所示。

图1-1

VisualStudioCode下载界面2024年12月18日JavaScript动态网页设计5（2）运行VisualStudioCode安装程序，如图1-2所示。第一步是将其解压到指定目录，解压完成后，会自动运行安装程序。

图1-2

VisualStudioCode安装程序（3）双击安装图标，弹出安装窗口，选择“我同意此协议”选项，然后点击“下一步”按钮。如图1-3所示。

图1-2

VisualStudioCode安装界面图1-3

VisualStudioCode安装界面2024年12月18日JavaScript动态网页设计6（4）进入“选择附加任务”窗口，根据自己的需求点击对应的选项，然后点击“下一步”按钮。如图1-4所示。

图1-4

“选择附加任务”窗口2024年12月18日JavaScript动态网页设计7（5）进入“准备安装”窗口，点击“安装”按钮进行程序的安装。如图1-5所示。

图1-5

“准备安装”窗口2024年12月18日JavaScript动态网页设计8（6）完成程序安装，如图1-6所示。

图1-6

完成安装窗口2024年12月18日JavaScript动态网页设计92、JavaScript初体验下面通过一个案例来演示如何编写一段简单的JavaScript代码。【范例1-1】实现当网页打开时自动弹出一个警告框，警告框的内容为“HelloJavaScript”。<script>

alert('HelloJavaScript');

</script>运行结果如图1-10所示。

图1-10

运行结果2024年12月18日JavaScript动态网页设计10任务2初识JavaScriptJavaScript是一种运行在客户端的脚本语言（Script是脚本的意思），不需要编译，运行过程由js解释器逐行来进行解释并执行。JavaScript控制了网页的行为，如表单数据合法性验证、网页特效、数据计算、服务端开发（Node.js）、后端接口通信等。2024年12月18日JavaScript动态网页设计11一、JavaScript的组成JavaScript是由ECMAScript、DOM、BOM这3部分组成的。①ECMAScript。是由ECMA国际进行标准化的一门编程语言。②DOM（DocumentObjectModel，文档对象模型）。是W3C组织推荐的处理可扩展标记语言的标准编程接口。③BOM（BrowserObjectModel，浏览器对象模型）。是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。2024年12月18日JavaScript动态网页设计12二、JavaScript的书写JavaScript有3种书写位置，分别为行内、内嵌和外部。1、行内式JS

可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性），如onclick。这种

方式可读性差，引号易错，不方便阅读。<inputtype=”button”

value=”点击一下”

onclick=”alert(‘helloeveryone’)”/>2024年12月18日JavaScript动态网页设计132、内嵌式JS

可将多行JS代码写到<script>标签中，内嵌JS是学习时常用的方式。

【范例1-2】使用内嵌式引用JS代码，在控制台输出结果。

<script>

console.log(‘第一个JavaScript程序设计’);

</script>

运行结果如图1-11所示。

图1-11

内嵌式JS运行结果2024年12月18日JavaScript动态网页设计143、外部JS文件

利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用。在HTML中使用<script>标签引用外部JS文件，引用外部JS文件的<script>标签中间不可以写代码，这种方式适合JS代码量比较大的情况。<scriptsrc=”index.js”></script>2024年12月18日JavaScript动态网页设计154、JavaScript注释为了提高代码的可读性，JS和CSS一样，也提供了注释功能。JS中的注释主要有两种，分别是单行注释和多行注释。l

)单行注释

//用来注释单行文字。单行注释的注释方式如下：//我是一行文字，不想被JS引擎执行，所以注释起来2)多行注释/**/用来注释多行文字。多行注释的注释方式如下：/*

获取用户年龄和姓名

并通过提示框显示出来*/2024年12月18日JavaScript动态网页设计16任务3学习JavaScript语法JavaScript语言是一门功能强大、使用范围广泛的程序语言，其语法基础包括变量、数据类型、运输符、语句及函数等内容。下面主要介绍JavaScript中变量和运算符。2024年12月18日JavaScript动态网页设计17一、变量1、变量的命名规则

在JavaScript中，为了避免代码编写出错，变量进行命名时要遵守相关的规则，规则如下：·

不能以数字开头，且不能包含空格、加号和减号等符号。·

严格区分大小写。·

不能使用JavaScript的关键字或保留字。

为了提高代码的可读性，建议对变量进行命名时尽量做到“见其名知其义”。如果使用多个单词组合命名，则用下划线“_”分隔多个单词，或者采用驼峰命名法，第一个单词首字母小写，后面单词的首字母需要大写。2024年12月18日JavaScript动态网页设计182、变量的声明和赋值

JavaScript常用的变量声明方式有3种，分别是使用var、let、const关键字声明，其中let和const是ES6标准中新增的声明变量方式。（1）使用关键字var声明变量和赋值使用var关键字既可以一次声明一个变量，也可以一次声明多个变量，声明变量未赋值，表示不初始化变量，即变量默认未undefined。varage;

//声明一个变量varname,age,sex;

//声明多个变量，不同变量之间用逗号隔开age、name、sex是变量名，通过变量名来访问内存中分配的空间。

“=”用来把右边的值赋给左边的变量空间中。2024年12月18日JavaScript动态网页设计19（2）使用关键字let声明变量和赋值关键字let声明的用法类似于关键字var，但使用let声明的变量只在块级作用域中起作用。使用let既可以一次声明一个变量也可以一次声明多个变量。声明变量未赋值表示不初始化变量，其变量默认未undefined。letage;

//声明一个变量letname,age,sex;

//声明多个变量，不同变量之间用逗号隔开（3）使用关键字const声明变量和赋值使用const关键字声明一次只能声明一个变量，并必须初始化变量，且该值在整个运行过程中不可修改，如下。consta=5;//一次声明一个变量2024年12月18日JavaScript动态网页设计20（4）var和let可以多次对同一个变量赋值，一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准，如下。varprice=20;console.log(price);

//输出结果为20price=50;console.log(price);

//输出结果为502024年12月18日JavaScript动态网页设计21二、基本数据类型JavaScript的基本数据类型有数值型、字符串型和布尔型，还有null（空型）、undefined（未定义型）、NaN（非数值）等。1、变量的数据类型

变量是用来存储值的所在处，有变量名和数据类型。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。varage=30;//这是一个数值型varname=‘张三’;//这是一个字符串2024年12月18日JavaScript动态网页设计222、数值型（Number型）

JavaScript的数值型包括整型和浮点型，整型通常使用十进制表示，还可以使用二进制、八进制或十六进制来表示，而浮点型数值为包含小数点的实数，可使用科学计数法来表示。vara=25;

//十进制表示的26varb=3.4;

//整数部分.小数部分varc=3.14E5;

//科学计数法表示1)

JavaScript中数值的最大和最小值。alert(Number.MAX_VALUE);

//

1.7976931348623157e+308alert(Number.MIN_VALUE);

//

5e-322024年12月18日JavaScript动态网页设计232)

isNaN()用来判断一个变量是否为非数字的类型，返回true或者false。【范例1-3】使用IsNaN()方法判断。varage=21;vara=isNaN(age);console.log(a);

//falsevarb=”andy”;console.log(isNaN(b));

//true

运行结果如图1-12所示。

图1-12

isNaN()方法2024年12月18日JavaScript动态网页设计243、布尔型（Boolean型）布尔型数值有两个值，分别为true和false。在程序中也可用非0数值表示true，用数值0表示false。布尔型数值通常用于表示程序中的逻辑判断结果。vard=true;

//给变量d赋值为布尔型数据truevare=false;

//给变量e赋值为布尔型数据false2024年12月18日JavaScript动态网页设计254、字符串型（String型）

字符串用来表示文本数据，在JavaScript中使用单引号（‘）和双引号（“）标注字符串。varstr1=“Javascript”;

//表示字符串”Javascript”varstr2=‘前端开发’;

//表示字符串’前端开发’1)

字符串引号嵌套JavaScript可以用单引号嵌套双引号，或者用双引号嵌套单引号。varstr1=‘我是”白富美”哈’;varstr2

=“我是’高富帅’哈”;2024年12月18日JavaScript动态网页设计262)

字符串转义符类似HTML里面的特殊字符，字符串也有特殊字符，我们称之为转义符。转义符都是\开头的，常用的转义符如表1-1所示。表1-1

JavaScript常用的转义符转义符说明\n换行符，n是newline的意思\\斜杠

\\''单引号\"“双引号\ttab缩进\b空格

，b是blank的意思2024年12月18日JavaScript动态网页设计275、空型（Null）

空型是只有一个特殊的null值，该变量未指向任何对象。一个声明变量给null值，里面存的值为空。

vara=null;

//null类型6、未定义型（undefined）

未定义型表示声明的变量未被赋值，只有一个值，即为undefined。

varb;

console.log(b);

//输出结果为undefined7、非数值型（NaN）

NaN（notaNumber）指程序运行时由于某种原因产生没有意义的数值。

vara=6;

varb=‘厉害’;

console.log(a*b);

//输出结果为NaN2024年12月18日JavaScript动态网页设计28三、数据类型转换1、获取检测变量的数据类型

typeof可用来获取检测变量的数据类型。不同类型的返回值如表1-2所示。

typeof

变量或者

typeof(变量)

varnum=20;

console.log(typeofnum)

//结果number

表1-2

不同类型的返回值类型例结果Stringtypeof“白白”stringNumbertypeof20numberBooleantypeoftruebooleanUndefinedtypeofundefinedundefinedNulltypeofnullobject2024年12月18日JavaScript动态网页设计292、隐式类型转换在JavaScript中定义一个变量时无需指定该数据类型，JavaScript会自动将某个数据转换成另一个类型的数据。隐式类型转换是通过运算自动对数据类型进行转换。（1）如果两个操作数中有一个是字符串，利用加号运算符运算时，为字符串拼接运算。拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串。

2024+

“美好”;

//2024美好（2）除了加号运算符外，JavaScript会将操作数改为相应类型再进行运算，其中，true为1，false为0。

3-“8”;

//5

5*false;

//02024年12月18日JavaScript动态网页设计303、显式类型转换显式类型转换指的是通过具体的方法进行转换，增强代码的可读性。（1）将数据类型转换为布尔型数据

在JavaScript中使用Boolean()可以将值转换为布尔型数据，如果要转换的值是空字符串、数字0、NaN、null和undefined，就会被转换为false，其他的值被转换为true。

Boolean(“

”);

//false

Boolean(0);

//false

Boolean(NaN);

//false

Boolean(null);

//false

Boolean(undefined);

//false

Boolean(123456);

//true2024年12月18日JavaScript动态网页设计31（2）将数据转换为数值型数据

在JavaScript中将数据转换为数值型数据有3种方式，分别是parseInt()\parseFloat()和Number()。a）

parseInt()

将值转换为整数。parseInt(”234.6”);

//234parseInt(”123abc”);

//123b）

parseFloat()

将值转换为浮点数。parseFloat(”200.36”);

//200.36parseFloat(”456df”);

//456c）

Number()

将值转换为数值。Number(”3.5”);

//3.5Number(”123ab”);

//NaN2024年12月18日JavaScript动态网页设计32（3）将数据转换为字符串数据

在JavaScript将数据转换为字符串数据有2种方式，分别是String()或toString()，其中，String()是将任意数值转换为字符串型数据，而toString()是将除了null和undefined以外的数据转换为字符串数据。String(23);

//23String(”ab”);

//ab2024年12月18日JavaScript动态网页设计33四、运算符运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有算术运算符、赋值运算符、关系运算符、逻辑运算符、赋值运算符、三元运算符、位运算符等。2024年12月18日JavaScript动态网页设计341、算术运算符

算术运算符用于对两个值或变量进行加减乘除等算术运算。JavaScript常用的算术运算符如表1-3所示。

表1-3

JavaScript常用的算术运算符运算符说明示例+加法运算，返回结果为两个数值的和3+7;//返回值为10连接运算，只要有一侧是字符串，进行连接运算“JavaScript”+“技术”；//返回值为“JavaScript技术”-减法运算11-5;

//返回值为6*乘法运算8*2;

//返回值为16/除法运算9/3;

//返回值为3%取模运算（取余）9%2;

//返回值为1++自增运算，x++；++xx=1;y=x++;

//y=1,

x=2;x=1;y=++x;

//y=2,

x=2;--自减运算，x--；--xx=6;y=x++;

//y=6,

x=5;x=6;y=++x;

//y=5,

x=52024年12月18日JavaScript动态网页设计352、赋值运算符

赋值运算符用来把数据赋值给变量。初始化变量时使用的“=”就是最基本的赋值运算符，代表着将等号右边的值赋给左边变量。JavaScript常用的赋值运算符如表1-4所示。

表1-4

JavaScript常用的赋值运算符运算符说明示例=将右边表达式的值赋给左边的变量age=18;+=将左边变量加上右边表达式的值赋给左边的变量a+=b;//相当于a=a+b;-=将左边变量减去右边表达式的值赋给左边的变量a-=b;//相当于a=a-b;*=将左边变量乘右边表达式的值赋给左边的变量a*=b;//相当于a=a*b;/=将左边变量除以右边表达式的值赋给左边的变量a/=b;//相当于a=a/b;%=对左边变量用右边表达式的值求模，并得结果赋给左边变量a%=b;//相当于a=a%b;&=对左边变量和右边表达式的值进行与运算，并得结果赋给左边变量a&=b;//相当于a=a&b;|=对左边变量和右边表达式的值进行或运算，并将结果赋给左边变量a|=b;//相当于a=a|b;2024年12月18日JavaScript动态网页设计36【范例1-4】赋值运算符的应用如下。vara=10;console.log(a+=5);

//输出结果为15varb=20;console.log(b*=5);

//输出结果为100

运行结果如图1-13所示。

图1-13

赋值运算符的应用2024年12月18日JavaScript动态网页设计373、关系运算符

关系运算符又叫比较运算符，是两个数据进行比较时所用的运算符，比较运算后，其结果返回的是布尔值（true/false）。JavaScript常用的关系运算符如表1-5所示。表1-5

JavaScript常用的关系运算符运算符说明示例<小于3<4;

//返回值为true<=小于等于3<=3;//返回值为true>大于3>4;//返回值为false>=大于等于3>=4;//返回值为false==等于。只要值相等就是true“7”==7;//返回值为true!=不等于。值不相等就是false“7”!=7;//返回值为false===全等。对值和数据类型同时进行判断“7”===7;

//返回值为false!==不全等。对值和数据类型同时进行判断“7”!==7;

//返回值为true2024年12月18日JavaScript动态网页设计384、逻辑运算符

逻辑运算符时用来进行布尔值运算的运算符，在程序中，如果要对条件作判断，可以使用逻辑运算符。逻辑运算符的操作数和运算结果都是布尔值。JavaScript常用的关系运算符如表1-6所示。表1-6

JavaScript常用的逻辑运算符（给定x=2，y=9）运算符说明示例&&逻辑与。只有当两个操作数的值都为true时，逻辑与的结果才为true，否则为falsex<6&&y>2;//返回值为true||逻辑或。只有当两个操作数的值都为false时，逻辑或的结果才为false，否则为truex==4||y==4;//返回值为false！逻辑非。操作数的值为true时，逻辑非的结果为false；操作数的值为false时，逻辑非的结果为true！(x==y);//返回值为true2024年12月18日JavaScript动态网页设计395、三元运算符

三元运算符包括“?”和“:”，用于组成三元表达式，其语法格式如下：条件表达式?表达式1:表达式2;其中，如果条件表达式的值为true，则返回表达式1的运行结果，否则，返回表式2运行的结果。【范例1-5】三元运算符的应用如下。varnum=100;varresult=num>10?‘是的’

:‘不是的’;console.log(result);

//输出结果为是的

运行结果如图1-14所示。

图1-14

三元运算符的应用2024年12月18日JavaScript动态网页设计406、位运算符

位运算符用于对数据进行二进制运算，JavaScript常用的位操作运算符如表1-7所示。表1-7JavaScript常用的位运算符位操作运算符说明位操作运算符说明&与运算符<<左移|或运算符>>有符号右移^异或运算符>>>无符号右移~非运算符

2024年12月18日JavaScript动态网页设计41【范例