JavaScript
2023-11-12 本文已影响0人
tzktzk1
JS基础语法
规范
编辑与运行
变量
运算
语句
内置库
框架
JavaScript的历史
Netscape (网景)公司是美国专注于做浏览器的公司，1995年发明JavaScript，前身是LiveScript
JavaScript垄断了浏览器端脚本语言，VBScript 和JScript 脚本语言远没有JavaScript流行
JavaScript能做什么
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 CSS 样式
JavaScript 能够隐藏 HTML 元素
JavaScript 能够显示隐藏的 HTML元素
JavaScript的书写位置
在<body>中的<scrip>标签中，书写JavaScript代码
<script>
document.getElementByld("demo").innerHTML ="我的第一段JavaScript”
</script>
将代码单独保存为.js文件，然后在HTML文件中引入
<body>
<script src="/demo/myScript.js"> </script>
</body>
输出语句
使用 window.alert0)写入警告框
使用 document.write()写入 HTML输出
使用innerHTML 写入 HTML 元素I
使用 console.log()写入浏览器控制台
注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
注释
双斜杠//后面的代码被视为注释
/*与*/之间的代码被视为注释
注释会被忽略，不会被执行
变量的定义
要想使用变量，第一步就是声明，并给它赋值
var a = 100;
变量的默认值
一个变量只定义，不赋初始值，默认值是: undefined
一个变量只有被var定义，并赋初始值后，才算正式初始化完成
var a;
console.log(a); // undefined
a = 100;
console.log(a); // 100
变量的命名规则
要只能由字母、数字、下划线、$组成，不能以数字开头
不能是关键字或保留字()
大小写敏感，a和A是两个不同的变量
四大变量命名法
驼峰命名法: webName、myAge(推荐)
C风格命名法: web_name、my_age
匈牙利命名法: sWebName、iMyAge
帕斯卡命名法: WebName、MyAge
数据类型简介
JavaScript中的两大数据类型: 基本数据类型、复杂数据类型
基本数据类型
Number、String、Boolean、Undefined、Null
复杂数据类型
Obiect、Array、Function、Date、Map、Set、RegExp等
变量类型示例
var sum =100; //整数
var pi = 3.14; /小数
var answer = 'How are you!' //字符串
var flag = true //布尔类型，true or false
var cars =[“Saab”，“Volvo”，“BMW”; //数组 cars[0]
var d = new Date(); //日期
var person ={firstName:"Bill”,lastName:"Gates”}; //对象
undefined 与 null
多个变量
使用逗号可以同时声明和初始化多个变量
var a = 100,b = 200,c = 300;
typeof运算符
使用typeof运算符可以检测值或者变量的类型
var a = 36:
var b = '我爱我家';
console.log typeof a); // number
console.log(typeof b); // string
console.log(typeof 72); // number
console.log(typeof '我爱我家'); // string
String类型要点
多个字符串拼接，用加号。即:“松勤'+你好
length是字符串的长度属性。'abc'.length //3
字符串有丰富的方法
charAt() 获取字符串指定位置的字符 '我爱我家'.charAt(1) // 爱
substring()、substr()、slice() 提取子字符串
toUpperCase() 字符串转为大写
toLowerCase() 字符串转为小写
indexOf() 检索字符串(首次出现的位置)
对象
JavaScript 对象是被命名值的容器
对象也是变量。但是对象包含很多值。
var car = {type:"porsche", model:"911",color:"white"};
值以名称:值对的方式来书写 (名称和值由冒号分隔)
事件
HTML 事件可以是浏览器或用户做的某些事情。HTML事件示例
1.HTML 网页完成加载
2.HTML输入字段被修改
3.HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事
JavaScript 允许您在事件被侦测到时执行代码
常见的HTML事件
事件 描述
onchange HTML 元素已被改变
onclick 用户点击了 HTML 元素
onmouseover 用户把鼠标移动到 HTML 元素上
onmouseout 用户把鼠标移开 HTML元素
onkeydown 用户按下键盘按键
onload 浏览器已经完成页面加载
JS表达式
表达式与运算符
10 % 3 // 操作数 运算符 操作数
五种表达式
JavaScript中，表达式主要有: 算术表达式、关系表达式、逻辑表达式、赋值表达式、综合表达式五种
算术表达式注意点
加号有”加法”和“连接符”两种作用，当其中一个操作数是字符串另一个操作数也会转换为字符串，然后进行字符串连接。否则，两个操作数都转为数字，然后进行加法运算
隐式转换:如果参与运算的操作数不是数字类型，JS内部会自动调用Number()函数，将此操作数转换为数字类型
10+'1' = '101' // 连接符
10*'6'=60 // 隐式转换
true + true = 2 // 隐式转换
2 + false = 2 // 隐式转换
关系表达式
大于 >
小于 <
大于等于 >=
小于等于 <=
等于 ==
不等于 !=
全等于 === // 类型和值都全相同
不全等于 !==
关系表达式注意点
一个等号(=)是赋值，两个等号(==)才是比较值是否相等
两个等号(==)运算符不比较值的类型，它会进行隐式转换后比较值是否相等
三个等号(===)运算符不但比较值是否相等，而且会比较类型是否相同
10 == '10' // true
10 === '10' // false
10 === 10 // true
NaN作为特殊的数字类型值，在==比较时，呈现NaN不自等
null 和 undefined ，在==比较时，却相等
false 等于0，true 等于1
NaN == NaN // false
null == undefined // true
false == 0 // true
true == 1 // true
逻辑表达式
含义 表达式
或(有真就真) ||
与(都真才真) &&
非(置反运算符) !
逻辑表达式注意点
置反运算符(!)的结果，一定是布尔值
逻辑运算符的优先级是：!非>&&与>|或
console.log(!true || false ); //false
console.log(5 && 6 || 7 && 8); //6
赋值表达式
含义 运算符
赋值 =
+=
-=
快捷赋值 *=
/=
%=
自增运算 ++
自减运算 --
综合表达式
综合表达式是其他表达式综合在一起的表达式
综合表达式的优先顺序为
非运算符 > 数学运算符 > 关系运算符 > 逻辑运算符
console.log(10 < 5 + 6); // true
console.log(11 > 10 && 13 > 6 + 6); // true
console.log(11 > 10 && 13 > 6 + 7); // false
console.log(!10 < 6 - 3); // true
console.log(!10 < 6 - 6): // false
JS语句
条件语句
使用if 来规定要执行的代码块，如果指定条件为 true
使用else 来规定要执行的代码块，如果相同的条件为 false
使用else if 来规定要测试的新条件，如果第一个条件为 false
使用switch 来规定多个被执行的备选代码块
循环语句
for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块
JS函数
函数声明
和变量类似，函数必须先定义然后才能使用
使用function关键字定义函数，function英语是“功能”的意思
function fun_name(){
// 函数体
}
函数调用
执行函数体中的所有语句，被称为“函数调用"
调用函数非常简单，只需在函数名称后书写圆括号对即可
fun_name();
局部变量
在函数内部声明的为局部变量，局部变量只能在本函数内部调用
function fun_name(){
var a = 10;
}
console.log(a); // 报错
全局变量
在函数外部声明的为全部变量，全局变量在函数内/外都能被调用
var a = 10;
function fun_name(){
a++;
console.log(a); // 输出101
}
fun_name();
console.log(a); // 输出101
不加var将定义全局属性
在函数体内，如果没有加var给变量赋值时，则将定义全局属性(不建议这样写，容易混淆逻辑)
function fun_name(){
a = 10;
}
fun_name();
console.log(a); // 输出10
Math函数库
在JavaScript Math 对象允许您对数字执行数学任务
Math.PI; //返回3141592653589793
Math.round(x) //返回值是x四舍五入为最接近的整数
Math.pow(x,y) //返回值是x的y次幂
Math.sqrt(x) //返回x的平方根
Math.abs(x) //返回x的绝对(正)值
Math.min()和Mathmax() //可用于查找参数列表中的最低或最高值
Math.random() //返回介于0(包括) 与1(不包括) 之间的随机数
JS正则表达式
正则表达式
正则表达式是构成搜索模式(search pattern) 的字符序列
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容
正则表达式可以是单字符，或者更复杂的模式
正则表达式可用于执行所有类型的文本搜索和文本替换操作
正则表达式示例
格式: /pattern/modifiers
示例: /songqin/i 是一个正则表达式
songqin 是模式 (pattern) (在搜索中使用)
i是修饰符(把搜索修改为大小写不敏感)
JS正则表达式使用
在JavaScript 中，正则表达式常用于两个字符串方法: search()和replace()
search()方法使用表达式来搜索匹配，然后返回匹配的位置
replace()方法返回模式被替换处修改后的字符串
exec()方法是一个正则表达式方法
-它通过指定的模式(pattern)搜索字符串，并返回已找到的文本
-如果未找到匹配，则返回 null。
正则表达式修饰符与模式
修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从D至9的数字。
(x|y) 查找由|分隔的任何选项。
JS异常处理
JS异常处理
try 语句使您能够测试代码块中的错误
catch 语句允许您处理错误
throw 语句允许您创建自定义错误
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何
JS表单验证
JS表单验证
HTML 表单验证能够通过 JavaScript 来完成
如果某个表单字段 (fname) 是空的，那么该函数会发出一条警告消息，并返回 false，以防止表单被提交出去
JS进阶
Dom简介
DOM (Document Obiect Model，文档对象模型)是JavaScript操作HTML文档的接口，使文档操作变得非常优雅便捷
DOM最大的特点是: 将文档表示为 DOM节点树
DOM是JS操控HTML 和 CSS的桥梁
访问元素节点
所谓“访问”元素节点，指的就是“得到”、“获取"页面上的元素节点
对节点进行操作，第一步就是要得到它
访问元素节点，主要依靠Document对象
访问元素节点的常用方法
JS中，可以使用以下方法查找与定位HTML文档元素
方法 功能
document.getElementByld() 通过ID得到元素
document.getElementsByTagName() 通过标签名得到元素数组
document.getElementsByClassName() 通过类名得到元素数组
document.querySelector() 通过选择器得到元素
document.quervSelectorAll() 通过选择器得到元素数组
document.title和document.body 获取文档标题和内容
documetgetElementsByName() 通过name属性获取元素，例如表单中的name属性
创建元素节点的常用方法
JS中，可以使用以下方法创建HTML文档元素节点、文本与属性
方法 功能
document.createElement() 创建一个元素节点
document.createTextNode() 创建一个文本节点
el.id='submit 为el元素创建属性submit
插入元素节点的常用方法
JS中，可以使用以下方法插入HTML文档元素节点
方法 功能
A.appendChild(B) A表示父元素、B表示子元素
A.insertBefore(B,ref) 在A元素中，把B插入到子元素ref之前
删除元素节点的常用方法
JS中，可以使用以下方法删除HTML文档元素节点
方法 功能
A.removeChild(B) 删除A元素的子元素B
A.removeChild(A.lastElementChild) 删除A元素的最后一个子元素
A.removeChild(A.firstElementChild) 删除A元素的第一个子元素
A.removeChild() 删除整个元素A(包括子元素)
复制元素节点的常用方法
JS中，可以使用以下方法复制HTML文档元素节点
方法 功能
obj.cloneNode(bool) //bool=1or0 复制obj，1表示包含子元素，0表示仅obj本身
替换元素节点的常用方法
JS中，可以使用以下方法替换HTML文档元素节点
方法 功能
A.replaceChild(new,old) A表示父元素，new表示新子元素，old表示旧元素
