循序渐进学编程2.Javascript语法基础

第一个JS程序

浏览器环境中，代码书写位置

1. 直接书写到页面中的script元素的内部
2. 书写到外部的js文件，在页面中引用 [推荐]

代码分离：内容、样式、功能，三者分离，更加容易维护和阅读

• 页面中，可以存在多个script元素，执行顺序从上到下
• 如果一个script元素引用了外部文件，内部不能书写任何代码
• script元素有一个可选的属性，type，该属性用于指定代码的类型，该属性值是MIME格式

认识基本语法

• 语法部分必须都是英文符号
• js代码由多条语句构成，每个语句用英文分号结束（并非强制要求）
• js代码从上到下同步执行
• js语言大小写敏感

认识输出语句

所有的输出语句都不是ES标准。

• document.write，该语句用于将数据输出到页面
• alert，该语句用于将数据用弹窗的形式显示到页面
• console.log，该语句用于将数据显示到控制台

认识输入语句

所有的输入语句都不是ES标准

认识注释

注释：提供给代码阅读者使用，不会参与执行

1. 单行注释 //
2. 多行注释 /* */

在VSCode中，使用快捷键 ctrl + /，可以快速添加和取消单行注释
使用快捷键 alt + shift + a，可以快速添加和取消多行注释

作业

1. 在网页中书写多个script元素，在元素内部书写多种输出语句，然后运行页面查看效果。

2. 将代码提取到一个独立的js文件中，然后在页面中使用。

数据和数据类型

数据：有用的信息

数据类型：数据的分类

本节课学习的是：不同类型的数据的字面量表示法

JS中的数据类型

学习JS中，不同数据类型的数据的书写方式

原始类型(基本类型)

原始类型指不可再细分的类型

1. 数字类型 number

直接书写即可

了解：
数字类型可以加上前缀，来表示不同的进制
0：表示8进制
0x：表示16进制
0b: 表示2进制

2. 字符串类型 string

字符串：一长串文本（0个或多个）

• 单引号 ’
• 双引号 "
• 飘，`，叫做模板字符串

在字符串中，如何表示一个特殊字符，可以使用转义符（\）

3. 布尔类型 boolean

布尔类型用于表达真或假两种状态

• true，表示真
• false，表示假

4. undefined类型

表示未定义，不存在。

只有一种数据书写方式：undefined

5. null类型

表示空，不存在。

只有一种数据书写方式：null

区分某些长数字和字符串: 如果按照数字的方式阅读，则使用数字类型；否则使用字符串类型

引用类型

引用类型有两种：

• 对象 object （事物，东西，玩意儿）

可以认为，对象，是由多个基本类型组合而成。

书写对象的格式见 test6.html

属性：对象的成员

• 函数（后续章节专门讲解）

得到数据的类型

在数据前加上 typeof

js的bug（特征）： typeof null，得到的是object

字面量

直接书写的具体的数据，叫做字面量

作业

将自己作为一个对象，书写合适的对象属性，输出该对象。

变量

什么是变量

变量是一块内存空间，用于保存数据

计算机：CPU、内存、硬盘、输入输出设备
内存：存取速度快，数据易丢失
硬盘：存取速度慢，数据永久保存
计算机程序的运行，仅与内存打交道

如何使用变量

1. 声明（定义）变量

var 变量名;

变量声明后，它的值为undefined

2. 给变量赋值

向变量的内存空间中存放数据

• 变量的值是可变的

变量可以被重新赋值，新的值会覆盖原来的值

• 变量的名称

在开发中，凡是需要自行命名的位置，叫做标识符

标识符的规范：

1） [必]只能以英文字母、下划线、$开头2)[必]其他位置可以出现数字、英文字母、下划线、$
3) [必]不可以与关键字、保留词重复
4) [选]标识符应该做到望文知义
5) [选]如果有多个单词，使用驼峰命名法，单词首字母大写

大驼峰：每个单词首字母大写
小驼峰：除第一个单词外，首字母大写
目前，使用的标识符都是小驼峰命名法。

宽度：width，高度：height，区域：area （quyu）

• 声明和赋值合并

变量的声明和赋值可以一条语句书写。

这是语法糖。

语法糖仅仅是为了方便代码书写或记忆，并不会有实质性的改变。

• 多个变量可以合并声明并赋值

语法糖

• 任何可以书写数据的地方，都可以书写变量

• 若使用一个未声明的变量，会导致错误

例外：使用typeof得到类型时，可以是未声明的变量，得到的结果是undefined

• JS中存在变量提升

所有变量的声明，会自动的提到代码的最顶部

但是，这种提升，不会超越脚本块。

• JS中允许定义多个同名变量

同名变量，提升后会变成一个。

作业

定义三个变量，分别保存用户姓名、用户年龄、用户是否是vip，然后输出它们。

变量和对象

原始类型：number、string、boolean、null、undefined

引用类型：object、function 函数

在变量中存放对象

1. 通过变量，读取对象中的某个属性

变量名.属性名

当读取的属性不存在时，会得到undefined

当读取属性的对象不存在（undefined 或 null）时，程序报错

2. 通过变量，更改对象中的某个属性

当赋值的属性不存在时，会添加属性

3. 删除属性

delete 变量名.属性名;

4. 属性表达式

给属性赋值，或读取属性时，可以使用下面的格式操作

对象变量["属性名"]

• 某些属性名中包含特殊字符

实际上，JS对属性名的命名要求并不严格，属性可以是任何形式的名字

属性的名字只能是字符串，如果你书写的是数字，会自动转换为字符串

全局对象

JS大部分的宿主环境，都会提供一个特殊的对象，该对象可以直接在JS代码中访问，该对象叫做全局对象

在浏览器环境中，全局对象为window，表示整个窗口

全局对象中的所有属性，可以直接使用，而不需要写上全局对象名。

开发者定义的所有变量，实际上，会成为window对象的属性。

如果变量没有被赋值，则该变量不会覆盖window对象上的同名属性。

引用类型

原始类型 引用类型（对象、函数）

原始类型的变量，存放的具体的值

引用类型的变量，存放的是内存地址

凡是出现对象字面量的位置，都一定在内存出现一个新的对象

扩展知识：JS中的垃圾回收
垃圾回收器，会定期的发现内存中无法访问到的对象，该对象称之为垃圾，垃圾回收器会在合适的时间将其占用的内存释放。