JavaScript

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>
  • 27
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

axihaihai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值