JavaScript 基础

目录

JavaScript基础

基础语法

了解变量、数据类型、运算符等基础概念，能够实现数据类型的转换，结合四则运算体会如何编程。

  • 体会现实世界中的事物与计算机的关系
  • 理解什么是数据并知道数据的分类
  • 理解变量存储数据的“容器”
  • 掌握常见运算符的使用，了解优先级关系
  • 知道 JavaScript 数据类型隐式转换的特征

一、介绍

掌握 JavaScript 的引入方式，初步认识 JavaScript 的作用

1.1 引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部形式

通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>
外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！');

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

1.2 注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 // 注释单行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>
多行注释

使用 /* */ 注释多行代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>

注：编辑器中单行注释的快捷键为 ctrl + /

1.3 输入和输出

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容');
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
     let name = prompt("请输入您的姓名：");
  </script>
</body>
</html>
1 2 3
image-20220701114256239 image-20220701114306387 image-20220701114319579

二、变量

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

2.1 关键字

JavaScript 使用专门的关键字 let 和 var 来声明（定义）变量，在使用时需要注意一些细节：

以下是使用 let 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 不允许重复声明
  3. 允许同时声明多个变量并赋值
  4. JavaScript 中内置的一些关键字不能被当做变量名

以下是使用 var 时的注意事项：

  1. 允许声明和赋值同时进行
  2. 允许重复声明
  3. 允许同时声明多个变量并赋值

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

三、数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

注：通过 typeof 关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1);
  </script>
</body>
</html>

3.2 字符串类型

通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

  1. 无论单引号或是双引号必须成对使用
  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已
  3. 必要时可以使用转义符 \，输出单引号或双引号
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明'; // 使用单引号
    let gender = "男"; // 使用双引号
    let str = '123'; // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = ''; // 这种情况叫空字符串
		
    documeent.write(typeof user_name); // 结果为 string
    documeent.write(typeof gender); // 结果为 string
    documeent.write(typeof str); // 结果为 string
  </script>
</body>
</html>

3.3 布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

3.4 undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp); // 结果为 undefined
  </script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

3.4 模板字符串

image-20220702133707816

image-20220702134418238

四、类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

4.1 隐式转换

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13; // 数值
    let num2 = '2'; // 字符串 

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2);

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2);
 
    let a = prompt('请输入一个数字');
    let b = prompt('请再输入一个数字');

    alert(a + b);
  </script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

image-20220703110703327

4.2显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12';
    let f = 8;

    // 显式将字符串 12 转换成数值 12
    t = Number(t);

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f); // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello';
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str));
  </script>
</body>
</html>

image-20220703110756871

转换为数字：

<!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>Document</title>
    <style>
        div {
            width: 100px;
        }
    </style>
</head>

<body>
    <script>
        // let num = '10'  
        // Number(数据)
        console.log(Number('10.01'))
        // 转换为数字型，只保留整数，没有四舍五入
        console.log(parseInt('10'))
        console.log(parseInt('10.111'))
        console.log(parseInt('10.999px'))
        // 转换为数字型，会保留小数
        console.log(parseFloat('10.999'))

        // 区别：
        // 1.Number() 只能放数字类型的字符，不能放abc这样的
        // 否则返回的是 NaN   not A number
        console.log(Number('10.01abc'))
        // parseFloat 经常用于过滤px单位
        // console.log(parseFloat('10.01abc'))
        console.log(parseFloat('100px'))
        // console.log(parseFloat('px100px'))

    </script>
</body>

</html>

运算符

主要是一些运算符，循环，分支结构等

一、运算符

1.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>Document</title>
</head>

<body>
    <script>
        // 逻辑与 一假则假
        // console.log(true && true)
        // console.log(false && true)
        // 逻辑或  一真则真
        // console.log(false || true)
        // console.log(false || false)
        // 逻辑非  取反
        // console.log(!true)
        // console.log(!false)

        // 有5个值是当 false 来看的   其余是真的
        //  false   数字0   ''  undefined   null   


         function fun(x, y) {
             x = x && 1
            y = y && 1
			
			console.log(x)  //undifined
			console.log(y) //undifined
            console.log(x + y)
        }
        fun()


    </script>
</body>

</html>

值得注意的是 ===与 ==的区别：

  • ===，要求数据类型和值必须一样，开发一般都用这个
  • ==，只要求值一样，不管数据类型

image-20220703232823270

image-20220703233952661

二、运算符优先级

image-20220704000700278

三、语句

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>Document</title>
</head>

<body>
    <script>
        // 1. 用户输入时间 等我们学api 自动获取时间
        let time = prompt('请输入小时：')
        // 2. 多分支判断
        if (time < 12) {
            document.write(`上午好，好好工作`)
        } else if (time < 18) {
            document.write(`下午好，好好工作`)
        } else if (time < 20) {
            document.write(`晚上好，好好加班`)
        } else {
            document.write(`夜深了，头发还有吗？`)
        }

        // 12 - 18   下午
        // 我们输入的时间 要大于12 并且小于 18 算下午
        // time >12 && time < 18
    </script>
</body>

</html>

3.2 三目运算符

image-20220713140533332

此为 `第二个`

3.3 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>Document</title>

</head>

<body>
    <script>
        switch (2) {
             // 全等匹配
            case 1:
                alert(1)
                break
            case 2:
                alert(2)
                break
            case 3:
                alert(3)
                break
            default:
                alert('没有数据')

        }

    </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>Document</title>
</head>

<body>
    <script>
        // 1. 用户输入数字   还有一次 运算符
        let num1 = +prompt('请您输入第一个数:')
        let num2 = +prompt('请您输入第二个数:')
        let sp = prompt('请您输入+ - * / 运算')
        // 2. 根据不同的运算符计算不同的结果 switch
        switch (sp) {
            case '+':
                alert(`您选择的是加法，结果是: ${num1 + num2}`)
                break
            case '-':
                alert(`您选择的是减法，结果是: ${num1 - num2}`)
                break
            case '*':
                alert(`您选择的是乘法，结果是: ${num1 * num2}`)
                break
            case '/':
                alert(`您选择的是除法，结果是: ${num1 / num2}`)
                break
            default:
                alert(`你输了啥？ 请输入+ - * / `)
        }
    </script>
</body>

</html>

3.5 循环

  • while

    <!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>Document</title>
</head>

<body>
    <script>
        while (true) {
            let str = prompt('如果是我DJ，你还爱我吗?')
            if (str === '爱') {
                alert('我也爱你啊~~')
                break
            }
        }
    </script>
</body>

</html>

  • for

    <!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>Document</title>
</head>

<body>
    <script>
        // for (起始条件; 退出条件; 变化量) {
        //     循环语句
        // }
        for (let i = 1; i <= 10; i++) {
            document.write(`我今年${i}岁了 <br>`)
        }
        // 1. let i = 1 只会执行一次
        // 2. 剩下的就是  三者循环
    </script>
</body>

</html>

    image-20220722210528538

案例：99乘法表

<!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>Document</title>
  <style>
      div {
          display: inline-block;
          height: 25px;
          line-height: 25px;
          margin: 5px;
          background-color: pink;
          padding: 0 10px;
          border: 1px solid hotpink;
          color: deeppink;
          border-radius: 5px;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
          text-align: center;
      }
  </style>
</head>

<body>

  <script>
      // 外层打印几行
      for (let i = 1; i <= 9; i++) {
          // 里层打印几个星星
          for (let j = 1; j <= i; j++) {
              // 只需要吧 ★ 换成  1 x 1 = 1   
              document.write(`

              <div> ${j} x ${i} = ${j * i} </div>
              
              `)
          }
          document.write('<br>')
      }
  </script>
</body>

</html>

image-20220722213404672

数组

一、操作数据

1.1 增加数据

image-20220722215153631 image-20220722215308758

1.2 删除数据

image-20220724082656161 image-20220724082738500 image-20220724082830486

函数

1.1 函数

image-20220724171028447

<!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>Document</title>
</head>

<body>
    <script>
        // 求一个数组最大值和最小值
        function getArrMaxAndMin(arr) {
            // 1.声明一个最大值变量和最小值变量
            let max = min = arr[0]
            // console.log(max, min)
            // 2. 遍历循环 得到最大值和最小值
            for (let i = 1; i < arr.length; i++) {
                if (max < arr[i]) {
                    max = arr[i]
                }
                if (min > arr[i]) {
                    min = arr[i]
                }
            }
            // 3. 返回值最大值和最小值
            return [max, min]
        }
        let value = getArrMaxAndMin([1, 5, 8, 2, 0])
        // value = [8,0]
        document.write(`数组的最大值是: ${value[0]}, 数组里面的最小值是： ${value[1]}`)

    </script>
</body>

</html>

1.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>Document</title>
</head>

<body>
    <button>点击我</button>
    <script>
        let num = 10
        // 函数表达式
        let fn = function () {
            console.log(111)
        }
        fn()
        // let fn = function (x, y) {
        //     console.log(x + y)
        // }
        // fn(1, 2)
        let btn = document.querySelector('button')
        // btn.onclick = function () {
        //     alert('月薪过万')
        // }
        btn.addEventListener('click', function () {
            alert('月薪过10万')
        })
    </script>
</body>

</html>

1.3 立即执行函数

image-20220725164246067 image-20220725164314345

1.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>Document</title>
</head>

<body>
    <script>

        // 1. 实参个数少于形参   返回的结果 NaN
        function f1(x, y) {
            // x = 1 
            // y = undefined
            // 1 + undefined  =  NaN
            console.log(x + y) // NaN
        }
        f1(1, 2)
    
        // 2. 实参个数大于形参   非诚勿扰
        function f2(x, y){
            console.log(x + y) // 3
        }
        
        f2(1, 2, 3)

        function fn() {
            // arguments 函数内有效   表现形式 伪数组 
            // 伪数组 比真数组 少了一些 pop()  push()  等方法 
            console.log(arguments) //  [1,2,3]
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            console.log(sum) // 6sd
        }

        fn(1, 2, 3, "sd ")
 
    </script>
</body>

</html>

对象

一 、对象

1.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>Document</title>
</head>

<body>
    <script>
        // 对象是有属性和方法组成的，那么属性和方法都要写在对象里面
        let ldh = {
            // 属性
            uname: '刘德华',
            sex: '男',
            // 方法   方法名: function(){}
            sing: function () {
                console.log('唱歌')
            },
            dance: function (s) {
                console.log(s)
            }
        }

        // 使用属性
        console.log(ldh.uname)
        console.log(ldh['sex'])

        // 外部使用   对象.方法名()
        ldh.sing()
        ldh.dance('恭喜发财')
    </script>
</body>

</html>

1.2 增删改查

image-20220726110746850

1.3 遍历对象

image-20220726110936614

优雅的表格

<!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>
        table {
            width: 600px;
            text-align: center;
            margin: auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        caption {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        tr {
            height: 40px;
            cursor: pointer;
        }

        table tr:nth-child(1) {
           background-color: #ddd;
        }

        table tr:not(:first-child):hover {
           background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>学生信息</h2>
    <p>将数据渲染到页面中...</p>

    <script>
        // 定义一个存储了若干学生信息的数组
        let students = [
            { name: '小明', age: 18, gender: '男', hometown: '河北省' },
            { name: '小红', age: 19, gender: '女', hometown: '河南省' },
            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
            { name: '小丽', age: 18, gender: '女', hometown: '山东省' },
            { name: '晓强', age: 18, gender: '女', hometown: '山东省' }
        ]

        // 第一步 打印表格的头部和尾部
        document.write(`
        <div style="text-align:center">
         <table>
            <caption>学生列表</caption>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>家乡</th>
            </tr>
        `)
        // 中间遍历行数  原则就是有几条数据，我就遍历几次

        for (let i = 0; i < students.length; i++) {
            document.write(`
            <tr>
                <td>${i + 1}</td>
                <td>${students[i].name}</td>
                <td>${students[i].age}</td>
                <td>${students[i].gender}</td>
                <td>${students[i].hometown}</td>
            </tr>
            `)
        }

        // 尾部
        document.write(`
         </table></div>
        `)
    </script>
</body>

</html>

1.4 随机数公式

image-20220726165210452
posted @ 2022-07-26 17:19  CuriosityWang  阅读(47)  评论(0)    收藏  举报