orangeの博客

JavaScript入门

发表于 更新于 分类于 Valine：
本文字数： 9.1k 阅读时长 ≈ 8 分钟

[toc]

alert—控制浏览器弹出警告框

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    <script type="text/javascript">
        alert("你好世界")
    </script>
    </head>
    <body>
    </body>
</html>

image-20230127144935599

document.write—向body中输出一个内容

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    <script type="text/javascript">
        document.write("你好世界")
    </script>
    </head>
    <body>
    </body>
</html>

image-20230127145807827

console.log—向控制台输出内容

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    <script type="text/javascript">
        console.log("你好世界")
    </script>
    </head>
    <body>
    </body>
</html>

image-20230127154535686

button—按钮

可以将js编写到button标签的onlick属性中，当我们点击按钮时候，js代码才会执行

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <body>
        <button onclick="alert('你干嘛~哈哈~诶哟')">点我一下</button>
    </body>
</html>

image-20230127175516056

href—可以把js代码写入href属性中

这样点击超链接，就会执行js代码

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <a href="javascript:alert('你干嘛~哈哈~诶哟');">点我一下</a>
    </body>
</html>

image-20230127180038954

script—标签引入外部js文件

写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    </body>
</html>

image-20230127181115462

image-20230127181039767

script标签一旦用于引入外部文件，就不能编写内部代码了，即使有也会被浏览器忽略，如果需要则可以再创建一个新的script标签用于编写内部代码

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="script.js">
            alert("我是内部js标签")
        </script>
    </head>
    <body>
    </body>
</html>

image-20230127181828388

image-20230127181549688

toString—调用数据类型的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 123;
            console.log(a);
            var b = a.toString();
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129010048594

string()—直接调用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 123;
            console.log(a);
            var b = String(a);
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129010239358

Number()—直接调用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = "123";
            console.log(a);
            var b = Number(a);
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129010534088

parseInt()—该函数将字符串的有效的整数提取出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = "123.ab";
            console.log(a);
            var b = parseInt(a);
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129011133454

parseFloat()—取有效的小数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = "123.456.789ab";
            console.log(a);
            var b = parseFloat(a);
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129011328896

Boolean()—该函数可以转成字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 123;
            console.log(a);
            var b = Boolean(a);
            console.log(b);
            console.log(typeof b);
        </script>
    </head>
    <body>
    </body>
</html>

image-20230129121729902

Unicode

js里面可以直接使用Unicode编码，在html里面需要换算成为10进制而且用放在&#后面

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            console.log("\u2620")
        </script>
    </head>
    <body>
        <h1 style="font-size: 200px;">&#9760</h1>
    </body>
</html>

image-20230129200707329

isNaN()—使用该函数判断是不是NaN

如果是NaN，则返回true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = NaN;
            console.log(isNaN(a));
        </script>
    </head>
    <body>

    </body>
</html>

image-20230129203436249

prompt()—接收键盘输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = prompt("输入你的年龄：");
            alert(a);
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130185410670

image-20230130185422027

if

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = prompt("输入你的成绩：");
            if(a == 100){
                alert("奖励宝马一辆");
            }else if(a >= 80){
                alert("奖励一台手机");
            }else if(a >= 60){
                alert("奖励十年模拟，三年高考试卷100套");
            }else{
                alert("奖励棍子打断！！！")
            }
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130193948675

image-20230130193957418

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = prompt("输入你的成绩：");
            if(a > 100 || a < 0 || isNaN(a)){
                alert("拖出去毙了！！！");
            }else{
                if(a == 100){
                alert("奖励宝马一辆");
            }else if(a >= 80){
                alert("奖励一台手机");
            }else if(a >= 60){
                alert("奖励十年模拟，三年高考试卷100套");
            }else{
                alert("奖励棍子打断！！！")
            }
            }
 
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130194424865

switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = Number(prompt("输入1-3其中之一的数字："));
            switch(a){
                case 1:
                    console.log("壹");
                    break;
                case 2:
                    console.log("贰");
                    break;
                case 3:
                    console.log("叁");
                    break;
            }
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130213105881

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = Number(prompt("输入你的成绩0~100："));
            switch(parseInt(a/10)){
                case 10:
                case 9:
                case 8:
                case 7:
                case 6:
                    console.log("合格");
                    break;
                default:
                    console.log("不合格");
                    break;
            }
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130221606311

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = Number(prompt("输入你的成绩0~100："));
            switch(true){
                case a >= 60:
                    console.log("合格");
                    break;
                default:
                    console.log("不合格");
                    break;
            }
        </script>
    </head>
    <body>

    </body>
</html>

image-20230130221811910

while

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 1;
            while(a <= 10){
                document.write(a++ +"</br/>")
            }
        </script>
    </head>
    <body>

    </body>
</html>

image-20230201001654609

do…while

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var a = 1;
            do{
                document.write(a++ +"<br/>");
            }while(a <= 10);
        </script>
    </head>
    <body>

    </body>
</html>

image-20230201002041684

案例 1点击按钮会高亮

01_体验js.html

image-20230824184702067

image-20230824184714907

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>

<body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        let bts = document.querySelectorAll('button')
        for (let i = 0; i < bts.length; i++) {
            bts[i].addEventListener('click', function () {
                document.querySelector('.pink').className = ''
                this.className = 'pink'
            })
        }
    </script>
</body>

</html>