JavaScript 基本了解
一、JavaScript 简介
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
1、JavaScript：直接写入 HTML 输出流
<script>document.write("<h1>这是一个标题</h1>");</script>
只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
2、JavaScript：对事件的反应
<button type="button" onclick="alert('Holle')">点我</button>
3、JavaScript：改变 HTML 内容
<p id="demo">文本内容</p><script>x = document.getElementById("demo"); //查找元素x.innerHTML="Hello JavaScript"; //改变内容</script>
二、JavaScript 用法
在HTML 中的js脚本必须位于
<script>与`</script>标签之间。脚本可被放置在 HTML 页面的
<body>和<head>部分中。
1、<script> 标签
如需在 HTML 页面中插入 JavaScript，请使用
<script>标签。
<script>和</script>会告诉 JavaScript 在何处开始和结束。
<script>和</script>之间的代码行包含了 JavaScript:
<script>alert("我的第一个 JavaScript");</script>
2、<body> 中的 JavaScript 函数
我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。
该函数会在点击按钮时被调用：
<body><button type="button" onclick="myFun()">点我改变文本内容</button><p id="demo">文本内容</p><script>function myFun(){x = document.getElementById("demo"); //查找元素x.innerHTML="Hello JavaScript"; //改变内容}</script></body>
3、外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：
<!DOCTYPE html><html><body><script src="my.js"></script></body></html>
三、JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制
1、使用 window.alert()
可以弹出警告框来显示运算结果的数据：
<script>alert(5+6);</script>
2、操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<p id="demo">文本内容</p><script>document.getElementById("demo").innerHTML="Hello JavaScript"; //改变文本内容</script>
以上 JavaScript 语句（在 <script> 标签中）可以在 web 浏览器中执行：
document.getElementById(“demo”) 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
innerHTML = “Hello JavaScript” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
3、写到 HTML 文档
<script>document.write("<h1>这是一个标题</h1>");</script>
4、写到控制台
如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 “Console” 菜单。
<script>let a = 5;let b = 6;let c = a + b;console.log(c);</script>
四、JavaScript 变量
变量是用于存储信息的”容器”。
/*声明（创建） JavaScript 变量在 JavaScript 中创建变量通常称为"声明"变量。使用 let 和 const (ES6)在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。*/<script>let a = 5;let b = 6;let c = a + b;console.log(c);</script>
与代数一样，JavaScript 变量可用于存放值（比如 a = 5）和表达式（比如 c = a + b）。
变量可以使用短名称（比如 a 和 b），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
五、JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。
1、JavaScript 字符串
字符串是存储字符（比如 “Holle JavaScript”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：
<script>let str1 = "Holle JavaScript";let str2 = 'Holle JavaScript';</script>
2、JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
<script>let num1 = 10;let num2 = 10.00;</script>
3、JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false。
<script>let x = true;let y = false;</script>
4、JavaScript 数组
<script>let prices = [96, 45, 23, 88];</script>
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。
5、JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
<script>const item1 = {// 属性: 变量在对象中叫属性name: "笔记本电脑",num: 5,price: 6699};</script>
6、Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
<script>let res;//声明变量console.log(typeof res);//undefinedres = null;console.log(typeof res);</script>
六、JavaScript 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1、JavaScript 函数语法
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname(){ // 执行代码}
当调用该函数时，会执行函数内的代码。
可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
<button type="button" onclick="myFun()">点我改变文本内容</button><p id="demo">文本内容</p><script>function myFun(){document.getElementById("demo").innerHTML="Hello JavaScript";//改变文本内容}</script>
2、调用带参数的函数
在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔：
<script>myFunction(argument1,argument2);</script>
当声明函数时，请把参数作为变量来声明：
<script>function myFunction(var1,var2){代码}</script>
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
<script>function myFun(a,b){let c = a + b;console.log(c);}myFun(5,6);</script>
3、带有返回值的函数
有时，我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时，函数会停止执行，并返回指定的值。
语法
<script>function myFunction(){var x=5;return x;}var myVar=myFunction();</script>
上面的函数会返回值 5。
注意： 整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
函数调用将被返回值取代：myVar 变量的值是 5，也就是函数 “myFunction()” 所返回的值。
七、JavaScript 作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
1、JavaScript 局部作用域
变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问。
<script>function myFun(){let a = 5;console.log(a);//5}</script>
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
2、JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
<script>let a = 5;function myFun(){console.log(a);//5}myFun();console.log(a);//5</script>
八、JavaScript 闭包
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。
1、闭包的3个特性：
1..函数嵌套函数
2.函数内部可以引用函数外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
2、闭包的两个条件
1.父子函数
2.自由变量
<script>// 父函数function parent(a) {// 子函数function f(b) {// b 外部参数// c 是私有变量// b,c 都是当前子函数 f 的自有变量let c = 6;// a : 是子函数 f 的自由变量return a + b + c;}// 返回return f;}// 这个时候,在外部调用parent()会返回 一个函数,此时闭包就产生了console.log(parent(5));// parent()调用结束,应该将空间和参数全部释放// 但是父函数parent中的一个变量a,被 它的一个子函数正在引用着,所以不能销毁const f1 = parent(5);console.log(f1);console.log(f1(8));</script>
3、实例
<p>局部变量计数。</p><button type="button" onclick="myFun()">计数</button><p id="demo">0</p><script>let add = (function () {let num = 0;//私有变量// 返回return function(){ return num += 1; }})();function myFun() {document.getElementById("demo").innerHTML = add();}</script>
实例解析
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。
