JavaScript
JavaScript
基础认识
弹出提示对话框：alert(“弹出对话框”)
解释型语言，一行一行解释。
<script>
alert("弹出对话框")
</script>认识js
发明人：布兰登·艾奇(Brendan Eich，1961年~)
1995年利用十天完成JS设计 网景公司最初命名为LiveScript，后来与Sun合作改名JavaScript
运行在客户端浏览器上。
js的作用：
js的组成：
注释：
js的输入输出：
prompt取值是字符型的
变量
var age;//声明一个名称为age的变量，赋值var age=18;只声明不赋值值为undefined
数据类型
数据类型可变
简单（基本）数据类型
判断变量是否为数字型的方法:
获取字符串String长度
str.length转义符
undefined和null
判断变量类型typeof 变量名
<script>
var str = 'roydon';
alert(typeof str) //string
</script>这里的null类型为object，现在不考虑，后面会讲。
数据类型转换
1.转换成string
2.转换成数字型number
隐式转换
NaN：not a number不是一个数字
3.转换成布尔型boolean
Boolean函数。例如：Boolean(‘true’);
数组
var arr = new Array(2，3，4);//==>arr[2,3,4]，若参数为一个，表示数组长度，元素为空或者，利用字面量创建数组
var arr = ['小明','小红','小强'];数组遍历：length拿数组长度
数组排序：
上图数组排序得到的结果： 1.arr [ ‘blue’, ‘red’, ‘pink’ ] ; 2.arr1 [1,4, 7, 13 ,77]; ==
sort()函数默认只对一位数的数字排序生效，若要排序多位数数字，需要添加function方法。== 解析链接：Array.prototype.sort() 默认sort()排序结果：（位数大于一的数字出现结果不正确)
检测是否为数组：instanceof和Array.isArray()
数组操作：添加或删除
1.添加
push();
2.删除
数组索引方法：
函数
声明和调用：function
第一行function getSum后面括号中的num1和num2是形参。 最后两行调用传入的两个参数叫实参。
两种声明方式：
return：
arguments
内置对象，存储传递来的所有实参，保存的形式是数组（伪数组）
作用域：
全局和局部
就近
对象
对象的创建3法
<script>
//创建对象的3种方法
//var person={} //创建了一个空对象
//方法1=============
var person = {
pname: 'roydon',
age: 18,
gender: 'man',
getAge: function () {//方法
console.log(this.age);
}
}
//获取属性的两种方法
//1.
console.log(person.pname);
//2.
console.log(person['age']);
person.getAge();//既然是方法，就要带()
//方法2=============
var person1 = new Object();
person1.pname = 'yicheng';
person1.age = 19;
person1.gender = 'man';
person1.getAge = function () {
console.log(this.age);
}
//获取属性两种方法同上
console.log(person1);
person1.getAge();
//方法3==============构造函数法,首字母大写
function Person3(pname, age) {
this.pname = pname;
this.age = age;
this.getAge = function () {
console.log(this.age);
}
}
var person3 = new Person3('jack',20);
person3.getAge();
</script>遍历forin：
//遍历
for (const key in person3) {
if (Object.hasOwnProperty.call(person3, key)) {
const name = key;//属性名
console.log(name);
const element = person3[key];//值
console.log(element);
}
}日期Date对象：
获取时间戳：
为啥时是从1970年开始，自行百度。
时间戳转换成时分秒：
倒计时案例：
<script>
// 定义一个函数参数为倒计时结束时间
function countDown(time) {
var nowTime = +new Date();//当前时间戳（毫秒数
var inputTime = +new Date(time);//输入时间的时间戳
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);//天
d = d < 10 ? '0' + d : d;//个位数转成01，02，03形式
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);//分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);//秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-7-8 20:00:00'));
var date = new Date();
console.log(date);
</script>下面是模拟：
字符串
字符串基本操作
Web API
应用程序编程接口
DOM
dom树：
每一个元素可以看作一个对象
获取页面元素
- 根据ID获取（返回的是一个匹配到ID的DOM Element对象）
document.getElementById();可以使用console.dir();查看
- 通过标签名获取（返回的是一个指定标签的集合）
element.getElementByTagName();- 通过类名获取
事件基础
例如，点击一个按钮，弹出对话框
<button id="btn">
点我
</button>事件分为三部分：事件源、事件类型、事件处理程序。也叫事件三要素
//1.事件源=事件被触发的对象（按钮）
var btn = document.getElementById('btn');
//2.事件类型=如何触发，例如：点击，鼠标悬停，按键按下
//3.事件处理程序=函数赋值
btn.onclick=function(){
alert('点了我');
}操作元素
- 改变元素内容
同时，亦可获取标签，innerText获取内容（去空格和换行），
innerHtml获取元素加内容，（保留空格和换行）
案例：密码框显示，隐藏密码
html
css
js
DOM核心重点
获取过来的DOM元素是一个对象所以称为文档对象模型
DOM操作： >
- 创建
document.writeinnerHTMLcreateElement
- 增
appendChildinsertBefore
- 删
removeChild
- 改(主要修改DOM元素的属性、内容、表单的值等)
- 修改元素属性：src、href、title等
- 修改普通元素内容：innerHTML、innerText
- 修改元素样式：style、className
- 修改表单元素：value、type、disabled等
- 查(获取DOM元素)
- DOM提供的API方法：querySelector()、querySelectorAll()。(H5新方法，推荐)
- 利用节点操作获取元素：父(parentNode)、子(children)、兄弟(previousElementSibling、nextElementSibling)。
- 属性操作(可自定义属性)
setAttribute()：设置DOM的属性值getAttribute()：得到DOM的属性值removeAttribute()移除属性
- 事件操作
事件高级
1.注册事件（绑定事件）
注册事件两种方法：传统方式、方法监听注册方式
addEventListener()事件监听方式
2.删除事件（解绑事件）
传统解绑方法：
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}方法监听注册解绑方式：
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}3.DOM事件流
4.事件对象event
// 事件对象
var div = document.querySelector('div');
div.onclick = function(e) {
console.log(e);
}
// 1. event 就是一个事件对象 写到我们侦听函数的 小括号里面 当形参来看
// 2. 事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
// 3. 事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键
// 4. 这个事件对象我们可以自己命名 比如 event 、 evt、 e常见属性和方法： ie以si，下列方法结合实际记忆
5.阻止事件冒泡
e.stopPropagation(); // stop 停止 Propagation 传播
下列代码为例，当点击父盒子中的son盒子时，不阻止事件冒泡，会发生弹出三个提示框(son、father和document)，阻止事件冒泡后，父亲元素不在冒泡弹出框。只弹出son提示框。
<script>
// 常见事件对象的属性和方法
// 阻止冒泡 dom 推荐的标准 stopPropagation()
var son = document.querySelector('.son');
son.addEventListener('click', function(e) {
alert('son');
e.stopPropagation(); // stop 停止 Propagation 传播
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>6.事件委托
7.鼠标事件
常用：
e.preventDefault();阻止默认事件；阻止默认右键显示菜单操作；
<script>
// 1. contextmenu 禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>鼠标事件对象： MouseEvent —> clientX、pageX、screenX
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
</script>8.键盘事件
例如，网站的搜索框一般会设置一个快捷键，当我们点击s键时，利用ASCII码判断按下的键是否为s若是则给搜索框一个焦点。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
input{
display: block;
margin: 100px auto;
width: 300px;
height: 25px;
border: 1px solid orange;
}
</style>
</head>
<body>
<input type="text">
<script>
// 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
// 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
// 搜索框获得焦点： 使用 js 里面的 focus() 方法
var search = document.querySelector('input');
document.addEventListener('keyup', function(e) {
if (e.keyCode === 83) {
search.focus();
}
})
</script>
</body>
</html>BOM
window对象常见事件
1.窗口加载事件
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
2.调整窗口大小事件
定时器
1.setTimeout()定时器
<script>
// 1. setTimeout
// 语法规范： window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
// setTimeout(function() {
// console.log('时间到了');
// }, 2000);
function callback() {
console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>停止setTimeout()定时器
<button>点击停止定时器</button>
<script>
var btn = document.querySelector('button');
//先给定时器一个名称，根据名称指定停止
var timer = setTimeout(function() {
console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
clearTimeout(timer);
})
</script>2.setInterval()定时器
<script>
// 1. setInterval
// 语法规范： window.setInterval(调用函数, 延时时间);
setInterval(function() {
console.log('继续输出');
}, 1000);
// 2. setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>JS执行队列
异步：
location对象
URL
search得到的是网址主机问号？(包含)之后的数据，是string字符串
例如：https://editor.csdn.net/md/?articleId=1256752823244 location.search得到的是?articleId=1256752823244 可以用substr(1)方法去掉问号
navigator对象
history对象
PC端网页特效
丰富网页