V2AS问路
JavaScript 基础(1) - 笔记
阅读原文时间：2023年08月09日阅读：1

1 JavaScript基础

1.JavaScript（是什么？）

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

2.作用（做什么？）

  • 网页特效（监听用户的一些行为让网页做出对应的反馈）
  • 表单验证（针对表单数据的合法性进行判断）
  • 数据交互（获取后台的数据，渲染到前端）
  • 服务端编程（node.js）

3.JavaScript的组成（有什么？）

ECMASCript:

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

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

Web APIs:

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

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

权威网站：MDN

JavaScript权威网站：MDN 网页文档 (mozilla.org)

1.2.1 内部 JavaScript

通过 script 标签包裹 JavaScript 代码

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

拓展：alert('你好，js')页面弹出警告对话框

<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>

注意事项：

我们将<script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

如果先加载的JavaScript期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效。

因此，将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。

1.2.2 外部 javaScript

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

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


<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>

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

<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
      alert(666);
  </script>
</body>

1.2.3 内联 JavaScript

代码写在标签内部。

<body>
    <button onclick="alert('逗你玩~~~')">点击我你即可成功</button>
</body>

1.3.1 单行注释

  • 符号：//

  • 作用：//右边这一行的代码会被忽略

  • 快捷键：ctrl + /

1.3.2 块注释

  • 符号：/* */

  • 作用：在/* 和 */ 之间的所有内容都会被忽略

  • 快捷键：shift + alt + a

  • 作用：使用英文的 ; 代表语句结束

  • 实际情况：实际开发中，可写可不写，浏览器（JavaScript 引擎）可以自动推断语句的结束位置

  • 现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

  • 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按团队要求）

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

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

1.5.1 输出语法：

  • 语法1：

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

作用：向body内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

  • 语法2：

    alert('要输出的内容')

作用：也买你弹出警告对话框

  • 语法3：

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

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

1.5.2 输入语法：

语法：

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

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

展示：

JavaScript 代码执行顺序：

  • 按HTML文档流顺序执行JavaScript代码
  • alert() 和 prompt() 它们会跳过页面渲染先被执行

在计算机科学中，字面量（literal）是在计算机中描述 事/物。

比如：

  • 我们的工资：1000 此时 1000 就是 数字字面量
  • '尘缘' 字符串字面量
  • 还有接下来的学习的       [] 数组字面量           {} 对象字面量 等等

2 变量

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）。

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

2.2.1 声明变量：

声明(定义)变量有两部分构成：声明关键字、变量名（标识）。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>

  <script>
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

关键字是 JavaScript 中内置的一些英文词汇（单词或缩写），它们代表某些特定的含义，如 let 的含义是声明变量的，看到 let 后就可想到这行代码的意思是在声明变量，如 let age;

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

2.2.2 变量赋值：

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

注意：是通过变量名来获得变量里面得数据。

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

<script>
    // 声明了一个age变量，同时里面存放了 18 这个数据
    let age = 18
</script>

2.2.3 更新变量：

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

注意：let 不允许多次声明一个变量。

语法：多个变量中间用逗号隔开。

let age = 18, uname = 'chenyuan'

说明：看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

// 多行变量声明有点长，但更容易阅读
let age = 18
let uname = 'chenyuan'

2.3.1 变量案例-弹出姓名

需求：浏览器中弹出对话框：请输入姓名， 页面中输出：刚才输入的姓名。

分析：

  1. 输入：用户输入框：prompt()

  2. 内部处理：保存数据

  3. 输出：页面打印

2.3.2 变量案例-交换变量的值

需求：

有2个变量：num1 里面放的是 10，num2 里面放的是 20

最后变为 num1 里面放的是 20，num2 里面放的是 10

目的：

  1. 练习变量的使用
  2. 为了后面冒泡排序做准备

分析：

  1. 核心思路：使用一个 临时变量 用来做中间存储。

    步骤：

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

变量本质：是程序在内存中申请的一块用来存放数据的小空间。

关于变量的名称（标识符）有一系列的规则需要遵守：

  1. 只能是字母、数字、下划线、$，且不能能数字开头
  2. 字母区分大小写，如 Age 和 age 是不同的变量
  3. JavaScript 内部已占用于单词（关键字或保留字）不允许使用
  4. 尽量保证变量具有一定的语义，见字知义

规范：

  • 起名要有意义
  • 遵守小驼峰命名法
    • 第一个单词首字母小写，后面每个单词首字母大写。例：userName

注：所谓关键字是指 JavaScript 内部使用的词语，如 let 和var，保留字是指 JavaScript 内部目前没有使用的词语，但是将来可能会使用词语。

<script>
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
</script>

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

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

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

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

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

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

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

2.7.1 数组的基本使用

1.声明语法

let 数组名 = [数据1, 数据2, ..., 数据n]


let names = ['小明', '小刚', '小红', '小丽', '小米']
  • 数组是按顺序保存，所以每个数据都有自己的编写。
  • 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推。
  • 在数组中，数据的编号也叫索引或下标。
  • 数组可以存储任意类型的数据。

2.取值语法

数组名[下标]


let names = ['小明', '小刚', '小红', '小丽', '小米']
names[0]  // 小明
names[1]  // 小刚
  • 通过下标取数据。
  • 取出来是什么类型的，就根据这种类型特点来访问。

3.一些术语

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

  • 下标：数组中数据的编号。

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

    let names = ['小明', '小刚', '小红', '小丽', '小米']
    console.log(names[0]) // 小明
    console.log(names[1]) // 小刚
    console.log(names.length) // 5

3 常量

概念：使用 const 声明的变量称为“常量”。

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

命名规范：和变量一致。

const PI = 3.14

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

4 数据类型

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

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

注：通过 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>

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>

  <script>
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

JS是若数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。

Java是强数据类型 例如 int a = 3 必须是整数。

4.1.1 案例：计算圆的面积

需求：对话框中输入圆的半径，算出圆的面积，并显示到页面。

分析：

  1. 面积的数学公式：Π*r²

  2. 转换为JavaScript写法：变量 *r*r

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。

console.log('尘缘' - 2)  // NaN

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN。

console.log(NaN + 2)  // NaN

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

注意事项：

  1. 无论单引号或是双引号必须成对使用。

  2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）。

  3. 必要时可以使用转义符 \，输出单引号或双引号。

    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

字符串拼接：

场景： + 运算符 可以实现字符串的拼接。

口诀：数字相加，字符串相连。

document.write('我叫' + '尘缘')  // 我叫尘缘
let uname = '尘缘'
let song = '忘情水'
document.write(uname + song)  // 尘缘忘情水

4.2.1 模板字符串（ES6）

使用场景：

  • 拼接字符串和变量。

  • 在没有它之前，要拼接变量比较麻烦

    document.write('大家好，我叫' + name + '，今年' + age + '岁')

语法

  • ``（反引号）

  • 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）

  • 内容拼接变量时，用 ${} 包住变量

    document.write(大家好，我叫${name}，今年${age}岁)

4.2.2 案例：页面输出 用户信息案例

需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，我今年xx岁了

let uname = prompt('请输入名字')
let age = prompt('请输入年龄')
// 输出
document.write(`大家好，我是${uname}，我今年${age}岁了`)

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

// JavaScript 好玩不？
let isCool = true
console.log(isCool)

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

let age  // 声明变量但是未赋值
document.write(age)  // 输出 undefined

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

JavaScript 中的null仅仅是一个代表”无“、”空“ 或 ”值未知“ 的特殊值。

let obj = null
console.log(obj)  // null

null 和 undefined 区别：

  • undefined 表示没有赋值
  • null 表示赋值了，但是内容为空

null开发中的 使用场景：

官方解释：把null作为尚未创建的对象。

大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null。

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

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式：

  1. 作为运算符：typeof x（常用的写法）
  2. 函数形式：typeof(x)

换言之，有括号和没有括号，得到的结果是一样的，所以我们直接使用运算符的写法。

5 类型转换

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

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

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

规则：

  • + 号两边只要有一个是字符串，都会把另外一个转成字符串。
  • 除了 + 以外的算术运算符 比如 - * / 等都会把数据转成数字类型。

缺点：

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

小技巧：

  • + 号作为正号解析可以转换成数字型。

  • 任何数据和字符串相加结果都是字符串。



    JavaScript 基础 - 隐式转换


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

补充介绍模板字符串的拼接的使用

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

概念：

自己写代码告诉系统该转换成什么类型 。

转换为数字型

  • Number（数据）

    • 转成数字类型
    • 如果字符串内容里有非数字，转换失败结果为 NaN（Not a Number）即不是一个数字
    • NaN也是number类型的数据，代表非数字

  • parseInt（数据）

    • 只保留整数

  • parseFloat（数据）

    • 可以保留小数

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

练习：输入2个数，计算两者的和，打印到页面中

// 1.用户输入    prompt  得到是字符串类型 要转换为 数字型
let num1 = +prompt('请输入第一个数：')
let num2 = +prompt('请输入第二个数：')
// 2.输出
alert(`两个数相加的和是：${num1 + num2}`)

6 案例：用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

分析：

①：需要输入3个数据，所以需要3个变量来存储 price num address

②：需要计算总的价格 total

③：页面打印生成表格，里面填充数据即可

④：记得最好使用模板字符串

<!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 {
            /* 合并相邻边框 */
            border-collapse: collapse;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }

        th {
            padding: 5px 30px;
        }

        table,
        th,
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <h2>订单确认</h2>

    <script>
        // 1.用户输入
        let price = +prompt('请输入商品的价格：')
        let num = +prompt('请输入商品数量：')
        let assress = prompt('请输入收货地址：')
        // 2.计算总的价格
        let total = 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>${total}元</td>
                    <td>${assress}</td>
                </tr>
            </table>

        `)
    </script>
</body>

</html>

7 常见错误

  • 下面可能出现的原因是什么？

const age
console.log(age)  // 错误 const 必须有赋值操作

分析：

  • const 声明的时候必须要赋值，进行初始化

console.log(age)  //没有age变量

分析：

  • 提示 age 变量没有定义过
  • 很可能 age 变量没有声明和赋值
  • 或者我们输出变量名个声明的变量不一致引起的（简单来说写错变量名了）

let age = 18
let age = 21
console.log(age)  // c错误 let不允许重复声明

分析：

  • 提示 age 已经声明
  • 很大概率是因为重复声明了一个变量。
  • 注意 let 或者 const 不允许多次声明同一个变量

const age = 18
age = 21
console.log(age)  //错误 常量不能被重新赋值

分析：

  • 常量被重新赋值了
  • 常量不能被重新赋值

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章

温故知新，signalR、RSA加密、ConcurrentQueue队列
《深入理解Java虚拟机》读书笔记：方法调用
module.exports和exports，应该用哪个

4

ES集群&kibana安装

5

混合开发模式是否可以在App备案制度下突围

6

继copilot之后，又一款免费帮你写代码的插件

7

Hugging News #0821: 新的里程碑：一百万个代码仓库！

8

StencilJs 学习之 JSX

9

基于drawio构建流程图编辑器

10

图书商城项目练习①管理后台Vue2/ElementUI