1.JavaScript
- 脚本型语言和编译型语言的区别
- 脚本型语言诸如JavaScript之类的语言是一行一行自上而下进行运行的 即一行一行的展示效果 并且一旦遇到某一行出现错误 那么就会停止往下运行 而编译型语言诸如Java之类的语言则是先编译在运行 一旦出现语法错误的话 那么类似Java这种语言将会被编译器提示语法错误 并且无法编译为字节码文件
- 脚本型语言对于语法要求较为不严格 而编译型语言对于语法要求就挺严格的
- 常见用途
- 和用户进行交互
- 对标签进行增删改查
- 实现绚丽的动画效果
- 和服务器进行交互
2.script标签
- 我们可以利用script标签来编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert('Hello World!')
</script>
</head>
<body>
</body>
</html>
- 我们也可以利用script标签来导入js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
3.语法简介
- 常见的打印有两种:1.alert()(弹窗效果) 2.Console.log()(将打印内容输出到浏览器中的控制台处)(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 第一种打印方式就是弹窗
alert('HelloWorld!')
// 第二种打印方式就是写入浏览器中的控制台
console.log('HelloWorld!!!')
</script>
</head>
<body>
</body>
</html>
- 每一条语句可加分号 也可不加分号(建议)
- 如果不加分号的话 那么每一条语句都要独立成行
- 在JS中 有两种注释方式 单行注释(//) 多行注释(/**/)
- 在JS中 通过var、let(建议)定义变量 通过const定义常量
4.数据类型
在JS中 数据类型分为8种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义一个数字类型的变量
let a = 10
let b = 1.1
// 定义一个bigint类型的变量 有别于数字类型的范围限制 该类型没有限制范围 通过n可以用来标识bigint类型的数值
let c = 111111111111111n
// 定义一个字符串类型的变量
let d = 'Hello World!'
// 定义一个布尔类型的变量
let e = true
// 定义一个undefined类型的变量 即使没有进行赋值操作的变量 也称为undefined类型的变量
let f = undefined
// 定义一个null类型的变量
let g = null
// 定义一个对象类型的变量 数组是对象类型
let h = [11, 'haha', 111n, null]
// 定义一个对象类型的变量 对象也是对象类型 其中 成员是以键值对的形式储存
let i = {
name: 'Jack',
age: 11
}
// 定义一个symbol类型的变量
let j = Symbol()
console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)
console.log(f)
console.log(g)
console.log(h)
console.log(i)
console.log(j)
console.log(typeof Symbol())
</script>
</head>
<body>
</body>
</html>
5.typeof运算符
typeof有两种表现形式:1.typeof(x) 2.typeof x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 打印10的类型
console.log(typeof 10)
// 打印1.1的类型
console.log(typeof 1.1)
// 打印1n的类型
console.log(typeof 1n)
// 打印hello world的类型
console.log(typeof 'hello world')
// 打印true的类型
console.log(typeof true)
// 打印null的类型 这是历史遗留问题 为了兼容以前 所以该错误一致延续至今 但是官方文档明确表示null为null类型 而非object类型
console.log(typeof null)
// 打印对象的类型
console.log(typeof {name: 'Jack', age: 11})
// 打印Symbol()的类型
console.log(typeof Symbol())
// 打印a的类型
let a
console.log(typeof a)
</script>
</head>
<body>
</body>
</html>
6.字符串
1.字符串的拼接
- 方式一:通过+将若干个字符串拼接起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const name = 'Jack'
const age = 11
console.log('my name is ' + name + ' and age is ' + age)
</script>
</head>
<body>
</body>
</html>
- 方式二:通过``配合${}的方式拼接字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const name = 'Jack'
const age = 11
console.log(`my name is ${name} and my age is ${age}`)
</script>
</head>
<body>
</body>
</html>
- 方式三:在方式二的基础上进行变种 即${}内支持简单的拼接、运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(`my name is ${'Ja' + 'ck'} and my age is ${5 + 6}`)
</script>
</head>
<body>
</body>
</html>
2.字符串的遍历
- 方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const str = 'Jack'
for(const subStr of str){
console.log(subStr)
}
</script>
</head>
<body>
</body>
</html>
- 方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const str = 'Jack'
for(let i = 0; i < str.length; ++i){
console.log(str.charAt(i))
}
</script>
</head>
<body>
</body>
</html>
3.数组的遍历
- 方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const arr = [1, 2, 3]
for(const e of arr){
console.log(e)
}
</script>
</head>
<body>
</body>
</html>
- 方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const arr = [1, 2, 3]
for(let i = 0; i < arr.length; ++i){
console.log(i, arr[i])
}
</script>
</head>
<body>
</body>
</html>
- 方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const arr = [1, 2, 3]
arr.forEach((e, idx) => {
console.log(idx, e)
})
</script>
</head>
<body>
</body>
</html>
4.对象的遍历
- 方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const obj = {
name: 'Jack',
age: 11
}
for(const k in obj){
console.log(k, obj[k])
}
</script>
</head>
<body>
</body>
</html>
- 方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const obj = {
name: 'Jack',
age: 11
}
for(const k of Object.keys(obj)){
console.log(k, obj[k])
}
</script>
</head>
<body>
</body>
</html>
- 方式三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const obj = {
name: 'Jack',
age: 11
}
for(const entry of Object.entries(obj)){
console.log(entry[0], entry[1])
}
</script>
</head>
<body>
</body>
</html>
- 方式四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const obj = {
name: 'Jack',
age: 11
}
for(const v of Object.values(obj)){
console.log(v)
}
</script>
</head>
<body>
</body>
</html>
7.常用API
你可以通过该教程查询相关类型的常用API
8.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义一个加法函数
function sum(a, b){
return a + b
}
// 结果为30
console.log(sum(10, 20))
</script>
</head>
<body>
</body>
</html>
- 函数的形参可以设置默认值(注意:数字类型和非数字类型运算的结果为NaN 即Not a Number)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function sum(x, y=10){
return x + y
}
console.log(sum())
</script>
</head>
<body>
</body>
</html>
- 函数可以作为参数
- 传递匿名函数(类似于Java中的匿名类)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test(func, a, b){ console.log(func(a, b)) } test(function (x, y){ return x + y }, 10, 20) </script> </head> <body> </body> </html>
- 传递箭头函数(类似于Java中的Lambda表达式)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test(func, a, b){ console.log(func(a, b)) } test((x, y) => { return x - y }, 10, 20) </script> </head> <body> </body> </html>
- 箭头函数简化(当语句体中仅有一个语句时 省略大括号 如果是return语句的话 那么需要省略return)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function test(func, a, b){ console.log(func(a, b)) } test((x, y) => x * y, 10, 20) </script> </head> <body> </body> </html>
- 函数也可以作为返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function sum(x, y){
return x + y
}
function test(){
return sum
}
console.log(test()(10, 20))
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function sum(x, y){
return x + y
}
function test(){
return sum(10, 20)
}
console.log(test())
</script>
</head>
<body>
</body>
</html>
9.监听标签的点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function test(x, y){
alert(x + y)
}
</script>
</head>
<body>
<button onclick="test(10, 20)">测试</button>
</body>
</html>
10.DOM
所谓的DOM 就是document object model 即文档对象模型 每一个html元素都相当于一个文档对象/节点(一个元素的内容 除了子元素节点以外 空白位置也会被当作文本节点看待) DOM操作就是对html中的节点进行增删改查操作
- JavaScript中内置了document 通过它可以根据不同的方式获取节点
- getElementById、getElementsByClassName两者的区别在于html中id是唯一的 而class是不唯一的 因此前者的结果仅仅只有一个对象 而后者可以获取多个对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function remove(){ // 获取id为second的对象 const li2 = document.getElementById('second') // 对其进行删除操作 li2.remove() } </script> </head> <body> <ul> <li>111</li> <li id="second">222</li> <li>333</li> </ul> <button onclick="remove()">删除</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function remove(){ // 获取class为li的对象集合 const lis = document.getElementsByClassName('li') // 将对象集合中的第二个节点删除 lis[1].remove() } </script> </head> <body> <ul> <li class="li">111</li> <li class="li">222</li> <li class="li">333</li> </ul> <button onclick="remove()">删除</button> </body> </html>
- 我们可以为ul标签添加内容为文本的li标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function add(){ // 获取ul对象 const ul = document.getElementsByTagName('ul')[0] // 创建li对象 const li = document.createElement('li') // 创建文本节点 为li对象设置内容 const text = document.createTextNode('文本') // 文本节点添加到li中 li.append(text) // 将li节点添加到ul中 ul.append(li) } </script> </head> <body> <ul></ul> <button onclick="add()">添加</button> </body> </html>
- 也可以通过document以选择器的方式获取指定的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function remove(){
const span = document.querySelector('div span')
span.remove()
}
</script>
</head>
<body>
<div>
<span>我是一个span</span>
</div>
<button onclick="remove()">删除</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function remove(){
const lis = document.querySelectorAll('ul li')
lis[0].remove()
}
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function remove(){
const li1 = document.querySelector('#first')
li1.remove()
}
</script>
</head>
<body>
<ul>
<li id="first">111</li>
<li>222</li>
<li>333</li>
</ul>
<button onclick="remove()">删除</button>
</body>
</html>