第3章JavaScript语言基础(new)精品PPT课件
合集下载
JavaScript基础PPT课件
事件类型、监听和传播方式讲解
事件类型 JavaScript中支持多种事件类型，包括鼠标事件、键盘事 件、表单事件、窗口事件等。每种事件类型都对应一个特 定的触发条件和处理方式。
事件监听 可以使用`addEventListener`方法为元素添加事件监听器， 当指定的事件发生时，会调用监听器中的回调函数处理事 件。
移动端适配与优化
探讨针对不同设备和浏பைடு நூலகம்器的 JavaScript代码适配与优化策略， 提高页面性能和用户体验。
行业发展趋势预测
ES6+新特性
01
分析ECMAScript 6及以后版本的新特性和发展趋势，如模块化、
异步编程、装饰器等。
前端框架与库
02
探讨React、Vue等前端框架以及配套库在Web开发中的应用和
和3D游戏。
移动应用开发
通过React Native、Cordova 等框架，可以使用JavaScript
开发跨平台的移动应用。
服务器端开发
Node.js使得JavaScript可以在 服务器端运行，处理HTTP请
求、数据库操作等。
02
JavaScript基础知识
变量与数据类型
变量声明
使用`var`、`let`或`const`关键字声明 变量，分别表示可变变量、块级作用 域可变变量和常量。
逻辑运算符
用于进行逻辑运算，包括`&&`、 `||`和`!`。
流程控制语句
01
02
03
条件语句
使用`if`、`else if`和`else` 关键字实现条件判断。
循环语句
包括`for`、`while`和 `do...while`循环，用于重 复执行某段代码。
Javascript基础精品PPT课件
Page 13
4.2.1 语法
1、注意：区分大小写；
2、变量是弱类型的-定义时只用var运算符；
3、每行结尾的分号可有可无；
4、注释：
/* 注释内容 */ 多行注释
//
单行注释
5、括号表明代码块
if(test1=="red"){
test1=blue;
alert(test1);
}
Pa 6
Javascript概述-续
3、Javascript特点 (1)被嵌入到HTML中的； (2)解释执行的； (3)弱类型语言:使用变量前，不需先声明； (4)以对象为基础； (5)通过事件驱动执行；
Page 7
Javascript概述-续
4、使用方式 (1)javascript代码直接放在文档head中的<script/>块内
1、下标从0开始 2、由于区分大小写,所以Array首字母必须大写；
Page 19
数组的主要属性和操作
主要的属性：length 主要的操作：
操作名
作用
toString 数组转换为字符串,各个数组元素用 逗号连接
join 将数组组合为字符串,由分隔符隔开
<html> <head>
<title></title> <script> … </script> <body> </body> </html>
Page 8
可放在Html文档的任意位置 但一般放在head内。
使用方式-续
(2)将javascript代码存为一个.js文件，再引入使用。 <script type ="text/javascript" src =“**.js"></script> (3)在Html标签中直接写javascipt代码。
4.2.1 语法
1、注意：区分大小写；
2、变量是弱类型的-定义时只用var运算符；
3、每行结尾的分号可有可无；
4、注释：
/* 注释内容 */ 多行注释
//
单行注释
5、括号表明代码块
if(test1=="red"){
test1=blue;
alert(test1);
}
Pa 6
Javascript概述-续
3、Javascript特点 (1)被嵌入到HTML中的； (2)解释执行的； (3)弱类型语言:使用变量前，不需先声明； (4)以对象为基础； (5)通过事件驱动执行；
Page 7
Javascript概述-续
4、使用方式 (1)javascript代码直接放在文档head中的<script/>块内
1、下标从0开始 2、由于区分大小写,所以Array首字母必须大写；
Page 19
数组的主要属性和操作
主要的属性：length 主要的操作：
操作名
作用
toString 数组转换为字符串,各个数组元素用 逗号连接
join 将数组组合为字符串,由分隔符隔开
<html> <head>
<title></title> <script> … </script> <body> </body> </html>
Page 8
可放在Html文档的任意位置 但一般放在head内。
使用方式-续
(2)将javascript代码存为一个.js文件，再引入使用。 <script type ="text/javascript" src =“**.js"></script> (3)在Html标签中直接写javascipt代码。
2024版JavaScript基础课件完整版
数组的定义与使用
数组的定义
数组是一种特殊的对象，用于存储一 系列有序的值。在JavaScript中，数 组可以包含任意类型的值，包括数字、 字符串、布尔值、对象等。
数组的使用
可以通过索引来访问数组中的元素，使 用push()和pop()方法添加或删除元素， 使用sort()和reverse()方法对数组进行 排序或反转等操作。
DOM结构 DOM将HTML或XML文档转化为一个树形结构，文档中 的每个元素、属性和文本都被视为一个节点（Node）， 节点之间通过父子或兄弟关系形成树状结构。
节点类型
在DOM中，节点类型包括元素节点、属性节点、文本节 点、注释节点等。
访问和修改DOM元素
获取元素 修改元素内容 修改元素属性 修改元素样式
辑非等。
用于将右侧的值赋给左 侧的变量，如等于赋值、
加等于、减等于等。
控制流语句
条件语句
使用`if...else`语句根据条 件执行不同的代码块。
循环语句
使用`for`、`while`或 `do...while`语句重复执行 一段代码，直到满足特定 条件为止。
跳转语句
使用`break`或`continue` 语句在循环中提前结束或 跳过当前迭代。
常用内置对象与方法
Date对象
用于处理日期和时间，可以创建 日期实例、获取日期和时间信息、 进行日期计算等。
String对象
用于处理字符串，提供了许多字 符串操作方法，如charAt()、 indexOf()、replace()等。
Math对象
提供了一系列数学常数和函数， 如Math.PI、Math.random()、 Math.sin()等。
本地开发环境
JavaScript基础PPT课件
具有函数的作用域 顶级函数(顶级作用域)
函数直接量 js1.2以上版本 表达式 匿名 静态 顺序解析 具有函数作用域
. 20
➢ 第四讲： 4.3Arguments对象
ECMAScript函数不介意传递进来多少参数，也不会因为参数不统一而错误，实际 上函数体内可以通过arguments对象来接受传递进来的参数。
test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返 回true,不存在则返回false.
exec()方法执行成功，则返回包含该查找字符串的相关信息数组，如果执行失 败，则返回Null.
方法 test exec
功能 在字符串中测试模式匹配，返回true或false
在字符串中执行匹配搜索，返回结果数组
注意：1.除10进制外，还可通过8进制和16进制的字面值来表示，如 070 表示56、0xA表示10. Boolean：true和false. Undefined：表示变量声明但未赋值. Null:表示一个空的对象引用(也就是赋值为null)
. 9
➢ 引用类型
Object类型 (比如对象、数组、RegExp、Date...) Typeof 操作符 基本类型和引用类型的值 基本类型是按照值访问的，因为可以操作保存在变量中的实际值 引用类型则是按引用去访问的
参数
含义
i
忽略大小写
g
全局匹配
m
多行匹配
var Reg = /hello/; var Reg = /hello/gi;
//直接使用两个反斜杠 //在第二个斜杠后面加上模式修饰符
. 25
➢ 第五讲： 5.2RegExp对象的方法
· RegExp对象的方法 RegExp对象包含两个方法，test()和exec(),功能基本相似，用于测试字符串匹配，
第3章 Javascript脚本语言
返
回
7.
事件触发和处理
由鼠标或热键引发的一连串程序的动作，称为事件驱动 对事件进行处理的程序或函数，称为事件处理程序
事 件 名 Click 发生的对象 表单的 button，radio，checkbox， submit，reset，link（超链接）元素 Load Unload MouseOver MouseOut Submit HTML 的 body 元素 HTML 的 body 元素 link link form 在浏览器中载入页面 退出当前页面 鼠标移到超链接上 鼠标移出超链接 用户提交了表单 onLoad onUnload onMouseOver onMouseOut onSubmit 说 明 事件处理名 onClick
返
回
编写JavaScript程序时还要注意以下几点：
（1）JavaScript的大小写是敏感的，这一点与C++相似。
（2）在JavaScript程序中，换行符是一个完整的语句结束标志； 若要将几行代码放在一行中，则各语句间要以分号（；）分隔 （3）JavaScript的注释标记是//之后的部分，或/*与*/之间的部分 （与C++相同）
（1）变量名必须以字母（大小写均可）开头，只能由字母（大小写 均可）、数字（0～9）和下划线（_）组成 （2）变量名长度不能超过一行，并且不能使用JavaScript保留字作 为变量名 （avaScript的保留字
abstract char double float import native public synchronized try
<script src=JavaScript文件名>
一个简例：
<html> <head> <title>JavaScript简例</title> </head> <body> <script language="JavaScript"> alert( "世界，你好!" ); </script> </body> </html>
《JavaScript》PPT课件讲义(2024)
简化了函数表达式的写法 ，同时解决了this指向的问 题，使得代码更加简洁易 读。
使用反引号(``)来定义字符 串，可以包含变量和表达 式，使得字符串的拼接更 加直观和易读。
允许将数组或对象的属性 直接赋值给其他变量，简 化了数据的提取和操作过 程。
用于处理异步操作，通过 then和catch方法来指定异 步操作成功或失败时的回 调函数，避免了回调地狱 的问题。
2024/1/29
命名导出 使用export关键字来导出模块中 的指定成员，其他模块可以使用 import { member } from 'module'的语法来导入该成员。
导入所有成员 使用import * as alias from 'module'的语法来导入模块中的 所有成员，并使用别名来引用这 些成员。
2024/1/29
20
Web API接口调用方法
1
Web API概述
Web API是一组基于HTTP协议的应用程序接口 ，用于实现Web应用与服务器之间的数据交互。
2 3
接口调用方法
通过JavaScript的XMLHttpRequest或Fetch API发送HTTP请求，调用Web API接口并处理响 应结果。
游戏开发
使用JavaScript及其 相关技术（如 Canvas、WebGL等 ）开发网页游戏或移 动游戏。
服务器端开发
使用Node.js等技术 进行服务器端编程， 处理请求、操作数据 库等。
2024/1/29
6
02
JavaScript语法与数据类型
2024/1/29
7
基本语法规则
2024/1/29
Байду номын сангаас
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
常量基本数据类型
整型 十六进制以0X或者0x开头 如 0x8a 八进制必须0开头 十进制首位不 能 0 实型 12.32 5e7 9E2 布尔值 true false 字符串型常量 “hello” “a” “” 特殊字符需要以反斜杠\后跟普通字符来表示‘\r’’\n’ ’\t’ \\ null常量 一个变量指向的对象为空 undefiind 未定义或者不存在
JavaScript中变量的作用域分为全局变量和局 部变量。
对于用关键字var声明的变量，在函数内定义 的称为局部变量，在函数外定义的称为全局 变量；不用var声明的变量无论在函数内还是 函数外都默认是全局变量。
全局变量的作用域是整个脚本(整个HTML文 档) 。局部变量的作用域在定义的函数内，只 能被其下面的语句块和子函据项和函数的 集合。
常量
固定不变的量称为常量。使用常量一方面可 以提高代码的可读性，另一方面可以使代码 易于维护。比如一段代码中，经常用到字符 串“hello”，可以通过如下声明： const myConst=“hello”;
注意，const不支持IE浏览器显示，因此当编 辑IE浏览器浏览的网页时需要慎用常量。
字符串型 字符串型是用单引号或双引号引起来的一个或多个 字符、数字和标点符号的序列。如”hello word”、”JavaScript123”、”你好，编程！”
布尔型 布尔型只有两个值：真(True)和假(False)。1 0代表 一种状态或标志，用来作为判断依据控制操作流程。 通常，非0值表示“真”，0值表示“假”。
当表达式中不止一类运算符时，先处理算术运算符， 再处理关系运算符，最后处理逻辑运算符。
算术运算符
JavaScript常用算术运算符
运算符
描述
例子
结果
+
加
+
字符串连接
x=x+y
x=17
msg=”This is”+” message” msg=”This is message”
-
减
x=x-y
*
乘
x=x*y
或者 var name=“zhangsan” ； name=123； 隐式转换在大多数情况下可以随时处理数据类型之间的转换，
但有些情况是不行的，如： average=record / 5 ;
当record值是一个字符串时，该语句就会发生错误。
类型转换
显式转换
将字符串转换为数值。JavaScript提供parseInt( )和 parseFloat( )两个内置函数将表示数值的字符串转换 为合法的数值。
变量
值可以变化的量称为变量，变量是一个已命 名的容器，变量名代表其存储空间。
变量命名规则
变量名可以是数字、字母、下划线(_)或符号$， 第一个字符必须是字母、下划线或符号$。
变量名不能包含空格和加号、减号等符号。 变量名严格区分大小写，如myString与mystring
代表两个不同的变量。 变量名不能使用JavaScript中的关键字
表达式和运算符
表达式是变量、值和运算符按一定的规则连接起来的、 有意义的式子。运算符是表达式的主要组成部分，有 算术运算符、关系运算符和逻辑运算符。
算术运算符在使用时总是按照一定的顺序来计算，下 表中运算符是按优先级从低到高排列的，“+/-”优先 级最低，“++/--”优先级最高。如果按照优先级计算 顺序不能得到预期的结果，可以用括号“( )”来改变 优先级。
类型转换
JavaScript是一种无类型语言，为数据类型的转换提供了灵活的 处理方式，如果某个类型的值需要用于其他类型的值的环境中， JavaScript就自动将这个值转换成所需要的类型。这种转换方式 被称为隐式转换。
隐式转换 如声明一个变量record，并给它赋值为86，表示record是一个数 值类型的变量；现在改变record的值，将字符串“良好”赋值 给变量record，record转换为字符串型变量。
parseInt("5xyz");
//5
parseInt("0xA3");
//163
parseFloat("5.21abc");
//5.21
parseFloat("s14.32");
//NaN
将数值转换为字符串。当遇到的表达式中含有混合数 据类型时，JavaScript会倾向于字符串
变量的作用域
/
除
x=x/y
%
求余数 (保留整数)
x=x%y
++
累加
x++
--
递减
x--
x=7 x=60 x=2.4 x=2 x=13 x=11
关系运算符
JavaScript常用关系运算符
运算符
描述
例子
==
等于
x==y
!=
不等于
x!=y
<
小于
x<y
<=
小于等于
x<=y
>
大于
x>y
>=
大于等于
x>=y
结果 false true false false true true
数据类型
空值 空值是一个特殊的数据类型，用关键字null表示什么 都没有。创建一个对象失败时返回空值，也可以直接 将null赋值给变量。
未定义型 未定义型也是一个特殊的数据类型，用关键字 undefined表示，当使用一个没有被赋值的变量或使 用一个不存在对象的属性时，JavaScript会返回 undefined。
第3章 JavaScript语言基础
教学目标
通过本章的学习，使学生掌握 JavaScript脚本的基础知识，为后续章 节的学习打好基础。
教学要求
学习重点
变量的定义和使用 表达式的计算方法 控制语句的结构和使用方法 函数的定义和调用
数据类型
数值型 在JavaScript中，所有数字都用浮点型表示，不区分 整型和浮点型，数字的有效范围是10-308～10308， 如453、7.52、1.72e5等。
Javascript中的保留关键字
变量声明和赋值
在JavaScript中，变量由关键字var声明，语法如下： var record ;
在声明变量时可以对变量进行赋值： 也可以同时声明多个变量，并同时给多个变量赋值。 在JavaScript中，变量声明不是必须的，第一次给变
量赋值时，就已经声明该变量，但声明变量有助于及 时发现代码中的错误，因此在使用变量之前先进行声 明是一种好的习惯。