Javascript入门学（基础）

已于 2024-03-24 19:26:35 修改
阅读量783 收藏 24
点赞数 29
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端
于 2024-02-06 22:14:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64245578/article/details/135832463
版权

在这里插入图片描述

软件篇

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

JS基础语法第一天

1.javascript介绍

1.1 js是什么

  1. 是什么
    是一种运行在客户端（浏览器）的编程语言，实现人机交互效果，而html和css是标记性语言，并非编程语言
  2. 有什么用
    在这里插入图片描述
  3. js的组成
    在这里插入图片描述
    在这里插入图片描述

html+css+js实现按钮点击功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Base01</title>
    <style>
        .pink{
            background-color: pink;
        }

    </style>
</head>
<body>
<button class="pink">按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<button>按钮四</button>
<script>
    let btns = document.querySelectorAll('button');
    for(let i=0;i<btns.length;i++){
        btns[i].addEventListener('click',function (){
            document.querySelector('.pink').className=''
            this.className='pink'
        })
    }
</script>
</body>
</html>

1.2 js书写位置

在这里插入图片描述

1.2.1 内部js

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>js书写位置-内部</title>
</head>
<body>
<!--内部js-->
<script>
<!--    页面弹出警示框-->
    alert("Hello js~")
</script>
</body>
</html>
1.2.2 外部js

在这里插入图片描述
在这里插入图片描述

js_location_outer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>js书写位置-外部</title>
</head>
<body>
<!--注意路径的书写-->
<script src="../js/js_location_outer.js"></script>
</body>
</html>

js_location_outer.js

//alert切记不要误敲为alter，切记，切记
alert("hello js~")
1.2.3 行内js

在这里插入图片描述
js_location_inline.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>js书写位置-行内</title>
</head>
<body>
<button onclick="alert('hello js~')">按钮一</button>
</body>
</html>

1.3 js的注释

在这里插入图片描述

1.4 js的结束符

在这里插入图片描述
在这里插入图片描述

1.5 输入和输出语法

1.5.1 输出

在这里插入图片描述

1.5.2 输入

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>输入和输出语法</title>
</head>
<body>
<script>
    //    1.文档输出内容
    document.write("hello js")
    document.write("<h1>标题一</h1>")
    //    2.页面弹出警示框
    alert("Hello js~")
    alert("努力，奋斗")
    //    3.console输出
    console.log("hello js")
    console.log("努力")
    //    4.prompt
    prompt("请输入内容")
</script>
</body>
</html>

在这里插入图片描述

1.6 字面量

在这里插入图片描述

2.变量

2.1 变量是什么

在这里插入图片描述

2.2 变量基本使用（重点）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意：赋值符号”=”前后都要有空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>变量的使用</title>
</head>
<body>
<script>
    <!--    1.定义变量-->
    let name
    //2.变量赋值
    name = "chen"
    //3.变量输出
    alert(name)
    document.write(name)
    console.log(name)
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>更新变量值</title>
</head>
<body>
<script>
    <!--  定义一个变量-->
    //let不允许多次声明一个变量
    let name = "张三"
    console.log("更新前：" + name)
    //更新变量值
    name = "Tom"
    console.log("更新后：" + name)

//    声明多个变量
    let sex='女',age=18 //不推荐这样写，推荐分开声明并初始化
    console.log(sex)
    console.log(age)
    console.log(name,sex,age)
    //推荐书写
    let uname="chen"
    let uage=20
    console.log(uname,uage)
</script>
</body>
</html>

2.3 变量的本质

在这里插入图片描述

2.4 变量命名规则与规范

在这里插入图片描述
在这里插入图片描述

3.数组

数组中的元素可以为任意类型

3.1 数组的基本使用

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>数组的使用</title>
</head>
<body>
<script>
    <!--    1.声明数组-->
    let names = ["成成", "陈陈", "花花"]
    //2. 使用数组
    console.log(names)
    for (let i = 0; i < names.length; i++) {
        console.log(names[i])
    }
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>数组-基本使用</title>
</head>
<body>
<script>

    let array1 = ["小陈", "小陆", "小郭"]
    for (let i = 0; i < array1.length; i++) {
        console.log(array1[i])
    }
    //    a)数组单元值的类型为字符类型
    let list1 = ["晨晨", "清清", "珂珂"]
    console.log(`list1数组的长度为${list1.length}`)
    for(let i=0;i<list1.length;i++){
        console.log(`数据${list1[i]},其对应的类型为${typeof list1[i]}`)
    }
    //    b)数组单元值的类型为数值类型
    let list2 = [1, 2, 3, 4, 5, 6]
    console.log(`list2数组的长度为${list2.length}`)
    for(let i=0;i<list2.length;i++){
        console.log(`数据${list2[i]},其对应的数据类型为${typeof list2[i]}`)
    }
    //    c)数组单元值的类型为混合多种类型
    let list3 = [true, 1, false, "hello"]
    console.log(`list3数组的长度为${list3.length}`)
    for(let i=0;i<list3.length;i++){
        console.log(`数据${list3[i]},其对应的数据类型为${typeof list3[i]}`)
    }
</script>
</body>
</html>

3.2 数组的基本操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>数组-操作数组</title>
</head>
<body>
<script>
    //1.定义一个数组array，在原数组的基础上对数组进行操作
    let array = [1,2,3,4,5,6,7,8]
    document.write("原数组array----------------")
    document.write(`<br>`)
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }

    //2.push()方法：动态向数组的尾部添加一个单元
    document.write(`<br>`)
    array.push(`2`)
    document.write(`<br>`)
    document.write("push()----------------------")
    document.write(`<br>`)
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }
    //3.unshift()方法：动态向数组头部添加一个单元
    document.write(`<br>`)
    array.unshift(`3`)
    document.write(`<br>`)
    document.write("unshift()--------------------------")
    document.write("<br>")
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }

    //4.pop()方法：删除最后一个单元
    document.write(`<br>`)
    array.pop()
    document.write(`<br>`)
    document.write(`pop()----------------------------`)
    document.write(`<br>`)
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }

    //5.shift()方法：删除第一个单元
    document.write(`<br>`)
    array.shift()
    document.write(`<br>`)
    document.write(`shift()-----------------------------`)
    document.write(`<br>`)
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }

    //6.splice()方法：动态删除任意单元
    document.write(`<br>`)
    array.splice(0,1)  //从索引值为0的位置开始删除1个元素
    document.write(`<br>`)
    document.write(`splice()---------------------------`)
    document.write(`<br>`)
    for(let i=0;i<array.length;i++){
        document.write(`${array[i]}\t`)
    }
</script>
</body>
</html>

在这里插入图片描述

4.常量

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>常量</title>
</head>
<body>
<script>
<!--    1.常量在声明时，必须要进行赋值  2.常量赋值后，不可再次修改常量值-->
    const PI=3.1415926
    console.log(PI)
</script>
</body>
</html>

5.数据类型

在这里插入图片描述
在这里插入图片描述

5.1 基本数据类型

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>基本数据类型</title>
</head>
<body>
<script>
    //1. 计算圆的面积
    const PI=3.14
    let radius=prompt("请输入圆的半径：")
    let area=PI*radius*radius
    console.log("半径:",radius,"\t面积：",area)
    document.write("半径：",radius,"\t面积：",area)

    console.log(NAN+2)
    console.log(NAN+"cc")
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>基本数据类型-字符串类型</title>
</head>
<body>
<script>
    <!--    1.初始化字符串数据-->
    let str1 = "hello world"
    let str2 = 'hello world'
    let str3 = `hello world`
    //    2.字符串拼接
    document.write(str1 + str2 + str3+`\n`)
    document.write(`我只想说：` + str1 + "I want to say " + str2+"\n")
    //    3.字符串的引号嵌套
    document.write("I want to say 'Hello world!'\n")
    document.write(`I want to say "Hello world!"\n`)
    document.write(`I want to say \`Hello world!\`\n`)
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>基本数据类型-模板字符串</title>
</head>
<body>
<script>
    let name=prompt("请输入您的姓名")
    let age=prompt("请输入您的年龄")
    document.write(`大家好，我叫${name},今年${age}岁了。`)
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>其他三种基本数据类型</title>
</head>
<body>
<script>
    //1.布尔型基本数据类型
    let isTrue = true
    document.write(3 < 4)
    console.log(+3 > 4)
    console.log(3 < 4)

    //2.未定义数据类型
    let num
    console.log(num)

    //3.空类型（null）
    let num1 = null
    console.log(num1)

    //未定义undefined与null的区别
    console.log(undefined + 1)  //NAN
    console.log(null + 1)  //1
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>检测数据类型</title>
</head>
<body>
<script>
    let str=`hello`
    console.log(typeof str)
    let num=10
    console.log(typeof num)
    let isTrue=true
    console.log(typeof isTrue)
    let num1
    console.log(typeof num1)
    let str1=null
    console.log(typeof str1)
</script>
</body>
</html>
5.2.1 基本数据类型转换

在这里插入图片描述

隐式转换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>基本数据类型转换-隐式转换</title>
</head>
<body>
<script>
    // 1.隐式转换
    console.log(1+1)   //2
    console.log(`1`+1)  //11
    console.log(+1)  //1
    console.log(+`1`)  //1,重点使用+号
    console.log(1-`1`)  //0
    console.log(1-1)   //0
    console.log("hello"+66)  //hello66
</script>
</body>
</html>
显式转换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>数据类型转换-隐式转换</title>
</head>
<body>
<script>
    let num = `123`
    console.log(typeof num)  //string
    console.log(Number(num), typeof Number(num))  //123,'number'
    
    let num1 = Number(`234`)
    console.log(num1, typeof num1)   //234,'number'

    let num2 = 3.1415926
    console.log(parseInt(num2))  //3
    console.log(parseFloat(num2))  //3.1415926
</script>
</body>
</html>

综合练习01：渲染页面表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>综合练习01</title>
    <style>
        h2 {
            text-align: center;
        }

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

        th {
            padding: 5px 30px
        }

        table, th, td {
            border: 1px solid;
        }
    </style>
</head>
<body>
<h2>订单确认</h2>

<script>
    //    1.用户输入
    let price = +prompt("请输入商品价格")  //+的作用：将字符串类型的数据转换成数值型
    let num = +prompt("请输入商品数量")
    let addr = prompt("请输入收获地址")
    //    2.计算价格
    // let money=Number(price)*Number(num)
    let money=price*num
    //    3.页面打印渲染
    document.write(`
    <table>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
    </tr>
    <tr>
        <td>小米青春版PLUS</td>
        <td>${price}</td>
        <td>${num}</td>
        <td>${money}元</td>
        <td>${addr}</td>
    </tr>
</table>
    `)
</script>
</body>
</html>

5.2 引用数据类型

6.运算符

6.1赋值运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>运算符-赋值运算符</title>
</head>
<body>
<script>
    // 1.赋值运算符
    let num = 1
    console.log(num)   //1
    num += 1
    console.log(num)   //2
    num -= 1
    console.log(num)   //1
    num *= 2
    console.log(num)   //2
    num /= 2
    console.log(num)  //1
    num %= 2
    console.log(num)  //1
</script>
</body>
</html>

6.2 一元运算符

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>运算符-一元运算符</title>
</head>
<body>
<script>
    // 1.前置自增一元运算符
    let num1=1
    ++num1
    console.log(num1)  //2
    // 2.后置自增一元运算符
    let num2=1
    num2++
    console.log(num2)  //2
//    3.前置自增一元运算符和后置自增一元运算符混用
    let num3=1
    console.log(num3++ + ++num3 + num3)  //7


//    1.前置自减一元运算符
    let num4=1
    --num4
    console.log(num4) //0
//    2.后置自减一元运算符
    let num5=1
    num5--
    console.log(num5)//0
//    3.前置自减一元运算符和后置自增一元运算符混用
    let num6=1
    console.log(--num6 + num6-- +num6)//-1
</script>
</body>
</html>

6.3 比较运算符

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>运算符-比较运算符（关系运算符）</title>
</head>
<body>
<script>
    console.log(3 > 2)
    console.log(3 >= 3)
    console.log(3 < 2)
    console.log(3 <= 3)
    console.log(2 == 2)  //true
    console.log(`2` == 2)  //true
    console.log(undefined==null)  //true
    console.log(undefined===null)  //false
    console.log(`2` === 2) //false ，常用的判断符号（值和数据类型都一样才可以）
    console.log(NaN===NaN) //false,NaN不等于任何值
</script>
</body>
</html>

6.4 逻辑运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>运算符-逻辑运算符</title>
</head>
<body>
<script>
    //1.逻辑与 ，&&:一假则假
    console.log(3 > 5 && 3 < 6)  //false
    console.log(6 > 5 && 6 < 10)  //true
    //  2.逻辑或，||：一真则真
    console.log(3 > 5 || 3 < 6)  //true
    //  3.逻辑非，！：true->false,false->true
    console.log(!true)  //false
    console.log(!false)  //true
</script>
</body>
</html>

综合练习02：运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>运算符</title>
</head>
<body>
<script>
    let num = Number(prompt("请输入一个数值"))
    if (num % 4 === 0 && num % 100 !== 0) {
        alert("true")
    } else {
        alert("false")
    }
</script>
</body>
</html>

6.5 运算符优先级

在这里插入图片描述

7.语句

7.1 表达式和语句

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.2 分支语句

7.2.1 单分支语句

在这里插入图片描述
在这里插入图片描述

7.2.2 双分支语句

在这里插入图片描述

7.2.3 多分支语句
//多条件分支语句

if(条件1){
   满足条件1要执行的代码
}else if(条件2){
   满足条件2要执行的代码
}else if(条件3){
   满足条件3要执行的代码
}else{
   不满足条件要执行的代码
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>语句-分支语句</title>
</head>
<body>
<script>
    //1.单分支语句
    if (true) {
        console.log("执行语句1")
    }
    if (3 >= 5) {  //false
        console.log("执行语句2")
    }
    if (2 === `2`) {  //false
        console.log("执行语句3")
    }
    //除了0，所有的数字都为真
    if (2) {       //true
        console.log("执行语句4")
    }
    if (0) {   //false
        console.log("执行语句5")
    }
    //    除了‘’，所有的字符串都为真
    if ("chenchen") {   //true
        console.log("执行语句6")
    }
    if ('') {   //false
        console.log("执行语句7")
    }


    //    2.双分支语句
    let score1 = +prompt("请输入您的成绩")
    if (score1 > 92) {
        alert("成绩合格")
    } else {
        alert("成绩不合格")
    }

    //    3.多分支语句
    let score2 = +prompt("请输入您的数学成绩")
    if (score2 >= 0 && score2 < 60) {
        alert("成绩不及格")
    } else if (score2 >= 60 && score2 < 70) {
        alert("成绩及格")
    } else if (score2 >= 70 && score2 < 80) {
        alert("成绩良好")
    } else if (score2 >= 80 && score2 < 90) {
        alert("成绩优秀")
    } else if (score2 >= 90 && score2 <= 100) {
        alert("成绩超优秀")
    }
    else{
        alert("你输入的成绩有误")
    }
</script>
</body>
</html>
7.2.4 三元运算符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>语句-分支运算符（三元运算符）</title>
</head>
<body>
<script>
    let score = +prompt("请输入您的成绩")
    console.log(score > 60 ? "成绩合格" : "成绩不合格")
</script>
</body>
</html>
7.2.4 数字补0运算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>数字补0</title>
</head>
<body>
<script>
    //1.方式一
    let num = +prompt(`请任意输入一个数值`)
    num = num < 10 ? `0` + num : num
    alert(num)
    //2.方式二
    let num1 = prompt(`请任意输入一个数值`)
    num1 = num1 < 10 ? 0 + num1 : num1
    alert(num1)
</script>
</body>
</html>
7.2.5 switch表达式

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>语句-分支语句（switch语句）</title>
</head>
<body>
<script>
    let choice = +prompt("请输入您的选项(0,1,2)")
    switch (choice) {
        case 0:
            alert("您的选项是0")
            break
        case 1:
            alert("您的选项是1")
            break
        case 2:
            alert("您的选项是3")
            break
        default:
            alert("您的选项不存在")
    }
</script>

</body>
</html>

7.3 循环语句

7.3.1 while循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>循环语句-while语句</title>
</head>
<body>
<script>
    let count=+prompt("请输入次数")
    let i=0
    while(i<=count){
        //注意：需要使用反引号``
        console.log(`第${i}次`)
        i++
    }

//    中止条件-break
    while(true){
        let str=prompt("你想回家吗？（想/不想）")
        if(str===`想`){
            break
        }
    }
//    中止条件-continue
    let count2=+prompt("请输入次数")
    let j=0
    while(j<count2){
        if(j%2 ===0){
            j++
            continue
        }
        else{
            j++
            console.log(`偶数:${j}`)
        }
    }
</script>
</body>
</html>
7.3.2 for循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.3.3 嵌套循环

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>循环-循环嵌套</title>
</head>
<body>
<script>
  let num1=+prompt("请输入第一个数据")
  let num2=+prompt("请输入第二个数据")
  for(let i=0;i<num1;i++){
      for(let j=0;j<num2;j++){
          let ca=i*j
          document.writeln(`${i}*${j}=${ca}`)
      }
  }
</script>
</body>
</html>

7.4中断循环

在这里插入图片描述

综合练习03：循环

倒三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>循环-倒三角</title>
</head>
<body>
<script>
    let num = +prompt("请任意输入一个数据")
    for (let i = num; i >= 0; i--) {
        for (let j = i; j >= 0; j--) {
            document.write("*")
        }
        document.write(`<br>`)
    }
</script>
</body>
</html>

在这里插入图片描述

乘法口诀表

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>循环-乘法口诀表</title>
</head>
<body>
<script>
    document.write(`9*9乘法口诀表`)
    document.write(`<br>`)
    for(let i=0;i<=9;i++){
        for(let j=1;j<=i;j++){
            let ca=i*j
            document.write(`${j}*${i}=${ca}\t`)
        }
        document.write(`<br>`)
    }
</script>
</body>
</html>

在这里插入图片描述

8.断点调试

在这里插入图片描述

9.函数（******）

9.1 函数定义及调用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
入门函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数-入门</title>
</head>
<body>
<script>
    //1.定义方法
    function hello() {
        console.log("hello js")
    }

    //2.调用方法
    hello()
</script>
</body>
</html>

9.2 函数的参数及返回值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意：在声明函数时一定要给形参一个默认值，默认值只有在实参未给定时生效，否则形参默认值不生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数-有参数有返回值</title>
</head>
<body>
<script>
    //1.声明定义函数（有参数,参数默认值均为0）
    function sum1(m=0,n=0) {
        return m+n
    }

    //2.调用函数
    let num1 = +prompt(`请输入第一个数据num1`)
    let num2 = +prompt(`请输入第二个数据num2`)
    console.log(sum1(num1,num2))
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

9.3 函数的作用域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数-函数作用域</title>
</head>
<body>
<script>
    let v1=1  //全局变量
    function fn(x,y){  //形参也可以看作是函数的局部变量
        v1=2   //如果此处没有let 定义变量，直接对变量赋值，此时该变量为全局变量
        let v2=3  //此处为局部变量
    }
    console.log(v1)
    // console.log(v2)   //错误，因为v2是局部变量，只有在该变量所在的函数内生效，否则无法被调用
</script>
</body>
</html>

有参数有返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数-有参数有返回值</title>
</head>
<body>
<script>
    //1.声明定义函数（有参数）
    function hello(name) {
        alert(`hello ${name}`)
    }

    //2.调用函数
    let name = prompt(`请输入姓名`)
    hello(name)

    //1.声明定义函数（有参数有返回值）
    function sum(a, b) {
        let c = a + b
        return c
    }

    //2.调用函数
    let num1 = +prompt(`请输入a的值：`)
    let num2 = +prompt(`请输入b的值：`)

    let sum1 = sum(num1, num2)
    alert(sum1)
</script>
</body>
</html>

在这里插入图片描述
注意：
1.函数中的变量，如果没有声明进行赋值，则被看作是全局变量，不允许这种情况
2.函数中的形参看作是局部变量
在这里插入图片描述

9.4 匿名函数

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>函数-匿名函数</title>
</head>
<body>
<script>
    //1.声明
    let fn = function () {
        console.log(`函数表达式`)
    }
    //2.调用
    fn()

        //立即执行函数
        (function () {
            console.log(`匿名函数`)
        }())
        (function(){console.log(`立即执行函数2`)})()
</script>
</body>
</html>

在能够访问到的情况下 先局部 局部没有在找全局
在这里插入图片描述

10. 对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10.1 语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象-语法</title>
</head>
<body>
<script>
  //1.声明字符串类型变量
  let str=`hello js`
  //2.声明数值类型变量
  let num=16
  //3.声明对象类型的变量，使用一对花括号，目前是一个空对象,
  let user={}
</script>
</body>
</html>

10.2 属性和访问

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象-属性和访问</title>
</head>
<body>
<script>
    //1.声明属性
    let user={
        name:`chenchen`,
        age:18,
        sex:`女`
    }
    //2.访问
    console.log(user.name)
    console.log(user.age)
    console.log(user.sex)
    //3.动态追加属性
    user.name=`诚诚`
    user.age=20
    user[`sex`]=`男`
    console.log(user.name)
    console.log(user.age)
    console.log(user.sex)
</script>
</body>
</html>

10.3 方法和调用（*****）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象-方法和调用</title>
</head>
<body>
<script>
    //方法是依附在对象上的函数
    //1.声明对象
    let person = {
        name: `chenchen`,
        age: 18,
        //方法是由方法名和函数两部分构成，它们之间使用:分隔
        //注意：在调用对象中的属性或方法时，需要使用对象名.进行调用，即使是在对象中也要
        hobby: function () {
            console.log(`${person.name}喜欢看电影`)
        },
        run: function () {
            console.log(`${person.name},${person.age}岁，正是跑得快的时候`)
        }
    }

    //2.调用对象中的属性
    console.log(person.name);
    console.log(person.age);
    //调用对象中的方法
    console.log(person.hobby());
    console.log(person.run());

    //3.动态追加属性
    person.sex=`女`
    //4.动态追加方法
    person.addr=function(){
        console.log(`故乡`)
    }
    //5.调用新追加的属性和方法
    console.log(person.sex);
    console.log(person.addr());
</script>
</body>
</html>

遍历对象

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象-遍历对象</title>
</head>
<body>
<script>
  let user={
      name:`chenchen`,
      age:18,
      sex:'女',
      hobby:function(){
          console.log(`${user.name}喜欢看电影！`)
      }
  }
  for(let a in user){
      //遍历对象中的值时，使用user[a]中括号这种方式，不可使用user.a
      console.log(`${a}----->${user[a]}`);
      console.log(`<br>`)
  }
</script>
</body>
</html>

10.4 内置对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>对象-内置对象</title>
</head>
<body>
<script>
    //1.PI属性
    console.log(Math.PI)
    //2.random()方法:生成0~1间的随即数
    console.log(Math.random())
    //3.ceil()方法：向上取整
    console.log(Math.ceil(3.22))
    console.log(Math.ceil(6.99))
    //4.floor()方法：向下取整
    console.log(Math.floor(3.22))
    console.log(Math.floor(6.99))
    //5.round()方法：四舍五入取整
    console.log(Math.round(6.49))
    console.log(Math.round(6.56))
    //6.max()方法：在一组数中找到最大的
    console.log(Math.max(1, 2, 3, 4, 5, 6, 6))
    //7.min()方法：在一组数中找到最小的
    console.log(Math.min(1, 2, 3, 4, 6, 5, 9))
    //8.pow()方法：幂方法
    console.log(Math.pow(2, 2))  //2的2次方
    console.log(Math.pow(3, 2))
    //9.sqrt()方法：平方根
    console.log(Math.sqrt(16))
    console.log(Math.sqrt(8))
</script>
</body>
</html>
沪漂豫姑娘～
关注
  • 29
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript入门基础说明
孙叫兽的博客
04-09 1343
JavaScript 教程 JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学，本教程将教你打开 JavaScript 的大门 浏览器中的 JavaScript 能做什么？ 现代的 JavaScript 是一种“安全”语言。 它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。 JavaScript 的能力很大程度上依赖于它执行的环境。 例如：Node.js 允许 JavaS
Javascript 入门基础学习
10-29
习.net已经近2年了，最近学习Ajax时发现自己的很多技术功底很是欠缺，比如JavaScript。今后我会将我正在学习的也写成笔记，有时间的话将以前的东西整理整理也传上来。
前端之JavaScript入门篇
Queen_is_king的博客
07-26 2365
JavaScript是一门解释型语言，也是动态语言。所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。而所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术提示。.
JavaScript入门
微风洋洋的博客
02-10 8918
JavaScript入门秘籍，欲练此功，关注有功
JavaScript快速基础入门
鹤鸣呦呦、、的博客
07-26 966
JavaScript基础入门，一张图带你快速入门JavaScript
JavaScript 基础入门
无法自律的人的博客
04-11 2157
HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。CSS是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。JavaScript主要用于HTML的页面，嵌入在HTML的源码中。
JavaScript入门基础
来日可期的博客
09-22 5650
一、JavaScript简介 JavaScript是一种属于网络的解释性脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 跨...
超详细JavaScript入门基础+练手小案例
weixin_55643605的博客
10-28 2337
一.什么是JavaScript 它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的 动态效果，用户交互及前后端的数据传输等。 它由下列三部分组成： 1.核心语法：规范JavaScript的基本语法。 2.BOM：提供了一系列操作浏览器的方法。 3.DOM：提供了一系列操作文档的方法。 二.使用方法 将JavaScript嵌入页面有以下三种方式： 1.元素绑定事件 事件：指用户的行为（单击，双击等）。 事件处理：元素监听事件，并在事件发生后自动执行事件过程
ArcGIS api for javascript 的入门学习
七月❤的博客
01-04 2662
1、安装依赖 npm install @arcgis/core 2、按需引入（根据需要引入） import Map from "@arcgis/core/Map"; import MapView from '@arcgis/core/views/MapView'; import Basemap from '@arcgis/core/Basemap'; import Extent from '@arcgis/core/geometry/Extent'; import Circle from '@ar
JavaScript 入门(简单易懂) 看这一篇就够了
2301_77638787的博客
08-06 6200
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习。
JavaScript零基础入门 5：JavaScript函数详解
学Java，找哪吒
12-10 4683
一、对象 1、对象的分类 （1）内建对象 由ES标准中定义的对象，在任何的ES的实现中都可以使用 比如：Math String Number Boolean Function Object.... （2）宿主对象 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象 比如 BOM DOM （3）自定义对象 由开发人员自己创建的对象 2、创建对象 使用new关键字调用的函数，是构造函数constructor，构造函数是专门用来创建对象的函数，使用typeof检查一个对象时，会返回ob
javascript每日必学之基础入门
10-22
javascript每日必学之基础入门，从了解javascript开始，一步一步地进阶到大神境界，想要成为javascript大神的朋友不要错过，阅读一下
JavaScript入门学习书籍推荐
12-11
更详细的评论可以看 Realazy 在豆瓣上的评论在 豆瓣 上的评论《通往终点的过程与终点本身同样重要》 基础学习书籍：《JavaScript 权威指南》 《JavaScript DOM 编程艺术》只是入门，介绍了编程思想
整理Javascript基础入门学习笔记
10-23
整理Javascript基础入门学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript，希望大家继续关注
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 387
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 542
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1199
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 426
注释很详细，直接上代码……
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1094
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
零基础javascript入门
08-01
你好！想要零基础入门JavaScript是一个很好的选择。下面是一些步骤和资源，可以帮助你开始学习： 1. 学习基本的编程概念：了解变量、函数、条件语句和循环等基本概念，这是学习任何编程语言的基础。 2. 了解HTML和CSS：JavaScript通常与HTML和CSS一起使用，所以你也需要了解基本的HTML和CSS语法，以便在网页中使用JavaScript。 3. 学习JavaScript语法：掌握JavaScript的语法和基本数据类型，如字符串、数字、数组和对象等。 4. 理解DOM（文档对象模型）：DOM是JavaScript操作网页元素的接口。学习如何使用JavaScript来操纵和修改网页中的元素。 5. 实践编写代码：通过编写小的练习和项目来实践你所学的知识。尝试创建一些简单的交互式网页，如表单验证、图片轮播等。 6. 寻找学习资源：有很多免费的在线资源可供学习JavaScript。＊＊＊

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值