[TOC]
# 1. 变量的定义与语法
## 案例1:变量类型及定义
>![](https://img.kancloud.cn/6e/70/6e7078b98a8a36cf1584c31eefd3694a_526x435.png)
> 定义了变量但是没有赋值**undefined**
> 定义了对象但是可以设置为**null**表示空对象
### 试一试
![](https://img.kancloud.cn/0d/6d/0d6da420ec2739908ee7ea2ac180982d_486x262.png)
> 比一比、试一试
```
var a = ();
var b=[];
var c = {};
```
### 扩展:变量的类型的判断
| 方法名 | 描述 |
| --- | --- |
| **typeof X** | 判断X的所属类型 |
```
typeof 1
typeof '1'
typeof true
typeof ……
```
**typeof的返回值说明**
| 类型 | 说明 |
| --- | --- |
| number | 数字 |
| String| 字符串 |
| Boolean| 布尔|
| function| 函数 |
| object| 对象|
| undefined| 未定义|
## 案例2:变量作用域与提升
* [ ] 变量可以不声明,直接使用
* [ ] 不声明的变量默认为全局变量
![](https://img.kancloud.cn/ae/45/ae4524813d08c009ab1b4b5ee25279bc_372x371.png)
# 2. JS运算及语法结构
## 案例3:JavaScript运算
* 一元运算
* 算术运算
![](https://img.kancloud.cn/d5/82/d582a61738afde88f44e4f08ec5f66b5_379x204.png)
* 移位运算
* 关系运算
* 布尔运算
![](https://img.kancloud.cn/47/39/473995947ea10097281c76b0d533e330_387x131.png)
* 位操作运算
* 逻辑运算
* 赋值运算
> ## 案例4:JavaScript语句结构
* [ ] **if/else、switch**
* [ ] **for、while、do{}while()**
### 试一试
> 向网页中输出九九乘法表(实验1)
![](https://img.kancloud.cn/5c/ae/5cae09cdbe63811c252cb4e7c3b8453b_487x205.png)
# 3. 基础数据类型
## 案例5:不一样的数字(number)
> 1. 常规十进制
> 2. 以0x开头的十六进制
> 3. 以0开头的八进制
> 4. 添加e的科学计数法
> 5. 当无法计算数值时,结果是**NaN**
> 6. 无穷大**Infinity**
![](https://img.kancloud.cn/56/9e/569ef3beb6ffb25727c018cff00b74ed_399x289.png)
## 案例6:加引号的字符串(string)
![](https://img.kancloud.cn/d1/be/d1bef446d24209ab47a6c28d74a8da2b_474x259.png)
> 转义字符
> 1. 换行`\n`
> 2. 单引号`\'`
> 3. 双引号`\"`
> 4. 反斜杠`\\`
![](https://img.kancloud.cn/f9/d2/f9d2268832b7092cd9e1a0f9a89c5e11_398x157.png)
## 案例7:参与运算的布尔(boolean)
> 1. 取值**true**和**false**
> 2. 必要时,参与运算时,**true视为1,false视为0。**
![](https://img.kancloud.cn/a1/23/a123af3cc22b83965352cf98f105ddf9_394x160.png)
# 4. 基础数据类型的相互转换
| 方法名 | 描述 |
| --- | --- |
| **Number(X)** | 将X转换为number类型 |
| **parseInt(X)** | 解析X字符串并返回一个整数 |
| **parseFloat(X)** | 解析X字符串并返回一个浮点数 |
| **String(X)** | 将X转换为字符串 |
| **Boolean(X)** | 将X转换为Boolean类型 |
## 案例8-1:数字转字符串
![](https://img.kancloud.cn/7e/40/7e40fa4d266c12184d324d078dcef08b_287x279.png)
## 案例8-2:字符串转数字
![](https://img.kancloud.cn/35/ec/35ec5bb13bd57d59c640fb294bcd7dfc_288x299.png)
*****
![](https://img.kancloud.cn/3a/f2/3af24849285eb47c1b0eb9c6c5abc23a_481x143.png)
## 案例8-3:转boolean
```
0 、空串 、null、 undefined 、NaN是false
```
![](https://img.kancloud.cn/c7/0a/c70a07cec7546c2353b3f5b0f2b8d8bc_329x300.png)
## 案例8-4:==判断
![](https://img.kancloud.cn/1d/4b/1d4be1d26870b0340d14615b0d91b671_805x688.png)
![](https://img.kancloud.cn/08/21/08210a6f60880660805ef25828de77ef_516x208.png)
*****
![](https://img.kancloud.cn/f6/e1/f6e135f6b1d7ba3213864d18fe225507_477x495.png)
## 特殊类型:null和undefined
> undefined 未定义
> null 定义为object,但是对象为空
# 5. 函数(function)
## 案例9:函数的定义
![](https://img.kancloud.cn/3e/8c/3e8cb751697f94fd7cf7f42dac1e213d_711x300.png)
## 试一试:输出任意数字乘法表
![](https://img.kancloud.cn/a6/d6/a6d692650193d5a3ab110eb5fca146cb_755x511.png)
## 案例10:函数调用及传参
* 通过函数名调用
* 自执行函数
* 通过事件调用
* 通过链接调用
![](https://img.kancloud.cn/dd/54/dd54b05a869f38a9e7d922a9a6de6960_533x443.png)
> 可以将超链接与事件结合,能够有效隐藏超链接的URL`<a href="#" onclick="test()">test</a>`
> 函数形参不需要var
* 不给参数传递值,参数值为undefined
> 函数返回值需要return
* 使用无返回类型函数给变量赋值,变量值变为undefined
![](https://img.kancloud.cn/22/c5/22c5f665cdc350ac3e7ee19369bb22fe_372x379.png)
- 目录
- 1课程介绍
- 2HTML
- 2.1概述
- 2.2常用标签
- 2.3列表标记
- 2.4超链接与图
- 2.5表格
- 2.6表单
- 2.7frameset
- 3CSS
- 3.1样式表
- 3.2选择器
- 3.3样式
- 3.4浮动和定位
- 3.5布局案例
- 3.6CSS3
- 3.7选修
- 4JavaScript
- 4.1JavaScript基础
- 4.2JavaScript变量及函数
- 4.3JavaScript常见对象及操作
- 4.4JavaScript操作DOM&BOM
- 4.5JavaScript事件响应
- 5Ajax
- 5.1Ajax基础
- 5.2Ajax&XML
- 5.3Ajax&JSON
- 6HTML5
- 6.1新标签及媒体
- 6.2Canvas绘图
- 7jQuery
- 7.1jQuery&DOM
- 7.2jQuery&Ajax
- 7.3jQuery动画