JavaScript（JS）基础（一）

Justinc.

已于 2024-11-10 20:42:38 修改

阅读量914

点赞数 18

分类专栏：前端文章标签： javascript 前端

于 2024-10-07 19:48:29 首次发布

本文链接：https://blog.csdn.net/sjc122333/article/details/142745125

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1、JavaScript（JS）简介

JavaScript 是一门跨平台、面向对象的脚本语言，它能使网页可交互（例如拥有复杂的动画，可点击的按钮，通俗的菜单等）。另外还有高级的服务端 Javascript 版本，例如 Node.js，它可以让你在网页上添加更多功能，不仅仅是下载文件（例如在多台电脑之间的协同合作）。在宿主环境（例如 web 浏览器）中，JavaScript 能够通过其所连接的环境提供的编程接口进行控制。

HTML用来定义网页的内容，CSS为网页的内容加上样式，JS为网页实现动态的数据更新，实时人机交互，使网页更加生动。

2、JS组成

ECMAScript：

规定了JS基础语法有关变量、分支语句、循环语句、对象等等。
Web APIs：
- DOM 操作文档，比如对页面进行移动、大小调节、增删改查等操作；
- BOM 操作浏览器，比如页面弹窗，窗口宽度的检测、浏览器数据的存储等等。

3、书写位置

3.1 内部JS

直接书写在html文件里，</body>标签上部。

<script>
    // 弹出提示框
    alert("提示")
</script>

3.2 外部JS

通过src引入外部JS的位置

<script src="./js/外部JS样式.js">
    // 中间内容无效
</script>

3.3 行内（内联）JS

直接在样式内部写

<button onclick="alert('内联样式')">点我</button>

4、输入和输出语法

4.1 输出

<script>
    // 在浏览器上显示内容
    document.write("第一行")
    document.write("<br>")
    document.write("<span>第二行</span>")
    // 弹出内容
    alert("弹出的内容")
    // 在控制台弹出内容
    console.log("控制台内容")
</script>

4.2 输入

<!-- 弹出窗口提示输入内容 -->
<script>prompt("请输入内容：")</script>

输入框

5、变量

5.1 单个变量

关键字不能作为变量名；
只能用下划线、字母、数字、$组成，且数字不能开头；
严格区分大小写。

<script>
    // 声明变量
    let age = 66
    // 更新变量
    age = 10
    console.log(age)
</script>

5.2 数组

<script>
    // 声明数组
    let arr = ['HTML', 'CSS', 'JS']
    // 打印数组的值
    console.log(arr[2]);
</script>

5.3 常变量

<script>
    const zero = 0
    console.log(zero)
    // 不能对常变量的值进行更改
    zero = 1
    console.log(zero)
</script>

6、基本数据类型

6.1 数字型

NaN代表一个计算错误，NaN是具有粘性的，任何与NaN的计算返回的都是NaN。

<script>
    console.log(1 + 1)
    console.log(1 * 1)
    console.log(1 / 1)
    console.log(3 % 5)
    console.log(NaN * 1)
</script>

6.2 字符串型

<script>
    let str1 = `字符串1`
    let str2 = "字符串2"
    let str3 = '字符串3'
    let str4 = str1 + "和" + str3
    console.log(str1, str2, str3, str4)
</script>

6.3 其他类型

<script>
    let a = true
    let b
    let c = null
    console.log(a, b, c)
</script>

6.3 类型转换

6.3.1 隐式转换

在某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换被称为隐式转换。

加号两边只要有一个是字符串，就会把另一个转成字符串；
除了加号以外的运算符都会把数据转换为数字类型；
加号作为正号解析可以转换成数字型。

6.3.2 显式转换

隐式转换是不严谨的，为了避免隐式转换带来的问题，我们选择对数据进行显式转换。

转换为数字型
- Number(数据)：如果字符串内有非数字，转换失败时返回的结果是NaN;
- parseInt(数据)：只保留整数，自动忽略非数字，开头必须为数字；
- parseFloat(数据)：可以保留小数。

7、运算符

<script>
    // 赋值运算符
    let num1 = 1
    num1 += 1
    console.log(num1);

    // 一元运算符
    let num2 = 2
    console.log(num2++ + --num2 - ++num2 + --num2)

    // 比较运算符
    let a = 1
    let b = "1"
    // 相等，值相等即可，不需要考虑数据类型
    console.log(a == b)
    // 全等，值和数据类型必须全部相等
    console.log(a === b)

    // 逻辑运算符
    console.log(true && false)
    console.log(true || false)
    console.log(!5)
</script>

具体实现时的优先级

8、分支语句

8.1 单分支语句

<script>
    // 单分支语句，条件为真则执行语句
    if ("") {
        console.log("语句1");
    }
    if (" ") {
        console.log("语句2");
    }
</script>

8.2 双分支语句

<script>
    let year = +prompt("输入年份")
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        alert(`${year}为润年`)
    }
    else {
        alert(`${year}为平年`)
    }
</script>

9、switch语句

计算器加减乘除的实现

<script>
    num1 = +prompt("请输入第一个数字:")
    num2 = +prompt("请输入第二个数字:")
    a = prompt("请输入计算方式:")
    switch (a) {
        case "+":
            alert(num1 + num2)
            break
        case "-":
            alert(num1 - num2)
            break
        case "*":
            alert(num1 * num2)
            break
        case "/":
            if (num2 != 0)
                alert(num1 / num2)
            else
                alert("被除数不能为0")
            break

        default:
            break
    }
</script>

10、循环结构

10.1 while循环语句

<script>
    let num = 1
    while (num <= 100) {
        if (num == 8) {
            num++
            continue
        }
        if (num % 2 == 0) {
            document.write(num + "--")
        }
        num++
    }
</script>

10.2 for循环语句

基本使用

<script>
    for (let i = 1; i <= 3; i++) {
        document.write(`第${i}次循环`)
        document.write("<br>")
    }
</script>

for循环嵌套

<script>
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(`${i} * ${j} = ${i*j} `)
        }
        document.write("<br>")
    }
</script>

11、数组操作

求数组中的最大值和最小值

<script>
    let a = [22, 53, 654, 22, 1, 432, 1223, 12]
    let max, min;
    for (i = 0; i < a.length; i++) {
        if (i == 0) {
            max = a[0]
            min = a[0]
        }
        if (max < a[i]) {
            max = a[i]
        }
        else if (min > a[i]) {
            min = a[i]
        }

    }
    document.write(`最大值：${max}`)
    document.write("<br>")
    document.write(`最小值：${min}`)
</script>