JS学习-初步
一、JavaScript简介
1、什么是JavaScript
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript 文件后缀是 .js
2、主要功能
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素。
- 在数据被提交到服务器之前验证数据。
- 检测访客的浏览器信息。
- 控制cookies，包括创建和修改等。
- 基于Node.js技术进行服务器端编程。
通俗而言：为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
3、为什么学习JavaScript
借用菜鸟教程的一段内容：
总之，学习 JavaScript 来处理HTML是很重要的一部分内容。
二、基本内容
1、基本语法
- 大小写敏感
- 标识符（变量、函数、属性的名字），第一个字符只能是
字母、_、$之一，采用驼峰大小写格式（第一个字母小写，剩下组成单词的首字母大写，如getName）。 - 变量（松散类型），定义变量时使用
var操作符，注意在函数中使用var定义变量，变量会作为该变量作用域中的局部变量。
2、操作符
- 一元操作符
++ -- - 布尔操作符
&& || ！，注意以下值未假：false full undefined 0 NaN - 算术操作符
+ - * / % - 关系操作符
<> <=>= == === != !==，注意**===**判断值和类型都相同 - 条件操作符
? : - 赋值操作符
= += -+ *= /= %=
三、Javascript用法
HTML 中的 JavaScript 脚本代码必须位于 <script> 与 </script> 标签之间。
JavaScript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。
1、script 标签
在HTML页面中插入 JavaScript，需要使用<script>标签，告知JavaScript的开始与结束。
2、语句
JavaScript语句是发给浏览器的命令，告诉浏览器要做的事情。
通常要在每条可执行语句结尾添加分号。
可以用\反斜杠对代码进行换行（不过运行的时候并没有换行，仍为正常显示）
document.write("你好 \
世界！");
运行如下：
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环 |
| catch | 在try语句出错时执行catch语句块 |
| continue | 跳过循环中的一个迭代 |
| do…while | 执行一个语句块，在条件语句为true时继续执行该语句块 |
| for | 在条件语句为true时，将代码块执行指定的次数 |
| for…in | 用于遍历数组或对象的属性（对数组或对象属性进行循环操作） |
| function | 定义一个函数 |
| if…else | 用于基于不同的条件执行不同的动作 |
| return | 退出函数 |
| switch | 用于基于不同的条件执行不同的操作 |
| throw | 生成错误 |
| try | 实现错误处理，与catch一同使用 |
| var | 声明一个变量 |
| while | 当条件语句为true时，执行语句块 |
3、函数
把JavaScript代码放入函数中，可以在事件发生时调用该函数，这里的函数不介意传递进来多少个参数、传进来参数是什么数据类型，因此可以传递一个、三个甚至不传递参数。
function functionname()
{
// 执行代码
}
原因在于：JavaScript的参数在内部是用一个数组来表示，函数接收到始终是这个数组，不关心数字中包含哪些参数。
4、事件
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件、页面关闭时触发事件、用户点击按钮执行动作 、验证用户输入内容的合法性…
可以使用多种方法来执行JavaScript 事件代码：
HTML 事件属性可以直接执行 JavaScript 代码、 HTML 事件属性可以调用 JavaScript 函数、为 HTML元素指定自己的事件处理程序、阻止事件的发生…
常见的HTML事件的列表：
| 事件 | 描述 |
|---|---|
| onchange | HTML元素改变 |
| onclick | 用户点击HTML元素 |
| onmouseover | 鼠标移动到指定元素时发生 |
| onmouseout | 用户从一个HTML元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
5、对象object
JavaScript 对象是拥有属性和方法的数据，常将数据和方法封装在对象中。
创建对象有如下两种方式，我们常用第二种。
//方式一new
var person = new Object();//生成空对象
person.name = 'Elon Musk';//设置对象的属性
person.age = 46;
person.job = 'SpaceX Rocket';
person.sayName = function(){ //设置对象的方法/函数，注意此处
console.log(this.name);
};
//方式二字面量
var person = {
name: 'Lary Page',
age: 47,
job: 'Software Engineer',
sayName: function(){ //注意此处
console.log(this.name);
}
};
console.log(person.job);
person.sayName();
通过构造函数或对象字面量都可以用来创建单个对象，但这样的方法可能会产生大量重复代码，因此，我们可以使用工厂模式的一种变体来解决这个问题。
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
console.log(this.name);
};
return o;
}
var person1 = createPerson('Steve Jobs',56 , 'Inventor');
var person2 = createPerson('Linus Torvalds', 49, 'Software Engineer');
var person2 = createPerson('Julian Assange', 47, 'Ethical Hacker');
6、数组array
JavaScript的数组与其他语言的数组有较大的区别：
- 其数组的每一项可以保存任何类型的数据
- 数组的大小可以动态调整，随着数据的增加自动增长以容纳新增数据
常用的数组方法：
- 元素联合
var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue
-
堆栈方法
栈是LIFO后进先出的数据结构，项的插入和移除只发生在栈的顶部。
JavaScript为数组提供push()和pop()方法，以便实现类似栈的行为。 -
队列方法
队列是FIFO先进先出的数据结构，队列在列表末端添加项，从列表前端移除项。
JavaScript通过shift()实现这一操作，移除数组中的第一项并返回该项，同时将数组长度减1。
同时还有unshift()方法，能够在数组前端添加任意各项并返回新数组的长度。
push、pop操作在数组末，而 unshift、shift操作在数组头；push、unshift压入而pop、shift弹出。
-
分片方法slice()
基于当前数组中的一个或多个项创建一个新数组。【不改变原始数组】
当只有一个参数时，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项；
有两个参数时，该方法返回起始和结束位置之间的项（不包括结束位置） -
splice方法
此方法可对数组进行三种操作：【会改变原始数组】
1、删除：指定两个参数**（要删除的第一个位置的项和要删除的项数），删除任意数量的项；
2、插入：向指定位置插入任意数量的项，提供三个参数（起始位置、要删除的项数、要插入的项），如splice(2,0,‘abc’,‘aaa’)会从当前数组的位置2插入abc和aaa字符串；
3、替换：向指定位置插入任意数量的项，同时删除任意数量的项，提供三个参数（起始位置、要插入的项数和要插入的任意数量的项）**，当然插入的项数不必与删除的项数相等。
7、链式语法
让每个函数返回 this代表包含该函数的对象，这样其他函数就可以立即被调用。
8、闭包closure
JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。
闭包就是：函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。
闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配当在一个函数内定义另外一个函数就会产生闭包。
当在一个函数内定义另外一个函数就会产生闭包。
function greeting(name) {
var text = 'Hello ' + name; // local variable
// 每次调用时，产生闭包，并返回内部函数对象给调用者
return function() { console.log(text); }//注意该函数无名称，称为匿名函数
}
var sayHello = greeting('Closure');//调用greeting()返回了什么？
sayHello(); // 注意此处的使用方法。通过闭包访问到了局部变量text
执行结果是：Hello Closure
因为sayHello指向了greeting函数对象，sayHello()则对其进行调用
greeting函数执行完毕后将返回greeting函数内定义的匿名函数对象，而该匿名函数仍然可以访问到了定义在greeting之内的局部变量text
注意此时我们已从greeting函数中退出了
四、JavaScript使用误区
可能上述的内容比较简略，但这一部分我觉得还是很有必要浏览一下，有一个印象好知道自己如果代码报错的一些可能。
1、赋值运算符
在if条件语句中使用赋值运算符=会出错，要使用比较运算符==。
在使用 === 时，务必注意数据类型的问题。
2、加法与连接
JavaScript 的加法和连接都使用 + 运算符
加法是两个数字相加。
连接是两个字符串连接。
var x = 10 + 5; // x 的结果为 15
var x = 10 + "5"; // x 的结果为 "105"
3、浮点型数据
JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定。
var x = 0.1;
var y = 0.2;
var z = x + y // z 的结果为 0.30000000000000004
if (z == 0.3) // 返回 false
可以换个思路，通过整数的乘除法解决这个问题：
var z = (x * 10 + y * 10) / 10; // z 的结果为 0.3
4、字符串分行
这一点在前面有提到，在代码撰写分行时，要使用\反斜杠，如果直接回车
会报错。
5、return语句
JavaScript 默认是在代码的最后一行自动结束。
在 JavaScript 中，分号是可选的 。
由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
function myFunction(a) {
var
power = 10;
return
a * power;
}
这个结果返回undefined。
6、Undefined不是Null
在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。
对象只有被定义才有可能为 null，否则为 undefined。
如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。
错误的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正确的方式是我们需要先使用 typeof 来检测对象是否已定义：
if (typeof myObj !== "undefined" && myObj !== null)
五、小结
JavaScript 是 web 开发人员必须学习的 3 门语言中的一门，无论如何总归是要了解与实践的。
JavaScript可以为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
其实自己在JavaScript算不上深入，了解到了它大概的一个面貌，进行了简单的实践操作。在后续实际开发网页的过程中还需要继续学习这一部分。
扫一扫
2554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
