一、什么是JavaScript？
JavaScript 由Brendan Eich（布兰登·艾克）创建，是一门完备的动态编程语言，可为网站添加交互功能。
JavaScript是一种脚本语言，也就是说它们不需要特殊的准备或编译即可运行。关于脚本语言的具体介绍，可以参考下面这篇文章：什么是脚本语言？
Java与JavaScript没有任何关系。JavaScript 在刚诞生的时候，它的名字叫“LiveScript”。但是因为当时 Java 很流行，所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。
随着 JavaScript 的发展，它已经成为了一门完全独立的语言，并且也拥有了自己的语言规范 ECMAScript。现在，它和 Java 之间没有任何关系。
用JavaScript可以做很多事情，除了使网页更具交互性外，还可以开发桌面端、移动端应用。还可以进行游戏开发、服务器构建等等。关于JavaScript的更多功能介绍可以参考这篇文章：今日的 JavaScript 都能做什么？
JavaScript 代码相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括很多API（浏览器应用程序接口）、第三方框架和库，使用这些都可以使我们的web开发变得高效、快捷。关于JavaScript的优缺点的更多内容可以参考这篇文章：JavaScript的优缺点。
二、体验一下JavaScript
⭐ 第一步：首先我们打开我们的IDE（顺便复习一下HTML基础知识），这里我用的是webstorm，新建一个名为index.html 的HTML文档，在与标签间输入以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DABIN</title>
</head>
<body>
<h2>我是小明</h2>
</body>
</html>
运行后如图所示：
🚩 如果你还没有下载合适的IDE，不要着急，你可以暂时使用在线编辑器来代替。
⭐ 第二步：然后再创建一个名为 main.js 的JavaScript文件。
<script src="scripts/main.js" defer></script>
⭐ 第四步：把下列代码复制到main.js文档中：
let myHeading = document.querySelector('h2');
myHeading.textContent = '我是小刚';
⭐ 第五步：运行项目，看看页面与之前有什么不同 ❔
💡 JavaScript 把页面的标题改成了 “我是小刚” 。接下来我们简单解读一下这段代码：首先引入了一个变量myHeading，然后用querySelector() 函数获取HTML元素h2的内容，并将其储存在变量myHeading中 ,最后用myHeading变量的textContent属性将h2 元素的内容修改为“我是小刚”
如果你的英文水平一般，那么刚刚的这段解释你有可能有几个单词不怎么认识，这里做一下翻译。
| 单词 | 翻译 |
|---|---|
| query | [查询]、询问 |
| querySeletor | [查询选择器] |
| content | 目录、[内容] |
(注：翻译结果参考“网易有道词典”进行修改）
三、变量（Variable）
变量就是是存储“值”的容器。
变量来源于数学，是计算机语言中能储存计算结果或能表示值的抽象概念。
——百度百科
引入变量需要我们使用关键字let或var。如下面这行代码就引入了一个名字为myVariable 的变量：
let myVariable;
🔥 var与let的区别：var关键字与let大体相同。
行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。不过作为入门者，在句末加上分号也是一个好习惯。
并不是所有的名字都适合为变量名，变量名必须符合下面几点要求：
- 变量必须以字母开头，即不能以数字开头
- 变量也能以 $ 和 _ 符号开头（不过最好不要这么做）
- 变量名称对大小写敏感（如：y 和 Y 是不同的变量）
- 变量名可以是中文（但不推荐）
- 变量名不能是关键字（如let）
- 连字符 ‘
-’ 不允许用于变量命名
如果你不确定你的变量名是否规范，你可以访问这个网站来验证一下。
变量值顾名思义就是变量的值。变量的值支持的数据类型大体有这几种：
我们可以通过赋值运算符=为变量赋值。
⭐ 第一步：引入（声明）变量（名）
let message;
⭐ 第二步：为变量赋值
let message;
message ='Hello';
💡 为了编写方便，我们可以把一二步合并，代码如下：
let message = 'Hello!';
我们可以对变量多次赋值：
let message;
message = 'Hello!';
message = 'World!'; // 变量值由hello变为world了！
不过需要注意的是，我们不能多次声明同一变量，如下代码：
let message = "This";
let message = "That"; // 对massage声明了2次
四、注释
类似于HTML与 CSS，JavaScript 中可以添加注释。注释可以分为单行注释与多行注释。
单行注释以"//"开头，如：
// 这是一条注释。
多行注释以“/*”开始，以“*/”结尾，如：
/*
这里的所有内容
都是注释。
*/
五、运算符
运算符是一类数学符号，可以根据两个值（或变量）产生结果。我们从学校里了解到过很多运算符，比如说加号+、乘号*、减号-等。
在正式开始前，我们先了解一下常用术语。
运算元就是运算符应用的对象。比如说乘法运算 5 * 2，有两个运算元：左运算元 5 和右运算元 2。有时候人们也称其为“参数”而不是“运算元”。
💡 一元运算符：如果一个运算符对应的只有一个运算元，那么它是 一元运算符。比如说一元负号运算符-，它的作用是对数字进行正负转换，如以下代码：
let x =1;
x =-x;
alert( x );// -1
💡 二元运算符：如果一个运算符拥有两个运算元，那么它是二元运算符。如减号：
let x = 1, y = 3;
alert( y - x );
// 2
扩展知识
下表中介绍了一些最简单的运算符，可以自己在IDE或浏览器中尝试一下：
运算符种类远不止这些，不过目前上表已经够用了。
六、条件语句
条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。条件语句共有以下几种类型:
常用的条件语句是if ... else,如下面这个代码：
let name ="小明";
if (name === "小明"){
alert("我就是小明")
}else{
alert("我不是小明啊")
}
解释一下这段代码：我们首先声明了一个变量，并让变量值为“小明”，如果变量name的变量值为“小明”，则显示对话框“我就是小明”，否则显示对话框“我不是小明啊”。你可以试着将第二行代码中的“小明”修改一下，看看会发生什么。
if语句后为条件，条件应被括在() 内，然后后面接需要执行的代码，需要执行的代码应被括在{} 内，else后的代码也是同理。
七、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。之前已经涉及过一些函数，
比如：document.querySelector和alert是浏览器内置的函数，随时可用。
如果代码中有一个类似变量名后加小括号()的东西，很可能就是一个函数。函数通常包括参数，参数中保存着一些必要的数据。它们位于括号内部，多个参数之间用逗号分开。
我们也可以定义自己的函数，我们使用函数声明创建函数。比如下面这段代码：
function number(num1, num2) {
let result = num1 + num2;
return result;
}
function关键字首先出现，然后是函数名，然后是括号之间的参数列表（用逗号分隔），最后是花括号之间的代码（即“函数体”）。
这里我们就定义了一个名为number的函数，该函数有2个参数——num1和num2。这里我们又引入了一个新变量“result”，变量值为num1与num2这两个参数相加。最后返回变量“result”的值。
简单的说就是：我们定义了一个新函数，函数名为“number”，函数作用是让两个数相加。
我们要使用函数，我们只需像使用alert()函数一样即可。 先输入函数名称，再输入() ，然后再括号内输入相关参数即可。如以下代码：
function number(num1,num2){
let result = num1 + num2
return result
}
let display= number(2,3)
alert (display)
你可以试着解读一下这段代码。
八、事件
事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。 可尝试将下面的代码输入到控制台，然后点击页面的任意位置：
let myHTML = document.querySelector('html');
myHTML.onclick = function() {
alert('别戳我，我怕疼。');
};
💡 Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
💡 querySelector() 函数
该函数用于选用文档中匹配指定HTML选择器的一个元素。其语法为：document.querySelector(HTML selectors)
在这里为了便于理解，我们可以简单的将 document.querySelector('html')看做成一个函数。
这句代码第一行就是选用了html这个元素。
💡 onclick事件
onclick事件就是用户点击了 HTML （如html、p）元素。
💡 匿名函数function()
匿名函数就是没有名字的函数。你仔细观察一下这段代码：我们定义了一个函数，这个函数要执行的语句在{}内，但是这个函数没有名字。
🔥 前面的几个说明看不懂没关系，这几句话能看懂就可以了：我们定义了一个变量，这个变量的内容就是html元素，当用户点击这个元素（也就是这整个页面）时，触发了这个匿名函数，浏览器会执行这个匿名函数内的代码。
我们可以让这段代码更简洁一些，就如这样：
document.querySelector('html').onclick = function() {
alert('别戳我，我怕疼。');
}
现在你已经具备了一些 JavaScript 基础，下节课让我们为网页添加一些更酷的特性：图像切换器与用户切换欢迎页面。
文章创作不易，如果你喜欢本文，别忘了点个赞哦！如本文有不当之处，敬请指出。
文章原创，侵权必究
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
