文章目录
- 前言
- 为何学习 JavaScript？
- JS简介
- JavaScript 能够改变 HTML 内容
- JavaScript 能够改变 HTML 属性
- JavaScript 能够改变 HTML 样式 (CSS)
- JavaScript 能够隐藏 HTML 元素
- JavaScript 能够显示 HTML 元素
- JS的使用
- 外部脚本
- 外部 JavaScript 的优势
- 外部引用
- JavaScript 不提供任何内建的打印或显示函数。
- 总结
前言
首先学会写JS，这是你会写抢购脚本的基础
为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
本教程提供关于 JavaScript，以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。
本教程涵盖了 JavaScript 的每个版本：
原始的 JavaScript ES1 ES2 ES3 (1997-1999)
第一个主要修订版 ES5 (2009)
第二个修订版 ES6 (2015)
所有年度增强版 (2016、2017、2018、2019、2020、2021)
JS简介
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：
实例
document.getElementById("demo").innerHTML = "Hello JavaScript";
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么</h2>
<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>
</body>
</html>
JavaScript 能够改变 HTML 属性
本例通过改变 <img> 标签的 src 属性（source）来改变一张 HTML 图像：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>
</body>
</html>
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：
实例
document.getElementById("demo").style.fontSize = "25px";
JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素：
实例
document.getElementById(“demo”).style.display=“none”;
JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素：
实例
document.getElementById(“demo”).style.display=“block”;
JS的使用
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
<!DOCTYPE html>
<html>
<body>
<h2>Body 中的 JavaScript</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
</body>
</html>
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落已被更改。";
}
</script>
</head>
<body>
<h2>Head 中的 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在
实例
<script src="myScript.js"></script>
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
实例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：
实例
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
总结
- JS能改HTML的内容、属性，用getElementById来获取。
- JS能改CSS的属性
- JS能隐藏、显示HTML元素display=“none”，display=“block”
- 在 HTML 中，JavaScript 代码必须位于
<script> 与 </script>标签之间。 - 脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。
- 提示：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
- 外部脚本，在 script标签的 src (source) 属性中设置脚本的名称
<script src="myScript.js"></script> - 注：外部脚本不能包含 script标签。
- 可以使用完整的 URL 来链接至脚本：
<script src="https://www.w3school.com.cn/js/myScript1.js"></script> - JavaScript 能够以不同方式“显示”数据，使用
window.alert()写入警告框
使用document.write()写入 HTML 输出
使用innerHTML写入 HTML 元素
使用console.log()写入浏览器控制台 - 不提供任何内建的打印或显示函数
- 注意：在 HTML 文档完全加载后使用
document.write()将删除所有已有的 HTML ： - 提示：以分号结束语句不是必需的，但我们仍然强烈建议您这么做。
- JavaScript 语句可以用花括号
（{...}）组合在代码块中。 - JavaScript 语句定义两种类型的值：混合值和变量值。
- 混合值被称为字面量（
literal）。变量值被称为变量。 - JavaScript 对大小写敏感
- JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写
- JavaScript 使用 Unicode 字符集。
- 提示：在脚本的开头声明所有变量是个好习惯！
- 您可以在一条语句中声明许多变量。以 var 作为语句的开头，并以逗号分隔变量：
var person = "Bill Gates", carName = "porsche", price = 15000; - 重复声明 JavaScript 变量，如果再次声明某个 JavaScript 变量，将不会丢它的值。
- 提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。
- ES2015 引入了两个重要的 JavaScript 新关键词：
let 和 const。这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。 - 全局（在函数之外）声明的变量拥有
全局作用域。 - 函数作用域，局部（函数内）声明的变量拥有
函数作用域。 - JavaScript 块作用域，通过
var关键词声明的变量没有块作用域。在块 {}内声明的变量可以从块之外进行访问。 - 重新声明变量,使用 var 关键字重新声明变量会带来问题。在块中重新声明变量也将重新声明块外的变量：
- 如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。
- 使用
JavaScript的情况下，全局作用域是JavaScript 环境。 - 在
HTML中，全局作用域是 window 对象。通过 var 关键词定义的全局变量属于window 对象： - 实例
var carName = "porsche";// 此处的代码可使用 window.carName 亲自试一试 - 通过
let 关键词定义的全局变量不属于 window 对象：实例let carName = "porsche";// 此处的代码不可使用 window.carName - 在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：
- 通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（
Hoisting），请学习我们的提升这一章。Javascript 提升
使用 var，您可以在声明之前使用变量 - 通过 const 定义的变量与 let 变量类似，但不能重新赋值：
- 关键字 const 有一定的误导性。ta没有定义常量值。它定义了对值的常量引用。因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。
- 常量对象可以更改,您可以更改常量对象的属性：
- 常量数组可以更改,您可以更改常量数组的元素：
- 在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：
- 提示：如果您对数字和字符串相加，结果将是字符串！
- yield 暂停函数 yield x
- JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
- JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：
- JavaScript 数组用方括号书写。
- JavaScript 对象用花括号来书写。对象
属性是name:value对，由逗号分隔。实例var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}; - 您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型：
typeof运算符返回变量或表达式的类型： - 不幸的是，在 JavaScript 中，null 的数据类型是对象。
typeof function myFunc(){} // 返回 "function"- typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。
- JavaScript 函数通过
function关键词进行定义，其后是函数名和括号 ()。 - 不使用 () 访问函数将返回函数声明而不是函数结果：
- 在 JavaScript 函数中声明的变量，会成为函数的局部变量。
