转自：https://www.cnblogs.com/zhangxinqi/p/8884520.html
JavaScript简介：
JavaScript是web的编程语言，所有现代的HTML页面都使用JavaScript。
JavaScript是一种轻量级的编程语言；可以插入HTML页面的编程代码；可由所有的现代浏览器执行。
1、javascript显示数据
javascript可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台
2、javascript语法
数字（number）字面量，可以是整数或者是小数，或者科学计数（e）。
字符串（string）字面量，可以使用单引号或者双引号。
表达式字面量，用于计算。
数组（array）字面量，定义一个数组：[10,20,30,40]
对象（object）字面量，定义一个对象：{name:"zhangsan",age:22,sex:"men"}
函数（function）字面量，定义一个函数：function myfunction(a,b) {return a * b;}
javascript变量，使用关键字var来定义变量，使用等号来为变量赋值：
在javascript中声明无值的变量时，其值实际上是undefined。
如果重新声明变量，该变了的值不会丢失，在重新赋值时才会丢失。
var a,lengthx = 18length = 8
javascript语句使用分号分隔。
和其他编程语言一样，javascript保留一些关键字为自己所用，如:var关键字告诉浏览器创建一个新的变量。
javascript关键字必须以字母、下划线或美元符开始，后续的字符可以是字幕，数字，下划线或者美元符，数组不允许作为首字符出现。
javascript注释使用双斜杠“//”进行单行注释，多行注释以/*开始，以*/结尾。
JavaScript 对大小写是敏感的。
JavaScript 使用 Unicode 字符集。
Unicode 覆盖了所有的字符，包含标点等字符。
JavaScript 语句标识符 (关键字) ：
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do ... while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for ... in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if ... else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。
3、javascript数据类型
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
var x; // x 为 undefinedvar x = 5; // 现在 x 为数字 var x = "John"; // 现在 x 为字符串
javascript数组：
创建数组的方法：数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推
var array1=new array();array1[0]="none";array1[1]="two";array1[2]="three"; //或者 var array1 = new array("none","two","three"); //或者 var array1=["none","two","three"]; javascript对象：
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566}; 对象属性有两种寻址方式：
name=person.lastname;name=person["lastname"];
Undefined 这个值表示变量不含有值；可以通过将变量的值设置为 null 来清空变量。
当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object;
4、javascript对象
在javascript中，几乎所有的事物都是对象，对象也是一个变量，但对象可以包含多个值（多个变量）。
javascript对象是变量的容器，但是，我们通常认为javascript对象的键值对是容器，键值对的通常写法为name:value，以冒号分割，键值对在javascript对象通常称为对象属性。
对象方法：对象的方法定义了一个函数，并作为对象的属性存储，对象方法通过添加（）调用，作为一个函数
访问对象方法：
你可以使用以下语法创建对象方法：
methodName : function() { code lines } 你可以使用以下语法访问对象方法：
objectName.methodName()
5、javascript事件
下面是一些常见的HTML事件的列表:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
6、字符串属性和方法
属性：
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
方法：
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
7、逻辑判断与循环
switch语句，选择执行多个代码块之一，使用 default 关键词来规定匹配不存在时做的事情
工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
for循环：
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for in 语句循环遍历对象的属性：
var pre = {one:'java',two:'python',three:'php',four:'c++',five:'bash'}; for (var i in pre){ console.log(i + "==" + pre[i]); } while循环：指定条件为真时循环执行代码块。
var i = 0;while ( i < 10){ console.log("this is number:" + i + ""); i++; } do while循环，while循环的变体，该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话重复一个循环。
do while循环
可以对 JavaScript 语句进行标记，如需标记 JavaScript 语句，请在语句之前加上冒号：
continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。
typeof操作符，可以检测变量的数据类型。
8、JavaScript类型转换
Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
在 JavaScript 中有 5 种不同的数据类型：
- string
- number
- boolean
- object
- function
3 种对象类型：
- Object
- Date
- Array
2 个不包含任何值的数据类型：
- null
- undefined
请注意：
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
constructor 属性返回所有 JavaScript 变量的构造函数:
//判断是否为数组 //判断是否为日期
JavaScript 类型转换:
全局方法 String() 可以将数字转换为字符串:
to String()方法同样可以将数字转换为字符串;还可以将布尔值转换为字符串
toExponential()把对象的值转换为指数计数法。
toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。
date方法，返回日期：
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
Number() 可以将字符串转换为数字，空字符串转换为0,其他字符串会转换为NaN；还可以将布尔值转换为数字
parseFloat() 解析一个字符串，并返回一个浮点数。
parseInt() 解析一个字符串，并返回一个整数。
一元运算符“+” :可以将变量转换为数字,如果变量不能转换，它仍然是一个数字，值为NaN。
将日期转换为数字：Number() 或 dateName.getTime()
自动转换类型：
当JavaScript尝试操作一个“错误”的数据类型时，会自动转换为“正确"的数据类型。
5 + null // 返回 5 null 转换为 0"5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
9、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() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
alert(/e/.test("abcdefg")); //匹配字符串中是否包含有匹配的文本，有则返回true. exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
alert(/e/.exec("abceefg")); //返回匹配的结果 判断字符串是否为数字、字母、下划线组成：
function isvalid(str){ return /^\w+$/.test(str);} str = "123ddf_"; document.write(isvalid(str)); 10、JavaScript错误处理
try 语句测试代码块的错误；catch 语句处理错误；throw 语句创建自定义错误。
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
throw 语句允许我们创建自定义错误；正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
请输出一个 5 到 10 之间的数字:
JavaScript的调试工具，可使用浏览器自带的调试工具，可按F12键调出。
也可以在代码中使用debugger关键字，当代码碰到debugger关键字后将不再往下执行。
验证表单输入是否为1到10之间的数字：
javascript
请输入1到10之间的数字
11、实例
找对象的方法：
//按ID查找 alert(document.getElementById("ID")); //按标签找,div,p,input...哪怕只找到一个也会包装成数组返回。 var hist = document.getElementsByTagName('div'); alert(hist); alert(hist[0]); //对应表单元素，可以按name来查询 alert(document.getElementsByName("username")[0]); alert(document.getElementsByName('username')[0].value); //按照类名来查找 alert(document.getElementsByClassName("className")[0]); //找子对象children和父对象parent alert(document.getElementById("ID").children.length); alert(document.getElementById("ID").parent.length); //改变css document.getElementsByTagName('h1')[0].style.background="gray";
点击事件，颜色变化
js
点击DIV使其背景色红绿交替 宽增高5px; 下边框增粗1px;
Title 点击DIV使其背景色红绿交替 宽增高5px; 下边框增粗1px;
上面的方法只能在内联标签下获取样式，不够灵活。下面使用getComputedStyle()方法获取计算的最终样式，再进行修改，这种方法获取的样式数值是只读的，不能修改。
Title 点击DIV使其背景色红绿交替 宽增高5px; 下边框增粗1px;
创建子节点并通过输入添加内容，删除子节点：
js删除和添加子对象
- 春
- 夏
- 秋
- 冬
使用innerHTML暴力操作节点子节点：
innerHTML暴力操作属性
联动菜单：
联动菜单
window.setTimeout("function",time)；//设置一个超时对象，只执行一次,无周期
window.setInterval("function",time)；//设置一个超时对象，周期＝'交互时间'停止定时： window.clearTimeout(对象) 清除已设置的setTimeout对象window.clearInterval(对象) 清除已设置的setInterval对象定时更换图片：
js setTimeout 定时器
倒记时更换效果：
Title 定时器
常用事件：
onclick 元素点击时
onfocus 元素获得焦点时
onblur 元素失去焦点时
当元素获取焦点时，改变元素的style值：
thing
onmouseover事件:鼠标指针移动到元素上时触发事件
onmouseout事件:在鼠标指针移出指定的对象时触发事件
鼠标经过事件 鼠标经过移开时发生的事件
onsubmit：表单提交时事件
onload：页面加载完毕时事件
事件、行为、结构分离：
事件、行为、结构分离 //结构
- 结构
事件对象：事件发生的瞬间，发生位置，时间，鼠标按键，触发的节点等信息被打包成一个对象，此对象，系统自动传递给事件函数的第一个参数。
onmouseover当鼠标经过时移动位置：
事件对象 1.事件对象包含事件相关的信息，如鼠标，时间，触发的DOM对象等 2.事件对象被系统传递给事件函数的第一个参数 3.事件对象的属性在IE/w3c略有不同 4.一个重要的事件属性：target，srcElement(IE下)，代表事件发生的所在DOM对象。
事件委托：td委托table通过事件对象对属性更改
Title 事件委托
JS使用正则：
声明：var patt=/^d{11}$/;
使用：判断string是否符合正则要求：patt.test(String);
找出字符中符合正则的子串：patt.exec(String);
正则 1.用户名由6-11位数字字母组成 2.email符合规范 3.不合规范不允许提交
exec匹配有邮箱的人并标记颜色：
正则匹配
- 张飞
- 关羽<guanyu@qq.com>
- 刘备
- 赵云<zhaoyun@163.com>