JavaScript简介
JavaScript和Java没有任何关系！！
1.js是基于对象和事件驱动的语言,应用于客户端.
2.三大特性:
交互性:信息的动态交互
安全性:js不能访问本地磁盘文件
跨平台性:java是用虚拟机实现的,而js基于浏览器
3.组成
ECMAScript:基本语法(ECMA--欧洲计算机协会)
BOM:浏览器对象模型(浏览器中的关闭按钮,地址栏.......)
DOM:文档对象模型
js变量与常量
在js中申明变量和常量都需要使用关键字
var：定义在全局名称空间
let：定义在局部名称空间
const：定义常量
js也是动态类型，变量名绑定的数据值不是固定的
'''
js代码编写的地方：pycharm 浏览器
'''
js数据类型
数值类型
# 在js中查看数据类型的方法是typeof
整型浮点型统称为数值类型number
parseInt（）
parseFloat（）
NAN ：not a number 不是一个数字
字符串类型
字符串类型：string
var name=''
模板字符串：`` 可以格式化输出
在js中涉及到字符串的拼接方法建议使用+
布尔值类型
关键字：Boolean
# 区别于python true和false都是小写
var a=false
var b=true
在js中'空字符串，0，null，undefined，NAN'都是false
null和undefined区别：
1.null是曾经有过现在没了，称为空（一般是指定值或者清空变量时）
2.undefined是一直未曾赋值的变量，变量默认值是undefined
对象（object）
在js中也是一切皆对象，也可自定义对象，对象只是带有特殊属性和方法的数据类型
数组对象的作用是：使用单独的变量名来存储一系列的值，类似于python中的列表
定义数组的方法：
var list = ['name','jason','psaaword',123]
console.log(list[2]) # psaaword
数组对象常用内置方法：
length 数组的长度 console.log(list.length)
------------
forEach() 将数组的每个元素传递给回调函数
语法结构：forEach(function(参数1，参数2))
var name_list=['summer','jason','tony','bubu']
传一个参数的情况：name_list.forEach(function(a){console.log(a)})；
返回结果是列表里的每一个值 summer jason tony bubu
传两个参数的情况：name_list.forEach(function(a,b){console.log(a,b)});
返回的结果是：summer 0 jason 1 tony 2 bubu 3
# 两个参数的话是将每个值都返回了对应的索引
------------
splice 删除元素，并将数组内添加新元素
var list=['summer','jason','tony','bubu']
list.splice(0,1,'jerry'); #第一个参数是起始位置，第二个是删除的索引位置
list.splice(0,0,'huhu');
返回结果： ['huhu', 'jerry', 'jason', 'tony', 'bubu']
# 0起始0删除对列表没有影响 添加的值直接在0位置
自定义对象
自定义对象就相当于python中的字典
有两种定义方式：
1.直接定义 let dic={'name':'summer','id':'999'}
2.用关键字new let dict1=new Object（）
添加键值对的方式
dict1.name='summer' #{name: 'summer'}
直接用变量名点的方式去添加，如果有值的话就是修改值
JS常见运算符
算数运算符
javascript算术运算符有：加法运算符“+”，减法运算符“-”、乘法运算符“*”、除法运算符“/”、求余运算符“%”、递增运算符“++”、递减运算符“--”、幂运算符“**”
例题：
var x = 10;
var res1 = x++; 先赋值后自增
var res2=++x; 先自增后赋值
# res1=10，res2=12
递增运算符 ++ 为其操作数增加1，并返回一个数值。如果使用后置，如x++，将会在递增前返回数值。如果前置，如 ++x，将会在递增后返回数值。
比较运算符
> >= < <= != == === !==
# 需要注意的：
1 == '2' true 弱等于（js会把不同数据类型的比较自动转换成同种数据类型）
1 === '2'false 强等于 （不自动转换）
逻辑运算符
&& 等价于python中的and
|| 等价于python中的or
! 等价于python中的not
赋值运算符
= += -= *= /=
流程控制
if else
单if分支
语法结构：
if（条件）{
条件成立执行的代码
}
if else分支
语法结构：
if(条件){
条件成立之后执行的代码
}else{
条件不成立执行的代码
}
if elesif else
语法结构：
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件1不成立，条件2成立执行的代码
}else{
条件1和条件2都不成立执行的代码
}
switch
switch 语句用于基于不同条件执行不同动作。
语法结构：
switch(表达式){
case1 条件：
case1条件成立执行的代码
break；
case2 条件：
case2条件成立执行的代码
break；
case3 条件：
case3条件成立执行的代码
break；
default：
以上条件不成立执行的默认代码
}
switch(new Date().getDate()){
case 0:
day = '星期天';
break; # 每一个条件结束！break必须写
case 1:
day = '星期一';
break;
case 2:
day = '星期二';
break;
default:
day = '哈哈哈';
}
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。
循环结构
for
代码实操 循环打印1-100
for(let i=1;i<101;i++){
console.log(i)
}
课堂小练习：
打印数组内所有的数据值
l1 = [11, 22, 33, 44, 55, 66, 77, 88, 99, 'jason']
for(let i=0;i<l1.length;i++){
console.log(l1[i])
}
while
语法结构：
while(条件){
条件成立执行的代码
}
案例实操：
let text=0
while (i<10){
text+=i
console.log(text)
i++
}
# while循环一定要加结束条件，如果不对条件中的变量进行自增，那么循环不会结束
函数
函数的定义
语法结构：
function 函数名(参数){
函数代码
return 返回值
}
# 在js中函数的实参不需要和形参一一对应，传几个会返回几个，如果需要强制对应的话，使用关键字：arguments
代码实操：
function func(a,b){
if(arguments.length==2){
console.log(a,b)
}else{
console.log('缺少参数无法执行！！')
}
}
函数的分类
匿名函数：
function(a,b){
return a+b;
}
如果想要调用的话需要给函数取变量名
代码实操：
let func1= function(a,b){console.log('美好的事情即将发生')};
func1()
箭头函数 （重要！！！）
var func2=function(a){return a}
改成箭头函数：
var func2=a=>a;
var sum(sum1,sum2){return sum1+sum2}
var sum=(sum1,sum2)=>sum1+sum2
函数的名称空间与作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！
代码实例：
var city = "BeiJing";
function Bar() {
console.log(city);
}
function f() {
var city = "ShangHai";
return Bar;
}
var ret = f();
ret(); // 打印结果是？ BeiJing
JS内置对象
类似于python中的内置模块和内置函数
固定语法： var 变量名=new 内置对象名()；
date对象
创建date对象
let dObj = new Date();
dObj # Thu Aug 25 2022 22:26:28 GMT+0800 (中国标准时间)
dObj.toLocaleString(); 当地时间
# '2022/8/25 22:26:28'
dObj.getTime(); 时间戳
# 1661437588791 返回累计毫秒数(从1970/1/1午夜)
date对象的方法
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
json序列化对象（很重要！）
先回顾一下python序列化方法
import json
json.dumps() 将其他格式转换成json格式字符串
json.loads() 将json格式字符串反序列化成其他格式
js里的序列化两个方法：
1.JSON.stringify 将其他格式转换成json格式字符串
2.JSON.parse 将json格式字符串反序列化成其他格式
代码实操：
let dd ={'name':'summer'};
let strJson = JSON.stringify(dd);
strJson # '{"name":"summer"}'
JSON.parse(strJson) # {name: 'summer'}
regexp正则对象
js中定义正则的两种方式：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/; 推荐使用
正则校验：
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
reg2.test('summer99999'); # false
reg2.test('summer'); # true
js中正则表达式的一些特性(bug)
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g;
reg2.test('summer');
1.当我们在表达式最后面加了g，每次匹配完数据的时候，会停留在匹配的数据那里，下一次匹配的时候会基于第一次匹配的位置直接匹配，第三次会直接回到开头继续匹配
2.reg2.test(); # true
当括号里什么都不写的时候，括号内的值直接会默认为undefined，虽然正则对括号是不匹配的，但是undefined正好满足正则表达式的条件所以结果是true
BOM和DOM
简介
BOM:浏览器对象模型
通过写js代码可以和浏览器交互
DOM：文档对象模型
通过写js代码和html交互
BOM操作
一些常用的window方法：
window.innerheight() 浏览器窗口内部的高度
window.innerwidth() 浏览器窗口内部的宽度
window.open() 打开新窗口 (括号的第一个参数是地址，后面还可以调节弹框的大小和所在的位置)
window.close() 关闭当前窗口
window.navigator.userAgent() 获取浏览器信息（主要用于爬虫）
window.history.forward() 浏览器前进一页
window.history.back() 浏览器后退一页
# 比较重要的方法：
window.location.href() 获取当前页面地址url
window.location.href= 新地址
window.reload() 重新加载页面
弹框：可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
1.警告框：alert
当警告框出现时，用户需要点击确认按钮才能继续进行操作
2.确认框：confirm
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
3.提示框：prompt
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
# 定时器相关操作（很重要！！！）
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
1.setTimeOut()
语法： var t = setTimeOut()
<script>
function func1(){
alert('来迎接我')
}
let t = setTimeout(func1,1000) # 1000毫秒是1秒钟
clearTimeout(t) 关闭计时器
</script>
2.setInterval()
<script>
var s = null
function func1(){
function func(){
alert('弹弹弹')
}
s = setInterval(func,3000) # 循环计时器
}
function clears() {
clearInterval(s)
}
setTimeout(clears,10000);
func1()
</script>
DOM操作
js操作html和css操作html是一样的，都是从查找标签开始
1.直接查找：
document.getElementById()
根据id查找，查找的结果的标签本身
document.getElementsByClassName（）
根据class属性获取，查到的结果是数组 取值需要用索引
document.getElementsByTagName()
根据标签查找，查到的结果是数组 取值需要用索引
2.间接查找：
parentElement 父节点标签
children 查找所有子标签
firstElenmetChild 查找第一个子标签
lastElementChild 查找最后一个子标签
nextElementSibling 查找下一个兄弟标签
perviousElementSibling 查找上一个兄弟标签
'''let divEle = document.getElementById('d1')'''
节点操作
1.创建节点
语法结构：let XXXEle = document.createElement(标签名)
ps：推荐变量名后面加上Ele 更好的见名知意
'''代码实操，通过js动态创建标签'''
let div2Ele=document.getElementById('p1');
let aEle =document.createElement('a'); # 动态创建标签
aEle.herf = 'https://www.baidu.com' # 给标签添加属性
aEle.innerText = '点我去百度'; # 给标签内部添加文本内容
div2Ele.append(aEle); # 把标签添加到已有的标签后面
# 动态创建的标签只是临时标签刷新就没有了，不会改变源码。
属性操作：
let div2Ele=document.getElementById('p1');
div2Ele.innerText = '今天是星期五';
div2Ele.innerHTML = '<span>哈哈哈哈</span>';
div2Ele.setAttribute('age','88');
div2Ele.getAttribute('age');
div2Ele.removeAttribute('age');
'''setAttribute 既可以设置标签默认的属性，也可以设置标签的自定义属性'''
div2Ele.innerHTML （拿html下的所有标签和文本） 可以识别标签
div2Ele.innerText （只拿文本）
用标签点属性是获取值，标签点属性加赋值符号是修改值
js获取用户输入的值
<input type='text' name='用户名' id='d1'>
<input type='password' name='密码' id ='d2'>
城市：<select name="" id="d6">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
</select><br/>
文件 ：<input type="file" name="文件" id="d7">
# 普通用户输入获取方式：
let iEle=document.getElementById('d1');
iEle.value;
直接用标签名点.value即可获取用户输入的信息
# 文件数据获取方式：
let i2Ele=document.getElementById('d7');
i2Ele.value # 'C:\\fakepath\\db5.sql'
i2Ele.files; # FileList {0: File, length: 1}
i2Ele.files[0];
用标签.files 获取的是文件数组
用标签.files[0] 获取到的是具体的文件
js操作类属性
标签名.classlist() # 获取所有类属性
标签名.classlist.add() # 添加类属性
标签名.classlist.remove () # 删除类属性
标签名.classlist.toggle() # 存在就删除，没有就添加
标签名.classlist.contains() # 判断是否存在属性，有就返回true，否则false
js操作标签样式
标签名.style.标签样属性式名
style.bakegroundColor/bakegroundImg
ps:一般不推荐用js操作标签样式，可以临时操作一下
事件
事件是HTML4.0版本的特性之一，可以简单的理解为给HTML标签绑定了一些额外的功能，（到达某个条件）能够触发js代码的运行
常见事件
1.onclick 单击事件
2.ondbclick 双击事件
3.onkeydown 键盘事件 应用场景：当用户在最后一个输入框按下回车时表单提交
4.window.onload 加载事件
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
'''当我们给页面元素（标签）绑定事件的时候，需要等页面的文档加载完毕，否则的话会报错！因为我们无法给一个不存在的元素绑定事件'''
绑定事件的两种方式（重点！！！）
onclick/ondbclick
方式1（不常用）： 先定义好一个函数 绑定给标签，标签内部到达某个条件自动触发函数体代码
<body>
<input type="button" value="点我点我" onclick="func1()"> # 也可以换成双击事件
<button>点我上天</button>
<script>
function func1(){
alert('哈哈哈哈，想我没！')
}
</script>
方式二（推荐使用）：给事件绑定匿名函数，触发条件即可执行！（可以批量操作！ 获取每个标签名，for循环依次绑定）
<input type="button" value="点俺" >
<button id="d1">点我</button>
<script>
let btEle = document.getElementById('d1');
// 匿名函数
btEle.onclick = function (){
alert('美好的事情即将到来！')
}
</script>
批量操作单击事件
<button id="d1">点我</button>
<button id="d2">点俺</button>
<button id="d3">点她</button>
<button id="d4">点它</button>
<script>
let btEle = document.getElementsByTagName('button');
for(i = 0; i < btEle.length; i++) {
btEle[i].onclick = function () {
alert('美好的事情即将到来！')
console.log(this)
}
}
</script>
事件关键字this（非常重要！！！）
（方式一的this返回的是一个文档）
this 指的是当前被操作的标签对象！（方式二）
<input type="button" value="点俺" >
<button id="d1">点我</button>
<script>
let btEle = document.getElementById('d1');
// 匿名函数
btEle.onclick = function (){
alert('美好的事情即将到来！')
console.log(this) # <button id="d1">点我</button>
}
</script>
window.onload事件
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
<head>
<script>
# 等页面加载完毕之后执行
window.onload = function (){
let btEle = document.getElementById('d1');
btEle.onclick = function (){
alert('美好的事情即将到来！')
}
}
</script>
</head>
<button id="d1">点我</button>
事件案例题
# 1.校验用户输入 点击事件 onclick
<body>
<p>
<input type="text" name="username" placeholder="请输入用户名" id="t1">
<span class="c1" style="color: blueviolet"></span>
</p>
<p>
<input type="password" name="password" placeholder="请输入密码" id="t2">
<span class="c1" style="color: aqua"></span>
</p>
<button id="but">提交</button>
<script>
// 1.先查找按钮标签
let btnEle = document.getElementById('but');
// 2.设置函数 绑定事件
btnEle.onclick=function (){
// 3.获取用户名和密码
let usernameVal = document.getElementById('t1').value;
let passwordVal = document.getElementById('t2').value;
// 4.判断用户名和密码是否正确
if(usernameVal === 'summer'){
// 5.查找用户名input下面的span标签
let spaEle = document.getElementsByClassName('c1')[0];
// 6.给span标签添加内部文本
spaEle.innerText = '用户名不能是summer'
}
// 7.判断密码是否为空
if(passwordVal.length === 0){
let spaEle = document.getElementsByClassName('c1')[1];
spaEle.innerText = '密码不能为空'
}
}
</script>
# 2.省市联动 文本域变化事件 onchange
<body>
省份：<select name="" id="province">
</select>
市区：<select name="" id="city">
</select>
<script>
let data = {
'上海':["闵行","静安","黄埔","徐汇"],
'浙江':["杭州","宁波","嘉兴","诸暨"],
'湖北':["武汉","恩施","仙桃","宜昌"],
}
let proEle= document.getElementById('province');
// 先获取第二个标签
let cityEle = document.getElementById('city')
// 1.循环获取所有的省
for(let pro in data){
// 2.创建option标签
let optEle = document.createElement('option');
// 3.给option标签添加内部文本
optEle.innerText = pro;
optEle.setAttribute('value',pro);
// 4.将option添加到第一个select标签中
proEle.append(optEle)
}
// 5.给省份的下拉框绑定文本域变化事件
proEle.onchange = function (){
// 每次给省份添加数据之前应该先清空上一次的数据
cityEle.innerHTML = ''
// 1.获取用户选择的省份信息
let currentPro = this.value
// 2.获取省份对应的列表
let targetCityList = data[currentPro]
for(let i = 0;i<targetCityList.length;i++){
// 3.创建option标签
let opt1Ele = document.createElement('option');
// 4.给option标签添加内部文本
opt1Ele.innerText = targetCityList[i]
opt1Ele.setAttribute('value',targetCityList[i])
// 5.将option标签添加到第二个select标签中
cityEle.append(opt1Ele)
}
}
</script>
