所以到底什么是JavaScript呢？

JavaScript（缩写：JS）是一门成熟的动态编程语言。当应用于 HTML 文档时，它可以在网站上提供动态交互性。它是 Mozilla 项目联合创始人， Mozilla 基金会和 Mozilla 公司的 Brendan Eich 发明的。

JavaScript 是非常通用的。你可以从简单的交互，比如轮播、相册、浮动布局和按钮点击事件做起。随着你学习的深入，你可以创建游戏、二维和三维动画、数据库驱动的综合应用程序，以及更多！

JavaScript 本身是相当简洁却非常灵活的。开发者们在 JavaScript 核心之上编写了非常多的工具，从而花最小的代价获得大量额外的功能。这些功能包括：
第三方 API 允许开发者将来自其它内容提供者，如 Twitter 或 Facebook ，的功能整合到自己的网站里

浏览器应用编程接口 (API) 。API 内置于浏览器中，它们提供像动态编写 HTML 和设置 CSS 样式，采集并操控用户摄像头的数据流和生成三维图像与音频样本等功能。

你可以在你的 HTML 里应用第三方框架和库以快速构建网站和应用

一个示例：通常开始于 “Hello，World”

1.首先，前往你的测试目录并创建一个叫做 scripts 的文件夹。然后在这个文件夹下创建一个新的 base.js 文件并保存。

2.接下来，打开你的 index.html 文件，在闭合标签之前输入这一行代码：

<script src="scripts/main.js"></script>

3.这基本上与引入 CSS 的元素功能相同——它将 JavaScript 引入了页面，所以它将影响 HTML （包括 CSS 和其它页面上的其它任何内容）。

4.现在将下面的代码添加到 base.js 文件中:

var myHeading = document.querySelector('h1');myHeading.textContent = 'Hello world!';

5.最后，确保 HTML 和 JavaScript 文件已经保存好，然后用浏览器打开 index.html。你应该看到如下内容:
在这里插入图片描述
提示：我们之所以将 script> 元素放在 HTML 文件底部，是因为浏览器会按照代码在文件中的顺序解析 HTML。如果应该要影响下面 HTML 的 JavaScript 先被加载，那么它可能由于 HTML 尚未被加载而失效。所以将 JavaScript 代码放在靠近 HTML 页面底部的位置是通常最好的选择。

那么发生了什么呢？

你的标题通过 JavaScript 被更改为了 “Hello world!” 。我们首先使用一个叫做querySelector() 的函数来获取标题，然后将其储存在一个叫 myHeading 的变量中。这与我们使用 CSS 选择器进行的操作非常相像。如果你想对某个元素进行操作，首先你得先选择它。

之后我们将 myHeading 变量的属性 textContent （代表这个标题的内容）赋值为 “Hello world!” 。
提示：以上两个用到的特性都是文档对象模型 (DOM) API 的一部分，它可以使你控制文档。

语言基础速览

让我们来解释一下 JavaScript 这门语言的一些核心特性，以便让你们更好地了解它是怎么运作的。更棒的是，这些特性对所有编程语言来说都很常见。如果你能够掌握这些基础，你就能更好地在编程的世界里徜徉！

变量

变量是你存储值的容器。要声明一个变量你需要首先使用关键字 var ，然后输入任何你想要的名称

var myVariable;

提示：行末的分号表示语句结束，不过这个分号只有在单行内需要分割语句时才是必须的。然而，一些人认为在每个语句后面加分号是一种好的风格。这里为你提供了更多关于是否应该加分号的规则 — 查看 Your Guide to Semicolons in JavaScript 获取更多细节。
关于变量命名规则点击这里：
定义一个变量之后，你可以赋予它一个值：

var myVariable = 'Bob';

你可以通过变量名称读取变量的值：

var myVariable = 'Bob';
myVariable = 'Steve';

还可以更改变量的值。

数据类型

在这里插入图片描述

注释

多行注释与单行注释

/*
Everything in between is a comment.
*/
// This is a comment

运算符

运算符是一个根据两个值（或变量）产生结果的数学符号。在下面的表格里你可以看到一些最简单的运算符，后面的示例你可以在浏览器控制台里尝试一下。在这里插入图片描述
更多的表达式与运算

条件句

条件句是能够让你测试一个表达式是否返回 true 然后根据结果运行不同的代码的代码结构。一个常用的条件句形式是 if … else 语句。下面是一个例子：

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

if ( … ) 里面的表达式就是测试——这里使用了（上面所提到的）相等运算符来比较变量 iceCream 与字符串 chocolate 是否相等。如果返回 true，运行第一块代码；如果返回 false，跳过第一块直接运行 else 之后的第二块代码。

函数

函数是一种封装你想重复使用的功能的方法，这样你就可以需要使用其中的功能的时候通过函数名称来调用函数，而不用老是重复写下整段代码。你在上面已经见过一些函数了，比如：
document.querySelector 和 alert 是浏览器内置的，你可以在任何时候使用。

如果你看到一些东西长得像变量名但是有括号——()——在后面，这可能就是一个函数。函数通常包括参数——一些必要的数据。它们在括号内部，如果有一个以上参数则使用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，但是我们需要给函数提供一个字符串作为参数以告诉函数应该在警告框里写什么。

好消息是你可以定义你自己的函数——在下一个例子里我们会写一个简单的需要两个参数来做乘法运算的函数。

function multiply(num1,num2){
		var result = num1*num2
		return result
	}	
	var sum = multiply(3,4);
	alert(sum);

在这里插入图片描述

事件

你需要使用事件在网页上创建真正的交互——事件是能够捕捉浏览器操作并且允许你运行代码进行响应的代码结构。最明显的事件是点击事件，它会在鼠标点击什么的时候被浏览器唤醒。为了演示这个操作，尝试将下面的代码输入到控制台，然后在当前网页点击：

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

在这里插入图片描述
我们有许多方法来将一个事件与元素绑定。在这里我们选择了元素，然后将 onclick 属性设置成包含单击时我们想要运行的代码的匿名函数
那么，示例操作一下，准备两张照片，放在images文件夹下面，代码示例：

var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute('src', 'images/firefox2.png');
    } else {
      myImage.setAttribute('src', 'images/firefox-icon.png');
    }
}

没有点击

首先，找到另一个你想用来装饰你的网页的图片。确保它与你第一张图片尺寸相同，或者尽可能相似。
将图片保存在 images 文件夹。
打开 base.js 文件，输入下面的 JavaScript 代码 ( 如果你的 “hello world” JavaScript 仍然在这个文件中，删除它们 )
在这里，我们将元素的引用存放在 myImage 变量里。接下来，我们将这个变量的 onclick 事件与一个匿名函数绑定。选择，每次图片被点击时：

我们获取这张图片的 src 属性的值。
我们使用一个条件句来判断 src 的值是否等于原始图像的路径:
如果是，我们将 src 的值改为第二张图片的路径，强制在内读取另一张图片。
如果不是（意味着它肯定已经被更改过）, 我们把 src 的值重新设置为原始图片的路径，即原来的状态。

添加个性化的欢迎信息

接下来我们会添加另一段代码，在用户初次进入站点时将网页的标题改成一段个性化的欢迎信息。欢迎信息会由 Web Storage API 保存下来，即使用户关闭页面之后再重新打开此页面，我们仍然可以得到之前的信息。我们还会添加一个选项来在必要的时候改变用户并且改变欢迎信息。
在 index.html 里，在

<button>Change user</button>

在js代码中，添加：

var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');
function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = '大傻逼, ' + myName;
}
myButton.onclick = function() {
  setUserName();
}
if(!localStorage.getItem('name')) {
	var storedName = localStorage.getItem('name');
  	myHeading.textContent = 'Mozilla is cool, ' + storedName;
} else {
	setUserName();
}}}

JavaScript基础概述