JavaScript 基础01

冉冉柟

1003人浏览 · 2025-09-12 10:31:51

冉冉柟 · 2025-09-12 10:31:51 发布

JavaScript

1.0 JavaScript介绍

1.0.0输入和输出语句

1.0.1页面弹出警告对话框

alert('');

1.0.2用户输入语句

prompt('');

1.0.3向body内输出内容

document.write('');

1.0.4控制台打印输出

console.log('');

1.1字面量

literal

2.0变量

2.0.0变量是什么？

2.0.1目标：理解变量是计算机存储数据的”容器“

变量是计算机用来存储数据的==”容器“==，它可以让计算机变得有记忆。

2.1.0变量的基本使用

2.1.1声明变量：

要想使用变量，首先需要创建变量（也称声明变量或定义变量）

语法：

let 变量名

2.1.2变量的赋值

let age = 18
alert(age)

let不允许重复声明一个变量

第一部分

01-体验

<!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>

02-输入和输出

<script>
    //1、文档输出内容
    document.write('你好')
    document.write('<h1>这是标题<h1>')

    //2、控制台打印输出（给程序员看）
    console.log('让我看看怎么个事')
    console.log('不是吧');
    
    //3、输入语句
    prompt('请输入您的姓名：')
</script>

03-变量的声明和使用

    <script>
        //1、声明的同时赋值 变量的初始化
        let age = 19
        
        //2、变量更新
        age = 18
        console.log(age);

        //3、声明多个变量
        let age1 = 20, uname1 = 'luo'
        console.log(age1,uname1);

        //4、提倡声明的方法
        let age2 = 22
        let uname2 = 'yu'
        console.log(age2,uname2);
        
    </script>

04-输入用户名案例

    <script>
        //输出用户名案例
        //1、用户名案例
        //prompt('请输入姓名：')

        //2、内部处理保存数据
        let uname = prompt('请输入姓名：')

        //3、打印输出
        document.write(uname)
    </script>

05-交换两个变量

    <script>
        // 1、声明一个临时变量temp
        // 2、把num1的值赋值给temp
        // 3、把num2的值赋值给num1
        // 4、把temp的值给num2

        let num1 = '18'
        let num2 = '23'
        let temp
        temp = num1
        num1 = num2
        num2 = temp
        console.log(num1,num2);
        
    </script>

06-数组的定义与取值

    <script>
        let arr = [10,20,30,40,50]
        let arr1 = ['张三','李四','王五','老刘']
        console.log(arr[1]);
        console.log(arr1[0]);
        
    </script>

07-计算圆的面积

    <script>
        //定义一个常量（不允许更改值）
        const PI = 3.145
        //1、页面弹出输入框
        let r = prompt('请输入圆的半径：')

        //2、计算圆的面积（内部处理）
        let result = PI*r*r

        //3、页面输出
        document.write(result)
    </script>

08-粘性数据类型

    <script>
        console.log('张三'-2);
        console.log(NaN*2);

        //NaN自己也不等于NaN
        console.log(NaN === NaN);
        
        //undefined未定义
        console.log(undefined + 1)

        //null定义为空
        console.log(null + 1)

        //声明变量但未给值，结果为undefined
        let num
        console.log(num);
        
        
    </script>

09-字符串类型

    <script>
        let age = 18
        //1、""
        console.log("我今年" + age + "岁了")

        //2、''
        console.log('我今年' + age + '岁了');

        //3、``
        console.log(`我今年${age}岁了`)
        

        //实例：
        let uName = prompt('请输入您的姓名：')
        let Age = prompt('请输入您的年龄：')
        document.write(`大家好，我叫${uName}，今年${Age}岁了。`)
    </script>

10-检测数据类型

    <script>
        let num = 10
        let str = '张三'
        let str1 = '10'
        let flag = false
        let und
        let obj = null

        //typeof  检测数据类型  或写成typeof ()
        console.log(typeof num);
        console.log(typeof (num));
        console.log(typeof str);
        console.log(typeof str1);
        console.log(typeof flag);
        console.log(typeof und);
        console.log(typeof obj);
        
    </script>

11-隐式转换

    <script>
        console.log(11 + 11)
        console.log('11' + 11)   //字符串和加号并用，自动看成字符串
        console.log(11 - 11)     
        console.log('11' - 11)  //字符串和减号并用，自动看成数字
        console.log(11 * 11)
        console.log('11' * 11)  //除加号外，其余数字与字符串并用，都看成数字
        console.log(typeof '123') 
        console.log(typeof +'123')  //字符串前添加+，转换成数字
        console.log(+'11' + 11)     //字符串前添加+，转换成数字
        
    </script>

12-显示转换

    <script>
        //字符串转数字
        let str = '123'
        console.log(Number(str))
        console.log(Number('pink'))

        console.log('-----------------------------');
        

        //字符串转整数型Int
        console.log(parseInt('12px'))
        console.log(parseInt('12.34px'))
        console.log(parseInt('12.96px'))

        console.log('-----------------------------');
        
        //字符串转浮点数
        console.log(parseFloat('12px'))
        console.log(parseFloat('12.34px'))
        console.log(parseFloat('12.96px'))
        
        console.log('-----------------------------');

        //接收字符串后转换成数字类型
        //法一：
        let num = prompt('请输入年薪1：')
        console.log(Number(num));

        //法二：
        let num2 = Number(prompt('请输入年薪2：'))
        console.log(num2);
        
    </script>

13-求和案例

    <script>
        //法一：
        let num1 = Number(prompt('请输入第一个数：'))
        let num2 = Number(prompt('请输入第二个数：'))
        alert(`两个数相加的和是：${num1 + num2}`)

        //法二：
        // let num11 = +prompt('请输入第一个数：')
        // let num22 = +prompt('请输入第二个数：')
        // alert(`两个数相加的和是：${num11 + num22}`)
    
    </script>

14-综合案例

<!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>
        h2{
            text-align: center;
        }

        table{
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 45px;
            margin: 0px auto;
        }

        th{
            padding: 0px 20px;
        }
    </style>
</head>
<body>
    <h2>订单确认</h2>
    
    <script>
        //1、用户输入
        let goods = prompt('请输入所购买的商品：')
        let price = Number(prompt('请输入商品的价格：'))
        let number = Number(prompt('请输入购买此商品数量：'))
        let address = prompt('请输入收货地址：')

        //2、计算总计
        let total = price * number

        //页面打印
        document.write(`
            <table border="1">
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>收获地址</th>
                </tr>
                <tr>
                    <th>${goods}</th>
                    <th>${price}</th>
                    <th>${number}</th>
                    <th>${total}</th>
                    <th>${address}</th>
                </tr>
        
            </table>
        `)
    </script>
</body>
</html>

第二部分

01-自增运算符

    <script>
        //一元运算符
        //1、前置自增
        // let i = 1
        // ++i
        // console.log(i)  2

        // let i = 1
        // console.log(++i + 1)   3
        
        
        //2、后置自增（执行结果需在下一行体现）
        // let i = 1
        // i++
        // console.log(i)  2

        // let i = 1
        // console.log(i++ + 1)  2
        
        //示例：
        let i = 1
        console.log(i++ + ++i + i)
        
    </script>

02-比较运算符

    <script>
        //比较结果为boolean类型，即只会得到true和false
        console.log(3 > 5)
        console.log(3 >= 5)

        console.log('---------------------------')

        console.log(3 >= 3)
        console.log(3 >= '3')

        console.log('---------------------------')

        //==判断左右两边值是否相等
        console.log(3 == 3)
        console.log(3 == '3')

        console.log('---------------------------')

        //===判断左右两边是否类型和值都相等（开发中判断是否相等，强烈推荐使用===）
        console.log(3 === 3)
        console.log(3 === '3')

        console.log('---------------------------')
        
        console.log(NaN == NaN)
        console.log(NaN === NaN)

        console.log('---------------------------')


        //字符串比较，是比较的字符对应的ASCII码
        //例：
        console.log('a' < 'b')
        console.log('aa' < 'ab')
        console.log('aa' < 'aab')
        
        
    </script>

03-逻辑运算符案例

    <script>
        //1、用户输入
        let number = Number(prompt('请输入一个数字：'))
        //2、弹出结果
        alert(`能被4整除，但不能被100整除的判断结果为：${number % 4 === 0 && number % 100 !== 0 }`)
    </script>

04-闰年计算案例

    <script>
        //要求：
        // 能被4整除但不能被100整除，或者能被400整除的年份是闰年，否则都是平年
        // 需要逻辑运算符
        let year = Number(prompt('请输入一个年份：'))
        if (year % 4 == 0 && year % 100 !== 0 || year % 400 == 0) {
            alert(`${year}为闰年`)
        } else {
            alert(`${year}为平年`);
        }

        //除了0所有数字都为真
        if (0) {
            console.log('执行语句');
            
        }

        console.log('-------------------------');
        

        if (2) {
            console.log('执行语句');
            
        }

        console.log('-------------------------');

        //除了''，所有字符都为真
        if ('') {
            console.log('执行语句');
            
        }

        console.log('-------------------------');
        
        if ('0') {
            console.log('执行语句');
            
        }
    </script>

05-比较两数大小

    <script>
        //要求：
        // 用户输入2个数，控制台输出最大的值
        //法一：利用三元运算符
        let num1 = Number(prompt('请输入第一个数：'))
        let num2 = Number(prompt('请输入第二个数：'))
        num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)

        //法二：利用if双支
        // let num1 = Number(prompt('请输入第一个数：'))
        // let num2 = Number(prompt('请输入第二个数：'))
        // if (num1>num2) {
        //     alert(`最大值是：${num1}`)
        // } else {
        //     alert(`最大值是：${num2}`)
        // }
    </script>

06-数字前补0案例

    <script>
        //1、用户输入
        let num = prompt('请输入一个数字：')
        // 2、判断输出：小于10才在前补0
        num = num < 10 ? 0 + num : num
        alert(num)
    </script>

07-简易计算机

    <script>
        //1、依次输入两个数
        //2、选择两个数之间的操作符号
        let num1 = +prompt('请输入第一个数：')
        let num2 = +prompt('请输入第二个数：')
        let operation = prompt('请输入运算符号 + - * / 中任意一个')
        switch (operation) {
            case '+':
                alert(`两个数的+操作结果为：${num1+num2}`)
                break;
        
            case '-':
                alert(`两个数的-操作结果为：${num1-num2}`)
                break;

            case '*':
                alert(`两个数的*操作结果为：${num1*num2}`)
                break;

            case '/':
                alert(`两个数的/操作结果为：${num1/num2}`)
                break;

            default:
                alert('请输入正确的运算符号！！！')
                break;
        }
    </script>

08-断点演示

    <script>
        let num = 10
        num++
        console.log(num);
        
        //控制台点击Sources
        //点击所需打断点的位置
        // 刷新浏览器
        // 在Watch中可点击+号并搜索所需查询的数值
    </script>

09-while循环

    <script>
        //1、变量的起始值
        //2、终止条件
        //3、变量的变化量
        /**
        let num = 1
        while (num <= 10) {
            document.write('HelloWord！！！')
            num++
        }
        */

        let number = Number(prompt('请输入需要打印的次数：'))
        let i = 1
        while (i <= number) {
            document.write(`重复打印${number}次！！！</br>`)
            i++
        }
    </script>

10-while循环练习

    <script>
        /**
        let number = Number(prompt('请输入需要计算由1到XX的和：'))
        let i = 1
        let sum = 0
        while (i <= number) {
            sum += i
            document.write(`由1到${i}的和为：${sum}</br>`)
            i++
        }
        */
        
        let number = Number(prompt('请输入需要计算由1到XX：'))
        let key = prompt('请输入运算符号 + * 中任意一个')
        let i = 1
        let sum = 0
        let sum2 = 1
        switch (key) {
            case '+':
                while (i <= number) {
                    sum += i
                    document.write(`由1到${i}的和为：${sum}</br>`)
                    i++
                }
            break;

            case '*':
                while (i <= number) {
                sum2 *= i
                    document.write(`由1到${i}的乘法为：${sum2}</br>`)
                    i++
                }
            break;
        
            default:
                alert('请输入正确的运算符号！！！')
            break;
        }
        
    </script>

11-while循环求奇偶数之和之积

    <script>
        let number = Number(prompt('请输入需要计算由1到XX：'))
        let odevity = prompt('请输入所求数为奇数还是偶数：')
        let key = prompt('请输入运算符号 + * 中任意一个')
        let i = 1
        let sum = 0
        let sum2 = 1
        switch (key) {
            case '+':
                while (i <= number) {
                    if (odevity == '奇数') {
                        if (i % 2 !== 0) {
                        sum += i
                        document.write(`由1到${i}的${odevity}和为：${sum}</br>`)
                        //i++
                        }
                    } else if(odevity == '偶数'){
                        if (i % 2 == 0) {
                        sum += i
                        document.write(`由1到${i}的${odevity}和为：${sum}</br>`)
                        //i++
                        }
                    }else{
                        alert('请输入奇数还是偶数')
                        break;
                    }
                    i++
                }
            break;

            case '*':
                while (i <= number) {
                    if (odevity == '奇数') {
                        if (i % 2 !== 0) {
                        sum2 *= i
                        document.write(`由1到${i}的${odevity}积为：${sum2}</br>`)
                        //i++
                        }
                    } else if(odevity == '偶数'){
                        if (i % 2 == 0) {
                        sum2 *= i
                        document.write(`由1到${i}的${odevity}积为：${sum2}</br>`)
                        //i++
                        }
                    }else{
                        alert('请输入奇数还是偶数')
                        break;
                    }
                    i++
                }
            break;
        
            default:
                alert('请输入正确的运算符号！！！')
            break;
        }
        
    </script>

12-退出循环之你爱我吗

    <script>
        while (true) {
            let str = prompt('你爱我吗？')
            if (str === '爱') {
                document.write('<h1>我也超级爱你！！！</h1>')
                break;
            }
        }
    </script>

13-简易ATM取款机案例

    <script>
        //需求：用户可以选择存钱、取钱、查看余额和退出功能
        let account = 100000
        while (true) {
            let num = Number(prompt(`
                                请您选择操作：
                                1、存钱
                                2、取钱
                                3、查看余额
                                4、退出
                            `))
            if (num == 4) {
                break;
            }
            
            switch (num) {
                case 1:
                    let deposit = Number(prompt('请输入您的存款金额：'))
                    account += deposit
                    alert(`您的余额为：${account}`)
                    break;

                
                case 2:
                    let draw = Number(prompt('请输入您的取款金额：'))
                    account -= draw
                    alert(`您的余额为：${account}`)
                    break;

                
                case 3:
                    alert(`您的余额为：${account}`)
                    break;
            
                default:
                    alert('请输入正确选项！')
                    break;
            }
        }
    </script>

亚马逊云科技技术品牌专区

更多推荐

open-code-review Codex 插件教程：对话式调用评审技能指南

本文是一份面向新手的 **open-code-review Codex 插件教程**，教你在 Codex 中通过对话式方式调用 open-code-review 的 AI 代码评审技能。open-code-review 是阿里巴巴开源的 AI 代码评审工具，采用"确定性流水线 + LLM Agent"混合架构，内置多语言评审规则（NPE、线程安全、XSS、SQL 注入等），可在 Codex 里用一

亚马逊云科技技术品牌专区

OBS Studio 完整指南：免费开源录屏与直播软件从零上手

想做一场像模像样的直播，或者把屏幕内容录成教程视频，但一想到商用软件的订阅费就有些犹豫？其实你不需要花一分钱。OBS Studio 是一款免费开源的直播与录屏软件，支持 Windows、macOS 和 Linux，采集、混音、编码、推流、录制，一条流水线全包了。## 先搞清楚 OBS Studio 是什么OBS Studio 是一个"场景化"的采集合成工具：你把摄像头、窗口、浏览器、图片、

亚马逊云科技技术品牌专区

如何用MediaCrawler爬取小红书抖音数据？7大平台爬虫从安装到实战完整指南

MediaCrawler 是一个支持小红书、抖音、快手、B站、微博、百度贴吧、知乎的开源自媒体数据采集工具。它能按关键词、按帖子、按创作者主页三种方式抓取笔记/视频内容、评论甚至二级评论，并把结果存成 JSON、CSV、Excel 或数据库。适合做市场调研、竞品监控、内容选题的运营人员，以及想要现成爬虫框架而不想从零写 JS 逆向的开发者。## 从一次"手动抄数据"说起想象这个场景：你负责

亚马逊云科技技术品牌专区

所有评论(0)

查看更多评论

冉冉柟

@2401_87254006

已为社区贡献2条内容

JavaScript 基础01

冉冉柟

JavaScript

1.0 JavaScript介绍

1.0.0输入和输出语句

1.0.1页面弹出警告对话框

1.0.2用户输入语句

1.0.3向body内输出内容

1.0.4控制台打印输出

1.1字面量

2.0变量

2.0.0变量是什么？

2.0.1目标：理解变量是计算机存储数据的”容器“

2.1.0变量的基本使用

2.1.1声明变量：

2.1.2变量的赋值

第一部分

01-体验

02-输入和输出

03-变量的声明和使用

04-输入用户名案例

05-交换两个变量

06-数组的定义与取值

07-计算圆的面积

08-粘性数据类型

09-字符串类型

10-检测数据类型

11-隐式转换

12-显示转换

13-求和案例

14-综合案例

第二部分

01-自增运算符

02-比较运算符

03-逻辑运算符案例

04-闰年计算案例

05-比较两数大小

06-数字前补0案例

07-简易计算机

08-断点演示

09-while循环

10-while循环练习

11-while循环求奇偶数之和之积

12-退出循环之你爱我吗

13-简易ATM取款机案例

所有评论(0)

温馨提示：您尚未绑定手机号

冉冉柟