- # JavaScript
- ## 基础知识点
- ### JS 代码如何编写?
1. 将 `js` 代码嵌入到 `html` 网页代码中.
`js` 代码需要写在 `script` 标签当中, 并且 `script` 标签推荐写在 `body` 闭合和 `html` 闭合之间.(虽然说 `script` 标签可以写在网页的任何位置).
> 任何的代码都不推荐放在 `html 文档声明头 ` 的上面, 会导致网页没办法执行 `h5` 的渲染模式.
2. `js` 代码可以单独的创建一个 `.js` 的独立文件, 然后通过 `script` 里面的 `src` 属性来引入.
- ```HTML
- <script src="01.js"></script>
- ```
- ### JS 语句
`js` 语句其实是代码向 ` 宿主环境 ` 发送的命令.
每一条语句后面都最好放上 ` 语句结束符;`.
### 注释
`js` 当中注释分为两种:` 单行注释 `,` 多行注释 `.
单行注释:
- ```JS
- // 注释内容 通常写在代码的上面或者右面
- ```
多行注释:
- ```JS
- /*
- 这里是多行注释
- */
- ```
> 无论是开发什么软件还是使用什么编程语言, 注释都是必不可少的.
### 直接量
在 `js` 当中, 直接使用的量, 我们称之为 ` 直接量 `.
### 表达式
一般情况下, 表达式必须要得到一个 ` 结果 `.
- ```JS
- 10 + 2;
- ```
- ### 输出方式
`js` 代码中输出方式有很多, 其中使用最多的是 `console.log()`, 可以直接输出任何我们想要看到的值, 主要用来进行调试.
- ```JS
- console.log(value);
- ```
除了 `console.log()` 还有 `document.write()` .
> 在 `js` 当中, 名字后面带有括号的, 我们都可以称之为 ` 方法 `, 也称之为 `API`.
### 弹窗
如果你的 `js` 代码的 ` 宿主环境 ` 是浏览器的话, 那么就可以调用浏览器的 API, 使用下面三个弹窗:
- ```JS
- alert();
- confirm();
- prompt();
- ```
demo:
- ```JS
- alert('我是一个 alert 弹窗!');
- confirm('我是 confirm 弹窗');
- prompt('你吃饭了没?');
- ```
- ### 变量
` 表达式 ` 会产生一个结果, 这个结果在 `js` 当中可以称为 ` 数据 `. 为了方便我们后续的使用, 可以用一个 ** 临时 ** 的容器将
这个数据存储起来, 当我们再次需要使用这个数据的时候, 不需要再通过表达式进行第二次的运算, 直接使用这个容器即可.
而这个容器在 `js` 中就是 ` 变量 `.
一个变量的生命周期指的这个变量从被创建 到 被 JS 销毁的周期, 我们就称之为 ` 生命周期 `.
** 如何创建一个变量?**
在 `js` 当中, 可以通过关键字 `var` 来创建一个变量.
```JS
var 变量的名字; // 此时变量仅仅被创建, 但是没有存储数据
var 变量的名字 = 变量的值; // 变量不仅仅被创建了, 而且还被存储数据
```
我们创建一个变量也可以说是声明了一个变量. 我们可以通过 `console.log()` 来查看变量里面存储的具体的数据:
- ```JS
- var num = 10 + 2; // 创建了一个变量, 变量名叫做 num , 并且将数据 10 存储到了变量 num 当中.
- // num 相当于存储了 10+2 这个表达式的结果
- // console.log()里面如果输出的是一段话, 那么这段话外面一定要使用引号
- // 如果 console.log()里面输出的是一个表达式或者变量, 那么就不需要引号.
- console.log("航哥真帅");
- // console.log(航哥真帅); // 此时本条语句会报错, 程序会把航哥真帅当做一个变量
- console.log(num);
- ```
** 什么叫做关键字:**
` 关键字 ` 就是 JS 本身使用的名字, 称之为关键字. 一旦一个词被定性为 ` 关键字 `, 那么我们就不能够使用.
> 临时存储数据使用 ` 变量 `, 而想要永久的存储数据就需要使用 ` 数据库 `.
** 动态类型语言:**
`js` 这门语言当中的变量可以随时的根据需要调整数据和数据类型.
- ```JS
- /*
- 下面是变量应用的具体细节:
- */
- // 声明一个变量叫做 name
- var name;
- // 给变量 name 存储数据
- name = "zhangsan";
- // 给变量 name 存储一个新的数据
- name = "lisi";
- // 上面的代码可以变成下面的样子:
- var name = "zhangsan";
- name = "lisi";
- ```
** 大小写敏感:**
`js` 是一门大小心敏感的语言, 在 `js` 当中, 变量 `a` 和变量 `A` 是两个不同的变量.
- ```JS
- var name = "zhangsan";
- var NAME = "lisi";
- ```
- ### 变量命名规范 -- 标识符
在 `js` 当中, 经常涉及到起名字的问题, 通常情况下遵守的是 ` 标识符 ` 的命名规范, 规范的内容:
```
第一个字符, 可以是任意 Unicode 字母 (包括英文字母和其他语言的字母), 以及美元符号($) 和下划线(_).
第二个字符及后面的字符, 除了 Unicode 字母, 美元符号和下划线, 还可以用数字 0-9.
```
总结起来: 就是开头字母可以是英文, 字母, 下划线,$ 等. 但是不能以数字开头.
- ```JS
- var _name; // 正确的命名规范
- var $age ; // 正确的命名规范
- var 1ppp; // 错误的命名
- ```
> 切记, 命名的时候尽可能的词能达意.
> `js` 当中, 命名的时候仍然可以遵守驼峰命名法.
** 一次性声明多个变量 **
- ```JS
- var name1 = "zhangsan",name2 = "lisi",name3 = "wanglaowu";
- console.log(name1,name2);
- ```
Tip: 当我们声明了一个变量之后, 再次修改这个变量的值时, 不需要在写 `var` 关键字.
如果使用了 `var` 关键字, 那么相当于重新声明了一个变量.
如果是下面的这种情况:
- ```JS
- var x = 1; // x = 1
- var x; // 相当于重新声明的变量 x 无效
- console.log(x); // 1
- ```
那么第二次声明相当于是无效的声明.
### 变量提升
当我们在 `js` 中使用一个未定义的变量, 就会报错:
```
错误信息: Uncaught ReferenceError: x is not defined
```
但是当我们创建一个变量, 并且在变量声明和存储语句之前调用, 就不会报错:
- ```JS
- console.log(x); // undefined
- var x = "supper man!";
- ```
原因是发生了 ` 变量提升 `.
什么是 ` 变量提升?`
当我们 ` 宿主环境 ` 在读取和执行代码之前, 会发生 ` 预解析 `, 也就是提前找到代码中的全部的变量. 将 * 变量的声明操作提升到当前代码的最前面 *.
所以说上面的代码中 `console.log()` 方法其实相当于下面的代码环境:
- ```JS
- var x;
- console.log(x);
- x = "supper man!";
- ```
> undefined 表示未定义. 是一种数据类型里面的数据. 后面会提到.
### 如何获取页面元素?
通过 `document.getElementById()` 这个 API 来获取网页节点.
```HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 获取页面元素
- </title>
- </head>
- <body>
- <div id="d1">
- hello,world!
- </div>
- </body>
- <script>
- // 在当前网页文档中获取元素, 通过元素的 id 值来获取元素
- var oDiv = document.getElementById('d1');
- console.log(oDiv);
- </script>
- </HTML>
```
我们也可以通过 `element.innerHTML` 属性获取元素内的内容.
如果目标元素是 `input`, 我们需要获取的是 `input` 的内部的值, 可以通过 `value` 属性来获取 `input` 当中的值.
```HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 获取页面元素
- </title>
- </head>
- <body>
- <div id="d1">
- hello,world!
- </div>
- <input type="text" id="name" value="张三">
- </body>
- <script>
- // 在当前网页文档中获取元素, 通过元素的 id 值来获取元素
- var oDiv = document.getElementById('d1');
- console.log(oDiv);
- var content = oDiv.innerHTML;
- console.log(content);
- // 获取一个 input 里面 value 的值
- var oInput = document.getElementById('name');
- console.log(oInput);
- var oInput_value = oInput.value;
- console.log(oInput_value);
- </script>
- </HTML>
- ```
- ### 事件三要素
` 事件的目标 `,` 该事件 ` 以及 ` 事件的结果 `.
例如:
```
天黑了, 睡觉关灯. 我要关灯.
做这件事的目标: 开关
该事件: 按开关
结果: 灯灭了
```
回到上面的案例:
```
需求: 当用户输入完用户名之后, 点击按钮我们就可以获取用户输入的数据
目标: 按钮
事件: 点击按钮
后果: 获取用户输入的数据
```
根据上面的需求, 代码如下:
```HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <!-- 获取用户重新输入的值 -->
- <input type="text" id="username" placeholder="请输入用户名">
- <button id="btn">
- 点击
- </button>
- </body>
- <script>
- // 需求: 当用户输入完用户名之后, 点击按钮我们就可以获取用户输入的数据
- // 需要的知识点: 变量 通过 id 获取元素 获取 input 的 value 值 单击事件
- // 找到按钮
- var oBtn = document.getElementById('btn');
- console.log(oBtn); // 打印判断一下是否成功的找到了按钮, 如果没有找到按钮, 则是 null 表示空
- // onclick 表示单击事件 或者说表示单击这样的鼠标操作
- oBtn.onclick = function() {
- // 函数里面写的内容就是后果
- // alert("你好!");
- var oInput = document.getElementById('username');
- // console.log(oInput.value);
- oInput.value = "喜欢就点个关注吧亲!";
- }
- </script>
- </HTML>
```
> 获取 input 里面的 value 值需要使用 value 属性, 获取其他标签里面的内容, 需要使用 innerHTML.
## 数据类型
`js` 当中数据类型分为两类:` 原始数据类型 ` 和 ` 引用数据类型 `.
> ` 原始类型 ` 又称之为 ` 基础数据类型 `, 而 ` 引用数据类型 ` 又称之为 ` 对象类型 `.
** 原始类型:**
- + Boolean
- + Null
- + Undefined
- + Number
- + String
- + Symbol
** 引用数据类型:**
- + Object
- + Array
- + Function
- + Date
- + Math
- + RegExp
** 原始数据类型和引用数据类型的区别:**
二者在内存中存储的位置不同. 具体来讲,` 原始数据类型 ` 存储在栈中. 而 ` 引用数据类型 ` 实际存在内存的 ` 堆 ` 中
. 而如果把某个 ` 引用数据类型 ` 的数据存储到了一个变量当中, 本质上是把数据在 ` 堆 ` 中的位置存储在了变量中, 而
变量存储在内存的 ` 栈 ` 中.
来源: http://www.bubuko.com/infodetail-3053980.html