JavaScript内容回顾第一天

内容回顾

一. 邂逅JavaScript

1.1. 计算机语言和编程语言区别

计算机语言

• 前面我们已经学习了HTML和CSS很多相关的知识:

  • 在之前我们提到过, HTML是一种标记语言, CSS也是一种样式语言;

• 他们本身都是属于计算机语言, 因为都在和计算机沟通交流；

  • 在生活中两个人想要沟通, 必然是通过某一种语言(中文/英语/粤语/东北话)

  • 计算机语言就是我们人和计算机进行交流要学习的语言;

• 网页的三大组成部分的另外一个核心就是JavaScript：JavaScript必然也是一种计算机语言;

编程语言

• 事实上, JavaScript我们可以对其有更加精准的说法：一种编程语言.

• 我们先搞清楚计算机语言和编程语言的关系和区别:

  • 计算机语言：计算机语言（computer language）指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。但

​ 是其概念比通用的编程语言要更广泛。例如，HTML是标记语言，也是计算机语言，但并不是编程语言。

• 编程语言：编程语言（英语：programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，

用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所

应当采取的行动。

• 很抽象**,** 我们来说明一下编程语言的特点：

  • 数据和数据结构

  • 指令及流程控制

  • 引用机制和重用机制

  • 设计哲学

• 这样的区分是否有意义呢？我们这里不讨论，我这里只把最专业的定义来告诉大家。

1.2. 编程的语言发展历史

• 机器语言
• 汇编语言
• 高级语言
  • JavaScript

1.3. JavaScript的起源和历史

1.4. JavaScript的组成部分

• ECMAScript 语言层面
  • ECMAScript的历史
• BOM
• DOM

1.5. JavaScript的运行-JS引擎

• 浏览器内核
  • WebCore 渲染相关
  • JS引擎

1.6. JavaScript的应用场景

• atwood定律
• 应用场景
  • web
  • 移动端
  • 小程序
  • PC端
  • 后端

二. JavaScript基础

2.1. 编写JavaScript的位置

• 位置一：HTML代码行内（不推荐）

<a href="javascript:alert('百度一下')" onclick="alert('点击百度一下')">百度一下</a>

• 位置二：script标签中

• 位置三：外部的script文件

  • 需要通过script元素的src属性来引入JavaScript文件

2.2. noscript

• 如果运行的浏览器不支持JavaScript, 那么我们如何给用户更好的提示呢?

  • 针对早期浏览器不支持 JavaScript 的问题，需要一个页面优雅降级的处理方案;

  • 最终， 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容;

• 下面的情况下, 浏览器将显示包含在中的内容:

  • 浏览器不支持脚本;

  • 浏览器对脚本的支持被关闭。

2.3. 编写JavaScript注意事项

• 注意一: script元素****不能写成单标签

  • 在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签；

  • 即不能写成

2.4. 浏览器交互方式

alert: 弹窗查看

console.log: 在浏览器控制台查看

document.write: 在浏览器页面查看

prompt::在浏览器接收用户输入

2.5. chrome调试工具补充

• 在前面我们利用Chrome的调试工具来调试了HTML、CSS，它也可以帮助我们来调试JavaScript。

• 当我们在JavaScript中通过console函数显示一些内容时，也可以使用Chrome浏览器来查看：

• 另外补充几点：

• 1.如果在代码中出现了错误，那么可以在console中显示错误；

• 2.console中有个 > 标志，它表示控制台的命令行

  • ✓ 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码；

  • 如果希望编写多行代码，可以按下shift+enter来进行换行编写；

• 3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程；

2.6. JavaScript注释的写法

• 单行注释 //
• 多行注释 /**/
• 文档注释 /** */

2.7. 插件和配置

• 推荐一个VSCode的插件：（个人经常使用的）

• ES7+ React/Redux/React-Native snippets

• 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句；

  另外在推荐一个配置

• Bracket Pair Colorizer 2，但是该插件已经不再推荐使用了；

• 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果；

• 如何配置呢？

VSCode插件和配置

“editor.bracketPairColorization.enabled”: true,

“editor.guides.bracketPairs”:“active”

三. 变量和数据类型

3.1. 变量的理解

• 程序中数据不断变量
• 盒子, 存储某一个东西

3.2. 变量的定义

• 分成两个步骤:
  • 变量声明
  • 变量赋值
• 其他的定义方法
  • 先声明, 再赋值
  • 同时声明多个变量
• 变量的命名规则
  • 字母/_/%
  • 字母/数字/_/$
  • 不能使用关键字/保留字命名
  • 严格区分大小写
• 变量的命名规范
  • 使用驼峰标识(小驼峰)
  • =左右两边家空格
  • 分号;
  • 见名知意

3.3. 变量的练习

3.4. 变量的注意

• 如果一个变量未声明就使用的话, 那么会报错
• 如果一个变量有声明, 但是没有赋值, 那么值undefined
• 不使用var也可以声明变量(不推荐)

3.5. 认识数据类型-动态类型-常见的数据类型

• 8种
  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Object
  • Bigint
  • Symbol

3.6. typeof操作符

• 获取一个变量的类型
• typeof是操作符, 不是一个函数

• 变量未声明就使用的话, 那么会报错

• 如果一个变量有声明, 但是没有赋值, 那么值undefined
• 不使用var也可以声明变量(不推荐)

3.5. 认识数据类型-动态类型-常见的数据类型

• 8种
  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Object
  • Bigint
  • Symbol

3.6. typeof操作符

• 获取一个变量的类型
• typeof是操作符, 不是一个函数