JavaScript语言概述笔记和常用工具
本帖最后由 于东亮 于 2018-12-13 12:52 编辑JavaScript是由网景公司发明的，由于浏览器大战，出现了多种版本的JavaScript，例如IE的Jscript，所以不同浏览器会有兼容性问题
JavaScript是由浏览器运行，是一种即时编译的脚本语言，是解释性语言，不需要事先编译，一边编译一边执行的语言，类似其他的脚本语言groory，python，vbscript
Js用途：前端浏览器下执行页面的功能，后端编程（nodejs），嵌入式（ruff）
目前的版本：常用的EcmaScript5（通用，兼容性）,6,7（新出的，兼容性差）
简称ES5 ES6 ES7 也有叫ES2016ES2016+
JavaScript 是面向过程，基于对象的（半面向过程半面向对象）
JavaScript严格区分大小写，每条语句分号结束
使用方式：
内嵌式：在网页的head或body中，<script></script>标签
外联式：单独编写js文件，用<script src=”文件路径”>引入，和css不同，如果在js中使用了相对路径，相对于的不是js文件本身，而是应用了这个js文件的那个html文件的位置
一个网页可以多个<script>标签
程序注释：
单行注释：//
多行注释：/* */
基本输出流语句：
document.write（数据）document.writeln（数据）
如果混合在第一次打开网页的正常文档输出流中执行，那么会和正常文档输出流一起输出
如果单独执行，将会重新渲染网页
提示框语句：
window.alert("这是一个提示");
控制台输出（IE8以下不兼容）
console.log("这是一个控制台输出");
变量：运行期间可变的量 ，使用var关键字声明，例如 var a1 var a1,a2var a1=10,变量声明未赋值，默认值是undefined
变量命名规则：可以以字母下划线$开头，后面可以是字母数字下划线$
不能以数字开头
不能包含特殊字符（下划线和$除外）
不能以关键字命名
大小写字母均可
不能使用中文命名（英文系统无法识别）
常量：也可以叫直接量，运行期间不变的量 例如 “hello”100
常见的标识符命名规范：
驼峰命名：第一个单词全小写，从第二个开始首字母大写，例如 div1，divLeft,divSiderLeft（属性，方法，变量）
帕斯卡命名：每个单词的首字母大写，例如DivDivLeftDivSiderLeft（类）
匈牙利命名法：每个单词用_分隔，例如div_leftdiv_sider_left（样式类名，id名）
变量没有直接使用，默认就是全局变量，属于window对象的，在非严格模式下可以使用
严格模式：为了规范语法，防止语法混乱，出现容易混淆的语法，在js里加入 ‘use strict’;，表格严格模式，不规范的代码，直接报错
数据类型：
五种基本类型（原始类型）
undefined 未定义
null 空对象（空指针） typeof是object类型
number 数字，整数和浮点数都是数字 100 3.14
string 字符串 例如“hello”‘中国’ 常量必须用单引号或双引号包含
boolean布尔型 true真false假
两种引用类型
object 对象类型
function 函数类型
JS是弱类型语言，声明变量不需要声明数据类型，var声明变量可以存储任何类型的数据
typeof 变量：返回数据类型名称
程序 = 数据 + 运算
数学运算符：加+、减-、乘*、除/、取模%、负数-、自增++、自减--
自增和自减前置和后置运算：
混合运算中后置++ --，先做其他运算，再做自增自减运算
混合运算中前置++ --，先做自增自减运算，再做其他运算
赋值运算符 : 赋值=、加法赋值+=、减法赋值-=，乘法赋值*=，除法赋值/=，取模赋值%=
比较运算符: 等于==、严格全等===、不等于!=、非严格全等!==、大于>、小于<、大于等于>=、小于等于<=
比较运算符返回的是布尔值
Js在不同类型比较运算中，会自动转换为统一的类型再比较
严格等于=== 先比较类型，如果类型不一致，直接false，如果类型一致才进行比较
严格不等于!== 先比较类型，如果类型不一致，直接true，如果类型一致才进行比较
JS中以下值也代表假：0空字符串 null undefined，false其他都代表真
NaNjs的一个特殊值，代表非数字 例如 5 / “abc”产生的就是NaN
字符串拼接符：+拼接字符串，在+两边有一个是string类型就会产生拼接运算，把另一个转换为string类型
window.prompt(‘提示文字’) ： 用户输入对话框，返回值是输入内容
逻辑运算符 ：优先级逻辑非>逻辑与>逻辑或
逻辑与&&同真则真，两个表达式都为真才为真，有一个假就为假
逻辑或||有一个真就为真，全为假才为假
逻辑非! 求反真变假假变真
短路运算：
逻辑与&&第一个表达式为假，第二个表达式不执行
逻辑或||第一个表达式为真，第二个表达式不执行
三目运算符：布尔表达式?表达式1:表达式2
布尔表达式为真，执行表达式1，为假执行表达式2
转义字符：\” \’ \\ \r回车符\n换行符\t制表位
根据IEEE标准，浮点运算一定会有误差，避免浮点误差，必须转换为整数再做计算
parseInt(数据)：把字符串转换为整数
isNaN(数据)：检测非数字值，非数字为true 数字为false
函数：最小的程序单元
声明函数基本语法
function 自定义函数名([形参1,形参2,……]) {
语句块代码
]
}
调用函数基本语法
自定义函数名([实参1,实参2,……]);
形参和实参之间是赋值关系
函数默认的返回值是undefined，返回值的作用是把数据返回给调用者，return语句本身可以单独使用，作用是退出function到调用函数代码继续向下执行
Debug调试：打桩（断点调试）
语句加断点：debugger; IE8以上支持
浏览器工具加断点
事件触发程序：单击事件 onclick
通过id获得网页元素：document.getElementById(“元素id”)
函数的递归调用：函数自己调用自己
流程控制语句
条件语句：ifswitch
循环语句：for , while, do while , for in
if条件判断分支语句：根据条件表达式执行不同的分支
语法1：
if(条件表达式) {
条件为真执行的语句块，语句只有一条，{}可以省略
}
语法2：
if(条件表达式) {
条件为真执行的语句块，语句只有一条，{}可以省略
} else {
条件为假执行的语句块，语句只有一条，{}可以省略
}
语法3：任何条件为真，执行语句块后，会直接跳出if语句
if(条件表达式1) {
条件1为真执行的语句块
}else if (条件表达式2) {
条件2为真执行的语句块
}else if (条件表达式3) {
条件3为真执行的语句块
}
……
以上条件都为假执行的语句块
}]
switch条件判断分支语句：类似if语句，但是只适合做等值判断
switch (表达式) {
case 值1:
执行语句;
;
case 值2:
执行语句;
;
……
default:
执行默认语句;
;
}
break跳出switch语句，如果不写break，当某个条件为真，执行完语句后，会无条件的以此向下执行
default语句可以放到任何位置，放到最后不是必须
循环语句：在满足条件的情况下，反复执行特定的代码
一个完整的循环语句组成=初始计数值 + 条件 + 迭代 + 循环代码
while循环：只要条件为真就一致执行循环
while (条件表达式) {
循环执行的代码
}
do…whiile循环：先执行一次循环代码（至少执行一次循环代码），再判断循环条件，其他同while循环
do {
循环执行的代码
} while (条件表达式);
for循环:俗称计数循环，语法本身就集成初始计数，条件，迭代，循环代码
for （ 计数变量初始值;条件;迭代） {
循环执行的代码
}
for…in循环：遍历对象的成员，或者遍历数组的元素下标
for (变量 in 对象/数组) {
循环执行的代码
}
break：跳出整个循环语句，继续向下执行
continue：跳过本次循环，继续下次循环
break和continue只能跳出本层循环，无法直接跳出最外层循环
变量的作用域和生命周期
作用域可以划分为：
全局作用域（全局变量）：属于window对象（window就是作用域中最大的对象），作用域是整个script程序，声明的位置function外部，尽量少使用全局变量，会造成全局污染
局部作用域（局部变量）：作用域仅限于function内部，声明在函数内部，形参都是局部变量
JS没有块级作用域这一说！最小的作用域单位就是function
作用域链：当在某个function中使用某个变量的时候，首先先会查看当前function作用域中有没有这个变量，如果有，直接使用，没有，就会到外层（上层）作用域中查找，直至全局作用域 ，全局作用域如果也没有，直接报错。到外层作用域查找数据比较耗费性能，应该尽量避免，用参数传递代替作用域查找
变量的声明提升：在function函数内部声明的变量不管声明在什么位置，在运行期间，都会把声明提升到函数开始的位置
变量的生命周期：变量出现在内存开始，到从内存中销毁结束，中间的过程，就是一个变量的生命周期，如果是局部变量的生命周期从函数调用开始，到函数执行完毕，全局变量的生命周期是整个script执行结束，从内存中销毁。
面向对象编程
类Class：抽象上的定义，不具体代表任何一个实例
对象Object：必须是一个具体的实例
类和对象：类和对象是一对多关系，一个类可以创建多个对象实例，通过类创建对象的过程叫实例化
类和对象的成员：
属性：存储对象的数据，类中使用 this.属性 形式定义属性
方法：实现对象的功能，，类中使用 this.方法形式定义方法
在ES5中，声明类也是用function语法
声明类：类名必须是帕斯卡写法，例如 MyStudent
function 类名 ([形参，……]) {
属性定义
方法定义
}
实例化对象：调用构造函数的形式
var 变量 = new 类名([实参，……]);
this关键字：不同的情况含义也是不一样的
函数级调用function：this代表window全局对象
构造函数调用function：this代表当前创建的新对象
调用对象的方法：this永远代表当前的对象
事件回调中：this代表当前事件源对象
函数的声明有三种方式：
函数声明：
function xxx() {}
函数表达式
var xxx = function() { }
通过Function类创建
var xxx = new Function(参数1，参数2，……，执行的语句块);
函数声明相比函数表达式，区别在于函数声明是带声明提升的，就是不管声明在什么地方，在执行期间都会自动的放到script最上面, 函数表达式没有声明提升！
内存区域，从逻辑上划分：
栈区：存放function局部变量，也包括全局变量
堆区：仅存储对象的实例，每个对象实例在内存中都会自动产生一个唯一的地址，叫做对象的引用地址
传值和传引用
基本类型赋值，赋的是值本身
引用类型的对象赋值，赋的是引用地址
JS对象的成员（属性，方法）可以随时动态添加和删除
添加成员：
对象.属性= xxx
对象.方法 = function(){}
删除成员：
delete 对象.属性
delete 对象.方法
Object是JavaScript内置的一个类，默认情况下，所有的类都是继承了Object ，都可以直接获得Object类的成员（属性，方法）
字面量对象:简化了创建Object对象的语法
{
属性1:xxxx,
属性2:xxxx,
方法1：function() {},
方法2：function(){},
……
}
实例成员和静态成员
实例成员：属性和方法都是属于对象实例的，访问的时候需要使用 对象.xxxx
静态成员：属性和方法都是属于类的，访问的时候需要使用 类名.xxxx
定义静态属性： 类名.属性 = xxx
定义静态方法： 类名.方法 = function(){}
静态方法无法调用任何实例成员，只能调用静态成员
访问对象的成员的第二种方式：对象[“成员名称”]，一般用在成员名不是写死的情况，而是一个变量
with语法，在with语句块中可以省略对象前缀，直接使用对象成员，不推荐使用，效率极低
with (xxx对象) {
成员调用
}
Array数组：多个元素的集合，通过下标访问元素，下标从0开始，在JS中数组是变长数组，可以任意添加删除元素
创建数组对象的三种方式：
方式1 var 变量 = new Array()
方式2 var 变量 = new Array(元素1，元素2，……)
方式3 var 变量 = [元素1，元素2，……] 字面量写法等价于方式2
数组的成员：
属性：
length 返回数组长度
方法：
push() ：给数组添加元素
pop()：删除并返回数组的最后一个元素
unshift( )：在数组头部插入一个元素
shift( )：将元素移出数组，从头部删除
splice() : 删除数组的元素
concat() :合并数组
join()：将数组元素连接起来以构建一个字符串
slice() :返回指定下标的一部分数组元素
reverse( ) ：颠倒元素的位置
sort()：数组排序，默认是按asc码排序，如果要自定义排序，需要传入一个比较规则的function，这个function必须传入两个参数a b，a>b返回正整数，a<b返回负整数，a==b返回0
排序算法：冒泡排序 选择排序 希尔排序 插入排序 快速排序……
多维数组：数组的元素本身又是数组对象，就是嵌套数组
String字符串对象的常用API方法
charAt( ): 返回字符串中的第n个字符
charCodeAt( )：返回字符串中的第n个字符的asc代码
fromCharCode( ):通过asc码创建字符串
concat()：拼接字符串
indexOf( )：检索字符串的下标，没有返回-1
lastIndexOf( )：同上，从右向左找
length属性：返回字符串长度
substr( )：返回字符串的一部分子字符串
substring( )：功能同上，但是参数不一样
toLowerCase( ):小写
toUpperCase( )：大写
split()：分解字符串为数组
Math数学对象
Math.floor():返回不大于本身的最大整数
Math.round( )：四舍五入取整
Math.ceil( )：如果小数位有有效数字，进位取整
Math.abs( ) : 绝对值
Math.PI常量：π
Math.sqrt( )：开方
Math.pow():求幂
Math.random( )：返回一个随机的>=0且<1的小数
求两整数之间的随机整数（包括两整数）的公式
Math.floor( ( 大值-小值+1 ) * Math.random() –小值 )
Date日期对象
构造方法：new Date() 当前系统时间
常用方法API：
getYear( ) 返回年，不兼容 推荐使用getFullYear()
getMonth( ) 返回月 0~11表示1~12月
getDate( ) 返回天 0~6 表示 日~六
getDay( ) 星期几
getHours( ) 返回小时
getMinutes( ) 返回分钟
getSeconds( ) 返回秒
getMilliseconds( ) 返回毫秒
getTime() 返回当前日期距离1970年1月1日0点0时0分0秒的间隔毫秒数
定时器
window.setTimeout：间隔多少毫秒执行一个程序
语法：window.setTimeout(函数对象或者语句字符串,毫秒数)返回值timerId（定时器id）推荐函数对象，不推荐语句字符串，效率低
window. setInterval：每间隔多少毫秒执行一个程序
语法同setTimeout
window.clearTimeout(定时器id)：清除timeout定时器
window.clearInterval(定时器id)：清除interval定时器
操作标签的内容，所有的容器元素，例如div span a p h1~h6都有如下的动态属性
innerHTML：动态设置或返回标签内部的HTML内容
innerText：动态设置或返回标签的纯文本内容
常用内置全局函数：
parseInt：把字符串数字转换为number整数
parseFloat：把字符串数字转换为number数字
isNaN：判断字符串是否非数字格式
eval()：动态执行字符串形式的javascript代码
编解码相关的全局函数
escape( ) / unescape( )：基本编码解码，unicode编码（不常用），不是url编码
encodeURI( ) / decodeURI( ):url编码解码，不会对&=?做编码
encodeURIComponent( ) / decodeURIComponent( ) :url编码解码，会对&=?做编码，防止用户输入url参数特殊字符
DHTML（动态HTML）
JavaScript可以动态操作一切HTML属性
语法：对象.属性
单一属性，例如readonly disabled属性值是布尔值
class属性例外，class需要用className来代替，因为class是JS的关键字
JavaScript可以动态操作一切CSS属性
动态操作行内css样式：对象.style.样式属性
动态操作内嵌和外联样式：可以，但 不推荐
JavaScript可以用元素对象的属性和方法动态操作网页元素
获得网页元素对象
document.getElementById(‘元素id’)：通过元素id返回元素的对象
document. getElementsByName(‘元素name’)：通过元素的name返回一组对象，返回一个类数组，类数组就是类似数组，但其实是NodeList类型，只有一个length，没有其他API
document. getElementsByTagName(‘标签名称’)：通过标签名称返回一组对象，返回一个类数组
document.getElementsByClassName(‘样式类名’)：通过class类名返回一组对象，返回一个类数组，兼容到IE8以上
操作自定义属性：HTML允许设置标签的自定义属性，JS对自定义属性也可以进行动态操作
语法：对象.自定义属性（仅IE兼容，不推荐）
推荐用DOM写法
对象.setAttribute(‘属性名称’,’属性值’) 对象.getAttribute(‘属性名称’)
常用事件：
onclick 单击
onload加载对象完毕
ondblclick 双击
onmouseover 鼠标移上，穿过子元素的时候，事件会重复触发
onmouseout 鼠标离开
onmouseenter 鼠标移上，穿过子元素的时候，事件不会重复触发
onmouseleave 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标抬起
onmousemove 鼠标移动
onfocus获得焦点
onblur失去焦点
onkeydown 键盘按下
onkeyup 键盘松开
阻止事件默认行为：
事件对象.returnValue=false
在事件回调函数中return false也可以阻止事件默认行为
在行内事件的回调中直接return false也可以阻止事件默认行为
动态添加的元素注册事件的几种方式
方式1：每次添加元素同时，单独注册事件
方式2：每次添加元素同时，在行内加上事件（只能调用全局函数）
手动产生事件行为：大多数事件都可以通过程序手动产生，比如，click()focus() select()等等
DHTML：dynamic html（动态HTML），动态操作HTML，js提供了很多直接元素对应的API
DOM：document object model（文档对象模型），也提供了很多API动态操作HTML，核心思想是不同的元素用统一的方式操作，认为网页的每一个元素都是一个对象，也是一个节点，节点可以有子节点，根节点是document，属性和标签内容也算一个节点。
通过JavaScript可以重构整个HTML文档，可以增加、删除、修改页面上的元素
Dom常用的属性和方法
createElement()：创建节点
setAttribute()：设置属性值
getAttribute():返回属性值
appendChild()：添加子节点，必须用父节点对象调用
removeChild()：删除子节点
parentNode：当前节点的直接父节点
childNodes：当前节点的所有直接子节点
DTHML动态操作表格的API
表格对象.insertRow()：插入tr行，返回行对象
行对象.insertCell()：插入td单元格，返回单元格对象
表格对象.rows：返回表格所有行的类数组
行对象.cells：返回行中的所有单元格类数组
BOM：browser object model（浏览器对象模型），也称为宿主对象
window对象：代表整个浏览器窗口，每个窗口都有一个独立的window对象
常用API：
alert():对话框
prompt()：输入对话框
confirm():确认框
open()：打开新窗口
close()：关闭当前窗口
print()：打印网页
parent：当前框架窗口的父窗口的window对象
document对象：文档对象
history对象：浏览器历史记录对象
back()：相当于后退
forward()：相当于前进
go(参数)：正数相当于前进几次，负数相当于后退几次，例如 history.go(-2)
location对象：代表当前url信息
reload()：就是刷新网页
href：读取或者设置url
窗口的滚动条卷去的距离：
兼容写法：
垂直document.documentElement.scrollTop || document.body.scrollTop
水平document.documentElement.scrollLeft || document.body.scrollLeft
表单的动态操作
获得form对象
写法1：document.表单name名称
写法2：document.forms[下标]
写法3：document.getElementById(form的id)
表单对象的常用属性和方法：
elements属性：返回表单的所有元素的一个类数组
length属性：返回表单的元素个数
submit()：提交表单
reset()：重置表单
文本框对象：
value属性：代表用户输入值
defaultValue属性：代表文本框默认值
单选，复选对象：
checked：默认选中
value：内置值
列表框对象Select
value属性：当前选中的option的value值，赋值就是默认选中某个option
selectedIndex属性: 当前选中的option的下标，没有选中任何option，返回-1
length属性：option的个数
options属性：返回所有option的集合类数组
动态操作option对象：
value属性：value值
text属性：标签文字
动态添加option：
var opt = new Option('文字','value值');//创建option对象
// 增加方式1
city.add(opt);
// 增加方式2
city.options = opt;
动态修改option
var city = document.getElementById('city');
city.options = new Option('大连','dalian');
动态删除option
var city = document.getElementById('city');
// 删除方式1：
city.remove(city.length-1);
// 删除方式2:
city.options = null;
删除多个：
city.options.length = 数字;
表单验证：分为前端验证和后端验证
前端验证：优点，用户体验好，不需要连接服务器，减轻了服务器压力，缺点是容易被用户绕开验证
后端验证：优点，就是安全性好，缺点是每次验证都要连接服务器，执行服务器端代码，服务器压力大，效率低
一般前端和后端验证同时写
表单提交事件 onsubmit
正则表达式：用一系列特殊字符来做字符串的规则匹配
创建正则表达式对象的两种方式：
var 变量 = /模式/
var 变量 = new RegExp(“模式” [, “i”]);
i表示忽略大小写
正则表达式对象的方法：
test():判断字符串是否匹配模式
正则表达式特殊字符：
\ 转义字符
^ 表示开始 例如 /a/ 匹配 bab 但 /^a/ 匹配ab 不匹配bab
$ 表示结束
. 表示任意字符 包括中文
表示a或b或c其中一个字符
[^abc] 必须不是其中任何一个字符
小写字符 大写字母 所有字母 也可以是
数字
字母和数字
[^a-z] [^A-Z][^0-9] 非字母，非数字
\s 空白（空格，制表位，换行，换页，回车）
\S 非空白
\d 数字 相当于
\D 非数字 相当于[^0-9]
\w 字母或数字或下划线 _
\W 非字母数字下划线
表示匹配次数的元字符
* 0次到多次
+1次到多次
?0次或1次
{n}正好n次
{n,} 至少n次
{n,m}n次到m次
链接: https://pan.baidu.com/s/1LekE7jB2Js0Jth3CsfI2pQ 提取码: aci7
链接: https://pan.baidu.com/s/1Hf8ny538GLr2EEnryY7Yng 提取码: qxea 学习了，多谢分享。 这是前端入门学的东西 感觉还行{:301_998:}但是我觉得vs、sublime也还不错 GarenMorbid 发表于 2018-12-13 13:52
感觉还行但是我觉得vs、sublime也还不错
对于我们这种新手来说，hbuilder更简单，不用考虑装什么插件，里面装插件也是中文说明，其实Hbuilder-X更好用一点 挺详细哈，谢谢分享 谢谢分享。 感谢分享！ 基础中的基础了，适合新手看 多写大佬，正好需要
页:
[1]