框架学习资料
jQuery
Vue.js
React
Node.js
AJAX
TpyeScript

JS教程

JavaScript输出

console.log() //用于控制台输出
window.alert() //显示警示框
document.write() //用于写入网页的document
innnerHTML() //内部HTML的内容

JavaScript语法

/*
	JavaScript 是一个脚本语言。
	它是一个轻量级,但功能强大的编程语言。
*/
固定值称为字面量:
Number //如1, 1.0, 12e3
String //如'abc', "abc", 可以使用单引号与双引号
Array //如[1,2,3],
Object //如{},键值对
Function //function fun(){}

变量:
var //如 var x = <?> , <?>可以为任意格式

操作符:
+, -, *, /, %, =
=, !=, <, >

语句:略,类比C++

关键字:略,类比C++
注释:略,类比C++

数据类型:
JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

函数:略,类比C++

大小写:
JavaScript 对大小写是敏感的

字符集:
JavaScript 使用 Unicode 字符集。

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
语法:略,类比C++

JavaScript 注释

//
/**/

JavaScript 变量

略,类比C++

JavaScript 数据类型

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
引用数据类型:对象(Object)、数组(Array)、函数(Function)。
JavaScript 拥有动态类型。其他类比C++。

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
当您声明新变量时,可以使用关键词 "new" 来声明其类型。

JavaScript 对象

在 JavaScript中,几乎所有的事物都是对象。
对象属性
可以说 "JavaScript 对象是变量的容器"。
但是,我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
对象方法:methodName : function() { code lines }

属性的访问方式:
objectName.objectAtrributeName
objectName["objectAtrributeName"]
方法的访问方法:
objectName.methodName()
如:
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
person.fullName()

JavaScript 函数

function functionName(arguments,...){
	code;
	....
	return value;
}

非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。

JavaScript 作用域

类比C++

JavaScript 事件

//HTML 事件是发生在 HTML 元素上的事情。
//当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
onchange-HTML 元素改变
onclick-用户点击 HTML 元素
onmouseover-用户在一个HTML元素上移动鼠标
onmouseout-用户从一个HTML元素上移开鼠标
onkeydown-用户按下键盘按键
onload-浏览器已完成页面的加载

JavaScript 字符串

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

字符串属性:
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法:
更多方法实例可以参见:JavaScript String 对象。
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串,返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断,并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JavaScript 运算符

类比C++

JavaScript 比较 和 逻辑运算符

类比C++

JavaScript 条件循环语句

类比C++

JavaScript typeof, null, 和 undefined

使用 typeof 操作符来检测变量的数据类型。
null是一个只有一个值的特殊类型。表示一个空对象引用。
undefined 是一个没有设置值的变量。
null 和 undefined 的值相等,但类型不等。

JavaScript 类型转换

JavaScript 数据类型
在 JavaScript 中有 5 种不同的数据类型:
string
number
boolean
object
function
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
null
undefined

typeof 操作符:可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
constructor 属性:返回所有 JavaScript 变量的构造函数。
全局方法 String() 可以将数字转换为字符串。
Number 方法 toString() 也是有同样的效果。
全局方法 String() 可以将布尔值转换为字符串。
Date() 返回字符串。
全局方法 String() 可以将日期对象转换为字符串。Date 方法 toString() 也有相同的效果。
全局方法 Number() 可以将字符串转换为数字,将布尔值转换为数字,将日期转换为数字。
当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。
当尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

JavaScript 正则表达式

使用字符串方法
在 JavaScript 中,正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
i	执行对大小写不敏感的匹配。
g	执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m	执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符:
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符:
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

JavaScript 错误 - throw、try 和 catch

类比C++

JavaScript 调试

console.log()方法调试
浏览器调试

JavaScript 变量提升

变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。
JavaScript 只有声明的变量会提升,初始化的不会。
JavaScript 严格模式(strict mode)不允许使用未声明的变量。

JavaScript 严格模式(use strict)

严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
·消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
·消除代码运行的一些不安全之处,保证代码运行的安全;
·提高编译器效率,增加运行速度;
·为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。
另一方面,同样的代码,在"严格模式"中,可能会有不一样的运行结果;一些在"正常模式"下可以运行的语句,在"严格模式"下将不能运行。掌握这些内容,有助于更细致深入地理解Javascript,让你变成一个更好的程序员。

JavaScript 使用误区

类比C++

JavaScript 表单

数据验证
数据验证用于确保用户输入的数据是有效的。
典型的数据验证有:
必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
大多数情况下,数据验证用于确保用户正确输入数据。
数据验证可以使用不同方法来定义,并通过多种方式来调用。
·服务端数据验证是在数据提交到服务器上后再验证。
·客户端数据验证 side validation是在数据发送到服务器前,在浏览器上完成验证。

HTML 约束验证
HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于:
HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

约束验证 HTML 输入属性
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type 	规定输入元素的类型

约束验证 CSS 伪类选择器
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"required"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

JavaScript 表单验证

JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性:
验证表单数据是否为空?
验证输入是否是一个正确的email地址?
验证日期是否输入正确?
验证表单输入内容是否为数字型?

JavaScript 验证 API

约束验证 DOM 方法: checkValidity(),setCustomValidity();
约束验证 DOM 属性
validity	布尔属性值,返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

JavaScript 保留关键字

类比C++

JavaScript this 关键字

类比C++

JavaScript let 和 const

let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问。
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改。

const定义常量与使用let 定义的变量相似:
二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:
const声明的常量必须初始化,而let声明的变量不用
const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let 定义的变量值可以修改。

JavaScript JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。

什么是 JSON?
·JSON 英文全称 JavaScript Object Notation
·JSON 是一种轻量级的数据交换格式。
·JSON是独立的语言 *
·JSON 易于理解。
·JSON 使用 JavaScript 语法,但是 JSON 格式仅仅是一个文本。
·文本可以被任何编程语言读取及作为数据格式传递。

JSON 语法规则
数据为 键/值 对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对,就像 JavaScript 对象属性。
键/值对包括字段名称(在双引号中),后面一个冒号,然后是值:
"name":"Runoob"

JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对:
{"name":"Runoob", "url":"www.runoob.com"}

JSON 数组
JSON 数组保存在中括号内。

JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

javascript:void(0) 含义

href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

JavaScript 代码规范

类比C++