JavaScrpit基础语法

ppgo8 于 2023-03-09 发布

JavaScript基础语法

[TOC]

导读

image-20230309091316692

image-20230309092221914

课后需要强化练习：

客观题扫码即可image-20230309092607005

JavaScript简介和体验

JavaScrpit是什么？

  1. JavaScript是什么？

    是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

    (不像Java一样，运行需要配置各种环境。JS只需要浏览器)

  2. 作用

    • 网页特效

      监听用户的一些行为让网页作出对应的反馈

    • 表单验证

      针对表单数据的合法性进行判断

    • 数据交互

      获取后台数据，渲染到前端

    • 服务端编程（node.js）

      image-20230309095833528

  3. JavaScript的组成？

    image-20230309095945392

    • ECMAScrpit

      规定了JS基础语法核心知识。

      比如：变量、分支语句、循环语句、对象等等

    • Web APIs

      DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作

      BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

权威网站：MDN，直接百度MDN进去网页即可。

总结

JavaScript书写位置

1.内部JavaScript

​ 直接写在html文件里，用script标签包住

​ 规范：script标签写在</body>标签上面

注意事项:

​ 将<script>放在HTML文件的底部附件的原因是：浏览器会按照代码在文件中的顺序加载HTML。如果先加载JS期望修改其下方的HTML，那么它可能由于HTML尚未加载而失效。因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

2.外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中

image-20230309102636467

注意事项

3.内联JavaScript

代码写在标签内部

语法：

注意：此处作为了解即可，但是后面vue框架会用这种模式

image-20230309103134594

总结

JavaScript怎么写

注释

结束符

符号：使用英文的分号(;)，代表语句结束

实际情况：实际开发中，可写可不写，浏览器引擎会自动推断JS结束的位置

现状：实际开发中，越来越多人主张，省略结束符

**约定：为了风格统一，要么全加，要么全都不加**

总结

1.注释的两种方式

​ 单行注释

​ 多行注释

2.javas结束符注意点

输入和输出语法

目标：能写出常见JavaScript输入输出语法

什么是语法：

输出语法

输出：浏览器显示出来给用户

语法1：

document.write('要输出的内容')

作用：向body内输出内容，写入HTML文档

注意：如果输出的内容写得是标签，也会被解析为网页元素，而不是纯文字

语法2:

document.getElementByID("id名").innerHTML = "要修改的内容"

作用：内容写入到HTML元素

语法3：

alert('要输出的内容')

作用：页面弹出警告对话框

语法4：

console.log('控制台打印')

小技巧：直接在vscode中写log，然后选择第二个

作用：控制台输出语法，程序员调试使用

输入语法

输入：用户写入给浏览器，使用变量拿到

语法：

prompt('请输入您的姓名：')

作用：显示一个对话框包含文字信息+输入框；文字信息提示用户输入，输入框输入内容。

展示：

image-20230309113939781

JavaScript代码执行顺序

字面量

在计算机科学中，字面量(literal)是在计算机中描述 事/物。一般称为固定值为字面量。

比如：

总结

1.JavaScript是一门编程语言，可以实现网页交互效果。

2.JavaScript的书写位置？

​ 内部、外部、行内

3.JavaScript的注释

​ 单行注释、多行注释

4.JavaScript的结束符

​ 分号，可加可不加按照团队约定

5.JavaScript输入输出语句

​ 输入：prompt

​ 输出：alert() ,document.write() , console.log()

变量

变量是什么？

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

白话：变量就是一个装东西的盒子

注意：变量本身不是数据，它们仅仅是一个个用于存储数据的容器。可以理解为是一个个用来装东西的盒子。

变量基本使用

变量声明

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

语法

let 变量名

举例

<script>
   // 1.声明一个变量
   let age
   // 2.等号 赋值
   age = 18
</script>

变量赋值

​ 定义了一个变量后，就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

变量名 =  变量值 //等号左右有空格

注意：等号的两侧要有空格

变量初始化

简单点，也可以声明变量同时同时直接赋值。这种操作成为变量初始化

let 变量名 = 值

更新变量

变量赋值后，还可以给它换值。

语法：

变量名 = 新值
// 错误方法
let 变量名 = 新值 // 每个变量只能声明一次,let不允许多次声明一个变量

声明多个变量

想在一个let语句中声明多个变量

let 变量名1 = 值1, 变量名2 = 值2

初始化不建议这么写，提倡每个变量都分开写，一行只有一个变量，语义更好一些。

但是在输出的时候，可以合起来写。

变量的本质

内存：计算机中存储数据的地方，相当于一个空间

变量本质：是程序在内存中申请一块用来存放数据的小空间。通过变量名找到这个空间，变量值存储在这个空间里面。

变量命名规则与规范

规则：必须遵守，不遵守会报错 (法律层面是否合法）

规范：建议，不遵守不会报错，但不符合业内通识 （道德层面）

规则

规范

变量拓展var和let

var现在开发中一般不再使用它，可能会在老版本中看到它

let为了解决var的一些问题

var声明：

思考

1.变量一次能存几个值？

​ 如果想一次存多个值就用数组。

2.如果我想保存一个班里5个人的姓名怎么办？

变量拓展-数组

声明

数组（Array)——一种将一组数据存储在单个变量名下的优雅方式

//专业: 逗号后面添加空格
let 数组名 = [数据1, 数据2, ..., 数据n]
// 示例
let names = ['小红', '小张', '小丽', '小米']

取值方法

取值方法：数组名[索引号]

一些术语

元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

总结

1.数组好处？

​ 数组可以保存多个数据

2.数组字面量用什么表示？

​ 中括号[]

常量

概念：使用const声明的变量称为‘常量’

使用场景：当某个变量永远不会改变时，可以使用const来声明，而不是let

命名规范：和变量一致

常量使用：

// 声明一个常量
const G = 9.8
// 输出这个常量
console.log(G)

注意：常量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要**重新赋值**的数据使用const

数据类型

数据类型分类

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

计算机可以处理大量的数据，为什么要给数据分类？

JS数据类型整体分为两大类

image-20230309183831580

检测数据类型

​ 有时候用户传过来的数据，也不知道是什么类型，所以需要检测。

  1. 控制台看输出的颜色

    蓝色：数字和布尔

    黑色：字符串和未定义

  2. 通过typeof

    关键字检测数据类型

    语法：支持两种语法形式

    // 1.作为运算符
typeof 变量名 // 常用写法
   
// 2.作为函数
typeof(便命令)

类型转换

为什么要类型转换

​ prompt获得的值的类型是全是字符串类型，哪怕用户输入的是数字，也是字符串。此时需要转换变量的数字类型。

​ 通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

隐式转换

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

规则：

缺点：

​ 转换类型不明确，靠经验才能总结

小技巧：

显式转换

​ 编写程序时，隐式转换是不严谨的。为了避免隐式转换带来的问题，通常根据逻辑显示转换数据类型。

实战案例

需求：

image-20230309205339625

输入后效果：

image-20230309205358966

代码

<!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>
        h2 {
            text-align: center;
        }
        table {
            /* 居中对齐 */
            margin: 0 auto;
            /* 文字居中对齐 */
            text-align: center;
        }
        table,
        th,
        td { 
            border: 1px solid #000;
            /* 合并相邻边框 */
            border-collapse: collapse ;
        }
        th {
            /* 不设置具体宽度,防止放不下内容，只设置padding */
            padding: 5px 20px;
        }
    </style>
</head>
    
<body>
    <h2>订单确认</h2>
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>小米手机</td>
            <td id="price">100</td>
            <td id="num">10</td>
            <td id="total">1000</td>
            <td id="address">广州</td>
        </tr>
    </table>

    <script>
        // 1.用户输入
        let price = +prompt('请输入价格:')
        let num = +prompt('请输入数量:') 
        let address = prompt('请输入地址:')
        // 2.计算总额
        // 虽然乘号会自动转换字符串为数字类型,但是为了程序健壮性，还是要设置转换
        let total = price * num 
        // 3.打印内容到元素中
        document.getElementById('price').innerHTML = price
        document.getElementById('num').innerHTML = num
        document.getElementById('total').innerHTML = total
        document.getElementById('address').innerHTML = address
        // 也可以使用documnet.write()打印页面
        // 具体流程：
        // 1.剪切body内全部html标签
        // 2.使用字符串模板,将对应位置的内容改成${}形式即可
    </script>
    
</body>
</html>

效果预览

image-20230309210939806

常见错误

1.image-20230309211236608

2.image-20230309211248290

3.image-20230309211332472

4.

image-20230309211404447

5.