多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[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)