JavaScript快速入门
1.JavaScript简介
JavaScript（js）是一种具有函数优先特性的轻量级，解释性或者说即时编译型的编程语言。虽然作为web页面的脚本语言被人所熟知，但是它也被用到了很多非浏览器环境中，例如Node.js，Apache，CouchDB，Adobe Acrobat等。进一步说，JavaScript是一种基于原型，多范式，单线程的动态语言，并且支持面向对象，命令式和声明式（如函数式编程）风格。
JavaScript的动态特性包括运行时对象的构造，变量参数列表，函数变量，动态脚本创建（通过eval），对象内枚举（通过for…in和object工具方法）和源代码恢复（JavaScript函数会存储其源代码文本，可以使用toString（）进行检索）。
2.变量（Variable）
变量
变量是存储值的容器，要声明一个变量，先输入关键字 let 或 var ，然后输入合适的名称（驼峰命名法）：
let myVariable;
备注： 行末的分号表示当前语句结束，不过只有在单行内需要分割多条语句时，这个分号才是必须的。然而，一些人认为每条语句末尾加分号是一种好的风格。
备注：几乎任何内容都可以作为变量名。
备注：JavaScript对大小写敏感，所以变量命名中大小写不同对应的变量是不同的。
var 和 let 的区别
首先，var支持变量提升，let并不支持，意思是如果你编写了一个声明并初始化变量的多行JavaScript程序，你可以在初始化一个变量之后用 var 声明它，它仍然可以工作。比如：
myName = 'eason';
function logName() {
console.log(myName);
}
logName();
var myName;
备注：只有在web文档中运行多行 JavaScript 时才会有这种效果，当在 JavaScript 控制台中键入单独的行，这将不起作用。
其次，当你使用 var 时，可以根据需要多次声明相同名称的变量，但是 let 不行。
比如：下面的代码是被允许的：
var myName = 'eason';
var myName = 'andy';
但下面的代码将会报错：
let myname = 'eason';
let myname = 'andy';
综上所述，在代码中，建议尽可能使用 let 对变量进行声明，因为除非你需要用代码支持旧版本的Internet Explorer（它直到第11版才支持 let ，现代的Windows Edge浏览器很好的支持该语法），并没有理由用var。
const
1.const与 let 类似，但不能重新赋值；
2.const只能在声明时赋值；
变量的数据类型
| 变量 | 解释 | 示例 |
|---|---|---|
| String | 字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）扩起来。 | let myVariable = '李雷'; |
| Number | 数字：无需引号。 | let myVariable = 10; |
| Boolean | 布尔值（真 / 假）： true/false 是 JS 里的特殊关键字，无需引号。 | let myVariable = true; |
| Array | 数组：用于在单一引用中存储多个值的结构。 | let myVariable = [1, '李雷', '韩梅梅', 10]; 元素引用方法：myVariable[0], myVariable[1] …… |
| Object | 对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。 | let myVariable = document.querySelector('h1'); 以及上面所有示例都是对象。 |
3.注释
注释内容同很多语言一样分为多行注释和单行注释；
/*
这是多行注释。
这是多行注释.
*/
// 这是单行注释。
4.运算符
运算符是一类数学符号，可以根据两个值（或变量）产生结果。一下表格为一些最简单的运算符。
注：这里说的“两个变量”是不准确的，因为除了二元运算符以外，还有一元运算符和三元运算符，比如取非运算就是一元运算符；
| 运算符 | 解释 | 符号 | 示例 |
|---|---|---|---|
| 加 | 将两个数字相加，或拼接两个字符串。 | + | 6 + 9;"Hello " + "world!"; |
| 减、乘、除 | 这些运算符操作与基础算术一致。只是乘法写作星号，除法写作斜杠。 | -, *, / | 9 - 3;8 * 2; //乘法在 JS 中是一个星号9 / 3; |
| 赋值 | 为变量赋值（你之前已经见过这个符号了） | = | let myVariable = '李雷'; |
| 等于 | 测试两个值是否相等，并返回一个 true/false （布尔）值。 | === | let myVariable = 3;myVariable === 4; // false |
| 不等于 | 和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。 | !== | let myVariable = 3;myVariable !== 3; // false |
| 取非 | 返回逻辑相反的值，比如当前值为真，则返回 false。 | ! | 原式为真，但经取非后值为 false： let myVariable = 3;!(myVariable === 3); // false |
完整运算符列表参见表达式和运算符 - JavaScript | MDN (mozilla.org)
5.条件语句
条件语句是一种代码结构，用来测试表达式的真假，并根据测试结果运行不同的代码。一个常用的条件语句是 if ... else。例：
let iceCream = 'chocolate';
if (iceCream === 'chocolate') {
alert('我最喜欢巧克力冰激淋了。');
} else {
alert('但是巧克力才是我的最爱呀……');
}
if（…）中的表达式进行测试，用等于运算符来比较变量 iceCream 与字符串 ’chocolate‘ 是否相等。如果返回 true ，则运行第一个代码块；如果返回 false ，则跳过第一块直接运行else 之后的第二个代码块。
6.函数（Function）
函数用来封装可复用的功能。
语法
JavaScript通过关键词 function 对其定义，其后是函数名和括号；
函数名可包括字母，数字，下划线和美元符号（$）（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
由函数执行的代码被放置在花括号中：{}
函数参数（Function parameters）是在函数定义中所列的名称。
函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
函数返回
当JavaScript到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript将在调用函数之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者：
例如：
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
x 的结果将等于56；
（）运算符调用函数
在下面的例子中，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
document.getElementById("demo").innerHTML = toCelsius(77);
7.对象
真实生活中的对象，属性和方法
例如：
汽车作为一个对象，所有的汽车拥有同样的属性，但是不同的汽车拥有不同的属性值（911真帅嗷）；
所有的汽车拥有相同的方法，但是方法会在不同时间被执行
JavaScript对象
对比真实生活中的对象，JavaScript里面的对象也包含很多属性和方法；
JavaScript的对象是被命名值的容器；
对象也属于变量，但对象包含了很多的值，值通过键值对的方式来书写：
var car = {type:"porsche",model:"911",color:"white"};
对象属性
（JavaScript对象中的）名称：值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
| 属性 | 属性值 |
|---|---|
| firstName | Bill |
| lastName | Gates |
| age | 62 |
| eyeColor | blue |
对象方法
对象也可以有方法，方法是在对象上执行的动作，方法以函数定义被存储在属性中；
例如：
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
| 属性 | 属性值 |
|---|---|
| firstName | Bill |
| lastName | Gates |
| age | 62 |
| eyeColor | blue |
| fullName | function() {return this.firstName + " " + this.lastName;} |
总之，方法就是作为属性来存储的函数。
this关键字
this是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
- 在方法中，
this指的是所有者对象。 - 单独的情况下，
this指的是全局对象。 - 在函数中，
this指的是全局对象。 - 在函数中，严格模式下，
this是 undefined。 - 在事件中，
this指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
方法中的this
在对象方法中，this 指的是此方法的“拥有者”。
例如：
在方法fullname中，this指的是person对象；
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
单独的this
在单独使用时，拥有者是全局对象，因此this指的是全局对象。
在浏览器窗口中，全局对象是[object window]：
var x = this;
在严格模式中，如果单独使用，那么 this 指的是全局对象 [ object Window]：
"use strict";
var x = this;
函数里的this
默认
在JavaScript函数中，函数的拥有者默认绑定 this ；
因此，在函数中，this 指的是全局对象 [ object Window ]；
function myFunction() {
return this;
}
严格模式
JavaScript严格模式不允许默认绑定；
因此，在函数中使用时，在严格模式下，this是未定义的（undefined）；
"use strict";
function myFunction() {
return this;
}
事件处理程序中的this
在HTML事件处理程序中， this 指的是接受此事件的HTML 元素：
<button onclick="this.style.display='none'">
点击来删除我！
</button>
对象方法绑定
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
总之，this.firstName 意味着this（person）对象的 firstName 属性
显式函数绑定
call() 和 apply() 方法是预定义的 JavaScript 方法。
它们都可以用于将另一个对象作为参数调用对象方法。
在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"Bill",
lastName: "Gates",
}
person1.fullName.call(person2); // 会返回 "Bill Gates"
对象定义
我们定义（创建）了一个JavaScript对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
空格和折行都是允许的。对象定义可横跨多行：
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
};
访问对象属性
有两种方法访问属性：
objectName.propertyName
或者
objectName["propertyName"]
访问对象方法
可以通过如下语法访问对象方法：
objectName.methodName()
注：如果您不使用 () 访问 fullName 方法，则将返回函数定义；
避免声明字符串，数值，布尔值
如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
8.事件
HTML事件可以是浏览器或用户做的某些事情；
下面是HTML的一些例子：
- HTML网页完成加载
- HTML输入字段被修改
- HTML按钮被点击
通常，当事件发生时，用户会被希望做某些事；
JavaScript允许你在事件被侦测时执行代码：
通过JavaScript代码，HTML允许你向HTML元素添加事件处理程序；
使用单引号：
<element event='一些 JavaScript'>
或使用双引号：
<element event="一些 JavaScript">
例如：
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
该例改变了id=“demo” 的元素的内容：
点击前：
点击后：
<button onclick="this.innerHTML=Date()">现在的时间是？</button>
该例改变了自身元素的内容：
点击前：
点击后：
常见的 HTML 事件
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多：
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等
----- |
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
JavaScript 能够做什么？
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多：
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等
9816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
