1.JS简介

1.全称JavaScript,但是与Java一点关系都没有,这么叫是因为蹭热度。

2.是一门前端工程师的编程语言,但是它本身有很多逻辑错误。

2.JS基础

1.注释语法:
	// 单行注释
	/*多行注释*/

2.引入JS的多种方式:
	2.1head内script标签内编写。
	2.2head内src标签守护星引入外部JS资源。
	2.3body内最底部通过script标签src属性引入外部JS资源(最常用)。
/*
页面的加载顺序是从上往下的,所以要等页面加载完成之后再加载JS代码。
*/

3.变量与常量

/*
1.pycharm创建js文件,或者html文件(适合较为复杂的js代码)
2.浏览器编写(console窗口)
*/
1.在js中声明变量需要使用关键字:
	1.var: var name = 'max'
	2.let: let age = 18
/*let可以在局顶定义变量.不影响全局*/
    
2.在js中声明常量需使用关键字:
	const pi = 3.14  /*再改pi会直接报错*/

4.基本数据类型

"""
在JS中如何查看数据类型?用关键字typeof
"""
1.数值类型(Number):在js中整形浮点型不分家,都叫number。
/*NaN全称是Not a Number,是指转整数或小数是输入的字符不是数字*/
typeof(123)  // 'number'
typeof(12.1)  //'number'
typeof('123')  //'string'

2.字符类型(String):定义字符类型时可以使用以下几种方式:
	2.1''  'max'  typeof('max')  //'string'
	2.2""  "max"  typeof("max")  //'string'
	2.3``(模板字符串,还支持用作格式化输出)  `max`
    typeof(`max`)  //'string'

let s1 = 'jason'
typeof s1 //'string'

格式化输出:
let name = 'max'
let age = 25
`名字${name},年龄${age}`  //'名字max,年龄25'

字符串拼接:用+连接字符类型:
let name = 'max'
username + 'qwe'
// 'maxqwe'

3.布尔类型(类似布尔值):boolean
/*
python中布尔值首字母大写,而JavaScript布尔类型全部小写
*/
布尔值为false的数据类型:0、null、undefined、NaN、""(空字符串)、''
、``

4.null和undefind:
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
let d1 
d1 // undefined

let name = null
name // null

5.对象(object):
	JavaScript中所有的事物都是对象,字符类型、数值、数组、函数等都是。此外，JavaScript 允许自定义对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
    对象只是带有属性和方法的特殊数据类型。
	5.1对象之数组(Array)>>>:类似于python中的列表,使用单独的变量名来存储一系列的值。打印数字会发现数组前面会跟一个数组长度的数字。
	let a = [1,2,'max']  
	console.log(a)  // (3) [1, 2, 'max']
		1.索引取值:
		let a = [1,2,'max']
      console.log(a[1])  //2
		2.数组的长度:
    	a.length  // 3
		3.尾部追加元素:
		a.push('jerry')  // 4 会返回一个长度
		console.log(a) // (4) [1, 2, 'max', 'jerry']
"""
a.push([33,44])  // 5
console.log(a)  // (5) [1, 2, 'max', 'jerry', Array(2)]
如果追加时把一个数组当做一个元素增加进去,那么打印数数组可以发现前面的数字是将数组看作一个元素,但是数组中新插入的数组会以Array(数字)的形式来表示,要查看需要点开左边的三角标号查看。
"""
		4.弹出尾部元素:
		a.pop()  // (2) [33, 44]
		console.log(a)  // (4) [1, 2, 'max', 'jerry']
		5.头部插入元素
		a.unshift('aaa')  // 5
		console.log(a)  // (5) ['aaa', 1, 2, 'max', 'jerry']
		6.头部移除元素:
		a.shift('aaa')  // 'aaa'
		console.log(a)  // (4) [1, 2, 'max', 'jerry']
"""
shift后面的元素如果填写不是头部的元素那么依然会删除第一个元素,所以要么填写第一个元素,要么直接不写。
"""
		7.切片:
		a.slice(0,2)  // (2) [1, 2]
		8.反转:
		console.log(a.reverse())  // (4) ['jerry', 'max', 2, 1]
"""
reverse操作会保存,保存之后查看原来的列表发现顺序已经颠倒
"""
		9.将数组元素连接成字符串:a.join('|')  // 'jerry|max|2|1'
		10.连接数组:
		let s1 = [1,2,3], s2 = [4,5,6]
		s1.concat(s2)  // (6) [1, 2, 3, 4, 5, 6]
		11.排序:
		let s1 = [2,4,1,6,3,0,9]
		s1.sort()  // (7) [0, 1, 2, 3, 4, 6, 9]
		12.splice:
		用法一:
		let arr = ['a','b','c','d']
		arr.splice(1,2)  //(2) ['b', 'c'] 从索引值为1的位置(包含)开始删除,删除2个元素,返回值是删除掉的元素
		arr  // (2) ['a', 'd']  
		用法二:在指定位置插入元素:
		let arr = ['a','b','c','d']
		arr.splice(2,0,'max') // [] 第一个参数为插入的索引值,第二个参数固定位0,第三个元素为增加的数据值
		arr  // (5) ['a', 'b', 'max', 'c', 'd']
		
6.自定义对象:
	6.1JavaScript的对象（Object）本质上是键值对的集合（Hash结构），但是只能用字符串作为键。
	let a = {"name":"max", "age":25}
	console.log(a.name)  // max  可以通过点K的方式来获取至
	console.log(a["name"])  // max  也可以通过按K取值的方式来取值
	6.2遍历自定义对象:
	var a = {"name": "Tony", "age": 18};
	for (var i in a){
    console.log(i,a[i])
	}
	/*
	name Tony
	age 18
	*/
	6.3:通过对象来创建字典:
	let b = new Object()
	b.name = 'jerry'  // 'jerry'
	b.age = 28  // 28
	console.log(b) // {name: 'jerry', age: 28} 
	
7.反射:map(function(currentValue,index,arr), thisValue)
currentValue:必须。当前元素的值
index:可选。当期元素的索引值
arr:可选。当期元素属于的数组对象
thisValue:可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
let l1 = [1, 3, 4, 5, 8]
l2 = l1.map(function (c,i) {
    return c*i
})
console.log(l2)
// (5) [0, 3, 8, 15, 32]  获取一个列表,其中的元素是li中每个元素与其索引值的乘积

5.运算符

1.算术运算符:
	+ - * / ++(自增,相当于python中的x+=1) --(自减,相当于python中的x-=1)
	let x = 10 res1 = x++ console.log(res1) // 10 加号在后面是先赋值 再自增,自增前就已经赋值,所以res1=x
	let x = 10 res1 = ++x console.log(res1) // 12 加号在前面是先自增再赋值.所以res1等于x自增了两次,结果是12

2.比较运算符:
	!=值不等(弱)
	==值相等(弱),只要值相同,数值类型和字符类型比较也相等。
let a=1,b='1' console.log(a==b) true
	===值相等(强),即使值相同,数据类型不相同结果也是flase
	!==值不相等(强),值相同,数据类型不相同,也符合值不相等
"""
强指代可以自动转化数据类型,弱指代不能转化数据类型
"""
	
3.逻辑运算符:
&&:与  console.log(1<2 && 3>2)  // true  
console.log(1<2 && 3<2)  // false
||:或  console.log(1>2 || 3>2)  // true
!:非  

6.流程控制

1.单if分支:
	if (条件){
        条件成立执行的代码
    }
let name = 'max' 
if (name='max') {
    console.log('登陆成功')
}  // 登陆成功

2.if...else分支:
if (条件){
        条件成立执行的代码
    }else{
        条件不成立执行的代码
    }
let name = 'max' 
if (name='max'){
    console.log('登陆成功')
}else{
    '用户名错误'
}  登陆成功

3.if...else if else...分支:
if(条件1){
    条件1成立执行的代码
}else if(条件2){
    条件1不成立条件2成立执行的代码
}else{
    条件1条件2都不成立执行的代码
}
let a=10
if(a>5){
    console.log('a大于5')
}else if(a<5){
    console.log('a小于5')
}else{
    console.log('a等于5')
}  // a大于5 

4.如果根治结构中else if很多还可以考虑switch语法:
let age=28
switch(age){
    case age>28:
    console.log('猜大了')
        break
    case age<28:
        console.log('猜小了')
        break
    default:
        console.log('猜对了')
}  // 猜对了

5.for循环:
for(起始条件;循环条件;条件处理){
    循环体代码
}
for(let i=1;i<5;++i){
    console.log(i)
}  // 1 2 3 4

let dd = {'name':'jason','age':18}
for(let k in dd){
        console.log(k)
}  // name age

6.while循环:
	while(循环条件){
        循环体代码
    }

7.三元运算:
	是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用。
var a=1; 
var b=2;
var c = a>b ? console.log('1') : console.log('2')  // 2

7.函数

1.定义函数:
function 函数名(形参){
    // 函数注释
    函数体代码
    return 返回值
}  
函数调用还是 函数名()(有参数需要传参)
function d1(a,b){
    return a*b
}
d1(2,3)  // 6

2.匿名函数
let s1 = function(a,b){
    return a + b
}
s1(1,2)  // 3

3.箭头函数
var f = (num1,num2) => num1**num2
f(2,3)  // 8
相当于:
var f = function(num1,num2){
    return num1**num2
}
"""
1.在JS中函数的形参与实参个数可以不对应,传少了就是NaN,传多了不用
var f = (num1,num2) => num1**num2
f(1,3,5)  // 1
2.函数体代码中有一个关键字arguments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体
var s3 = function(a,b){
    return a+b,a*b,a**b
}
res1 = s3(1,2)  // 1  传多个只能接收到第一个返回值

var s3 = function(a,b){
    return [a+b,a*b,a**b]
}

res2 = s3(2,3)  // (3) [5, 6, 8]
"""

8.内置对象

1.创建Date对象:
	1.1获取固定格式的时间:
var d1 = new Date()
console.log(d1.toDateString())  // Mon Dec 05 2022
	
	1.2将过去的时间转化为固定格式:
var d2 = new Date("2004/3/20 11:12")
console.log(d2.toDateString())  // Sat Mar 20 2004

var d3 = new Date("04/03/20 11:12")
console.log(d3.toLocaleString());  // 2020/4/3 11:12:00

	1.3参数为毫秒:
var d3 = new Date(5000);
console.log(d3.toLocaleString());  // 1970/1/1 08:00:05

2.Date对象的用法:
var d = new Date(); 
d.getDate()                 获取日
d.getDay ()                 获取星期
d.getMonth ()               获取月（0-11）
d.getFullYear ()            获取完整年份
d.getYear ()                获取年
d.getHours ()               获取小时
d.getMinutes ()             获取分钟
d.getSeconds ()             获取秒
d.getMilliseconds ()        获取毫秒
d.getTime ()                返回累计毫秒数(从1970/1/1午夜)

作业

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
}

function showTime() {
    var d1 = new Date()
    var year = d1.getFullYear()
    var month = d1.getMonth()+1
    var day = d1.getDate()
    var hour = d1.getHours()
    var minute = d1.getMinutes()<10?"0"+d1.getMinutes():d1.getMinutes()
    var week = WEEKMAP[d1.getDay()]
    var strTime = 
    `${year}-${month}-${day} ${hour}:${minute}`
    console.log(strTime)
}
 
showTime()

9.BOM操作

1.BOM(Browser Object Model)是指浏览器对象模型,它使JavaScript可以与浏览器进行对话。

2.window.open():打开一个网址:括号内有三个参数,第一个参数:地址;第二个参数:对象,可以不写;第三个参数:页面大小
window.open('https://www.cnblogs.com/zkz0206/p/16953478.html','','width=800px,heigth=400px')

3.window.close():关闭浏览器哦。

4.navigator.userAgent:查看浏览器版本。

5.navigator.appName:'Netscape',查看Web浏览器全称

6.history.back():后退一步

7.history.forward():前进一步

8.window.location.href:获取当前网址

9.window.location.href=地址:跳转到该网页

10.window.location.reload():刷新当前页面

11.alert('提示信息'):警告框

12.confirm:确认框,该操作有返回值,选了确定之后会提示true,选了取消会提示false
confirm('你确定吗')

13.prompt:提示框,可以增加一个网址
prompt('什么网址?','www.baidu,com')

14.计时器相关操作:关键字setTimeout(函数名,时间),时间用毫秒为单位,1秒等于1000毫秒,表示多久之后执行该函数。
<body>
    <script>
        function showAlert() {
            confirm('是否交易')
        }
        setTimeout(showAlert,3000)
    </script>
</body>

取消定时任务:setTimeout需要用一个变量名接收,接受之后用clearTimeout(变量名)停止该定时任务
<body>
    <script>
        function showAlert() {
            confirm('是否交易')
        }
        let t = setTimeout(showAlert,3000)
        clearTimeout(t)
    </script>
</body>

每隔固定时间执行:t = setInterval(函数名,时间)
<body>
    <script>
        function showAlert() {
            confirm('是否交易')
        }
        t = setInterval(showAlert,3000)
    </script>
</body>

取消任务:clearInterval(变量名):可以使固定时间执行操作失效
<body>
    <script>
        function showAlert() {
            confirm('是否交易')
        }
        t = setInterval(showAlert,3000)
        clearInterval(t)
    </script>
</body>

10.DOM操作

1.DOM(Document Object Model)是指文档对象模型,通过它可以访问HTML文档内所有的元素(标签)。

2.既然DOM操作是通过js代码来操作标签 所以我们需要先学习如何查找标签之后才能给标签绑定一些JS代码(DOM操作)。

11.查找标签

"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""
1.document.getElementById('d1'):查找标签对象本身,如果查找到的标签有子标签,那么子标签同样会被选中,选择三角形的下拉框同样可以看到子标签
document.getElementById('d1')

2.document.getElementsByClassName('c1'):结果是一个数组,里面有多个标签对象
document.getElementsByClassName('c1')

3.document.getElementsByTagName('span'):结果是数组,里面有多个标签对象

4.parentElement:查找父节点标签元素
"""
父标签可以连续查找,没有父标签会显示body标签,body标签的父标签是html标签
"""

5.children:子标签:查找子标签元素
divEle.children  //  <div id="d4" class="c2">
HTMLCollection(2) [span#d5.c3, span#d6.c3, d5: span#d5.c3, d6: span#d6.c3]
                   
6.firstElementChild:第一个子标签元素
divEle.firstElementChild  // <span id="d5" class="c3">div>div>span1</span>
                   
7.其他:
lastElementChild         	最后一个子标签元素
nextElementSibling       	下一个兄弟标签元素
previousElementSibling   	  上一个兄弟标签元素

12.操作节点

1.操作节点(标签)关键字:
添加标签:document.createElement('标签名')(节点对象需要用变量名赋值才能操作)
给a标签添加地址:标签对象.herf = '地址'

标签对象.innerText:获取标签内部所有的标签包含文本
标签对象.innerText = '文本':替换/设置标签内部的文本(不识别标签语法)

标签对象.innerHTML:获取标签内部所有的标签包含文本
标签对象.innerHTML = '文本':替换/设置标签内部的文本(识别标签语法)

2.实战:JS代码创建标签，并且添加到指定的父标签下:
let aEle = document.createElement('a')  // 创建a标签
aEle.href = 'https://www.cnblogs.com/zkz0206/'  // 给a标签添加地址
aEle.innerText = '郑凯泽的博客园'  // 给a标签中间添加文本
let divEle = document.getElementsByTagName('div')[0]  // 获取到div标签(a标签的父标签)
divEle.appendChild(aEle)  // 将创建的a标签添加到父标签下
"""
由于我们编写代码只是在终端临时修改,pycharm中的代码y也没有改变,页面不会永久保存修改之后的代码,所以提交一次之后代码就会消失
"""

13.DOM获取值操作

1.针对用户输入和用户选择的标签,用标签对象.value。
<body>
    <p>username:
        <input type="text" id="username">
    </p>
</body>

<p>
        <select name="" id="select">
            <option value="干饭">111</option>
            <option value="睡觉">222</option>
            <option value="打豆豆">333</option>

        </select>
</p>

2.针对用户上传的文件数据:用标签对象.files拿到文件列表(fileList),再通过索引值拿到每一个文件的信息。
<p>
    请选择文件<input type="file" id="file">
</p>

14.class操作与css操作

1.JS操作标签css样式:首先找到标签对象,然后用标签对象.style.属性名 = '属性样式'(属性样式要加引号)。
let div1Ele = document.getElementById('d1')
div1Ele.style.color = 'yellow'  // 将id为1的标签字体改为黄色

2.JS操作class 属性:
	2.1查看某个标签的类的列表:标签对象.classList
	2.2给某个标签添加类:标签对象.classList.add('类名')
	2.3查看标签是否属于某个类:标签对象.classList.contains('类名')
	2.4移除标签中的某个类:标签对象.classList.remove('类名')
	2.5如果标签中有某个类则删除,没有某个类则添加:classList.toggle('类名').
<style>
        .c1 {
            background-color: green;
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }

        .c2 {
            background-color: blue;
        }
<body>
    <div class="c1" id = "d1">div1</div>
</body>

15.事件

1.事件可以理解为通过JS代码绑定一些自定义功能。比如当用户点击某个 HTML元素时启动一段JavaScript。

2.常用事件:
onclick:当用户单击某个对象时调用事件
ondbckick:当用户双击某个对象时调用事件
onfocus:元素获得焦点
onblur:元素失去焦点
onchange:域的内容被改变(下拉内容改变的时候触发)(主要针对select标签(下拉框))

3.绑定事件的方式:
方式一:
<button onclick="showMsg()">快按我</button>
    function showMsg() {
    let msg = prompt('你确定要这样吗?')
    console.log(msg)
}
方式二:
<input type="button" value="快快快" id="d1">
    
<script>
	let inputEle = document.getElementById('d1')
	inputEle.onclick = function () {
        alert('是谁在点我!!!')
    }
</script>
"""
事件函数中的this关键字
	this指代的就是当前被操作的标签对象本身	
 	如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
"""

16.事件实战案例

1.编写一个商品输入框,鼠标未点击文本框的时候文本框默认"游戏机",点击时候清空,点击其他部位又默认输入"游戏机"。(购物网站)
<body>
    target_good:<input type="text" value="游戏机" id="d1">
    <script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '游戏机'
        }
    </script>
</body>

2.编写一个用户注册程序,提醒用户输入用户名时不能输入'jason',密码若为'123'则提示用户'密码过于简单'
<script>
        butEle = document.getElementById('sub')
        butEle.onclick = function () {  // 此处条件不能写onblur,因为一进去还未点击输入框的时候就是onblur状态,这时也不符合if条件,所以什么都不会执行
            nameEle = document.getElementById('d1')
            pwdEle = document.getElementById('d2')
            if (nameEle.value == 'jason') {
                namespanEle = document.getElementById('s1')
                namespanEle.innerText = '用户名不能为jason'
            }

            if (pwdEle.value == '123') {
                pwdspan = document.getElementById('s2')
                pwdspan.innerText = '密码过于简单'
            }
        }

    </script>


    </script>
    
3.编写出快递地址内的地址选择选项。
省:
<select name="" id="d1">

</select>

市:
<select name="" id="d2">

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有的省信息
    for (let pro in data) {
        // 2.创建option标签
        let proOpEle = document.createElement('option');
        // 3.添加文本及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.将创建好的option标签添加到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市数据
        // 6.获取用户选择的省信息 根据省获取市信息
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>

17.jQuery类库

"""
IE浏览器:前端针对IE有时候需要单独再编写一份代码
"""
Write less, do more  写的更少做的更多

1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器

准备工作
	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	https://www.bootcdn.cn/
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
        
什么是CDN
	内容分发网络
    
jQuery导入之后需要使用关键字才可以使用
	默认的关键字就是jQuery但是不好输入 >>>:	$
    
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快


js代码与jQuery代码对比
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

    $('p').first().css('color','yellow').next().css('color','blue')
	
导入jQuary的方式(在标签head中导入):
1.在运行的py文件文件内新建一个js文件命名为jQuery3.6.js,复制地址https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js内的代码拷贝进去,通过script标签导入进去:<script src="jQuery3.6.js"></script>

2.通过script标签直接导入jQuery的地址:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

18.标签对象与jQuery对象

1.不同的对象能够调用的方法是不同的
	在编写代码的时候一定要看清楚手上是什么对象
2.两者可以互相转换
	标签对象转jQuery对象		
    	$(标签对象)
 	jQuery对象转标签对象
    	jQuery对象[0]

19.计时器作业

<body>
    <input type="text" id="d1">
    <button id="satrtBtn">开始</button>
    <button id="stopBtn">结束</button>

    <script>
        let inputEle = document.getElementById('d1')
        let startEle = document.getElementById('satrtBtn')
        let stopEle = document.getElementById('stopBtn')
        
        function showTime() {
            let time = new Date()
            inputEle.value = time.toLocaleString()  // 在文本框中添加实时时间
        }

        let t
        startEle.onclick = function () {
            if (!t) {  //当每次按了结束之后会把t变为null,这是才可以继续开始。如果大家这个判断条件,t可以开始多次,这样停止时也只能停掉其中一个t
                t = setInterval(showTime, 1000)}
        }
        stopEle.onclick = function () {
            clearInterval(t)
            t = null  // 把t变为null,这样才能开始
        }
    </script>
</body>