简介
定义：
JavaScript（JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。
核心组成部分：
- ECMAScript ：描述了JavaScript的语法和基本对象。
- 文档对象模型（DOM） ：DOM会将web页面和脚本或程序语言连接起来。
- 浏览器对象模型（BOM） ：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
1 JS - 引入方式
- 内部脚本：
- 将JS代码定义在HTML中
- JavaScript代码必须位于 < script > < /script > 之间
- 在HTML文档中，可以在任意地方，放置任意数量的 < script >
- 一般会把脚本置于 < body > 元素的底部，可改善显示速度。
- 外部脚本：
- 将 JS代码定义在外部 JS文件中，然后引入到HTML页面中
2 JS - 基础语法 - 输出语句
//1. 写入浏览器的body区域
document.write("<h1>write方法输出</h1>")
//2. 弹框
alert("alter方法")
//3. 控制台输出
console.log("log方法输出aaa");
3 JS - 基础语法 - 变量
//let定义变量
let a = 100;
alert("a=" + a)
//const定义常量
const PI = 3.1415926
//PI = 3 //会报错，常量不能修改
4 JS - 基础语法 - 数据类型
//原始数据类型
alert(typeof 3); //number
alert(typeof 3.14); //number
alert(typeof "A"); //string
alert(typeof 'Hello'); //string
alert(typeof `Hello JS`);//string
alert(typeof true);//boolean
alert(typeof false);//boolean
alert(typeof null); //object
let a;
alert(typeof a); //undefined
//模板字符串：拼接字符串, 使用``，占位符${js表达式}
let A = "xiaoyu"
let B = "xiaodong"
C = `${A}喜欢吃大米,${B}喜欢吃<・)))><<`
alert(C)
5 JS - 基础语法 - 运算符
let age = 20;
let _age = '20';
let $age = 20;
//== 比较值
//=== 比较值和类型
alert(age == _age);//true
alert(age === _age);//false
alert(age === $age);//true
alert("age != &age")
//三元或三木运算符
let flag = age == $age ? 'hah' : 'xixi'
alert(flag)
//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string
//parseInt('字符串')js库提供的函数，将字符串转为整型数据，不带有小数点
//特点:将字符串从左往右一个一个转换，转换到非数字结束
alert(parseInt('123')); //123
alert(parseInt('12A3'));//12
alert(parseInt('A123'));//NaN(not a number)
// 类型转换 - 其他类型转为boolean
if(0,NAN,空字符,null,undefiened)-->false
if (0) {//false
alert("0 转换为false");
}
if (NaN) {//false
alert("NaN 转换为false");
}
if (1) {//true
alert("除0和NaN其他数字都转为 true");//会弹出
}
if ("") {//false
alert("空字符串为 false, 其他都是true");
}
if (null) {//false
alert("null 转化为false");
}
if (undefined) {//false
alert("undefined 转化为false");
}
//逻辑运算符
//使用语法：if（表达式1&&表达式2）{...}表达式1返回true并且表达式2返回true才会整体返回true运行代码块
//使用语法：if（表达式||表达式2）{...}表达式1返回true或者表达式2返回true，只要有一个为true就会整体返回true运行代码块
//使用语法：if（！表达式1）{...}表达式1返回false取反返回true，就会整体返回true运行代码块
if (age + age && age - age) {
alert("age + age && age - age") //can not move
}
if (age + age || age - age) {
alert("age + age || age - age") //can move
}
if (!$age) {
alert("!$age转化为false") //can not move
}
if (!age - age) {
alert("!& age - age") //can move
}
6 JS - 函数
//具名函数
function add1(a, b) {
return a + b
}
//调用函数
let r1 = add1(12, 59)
document.write("r1=" + r1 + "<br>")
//匿名函数
//函数表达式
let add2 = function (a, b) {
return a + b
}
let r2 = add2(100, 200)
document.write("r2=" + r2 + "<br>")
//箭头函数
let add3 = (a, b) => { return a + b }
let r3 = add3(1, 2)
document.write("r3=" + r3 + "<br>")
//定义并立即执行，了解（与上面代码有冲突，需注释运行）
(function (a, b) { document.write(a + b) })(12, 34);
((a, b) => { document.write(a + b) })(66, 77)
7 JS - 对象 - Array
<script>
//定义数组
let array1 = new Array('a', 100, "xiaoyu", true) //
let array2 = ['a', 100, "xiaoyu", true]
document.write(`array1=${array1}<br>`)
document.write(`array2=${array2}<br>`)
//修改值
array1[10] = "hello"
document.write(`array1=${array1}<br>`)
//数组属性-length
document.write(`array1.length${array1.length}<br>`)
document.write(`array1.length${array1.length}<br> `)
// 数组方法-forEach_,map,push, pop ，unshift, shift，splice
// forEach循环遍历，参数是函数，遍历数组的每个元素都会运行这个函数
// item代表是数组array2遍历的每个元素
// i是循环索引l，索引从e开始，i是可以省略。
array2.forEach((item, i) => {
document.write(`array2的第${i + 1}个元素：${item}<br>`)
document.write(`array2的第${i + 1}个元素：${item}<br>`)
})
//map方法：处理每个元素返回新的数据
let array3 = [1, 2, 3, 4, 5]
document.write(`array3=${array3}<br>`)
//将array3每个元素乘以2返回新数组
let array4 = array3.map(number => number * 2)
document.write(`array4 = ${array4}<br>`)
//push,将新元素添加到数组的末尾，并返回新的长度。
let length = array3.push(6, 7)
document.write(`array3=${array3},长度=${length}<br>`)
//pop，删除数组的最后一个元素，并返回该元素
let number = array3.pop()
document.write(`array3=${array3},删除的元素=${number}<br>`)
//unshift，将新元素添加到数组的开头，并返回新的长度。
length = array3.unshift(6, 7)
document.write(`array3=${array3},长度=${length}<br>`)
//shift删除数组的第一个元素，并返回该元素。
number = array3.shift()
document.write(`array=${array3},删除元素=${number}<br>`)
//splice，方法向数组添加/删除项目，并返回删除的项目。
let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "lemon", "Kiwi")
document.write(`fruits=${fruits}<br>`)
</script>
8 JS - 对象 - String
9 JS - 对象 - JSON
//1.自定义js对象
let user = {
name: "xiaoyang",
age: 21,
sing: () => {
alert("晚安")
}
}
//调用属性语法1：对象名.属性名
//调用属性语法2：对象名["属性名"]
alert(`姓名：${user.name},年龄：${user["age"]}`)
// //调用方法语法：对象名.方法名（参数列表）
// user.sing()
//2.JSON:是js对象格式的文本字符串
let jsonStr = '{"name":"xiaoyang","age":21,"addrs":["广州","汕尾","惠州"]}'
//alert（jsonStr.name）//这是错误的：字符串不可以这样访问
//json字符串=>js对象，便于解析数据
let userObj = JSON.parse(jsonStr)
alert(userObj.name)
//js对象=>json字符串，便于传输数据给后端
jsonStr = JSON.stringify(userObj)
alert(jsonStr)
</script>
JS - 对象 - BOM
<script>
//BOM对象
//获取location地址栏对象
//window.locationwindow一般可以省略
//window对象方法confirm（"确认消息"）：弹出确认取消提示框，返回true代表点击了确认按钮，返回false代表点击取消按钮
if (confirm("您确定要删除数据吗")) {
alert("您点击了确认按钮")
} else {
alert("您点击了取消按钮")
}
//window对象方法setInterval（函数，毫秒数）：每隔指定毫秒数会周期性运行函数代码块
setInterval(() => {
alert("hello xiaoyang");
}, 3000)
//window对象方法setTimeout(函数,毫秒数)：在指定毫秒数后调用一次函数代码块
setTimeout(() => {
alert("i love you")
}, 3000)
//location对象
//1.获取当前地址栏地址
alert(location.href)
//2.跳转到其他地址
location.href = "https://www.baidu.com"
</script>
JS - 对象 - DOM - 操作
<script>
//1.根据id选择器获取id=sid的标签内的文本弹出
let span1 = document.querySelector("#sid")
//获取标签里面的文本的语法：标签对象.innerText
alert(span1.innerText)
// //2.获取所有span标签列表，遍历打印每个标签的文本
let span2 = document.querySelectorAll("span")
span2.forEach(i => {
alert(i.innerText)
})
// //3.获取所有class="txt"标签列表，遍历打印每个标签的文本
let span3 = document.querySelectorAll(".txt")
span3.forEach(i => {
alert(i.innerText)
})
</script>
JS - 对象 - DOM - 案例
<script>
//1.获取标签体的对象和里面的文本值
// let span = document.querySelector("#time")
// let count = span.innerHTML
let count = document.querySelector("#time").innerHTML
//2.编写setinterval周期定时器，更新倒计时
setInterval(() => {
count--
if (count <= 0) {
location.href = "https://www.jd.com"
}
document.querySelector("#time").innerHTML = count
}, 1000)
</script>
JS - 事件 - 事件监听
<script>
// document.querySelector("#btn1").addEventListener("click", () => {
// alert("吾皇万岁")
// })
// document.querySelector("#btn1").addEventListener("click", () => {
// alert("圣体安康")
// })
</script>
JS - 事件 - 常见事件
<script>
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
console.log("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
console.log("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
console.log("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
console.log("键盘被按下了...");
})
//keydown: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
console.log("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
console.log("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
console.log("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
console.log("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
</script>
