# Javascript
## 1.js介绍
“`html
JavaScript（简称js）是⼀种描述语⾔，基于对象和事件驱动的脚本语⾔
JavaScript特点:
脚本语⾔（⼀种轻量级的编程语⾔）
⼀种解释性语⾔（⽆需预编译）
被设计为向HTML⻚⾯添加交互⾏为
运⾏于客户端（浏览器)
“`
注意:js是多种语言语法组合而成 所以形成了自己的独特语法
## 2.js组成
 ,由ECMA组织定期维护更新.ES6之后添加了很多实用的新语法结构.
DOM (文档对象模型). js中把hmtl文档描述为DOM树,通过js对文档中的元素和属性进行修改,从而达到动态的效果.是js交互效果非常重要的部分
BOM(浏览器对象模型).通过JS对浏览器本身的功能进行操作 例如刷新页面,控制历史记录,打开关闭窗口等
## 3.js引入方式
在html中编写js的方式:
“`html
js引入方式
1.使用script标签 编写js代码 调试代码使用
“`
“`html
2.使用script标签带src属性 引入js文件 上线使用
注意 如果script标签带src属性 则标签体无效
“`
“`html
3.在元素上直接编写js代码 特例javascript:void(0) 禁止元素默认行为 用不到
了解即可
“`
注意:
html文档是从上到下加载运行
## 4.js变量规则
“`js
变量 声明
js变量是弱类型
声明不需要指明变量类型 赋值时 根据值的类型来决定类型
使用统一的关键字来声明
var 老的变量关键字
let 新的变量关键字
const 新的常量关键字
变量名
使用多单词+驼峰
不要与关键字保留字冲突
示例:
let myStr;
“`
## 5.js数据类型
js设计的初衷是容易上手(好学)(易学难精)
1 数字类型 number 整型 浮点型
“`javascript
let myNum = 10;
let myNum = 10.1;
console.log(myNum);
console.log(typeof myNum);
“`
2 布尔型 boolean true/false
“`javascript
let myBol = true;
console.log(myNum);
console.log(typeof myNum);
let myBol = false;
console.log(myBol);
console.log(typeof myBol);
“`
3 字符串 string ” “” 都是字符串
“ 模板字符串 通过${变量} 可以拼接变量
“`js
let myStr = ‘a’
let myStr = “a”
let myStr = `a`
拼接:
let tempNum = 10;
//let myStr = ‘a’+tempNum+’a’;
//模板字符串 通过${变量} 可以拼接变量
let myStr =`a${tempNum}a`;
“`
4 未定义 undefined 未定义 /未初始化(未赋值)
如果是 未赋值 值是undefined 类型是undefined
如果是 未定义(没有声明 直接使用)
会报错 类型是undefined
“`js
let myVal;
console.log(myVal);
console.log(typeof myVal);
不定义直接用
console.log(myVal); 报错
console.log(typeof myVal); 打印类型 undefined
“`
5 Object 其他各种对象 都属于object
“`js
let myDate = new Date();
console.log(myDate);
console.log(typeof myDate);
let myArr = [1,2,3];
console.log(myArr);
console.log(typeof myArr);
“`
6 function 函数 函数对象
“`js
let myFun = function(){
console.log(1111);
}
myFun()
console.log(typeof myFun);
“`
## 6.数据类型转化
注意: 从页面取出来数据 都是字符串类型
let textVal = document.getElementById(“mySpan”).innerHTML;
console.log(textVal);
所以js中需要数据计算时 经常使用类型转换
#### 1.主动类型转换函数
“`js
parseInt 转整型数据
let myStr = ‘110’;
let newNum = parseInt(myStr);
console.log(typeof newNum);
注意:
let myStr = ‘A110’;
let newNum = parseInt(myStr);
转完得到结果NaN(not a number) 数字类型的特殊值 不是数字
“`
“`js
parseFloat 转浮点数据
let myStr = ‘110.1’;
let newNum = parseFloat(myStr);
console.log(typeof newNum);
注意:
let myStr = ‘A110.1′;
let newNum = parseFloat(myStr);
转完得到结果NaN(not a number) 数字类型的特殊值 不是数字
“`
#### 2.内置类型转换(了解)
“`js
//内置类型转换
//可以转成数字的字符串 与 数字之间 等同的
//bol值 true/false 与 数字之间1/0 等同的
//为了保险 尽量少用内置类型转换
“`
“`js
let tempStr = ’10’;
let tempNum = 10;
console.log(tempStr == tempNum);
let tempBol = false;
let tempNum2 = 0;
console.log(tempBol == tempNum2);
console.log(!0);//true的简化写法
“`
js代码经常需要做代码压缩 代码压缩时会出现简化写法
> 代码压缩通过特定工具完成 不需要编码时自己写
## 7.运算符
“`js
/*算数运算符 + 加法运算 拼接字符串
– 减法运算
* 乘法运算
/ 除法运算 Infinity(无限) NaN 不是数字
% 取模运算
++ 自增
— 自减
赋值运算符 += 数字加 或 字符串拼接
-= 运算完赋值
*=
/=
%=
比较运算符 === 比较值 和 类型 有一个不同返回false
== 比较值
因为js有内置类型转换
逻辑运算符 && 有一个是false 总结果是fasle
|| 有一个是true 总结果是true
! bol值取反
*/
“`
注意:
js中number计算非常容易丢精度 toFixed(位数) 保留指定位数
示例:
let myNum =0.1+0.2;
console.log(parseFloat(myNum.toFixed(1)) +0.1);
转数字 保留位数
“`js
let myNum =0.1+0.2;
console.log(parseFloat(myNum.toFixed(1)) +0.1);
let myNum2 = 1;
myNum2 +=’1′;
console.log(myNum2);
let num1 = 1;
let num2 = 2;
console.log(num1!=num2);
let tempStr = ’10’;
let tempNum = 10;
console.log(tempStr == tempNum); //true
console.log(tempStr === tempNum); //false
“`
## 8.条件 循环语句
条件语句:
if 结构体 (通用性强)
范围条件判断 精确条件判断
“`html
if(bol值) 单分支
if(bol值) 双分支
else
if(bol值) 多分支
else if(myScore<80)
else
```
示例:
```js
let myScore = 96;
if(myScore<60){
console.log("去跟壮汉小gege吃饭....");
}else if(myScore<80){
console.log("去跟小(姐姐)吃饭吃饭....");
}else{
console.log("去跟乔碧萝...吃饭吃饭....");
}
```
switch 结构体
精确判断条件
多分支时 语法结构更清晰
```html
switch(myScore){
case 'A': console.log("ps5 pro!!");break;
case 'B': console.log("华为手机");break;
case 'C': console.log("红米手机");break;
case 'D': console.log("发一个肥皂");break;
default:console.log("律师函警告");
}
```
```js
let myScore = 'SSR';
switch(myScore){
case 'A': console.log("ps5 pro!!");break;
case 'B': console.log("华为手机");break;
case 'C': console.log("红米手机");break;
case 'D': console.log("发一个肥皂");break;
default:console.log("律师函警告");
}
```
循环语句:
for 结构体 (一般用在已知次数的循环)
```html
基础for循环
for(let i = 0; i < 10; i++){
console.log(i);
}
其他for结构体
for...in
for(let x in myArr){ x是索引
console.log(myArr[x]);
}
for...of x是遍历的数据
for(let x of myArr){
console.log(x);
}
```
示例:
```js
for(let i = 0; i < 10; i++){
console.log(i);
}
//console.log(i);
let myArr = ['a','b','c']
// for(let i = 0; i < myArr.length; i++){
// console.log(myArr[i]);
// }
for(let x in myArr){
console.log(myArr[x]);
}
for(let x of myArr){
console.log(x);
}
```
while结构体 (用在未知次数的循环上)
```html
let bol = true;
while(bol){
//dosomething.....
//if(xxx) 结束循环 bol = false
}
```
示例:
输出乘法口诀表到页面
```js
document.write("
| “) document.write(`${y}x${x}=${x*y}`) document.write(“ |
")
“`
## 9.函数
系统函数
“`html
parseInt 转整型
parseFloat 转浮点型
isNaN !isNaN("10") 检测是否纯数字
eval 把字符串转成算式并计算
“`
“`js
// console.log(!isNaN("10"));
// console.log(eval('2+3/0'));
“`
自定义函数
自己封装函数给自己使用
两种函数格式:
1声明式函数
“`js
声明式函数对象:
function 函数名(参数列表 …){
doSomething…….
//如果需要返回值 直接加return
return 返回的数据;
}
“`
“`js
function myFun(num1,num2){
// //debugger
// // console.log(num1+num2);
let newNum = num1+num2;
return newNum;
}
myFun(1,2)
结果是3
“`
2匿名函数
“`js
匿名函数定义:
let 变量名(函数名) = function(参数列表…){
//console.log(a+b);
return a+b
}
“`
“`js
let myFun = function(a,b){
//console.log(a+b);
return a+b
}
myFun(1,2)
结果是3
“`
变量作用域:
“`js
变量作用域
全局变量 整个页面都可以使用 可以在多个函数内共享
局部变量 函数内可以使用
函数内如果没声明直接使用的变量 会被js解析器补全为全局变量(不要用这个特性)
“`
注意点:
1.js中 如果函数名重复 会发生覆盖(注意函数名不要重复 不要跟变量重复)
2.实参与形参可以不对应 执行结果与预期会不符(使用时 形参与实参个数对应)
打断点(慢慢习惯) 沉下心仔细看代码:
debugger; 如果触发代码时会进断点
F11 一行一行看
F8 跳过断点
“`js
考虑流程
1 在哪个元素上 加 哪个事件 触发哪个函数
DOM中的内容
2.获取哪个元素 操作哪个属性 属性改成什么值
获取元素
doucument.getElementById(“id值”) 可以获取页面中所有元素 需要搭配ID使用
操作属性
元素.属性 DOM通用操作
写操作 元素.属性 = xxxx
读操作 元素.属性
html元素的属性都可以操作
常用属性: 属性值 参考属性本身的规则
value 表单元素的值
type 表单元素类型
id 元素id
style style中还有其他的子样式 参考css
color 文字颜色
backgroundColor 背景颜色
innerHTML 标签体中的内容 适用于所有的双标签
“`
示例:
“`html
总统选举进行中……..
“`
##### onmouseover 鼠标移入
##### onmouserout 鼠标移出
“`html
js中 经常有效果切换的场景(执行的代码相同 赋值不同)
函数中加上形参
调用时 传入实参 onmouseover=”changeBGC(‘green’)”
实参数据类型
如果是字符串 ‘green’
如果是数字 123
如果是bol值 true
“`
示例:
“`html
“`
##### onfocus 获得焦点
##### onblur 失去焦点
焦点事件 主要用在表单元素上
输入框 同一时间 只有一个框获得输入提示符 获得输入提示符的叫获得焦点
通常用鼠标触发 也可以被tab键触发
示例:
“`html
“`
注意:
实参传this
可以表示当前发生事件的元素
“`html 如果修改的元素 与触发的元素是同一个 (了解)
如果修改的元素 与触发的元素是同一个 (了解)
此时可以传this this发生事件的元素
实参传this 表示的是发生事件的元素
“`
## 11.window对象
window对象,表示当前窗口
this默认指向 当前窗口
window对象中包含其他对象,调用时不需要指明window
注意:
alert()
prompt()
confirm()
这些函数 会阻止js解析器(js解析器执行引擎 读取运行js) 执行 不要使用
## 12.history对象
历史记录对象
对应浏览器前进后退按钮
 刷新当前页面
“`
浏览器地址栏 可以控制浏览器跳转(意义重大)
前端跳转方式:
“`html
“`
示例:
“`html
“`
## 14.document对象
document 当前页面的html文档
![image-20241112153819770](http://43.155.216.63:21080/wp-content/uploads/2025/12/image-20241112153819770.png
获取元素的常用方法
“`js
getElementById("id值") 查找到唯一一个元素
getElementsByClassName("class值") 查找指定class的元素数组
getElementsByTagName("标签名") 查找指定标签名的元素
“`
.getElementsByTagName(“input”) 在元素内部查找指定元素
查找第二组元素中class值是mycls的元素
document.getElementById(“myDiv”).getElementsByClassName(“mycls”) 在元素内部查找指定元素
“`
遍历数组元素的常用方式
基础for循环(标准 有索引 有元素)
“`js
for(let i = 0; i
2.js中 如果调用元素属性不存在 得到的是undefined
如果获取元素 查找不到 得到的是null
## 15.打开关闭窗口
通过open close 可以打开关闭窗口(了解)
“`html
“`
## 16.定时函数
定时函数 函数的执行器
“`js
定时反复执行
setInterval(执行的函数,间隔的毫秒数)
clearInterval(taskId) taskId任务编号
延时执行
setTimeout(执行的函数,间隔的毫秒数)
clearTimeout(taskId) taskId任务编号
“`
传入函数三种写法
“`js
传入函数方式
1. setInterval(“myTest()”,1000) “myTest()” 有引号和括号
2. setInterval(myTest,1000) myTest 直接函数名 不能加括号 否则会立即执行
3. setInterval(function(){ 传入匿名函数 通过匿名函数指定要执行的代码
console.log(22222);
},1000)
“`
示例:
“`js
//开启定时函数
let taskId = setInterval(function(){
console.log(22222);
},1000)
//通过任务编号 停止定时
function stopInterval(){
clearInterval(taskId)
}
“`
“`html
“`
## 17.dom元素获取
“`js
查找元素的函数
getElementById(“id值”) 查找到唯一一个元素
getElementsByClassName(“class值”) 查找指定class的元素数组
getElementsByTagName(“标签名”) 查找指定标签名的元素
document.getElementById(“myDiv”).getElementsByTagName(“input”) 在元素内部查找指定元素
document.getElementById(“myDiv”).getElementsByClassName(“mycls”) 在元素内部查找指定元素
“`
“`js
查找元素的属性
dom树中 根据节点关系查找
子节点
children 所有子节点(集合)
firstElementChild 元素
lastElementChild 元素
兄弟(同级)节点
nextElementSibling 下一个兄弟(同级)节点
previousElementSibling 上一个兄弟(同级)节点
父节点
parentElement 父元素节点
“`
示例:
“`js
console.log(document.getElementById(“myUl”).children);//元素集合 HTMLCollection
console.log(document.getElementById(“myUl”).childNodes);//节点集合 NodeList 不要用
console.log(document.getElementById(“myUl”).getElementsByTagName(“li”));
console.log(document.getElementById(“myUl”).firstChild);//节点 如果有空白文本 会获得文本
console.log(document.getElementById(“myUl”).firstElementChild);//元素节点
console.log(document.getElementById(“myUl”).lastElementChild);//元素节点
console.log(document.getElementById(“myli”).nextElementSibling.nextElementSibling.previousElementSibling.previousElementSibling.previousElementSibling);
console.log(document.getElementById(“myli”).parentElement.parentElement)
“`
js操作时 需要先获取元素
以上有丰富的api来查找元素使用
## 18.dom操作属性
“`js
js中属性操作
属性形式操作属性
读属性
元素.属性
写属性
元素.属性 = “xxx”
函数形式操作属性
Attribute 属性
Properties 属性
读属性
getAttribute(“属性名”)
写属性
setAttribute(“属性名”,”属性值”)
两套不完全体通用 (js语法特点)
“`
“`js
document.getElementById(“myText”).value = “你好”
document.getElementById(“myText”).setAttribute(“val”+”ue”,”你不好”);
“`
所有的效果都是找元素 改属性
## 19.动态dom操作
原生js动态操作(了解)
“`js
创建元素(不会出现在dom树上
虚拟dom元素 支持属性设置)
document.createElement(“li”)
追加子元素(可以把元素渲染出来 挂在dom树上)
元素.appendChild(newEle)
在指定元素前添加
元素.insertBefore(newEle,指定的元素)
复制节点
元素.cloneNode(true) bol值决定子节点是否赋值 默认值false
删除元素
元素.removeChild(删除的节点); //通常搭配查找元素使用
“`
创建元素
两个步骤 1.生成出元素(虚拟dom结构 可以设置属性 页面上没有)
2.渲染(通过特定api 把元素显示到页面中的某个为止 挂载到dom树上)
“`js
function addEle(){
//js创建元素
//先生成虚拟dom结构
//可以设置其中各种属性
let newEle = document.createElement(“li”);
//简化dom操作
//innerHTML可以解析html标签
newEle.innerHTML =”“;//可以解析html标签
// let newBtn = document.createElement(“input”);
// newBtn.type=”button”;
// newBtn.value = “新按钮”;
// newEle.appendChild(newBtn)
//渲染
document.getElementById(“myUl”).appendChild(newEle);
//document.getElementById(“myUl”).lastElementChild.innerHTML = “nexLi”;
}
“`
删除元素
“`js
function delEle(){
document.getElementById(“myUl”).removeChild(document.getElementById(“myUl”).firstElementChild);
}
“`
#### 简化dom操作(***)
//innerHTML可以解析html标签
1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
2.删除 用原生api实现
“`html
“`
## 20.动态table操作
js中会table描述为数组(了解)
通过索引 添加 删除
同样可以使用简化操作
“`html
| 编号 | 名称 | 住址 |
|---|---|---|
| 1 | 尼古拉斯赵四 | 象牙山 |
“`
## 21.String字符串对象
“`js
js中字符串 ” “” “
js中处理字符串更多
“`
“`js
查找指定字符串出现的索引位置
indexOf
lastIndexOf
更多用在检测字符串是否存在
if(myStr.lastIndexOf(“bc1111”)>=0)
“`
“`js
截取字符串
substring(起) substring(起,止)
substr(起) substr(起,个数)
“`
“`js
分割字符串 根据指定的字符分割为数组
let myStr2 = “age=15;name=jack;addr=streetABC”;
console.log(myStr2.split(“;”)[1].split(“=”)[1]);
得到name的值部分jack
“`
“`js
转大写 toUpperCase
console.log(myStr.toUpperCase());
转小写 toLowerCase
console.log(myStr.toLowerCase());
“`
“`js
替换字符串
let myStr = “abc123abcdef”;
console.log(myStr.replace(“123″,”你好”))
结果为 “abc你好abcdef”;
“`
“`js
“`
## 22.数学计算对象
“`js
let myNum = 10.5;
//向上取整 ceil
console.log(Math.ceil(myNum));
//向下取整 floor
console.log(Math.floor(myNum));
//四舍五入 round
console.log(Math.round(myNum));
//绝对值 算两个数之间的差值
let a = 1;
let b = 3;
console.log(Math.abs(a-b));
//随机数 random [0,1)
// 0-2 +1 1-3
console.log(parseInt(Math.random()*3));//向上 1-10 向下 0-9 四舍五入 0-10
//一般用向下取整
//比最终要的值大1
//扩倍 移动区间
“`
注意:js中随机数需要手动计算 通过取整 扩倍 移动区间 得到需要的随机数
## 23.日期对象
1日期获取
“`js
//获取当前运行的事件
console.log(new Date());
//获取指定日期的事件
// 2001-11-11 11:11:11
// 2021/12/12 12:12:12
console.log(new Date(‘2001-11-12 11:11:11’));
console.log(new Date(‘2021/12/12 12:12:12’));
“`
2日期计算
“`js
// 做日期计算
let nowDate = new Date();
console.log(new Date(nowDate.getTime()-1000*60*60*24*5) );
“`
3日期显示
“`js
//获取年
let myYear = nowDate.getFullYear();
console.log(myYear);
//获取月 0-11
let myMonth = nowDate.getMonth()+1;
console.log(myMonth);
//获取星期
let myDay = nowDate.getDay();
//获取日期
let myDate = nowDate.getDate();
console.log(myDay);
console.log(myDate);
//获取时
let myHours = nowDate.getHours()
console.log(myHours);
//获取分
let myMinutes = nowDate.getMinutes()
console.log(myMinutes);
//获取秒
let mySeconds = nowDate.getSeconds()
console.log(mySeconds);
let dateStr = `${myYear}年${myMonth}月${myDate}日 ${myHours}:${myMinutes}:${mySeconds} 星期${myDay}`;
console.log(dateStr);
“`
## 24.数组对象
“`js
数组 数据的集合
1.指定数据类型
2.指定数组长度(不可变)
底层数据结构(需要再内存中直接占用空间)
js弱类型
js数组 没有加泛型的list
不需要指明数据类型
长度可变
“`
//1.数组创建
“`js
let newArr = new Array();
console.log(newArr);
let newArr2 = [];
console.log(newArr2);
“`
//2.数组中的内容
“`js
//js中数组什么都可以放
let newArr3 = [1,”abc”,true,new Date(),[1,2,3]];
console.log(newArr3);
//实际使用时 一般把相同数据类型的数据放入一个数组
let newArr4 = [4,1,3,8,6,2];
console.log(newArr4);
“`
//3.数组常用方法
“`js
//join 把数组串成字符串
//经常与字符串的split方法对应起来 字符串 与 数组 互换
console.log(newArr4.join(“;”));
console.log(newArr4.join(“;”).split(“;”));
//排序 排序规则 function(a,b){return a-b} a-b 升序 b-a降序
console.log(newArr4.sort(function(a,b){return a-b}));
//当链表使用
/*
newArr4.push(“a”) 队尾添加
newArr4.pop() 队尾删除
newArr4.unshift(“a”) 队头添加
newArr4.shift() 队头删除
*/
newArr4.push(“a”)
newArr4.pop()
newArr4.unshift(“a”)
newArr4.shift()
console.log(newArr4);
//splice()动态操作数组元素方法
//splice(起始,个数,可以选参数)
// 如果没有可选参数 可以做删除
// 如果有可选参数 做替换 根据个数 与可选参数的个数 决定增加还是减少
newArr4.splice(2,1,”a”,”b”)
“`
//4数组遍历
“`js
newArr4.forEach(function(data){
console.log(data);
})
注意:如果是从页面获取元素 要用forEach遍历 需要转换类型
//获取元素集合 Prototype HTMLCollection
let eles = document.getElementById(“btns”).children;
//Prototype Array 包含的函数和属性不同
//Array.from(eles);
//把非Array的数组类型 转成Array 可以调用array的函数了
let newEles = Array.from(eles);
console.log(newEles);
//转换后 可以forEach遍历
newEles.forEach(function(data){
data.style.color=”red”
})
“`
## 25.JSON对象
JSON javascript对象标记
“`js
//JSON格式
//{key:value,key:value}
//像map 做自定义对象的
let myStu = {“ID”:1,”name”:”jack”,”age”:15};
console.log(myStu.name);
myStu.name = “rose”;
console.log(myStu);
json可以方便的 定义 读取 赋值 扩展
“`
“`js
//数据类型
//key 字符串
//value 任意类型
let myObj = {“name”:”jack”,”age”:15,”birthDay”:new Date(),”study”:function(){
//this 指向当前json对象
console.log(this);
console.log(this.name+”在学习”);
}};
console.log(myObj);
myObj.study()
“`
“`js
//json书写格式
//标准格式 key带引号 指明是字符串 {“ID”:1,”name”:”jack2″,”age”:18};
//简化格式 key的引号 可以省略不写 {ID:1,name:”jack”,age:15};
let newStu = {ID:1,name:”jack”,age:15};
console.log(newStu);
//前后端数据传递 使用标准json格式
//纯前端使用 使用简化格式
// let newStuStr = ‘{ID:1,name:”jack”,age:15}’
// console.log(JSON.parse(newStuStr).name);
//json转换方法
//JSON.stringify(newStu) json对象转标准格式字符串
//JSON.parse(‘{“ID”:1,”name”:”jack2″,”age”:18}’) 标准格式字符串 转json对象
console.log(JSON.stringify(newStu));
console.log(JSON.parse(‘{“ID”:1,”name”:”jack2″,”age”:18}’));
“`
“`js
//json实际使用时 经常搭配数组使用
let students = [{ID:2,name:”jack”,age:15},{ID:2,name:”jack2″,age:15},{ID:3,name:”jack3″,age:15}]
let myClass = {className:922,classAddr:’9楼922′,students:[{ID:2,name:”jack”,age:15},{ID:2,name:”jack2″,age:15},{ID:3,name:”jack3″,age:15}]}
“`
省市县级联练习
“`html
省
市
县/区
“`