笔记+作业

最新推荐文章于 2025-08-02 13:40:10 发布

茜米瓜花

最新推荐文章于 2025-08-02 13:40:10 发布

阅读量566

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_73175276/article/details/131730305

本文介绍了JavaScript的基础知识，包括使用prompt和document.write进行输入输出，变量的声明与赋值，数据类型的动态特性，以及基本的数学运算和字符串操作。还讲解了逻辑运算、条件语句（如if和switch）以及循环结构（while、for）。此外，文章还涉及了常量、数组、函数和Math对象的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入输出语句

<script>

prompt（'内容（为屏幕输出的内容）'）------输入语句

Document.write（'内容（可识别标签）'）------输出语句，打印到页面

console.log（''）-------控制台输出语句

</script>

变量：------(盒子)-----存储数据的容器，数据本身不是变量

<script>

pompt（'请输入您的年龄'）

let  变量名    var  变量名------变量的声明

Age=pompt（'请输入您的年龄'）-----变量赋值

Age=33

console.log（age）----将age输出给控制台，打印变量名不能写引号

Let age（变量名）=prompt（'请输入您的用户名：'）-----变量的初始化

console.log（age）

Let uname=’zs‘，age=21

Console.log（uname，age）----同时定义多个变量（不建议）

</script>

案例：

<script>

Let age=pompt（'请输入您的年龄'）

Document.write（age）

</script>

Let var的区别：

<script>

Var 可以多次声明同一变量

Let 不能重复声明

</script>

常量：常量名大写

<script>

Const PI=3.14

PI=4.456

Console.log（PI）

</script>

数据类型：

<script>

js是弱数据类型语言   只有赋值之后，才知道是什么数据类型

</script>

基本数据(数字)类型：

<script>

Let a=21

Let b=33

Console.log(a)

Console.log(a+b)

Console.log(a-b)

Console.log(a*b)

Console.log(a/b)

Console.log(a%b)---取余

Console.log(a%2)

</script>

字符串类型：

<script>

Let uname=“dadad”

Console.log（typeof（uname））------查看uname命名类型

Let uname2=”da‘d’ad“

Console.log（typeof（uname2））

字符串拼接用’+‘

Let a=prompt（"请输入num1"）

Let b=prompt（"请输入num2"）

Console.log（a+b）

模板字符串

Let uname=prompt（”请输入变量名“）

Let age=prompt（”请输入年龄“）

Document.write（’你叫‘+uanme，’今年‘+age+‘岁了’）

Document.write（`你叫${unam},今年${age}岁了`)

Alert（）---警告框

</script>

布尔类型：

<scriptscript>

Console.log（3>5）

Undefinded---声明，为赋值

Null    nan   not a number

Console.log（undefinded+1）

Console.log（null+1）

</script>

显示转换：

<script>

Let a=+prompt（‘num1’）---+将输入的转换为数字类型

Let b=+prompt（‘num2’）

Console.log（number（a）+number（b））

Console.log（typeof（+a））

Let c=‘200px’

Console.log（parseint（c））

Console.log（parsefloat（c））

</script>

综合案例：


运算符：

<script>

Let a=21

a=33

a+=4----a=a+4

a*=2

a/=2

Let b=a++-------执行后b=a，a=a+1

先赋值再+1

++a：先+1，再赋值

alert（a）

比较运算符

>        <       > =     <=      ==（将字符串转换为数字类型后进行比较）     ===（既比较数值，又比较类型）

Let num1=2

Let num2='2'

alert（num1==num2）---true

alert（num1===num2）

</script>

逻辑运算：

<script>

&&（两真为真，一假为假）

||（一真为真，两假为假）

！（非）

alert（！（4<3）)

</script>

单分支句：

<script>

Let age=19

if（age<=18）{

     document.write('你是小朋友')

}else{

    alert（‘恭喜你成年了’）

}

</script>

案例（润平年）：

<script>

        let year=+prompt('请输入年份')

        if(year%4===0&&year%100！==0||year%400===0){

            alert('该月份为闰年')

        }else{

            alert('平年')

        }

</script>

三元运算符：

<script>

判断条件？条件成立时执行的语句：条件不成立时执行的语句



</script>

求最大值：

<script>

let a = +prompt("请输入一个数")

let b = +prompt("请输入另一个数")

a>b ? alert(`最大数是：${a}`) : alert(`最大数是：${b}`)

</script>

Switch:

<script>



</script>

循环：

<script>

while循环：注意设置终止条件，不然会死循环



Do while循环：



for循环：



循环嵌套：



</script>

continue、break语句：

<script>

continue：跳出本次循环

break：跳出循环

</script>

循环加强：For in（输出下标）/For of（输出值）：

<script>



</script>

数组：

<script>

Arr.Unshift：数字首位添加元素

Arr.push：数组末尾添加元素

Arr.pop：删除尾部元素

Arr.splice（3，1）：删除起始位置（3）到删除个数（1）

Arr.splice（3，0，'jiangjia'）：删除起始位置（3）到删除个数（1）添加的元素（'jiangjia'）

Console.log（Arr.join（’*‘））：数组元素以*连接

Console.log（Arr.reverse（））：颠倒元素顺序

Console.log（Arr.slice（3））：指截取3个元素

</script>

函数：必需调用，才会执行

要有返回值，一定要添加return

<script>

Function  sayhi（）{

Console.log（’hello，function‘）

}

Function getsum（a，b）{

Return a+b

}

Let a=getsum（2，3）

Console.log（a）

Arguments---接收所有实参，并保存为arguments数组

</script>

练习：

<script>

        function sum(n){

            if(n <= 100){

                return n + sum(n+1)

            }else{

                return 0

            }

        }

        let a=sum(1)

        alert(a)

    </script>

Math

Math.ceil----向上取整

Math.floor----向下取整

Math.abs----取绝对值

Math.pow-----幂运算

Math.sqrt----开平方

Math.random-----随机数，默认0-1

（Math.floor（Math.random（）*（M-N+1））+ N----从N到M

</script>

日期内置对象：

<script>

Let gg = date.getday（）-----今天星期几



Let a=3.1415926

alert（a.tofixed（4））-----保留几位小数

</script>

Dom：

Console.dir（btn）----查看对象

Console.log（typle（btn））----查看对象

获取元素的方法：

1.通过css的选择器获取----推荐

2.其他

<script>

Const li2 = Document.queryselector（’.two（字符串）‘）---获取元素（）里面为字符串



第三个document.queryselectorALL将所有匹配的元素获取到，并存放到伪数组

</script>

修改元素内容：

<script>

Innertext-----不能识别标签



</script>

定时器：

<body>

    <script>

        // setTimeout\setInterval   定时器

        // setTimeout  :某段代码或者函数在多久后执行

        // setTimeout(code||function,time(ms))

        // 返回值是一个整数，代表定时器编码

        // let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)

        // console.log(timer)

        // let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)

        // console.log(timer2)

        //    传的是函数名

        // let timer3 = setTimeout(

        // fn, 3000)

        // function fn() {

        //     console.log('6666666')

        // }

        // setTimeout(函数或一段代码，延迟时间，实参……)

        // let timer4 = setTimeout(function (a, b) {

        //     console.log(a + b)

        // }, 2000, 1, 4)

        let obj = {

            uname: 'gouxin',

            a: 3,

            b: 4,

            sum: function () {

                console.log(this)

                console.log(this.a)

            }

        }

        obj.sum()

        // setTimeout(obj.sum, 1000)

        // 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境

        // setTimeout(function () { obj.sum() }, 1000)

        let a = setTimeout(obj.sum.bind(obj), 1000)

        clearTimeout(a)

        // setInterval  间隔一段时间，将代码或者函数执行一次

        let timer = setInterval(' console.log(\'6666666\')', 1000)

        clearInterval(timer)

        let timer2 = setInterval(function (a, b) {

            console.log(a + b)

        }, 1000, 2, 3)

        clearInterval(timer2)

    </script>

</body>

关闭计时器：

clearInterval(n)

修改所选元素内容：

btn.innerHTML = `我已经阅读用户协议(${i})`

关闭不可点击：

btn.disabled=false

作业：

一.

while循环：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let i=0

        while(i<9){

            i++

            let j=1

            while(j<i){

                document.write(`  ${i}*${j}=${i*j}  `)

                j++

            }

            document.write(`  ${i}*${j}=${i*j}  `)

            document.write(`<br/>`)

        }

    </script>

</body>

</html>

在这里插入图片描述

for循环： 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        for(let i=1 ;i<10;i++){

            for(let j=1;j<=i;j++){

                document.write(` ${i}*${j}=${i*j} `)

            }

            document.write(`<br/>`)

        }

    </script>

</body>

</html>

在这里插入图片描述
二.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <script>

        let arr = [ ['aa','bb','cc'],['ab','ac','bc']]

        for (let i in arr){

            for(let j in arr[i]){

                document.write(arr[i][j])

            }

            document.write(`<br/>`)

        }

       

    </script>

</body>

</html>

在这里插入图片描述
三.

<body>

    <textarea name="" id="" cols="30" rows="10">

        用户注册协议

        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。

        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看

    </textarea>

    <br>

1.设置按钮，加类名，不可点击

    <button class="btn" disabled>请阅读用户协议(5)</button>

    <script>

2.获取元素

        const btn = document.querySelector('.btn')

3.设置倒计时

        let i = 5

4.开始计时器

        let n =setInterval (function(){

            i--

5.修改内容

            btn.innerHTML = `请阅读用户协议(${i})`

6.判断条件

            if(i===0){

7.关闭计时器

                clearInterval(n)

8.关闭不可点击

                btn.disabled=false

9.修改内容

                btn.innerHTML= `我已经阅读用户协议`

            }

        },1000)

    </script>

</body>

在这里插入图片描述