[TOC]
## 用例源码
[点击下载](http://pan.baidu.com/s/1bp1eGxD)
# JS 实现
script标签
~~~
<script>
alert("My First JavaScript");
</script>
~~~
# JS 输出
~~~
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
~~~
# JS 语句
~~~
var name="Hello";
var name = "Hello";
~~~
# JS 注释
~~~
/*
多行注释
*/
//单行注释
~~~
# JS 变量
~~~
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!'
var carname;
carname="Volvo";
~~~
变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）
> 提示：JavaScript 语句和 JavaScript 变量都对大小写敏感
# JS 数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
javaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
实例
~~~
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串
~~~
# 字符串
字符串可以是引号中的任意文本。可以使用单引号或双引号：
~~~
var carname="Bill Gates";
var carname='Bill Gates';
~~~
可以在字符串中使用引号，只要不匹配包围字符串的引号即可：
~~~
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';
~~~
# 数字类型
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
~~~
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
~~~
极大或极小的数字可以通过科学（指数）计数法来书写：
~~~
var y=123e5; // 12300000
var z=123e-5; // 0.00123
~~~
# 布尔
布尔（逻辑）只能有两个值：true 或 false。
~~~
var x=true
var y=false
~~~
# 数组
~~~
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
实例
var cars=["Audi","BMW","Volvo"];
~~~
数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推
# 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
~~~
var person={firstname:"Bill", lastname:"Gates", id:5566};
~~~
对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
~~~
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
~~~
对象属性有两种寻址方式：
~~~
name=person.lastname;
name=person["lastname"];
~~~
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
~~~
cars=null;
person=null;
~~~
当声明新变量时，可以使用关键词 "new" 来声明其类型：
~~~
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
~~~
JavaScript 变量均为对象。当声明一个变量时，就创建了一个新的对象。
# JS 函数
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
~~~
function functionname()
{
//这里是要执行的代码
}
~~~
可以发送任意多的参数，由逗号 (,) 分隔：
~~~
myFunction(argument1,argument2)
~~~
用于字符串的 `+ `运算符
`+` 运算符用于把文本值或字符串变量加起来（连接起来）。
`str="abc"+"cbd" str="abccbd"`
# JS 比较
运算符
== 等于
`x==8 为 false`
=== 全等（值和类型）
~~~
x===5 为 true；
x==="5" 为 false
!= 不等于 x!=8 为 true
> 大于 x>8 为 false
< 小于 x<8 为 true
>= 大于或等于 x>=8 为 false
<= 小于或等于 x<=8 为 true
~~~
可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：
~~~
if (age<18) {
document.write("Too young");
}
~~~
逻辑运算符用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3，下表解释了逻辑运算符：
运算符
~~~
&& and (x < 10 && y > 1) 为 true
|| or (x==5 || y==5) 为 false
! not !(x==y) 为 true
~~~
# If...Else
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
~~~
if(true){
// do
}
~~~
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
~~~
if(true){
// do
}else{
// do
}
~~~
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
# JS Switch
请使用 switch 语句来选择要执行的多个代码块之一。
语法
~~~
switch(n)
{
case 1:
//执行代码块 1
break;
case 2:
//执行代码块 2
break;
default:
//n 与 case 1 和 case 2 不同时执行的代码
}
~~~
# JS For
~~~
for (语句 1; 语句 2; 语句 3)
{
//被执行的代码块
}
~~~
JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
# JS While
while 循环
While 循环会在指定条件为真时循环执行代码块。
语法
~~~
while (条件)
{
//需要执行的代码
}
~~~
do/while 循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
语法
~~~
do
{
//需要执行的代码
}
while (条件);
~~~
JS Break
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
Continue 语句
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
# JS 错误
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
~~~
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
~~~
# JS 验证
用户是否已填写表单中的必填项目？
用户是否在数据域 (numeric field) 中输入了文本？
# 常用对象
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
此外，JavaScript 允许自定义对象。
## JS 数字
数字属性和方法
属性：
> MAX VALUE
> MIN VALUE
> NaN
方法：
> toString()
## JS 字符串
计算字符串的长度
indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
replace() 方法在字符串中用某些字符替换另一些字符。
## JS 日期
~~~
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
~~~
月的特殊性
## JS 数组
创建数组
for...in 声明来循环输出数组中的元素。
concat() 方法来合并两个数组。
join() 方法将数组的所有元素组成一个字符串。
sort() 方法从字面上对数组进行排序。
~~~
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
document.write(arr.sort())
</script>
~~~
sort() 方法从数值上对数组进行排序。
~~~
<script type="text/javascript">
function sortNumber(a, b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>
~~~
## Window
有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：
~~~
document.documentElement.clientHeight
document.documentElement.clientWidth
~~~
或者
~~~
document.body.clientHeight
document.body.clientWidth
~~~
实用的 JavaScript 方案（涵盖所有浏览器）：
实例
~~~
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
~~~
## JS Location
一些例子：
~~~
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口
location.href 属性返回当前页面的 URL。
~~~
JS History
`history.go(-1)`
# JS 正则表达式
学习的工具 notepad + +
## 量词
~~~
量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
~~~
## 方括号
~~~
方括号用于查找某个范围内的字符：
表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。
~~~
## 元字符
~~~
元字符（Metacharacter）是拥有特殊含义的字符：
元字符 描述
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
~~~
## 示例
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>es6</title>
<script type="text/javascript">
// RegExp
var re = new RegExp('cat');
var re1 = /cat/;
var data = '123123123';
var re2 = /123/gi;
// g 继续, i 不区分大小写;
//检测是否存在
var data4 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat4 = /cat/gi;
console.log(reCat4.exec(data4)); //Cat
//String
console.log(re2.test(data));
var data3 = "123123,cat,213,12312,312,3,Cat,cat,dsfsdfs,";
var re3 = /cats/gi;
var rs3 = data3.match(re3);
console.log(rs3)
var data5 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat5 = /cat/g;
console.log(data5.search(reCat5)); //23
var data6 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat6 = /cat/gi;
console.log(data6.replace(reCat6, "libinqq"));
var data7 = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
var reCat7 = /,/;
console.log(data7.split(reCat7));
var data8 = '`[会计从业资格管理]``[会计专业技术职务资格管理]``[追究违法会计人员的刑事责任]``[会计人员继续教育管理]`';
var reg8 = /[^\`\[]{1,}(?=\]\`)/g;
console.log(data8.match(reg8))
console.log(''.substr(0, 50))
</script>
</head>
<body>
<div id="msg"> </div>
</body>
</html>
~~~
# 示例
~~~
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
//js hello
//console.log('hello world 1');
//alert("hello world 2");
//var i = 10;
//console.log(typeof i);
//i = '1';
//console.log(typeof i);
//i = "我2345";
//console.log(i.charAt(0));
//i = 3.14159265;
//console.log(typeof i);
/*
注释
*/
//document.write('hello');
//window.onload = function () {
// document.write('hello');
//};
//var str = "100";
//var num = Number(str);
// time number string
//undefined
//null
//NaN not a number
if (NaN) {
console.log('true');
} else {
console.log('flase');
}
//for (var i = 0; i < 100; i++) {
// // console.log('flase');
//}
//window.document
//document
//console.log(window.i);
//while (i<150){
// console.log(i);
// i++;
//}
//do {
// console.log(i);
// i++;
//} while (i<150);
//console.log("end");
// Array(/*1 ，2 length 3 args*/)
//var arrT = [];
//console.log(arrT);
//arrT.push('曾');
//arrT[7] = '祥';
//console.log(arrT[5]);
//for (var item in arrT) {
// console.log(arrT[item]);
//}
try {
document.getElementByI('sb');
//尝试
} catch (e) {
//捕获
console.log(e, '333');
}
var t = 1 / 0
console.log(t);
(function func_demo() {
for (var i = 0; i < 10; i++) {
console.log('flase');
}
})(window);
//console.log(i);
var func_1 = function () {
console.log('s');
}
func_1();
var obj = {};
obj.name = '_name';
obj.sex = '男';
obj.age = 100;
obj.sayHello = function () {
console.log('p:hello');
}
obj.sayHello();
for (var item in obj) {
console.log(typeof item);
// console.log(obj[item])
}
var sex = 'sex';
console.log(obj[sex]);
// key - value;
var objs = [];
objs.push(obj);
console.log(objs);
//dom
//document.getElementById('')
window.onload = function () {
console.log(document.getElementsByTagName('div'));
}
</script>
</head>
<body>
<div>hahaah</div>
</body>
</html>
~~~
