【前端学习】Day-16 JS基础、循环、函数、数组、字符串、字典

本文链接：https://blog.csdn.net/ChenAi_140/article/details/125768587

本文详细介绍了JavaScript的基础知识，包括它的语言特性、常用的HTML中插入JS的方式、注释语法以及基本的DOM操作。文章通过实例展示了如何修改网页内容，如更新文本、图片和样式，并讲解了变量、运算符、分支结构、循环、函数、数组、字符串的使用。此外，还提供了若干练习题以巩固所学知识，帮助读者快速掌握JavaScript编程。

摘要由CSDN通过智能技术生成

文章目录

1. 了解JavaScript

JS(JavaScript)控制网页行为

JS是互联网最流行的脚本语言，网页、小程序、app

JS是脚本语言
JS是轻量级的编程语言
JS是可插入HTML页面的代码
所有现代浏览器均可执行JS代码

JS代码可以借助script标签放到head或者body标签中

<body>
    <script type="text/javascript">
        // js代码单行注释

        /*
        js代码
        多行注释
        */

        // document ---> 指代html
        // write ---> 写入
        document.write('<h1>这是一个标题</h1>')
        document.write('<p>这是一个段落</p>')

    </script>
    <!-- 第二种js引入方式 -->
    <script type="text/javascript" src="./JS/demo.js"></script>
    
</body>

demo.js

document.write(
    "<a href='https://www.baidu.com'>百度</a>"
)

2. js小案例

<body>
    <!-- 修改标签的内容 -->
    <span>请输入姓名：</span><span id="name">张三丰</span><br>
    <input type="text" name="" id="info">
    <!-- onclick --- 点击事件 -->
    <input type="submit" value="提交" onclick="document.getElementById('name').innerText=document.getElementById('info').value"><br>

    <!-- 修改图片 -->
    <img src="../file/大嘴花张嘴.jpg" alt="" id="photo">
    <input type="submit" value="更改图片" onclick="document.getElementById('photo').src='../file/大嘴花闭嘴.jpg'">
    <input type="submit" value="还原图片" onclick="document.getElementById('photo').src='../file/大嘴花张嘴.jpg'">

    <!-- 修改文字样式 -->
    <p id="style">这是一个段落</p>
    <input type="submit" value="华丽的" onclick="document.getElementById('style').style='color: pink;font-size: 20px;'">
    <input type="submit" value="朴素的" onclick="document.getElementById('style').style=''"><br>

    <!-- 插入HTML代码 -->
    <script type="text/javascript">
        // Python的列表在其它编程语言中叫数组
        titles = ['四川', '云南', '贵州', '湖北']
        for (x in titles){
            title = titles[x]
            html_str = '<span id="one">' + title + '</span><span> | </span>'
            document.write(html_str)
        }
        document.getElementById('one').style='color:red;'
    </script>
</body>

3. JavaScript基础

<body>
    <script>
        // 1. 定义变量
        // 变量名 = 值(全局变量)
        num = 1
        // console：控制台
        // log：日志
        console.log(num)    //类似于print

        // var 变量 = 值 (函数中的局部变量)
        var age = 18
        console.log(age)

        // let 变量名 = 值 ({}中的局部变量)
        let gender = '男'
        console.log(gender)

        // const 变量名 = 值 (常量)
        const stu_id = 'Python001'
        console.log(stu_id)


        // 2. 运算符
        // 1) 数学运算符：+ - * / % **
        console.log(1+1)
        // 2) 比较运算符：> < >= <= == != === !==
        console.log(10>20)  // false、true
        // == 两边的元素转换成字符串以后是否相等
        console.log(5==3)   // false
        console.log('5'==5)   // true
        // != 两边的元素转换成字符串以后是否不相等
        console.log('5'!=5)   // false
        // === !== 直接判断两边数据是否相等、不相等

        // 3) 赋值运算符：= += -= *= /= **= %=
        num_1 = 3
        num_2 = 6
        num_1 += num_2
        console.log(num_1)

        // 逻辑运算符：&&(逻辑与运算)、||(逻辑或运算)、!(逻辑非运算)
        console.log(4>5 && 4<5)
        console.log(4>5 || 4<5)
        console.log(!(4>5 || 4<5))


        // 分支结构
        // 语法一
        // if (条件语句){
        //     代码块
        // }

        // 语法二
        // if (条件) {
        //     代码块
        // }else if(条件){
        //     代码块
        // }else{
        //     else可以省略不写
        // }

        // 三目运算
        // python：结果1 if 条件 else 结果2
        // java、c、js：条件?结果1:结果2 -> 条件成立，结果1，反之结果2
        age = 18
        if (age>=18){
            console.log('成年')
        }else{
            console.log('未成年')
        }
        console.log(age>=18?'成年':'未成年')

        year = 2000
        if (year % 4 === 0 && year % 100 !== 0) {
            console.log('闰年')
        }else if(year % 400 === 0) {
            console.log('润年')
        }else {
            console.log('平年')
        }

        weight = 60
        height = 1
        console.log(weight/(height**2))
        if (18.5<=weight/(height**2) && weight/(height**2) <= 24.9) {
            console.log()
        }
    </script>
</body>

4. js循环

<body>
    <script>
        /*
        循环
        1. for -in 循环
        for (变量 in 序列){
            代码块
        }
        2. while循环
        while (条件语句) {
            代码块
        }
        3. 传统for循环
        for(表达式1;表达式2;表达式3){
            代码块
        }
        4. 传统for循环改while循环
        表达式1
        while(表达式2){
            代码块
            表达式3
        }
        */ 

        // 计算1~100的和
        // while循环
        i = 1
        totle = 0
        while (i <= 100) {
            totle += i
            i += 1
        }
        console.log(totle)

        // 传统for循环
        totle = 0
        for (i=0;i<=100;i+=1) {
            totle += i
        }
        console.log(totle)

        // for-in循环，取得是每个元素的索引，再通过索引取出元素
        list_1 = [10,20,30,40]
        for (i in list_1) {
            console.log(list_1[i])
        }

        // document.cookie --- 获取用户的账号密码信息cookie

        str_1 = 'abc123'
        for (i in str_1) {
            console.log(str_1[i])
        }
    </script>
</body>

5. js函数

<body>
    <script>
        // 函数：将重复的代码封装起来，以便重复调用。
        // 作业：1. 降低代码的冗余度。2. 将执行某一功能的代码封装起来，更容易让人理解。

        /*
        1. 定义函数
        function 函数名(形参列表){
            函数体
        }
        2. 调用函数
        函数名(实参列表)
        */ 

        // 计算1-n的值
        function num_total(n){
            total = 0
            for (i=1;i<=n;i+=1){
                total += i
            }
            console.log(total)
        }
        num_total(100)
        num_total(50)


        function sum(a,b){
            result = a + b
            console.log(result)
        }
        sum(10,20)
        sum(100,30)
    </script>
</body>

6. js数组

<body>
    <script>
        // js中的数组就是Python中的列表
        // 数组只有正向下标
        list_1 = ['Python', 'JavaScript', 'C', 'HTML']
        // 数组的增删查改
        // 增 push - 向数组末尾添加一个元素
        list_1.push('C++')
        console.log(list_1)
        // 删 pop - 删除数组中的最后一个元素
        list_1.pop()
        console.log(list_1)
        // 删 splice(下标, 个数) - 从指定下标开始，删除指定个数的数据
        list_1.splice(0,2)
        console.log(list_1)
        // 改 
        list_1[1] = 'Java'
        console.log(list_1)
        // 查
        console.log(list_1.length)
        console.log(list_1[1])
    </script>
</body>

7. js字符串

<body>
    <script>
        // 字符串：''、""
        a = 'abcd'
        b = '1234'
        // 字符串的拼接
        console.log(a+b)
        // 字符串的重复(不可用)
        console.log(a*2)
        // 字符串比较大小符合编码值比较大小规则
        console.log(a>b)
        // 查看字符串的长度
        console.log(a.length)
        // 格式化输出
        age = 18
        name = '张三'
        str_1 = `${name}今年${age}岁`
        console.log(str_1)
    </script>
</body>

8. js练习题

第一题
使用while循环输出 0~100内所有3的倍数

<script>
    i = 1
    while (i < 100) {
        if (i % 3 === 0) {
            console.log(i)
        }
        i += 1
    }
</script>

第二题
使用循环计算1234…*10的结果

<script>
    result = 1
    j = 1
    while (j <= 10) {
        result *= j
        j += 1
    }
    console.log(result)
</script>

第三题
统计一个字符串中数字的个数(使用函数进行封装)

<script>
    function str_num(str) {
        count = 0
        for (x in str) {
            if (str[x] >= '0' && str[x] <= '9') {
                count += 1
            }
        }
        console.log(`字符串'${str}'中有${count}个数字`)
    }
    str_num('name125')
</script>

第四题
计算所有学生平均分
stu = [
{name: ‘大黄’, age: 27, score: 60},
{name: ‘小明’, age: 18, score: 89},
{name: ‘张三’, age: 23, score: 92},
{name: ‘小花’, age: 20, score: 71},
{name: ‘小红’, age: 30, score: 84}
]

<script>
    stu = [
        { name: '大黄', age: 27, score: 60 },
        { name: '小明', age: 18, score: 89 },
        { name: '张三', age: 23, score: 92 },
        { name: '小花', age: 20, score: 71 },
        { name: '小红', age: 30, score: 84 }
    ]
    sum = 0
    for (i in stu) {
        sum += stu[i].score
    }
    console.log(sum / stu.length)
</script>

第五题
求斐波那契数列列中第n个数的值:1，1，2，3，5，8，13，21，34… （这儿的n可以是任意正整数，可以通过输入来确定）

<script>
    function fib(n) {
        if (n <= 1) {
            return n;
        }
        return fib(n - 1) + fib(n - 2);
    }
    console.log(fib(24))
</script>