/* @Author: 陈陈陈
* @Date: 2017-08-04 17:35:49
* @Last Modified by: 陈陈陈
* @Last Modified time: 2017-08-09 16:12:03
*/
/*-------------------------------------------------------------------------------------*/
'use strict';
/*严格模式,关于严格模式详情可以参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
*/
/*-------------------------------------------------------------------------------------*/
/*引入JavaScript代码:
(1)在HTML页面head或者body标签中加入“<script type="text/javascript"></script>”,然后在标签中写JavaScript代码;
(2)引入外部js文件,在HTML页面的head标签中加“<script src="xxx.js" type="text/javascript"></script>”;
(3)在body标签中加入“<a href="javascript:alert("Hello")>点我</a>”,这种方式用于JavaScript代码较少的情况。
*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript是弱脚本语言,声明变量时无需指定变量的数据类型。
JavaScript是解释时动态决定的,数据保存在内存中时也是有数据类型的,
JavaScript常用的数据类型如下:
(1)数值类型(number):包含整数和浮点数;
(2)布尔类型(boolean):只有true和false两个值;
(3)字符串类型(string):字符串必须用双引号或单引号括起来;
(4)未定义类型(undefined):专门用来确定一个已经创建但是没有初始值的变量;
(5)空类型(null):用于表明某个变量的值为空;
(6)对象类型(object):JavaScript的对象、数组等。
*/
/*-------------------------------------------------------------------------------------*/
/*function show(){
a=10;
alert(a);
}*/
/*解析:在HTML页面中用“<a href="javascript:show()">点我</a>”来引入JavaScript这段代码。
JavaScript是弱脚本语言,使用变量之前,可以无需定义,使用某个变量的时候直接使用即可。
主要分为以下两种定义方式:
(1)隐式定义:直接给变量赋值;
(2)显式定义:使用var关键字定义变量。
*/
/*-------------------------------------------------------------------------------------*/
/*var chen%;
alert(chen%);*/
/*解析:变量名称必须是由字母、下划线(_)、数字、美元符号($)组成,且不能为关键字;
开头不能为数字。
*/
/*-------------------------------------------------------------------------------------*/
/*var num1="abc";
var num2='abc';
alert(num1==num2);*/
/*解析:此处结果为“true”。
在JavaScript中比较字符串用“==”,不能用equals! */
/*-------------------------------------------------------------------------------------*/
/*var a;
alert(a);*/
/*解析:运行结果为undefined。也就是说,这段代码中a为undefined数据类型。*/
/*-------------------------------------------------------------------------------------*/
/*alert(String.abc);*/
/*解析:运行结果也是undefined。属性不存在的时候,运行结果也是undefined。*/
/*-------------------------------------------------------------------------------------*/
/*var a=null;
var b;
alert(a==b);*/
/*解析:输出为“true”;
倘若将“==”改为“===”(严格等于),则结果为“false”。*/
/*-------------------------------------------------------------------------------------*/
/*var a=10;
var b="Hello";
var c=5e2;
var d=2e-2;
var e=0xf;
var f=014;
var g=.2e2;
alert(a+"
"+b+"
"+c+"
"+d+"
"+e+"
"+f+"
"+g);*/
/*解析:先把此脚本最开始处的use strict注释掉,那么运行结果为:10 Hello 500 0.02 15 12 20
(1)其实“.2e2”省略了小数点前面的0,它其实就是“0.2e2”。
(2)如果没有把use strict注释掉,可能很多浏览器都会出不来结果,因为除了IE6、7、8、9等不支持严格模式(use strict)外,
其他浏览器都支持严格模式,
而严格模式禁止这种八进制语法,如“014”。
ECMAScript并不包含八进制语法, 但所有的浏览器都支持这种以零(0)开头的八进制语法:
0644 === 420 还有 " 45" === "%".在ECMAScript 6中支持为一个数字加"0o"的前缀来表示八进制数.
关于严格模式详情可以参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
*/
/*-------------------------------------------------------------------------------------*/
/*var a=3;
var b=10;
var c=a.toString();
var d=b+c;
alert(d);*/
/*解析:输出结果为103。通过“+”或者“.toString()”的方法将数值转换成字符串。*/
/*-------------------------------------------------------------------------------------*/
/*document.write(parseInt("67hello")+"<br>");
document.write(parseInt("6hello7")+"<br>");
document.write(parseInt("hello67")+"<br>");
document.write(parseInt("53.4")+"<br>");
document.write(parseInt("0xC")+"<br>");//直接进制转换
document.write(parseInt("hello")+"<br>");*/
/*解析:
输出结果为:67 6 NaN 53 12 NaN 。
JavaScript数据类型的转换。
"67hello"会取前面的"67",如果是前面含有数字的字符串,则会截取前面的数字,
倘若不能讲其转换成整型,那么就会输出“NaN”(Not a Number)。*/
/*-------------------------------------------------------------------------------------*/
/*document.write(parseFloat("67chen")+"<br>");
document.write(parseFloat("6chen7")+"<br>");
document.write(parseFloat("chen67")+"<br>");
document.write(parseFloat("0xA")+"<br>");
document.write(parseFloat("435.34")+"<br>");
document.write(parseFloat("435.34.564")+"<br>");
document.write(parseFloat("hello")+"<br>");*/
/*解析:运行结果为:67 6 NaN 0 435.34 435.34 NaN 。
注意:代码中是将“0xA”看做一个字符串,故输出为“0”;
将“435.34.564”第二个小数点当做特殊字符处理,故输出“435.34”。
*/
/*-------------------------------------------------------------------------------------*/
/*var a="3.5";
var b=2;
var c=a-b;
var d=a*2;
var e=a+2;
alert(c+"
"+d+"
"+e);*/
/*解析:运行结果输出为:1.5 7 3.52 。 */
/*-------------------------------------------------------------------------------------*/
//var str="Hello,world,nice to meet you!";
//alert(str.length);//输出29
//alert(str.charAt(7));//输出“o”
//alert(str.toUpperCase());//输出“HELLO,WORLD,NICE TO MEET YOU!”
//alert(str.indexOf('o'));//输出“4”
//alert(str.lastIndexOf('o'));//输出“26”
//alert(str.indexOf('o', 7));//输出为“7”,从第7-1个位置算起,第一次出现'o'的位置
//alert(str.substring(2));//输出结果为“llo,world,nice to meet you!”
//alert(str.substring(2,4));//输出结果为“ll”
//alert(str.slice(2));//输出结果为“llo,world,nice to meet you!”
//alert(str.slice(2, 4));//输出结果为“ll”
//alert(str.slice(4, -1));//输出结果为“o,world,nice to meet you”。
//负数表示从右开始,与从左开始类似,与数组类似。
//alert(str.slice(4, -10));//输出结果为“o,world,nice to”
//alert(str.slice(-4, -1));//输出结果为“you”
//alert(str.replace('Hello', 'Hi'));//输出结果为“Hi,world,nice to meet you!”
/*var arr=str.split(',');
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}*/ /*以“,”为分割点,弹出“Hello”点击确认之后弹出“world”再点击确认弹出“nice to meet you!” 。*/
//alert(str.match('he'));//输出为“null”
//alert(str.match('Hello'));//输出结果为“Hello”
/*解析:JavaScript中字符串的常用操作方法:像数组的下标一样,第一个元素0,第二个1,第三个2。以此类推。
charAt():获取字符串特定索引处的字符;
toUpperCase():将字符串的所有字符转换成大写字母;
indexOf():返回字符串中特定字符串第一次出现的位置;
substring():返回字符串的某个子串;
slice():返回字符串的某个子串,支持负数参数,功能强大;
concat():用于多个字符串拼加成一个字符串;
replace():将字符串中的某个子串以特定的字符串替换;
split():将某个字符串分割成多个字符串,可以指定分隔符;
match():使用正则表达式搜索目标子字符串;
search():使用正则表达式搜索目标子字符串 ;
*/
/*-------------------------------------------------------------------------------------*/
/*正则表达式*/
/*var str="Lily loves football and basketball";
var reg=/Lily/;
document.write(reg.exec(str)+"<br>");
document.write(reg.test(str)+"<br>");*/
/*输出结果为(“<br>”表示换行):Lily true
若将reg改为“reg=/lily/”,那么输出结果为:null false
*/
/*var str="Lily loves football and basketball";
var reg=new RegExp('Lily');
document.write(reg.exec(str)+"<br>");
document.write(reg.test(str)+"<br>");*/
/*输出结果为(“<br>”表示换行):Lily true*/
/*解析:
创建正则表达式的语法:
(1)var reg=/xxxx/;
(2)var reg=new RegExp('xxx');
RegExp对象的常用方法:
(1)reg.exec(str):检索字符串中指定的值,返回找到的值,并确定其位置;
(2)reg.test(str):检索字符串中是否有满足指定条件的值,返回true或false。
*/
/*-------------------------------------------------------------------------------------*/
/*var str="123a";
var reg=/d/;
alert(reg.test(str));*/
/*输出结果为true*/
/*var str="chenchenchen";
var reg=/n/;
alert(reg.test(str));*/
/*输出结果为true,因为str是以n结尾*/
/*var str="chen";
var reg=/c/;
alert(reg.test(str));*/
/*输出结果为true,因为str是以c开头*/
/*正则表达式所支持的常用通配符:
(1) .(点号):可以匹配任何字符;
(2) d:匹配0-9的数字;
(3) D:匹配非数字;
(4) s:匹配所有空白字符,包括空格、制表符、换行符、回车符等;
(5) S:匹配所有非空白字符;
(6) w:匹配所有的单词字符,包括0-9数字、26个英文字母和下划线;
(7) W:匹配所有非单词字符;
(8) :匹配单词边界;
(9) B:匹配非单词边界。
*/
/*-------------------------------------------------------------------------------------*/
/*var str="chenchen"
var reg=/[ce]/;
alert(reg.test(str));*/
/*输出结果为true,只要存在c或者e都是返回true*/
/*var str="chen";
var reg=/[^chen]/;
alert(reg.test(str));*/
/*返回值为false,因为字符串中查找不到除方括号内的任何字符。*/
/*var str="redbluewhite";
var reg=/(red|blue|green)/;
alert(reg.test(str));*/
/*返回值为true*/
/*正则表达式所支持的常用通配符:返回值true或false
(1) [abc]:查找方括号之间任何字符;
(2) [^abc]:查找任何不在方括号之间的字符;
(3) [0-9]:查找任何从0至9的数字;
(4) [a-z]:查找任何从小写a到小写z的字符;
(5) [A-Z]:查找任何从大写A到大写Z的字符;
(6) [A-z]:查找任何从大写A到小写z的字符;
(7) ( | | ):查找任何指定的选项;
*/
/*-------------------------------------------------------------------------------------*/
/*正则表达式量词:
(1) n+:匹配任何包含至少一个n的字符串;
(2) n*:匹配任何包含零个或多个n的字符串;
(3) n?:匹配任何包含零个或一个n的字符串;
(4) n{X}:匹配包含X个n的序列的字符串;
(5) n{X,Y}:匹配包含X或Y个n的序列的字符串;
(6) n{X,}:匹配至少包含X个n的序列的字符串;
(7) n$:匹配任何结尾为n的字符串;
(8) ^n:匹配任何开头为n的字符串;
*/
/*-------------------------------------------------------------------------------------*/
/*var str="BBS";
var reg=/b/i;
alert(reg.test(str));*/
/*输出结果为true*/
/*var str="helloworld";
var reg=/o/g;
alert(reg.test(str));
alert(reg.test(str));
alert(reg.test(str));*/
/*输出结果:第一次弹出true,第二次true,第三次是false 。*/
/*var str="hello
everyone";
var reg=/^e/m;
alert(reg.test(str));*/
/*输出结果为true 。假设reg=/^e/,那么输出结果为false 。*/
/*正则表达式修饰符:
(1) i:执行对大小写不敏感的匹配;
(2) g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止);
(3) m:执行多行匹配;
*/
/*拓展练习:试写出邮箱的正则表达式并测试*/
/*var reg=/^[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+.(com|cn|org)$/;
alert(reg.test("chenlizhen1995@foxmail.com"));*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript中定义数组的语法有以下3种:
(1)var arr1=[2,5,6];//定义时直接给出数组元素的赋值
(2)var arr2=[];//定义空数组
(3)var arr3=new Array();//定义一个空数组并通过索引来赋值
arr3[0]=1;
arr3[3]="abc"
提示:JavaScript为数组提供了一个length属性来得到数组的长度。
JavaScript数组的特点:
(1)数组的长度可变,总长度等于数组的最大索引值+1;
(2)同一数组中的元素类型可以互不相同;
(3)当访问未赋值的数组元素的时候,该元素值为undefined,不会出现数组越界。
*/
/*-------------------------------------------------------------------------------------*/
/*var arr=[1,2,3,4,"hello",true];
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br>");
}*/
/*输出结果为: 1 2 3 4 hello true 。*/
/*var arr=[];
arr[0]=1;
arr[2]="abc";
arr[3]=true;
for(var i=0;i<arr.length;i++){
document.write(arr[i]+"<br>");
}*/
/*输出结果为: 1 undefined abc true 。*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript运算符:
(1)算数运算符:+ - * / % ++
(2)赋值运算符:=
(3)比较运算符:> < >= <= == != ===(严格等于) !==(不严格等于)
(4)逻辑运算符:&& || !
(5)位运算符:&(与) |(或) ~(非) ^(异或) <<(左移) >>(右移)
(6)其他运算符:三目运算符(?:) 逗号运算符(值为最右边的) void运算符 typeof(返回数据类型) instanceof(判断是否为指定对象)
*/
/*var a="10";
var b=10;
alert(a==b);//true
alert(a===b);//false
*/
/*var a,b,c,d;
a=(b=2,c=3,d=4);
alert(a);*/
/*a的值为4,因为逗号运算符返回的值应该为最右边的,所以为4*/
/*var a,b,c,d;
a=void(b=2,c=3,d=4);
alert(a);*/
/*输出结果为undefined。void不返回任何值给a。*/
/*var a="abc";
alert(typeof(a));//输出结果为string*/
/*typeof返回的是数据类型,“typeof(a)”也可以写做“typeof a”。*/
/*var a="abc";
alert(typeof(a));//输出结果为string*/
/*var a=[1,2];
//alert(a instanceof Array);//输出结果为true
//alert(a instanceof Object);//输出结果为true*/
/*instanceof(判断是否为指定对象)*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript支持的:
(1)分支语句主要有:if语句、switch语句;
......switch()括号内可以是表达式,与Java不一样,Javaswitch括号内只能是整型变量、整型值,主要有byte、int、short、枚举类型等等。
(2)循环语句主要有:while循环、do-while循环、for循环、for in循环;
......for in语法:
for(变量 in 对象){
执行的语句;
}
作用:遍历数组中的所有数组元素;遍历JavaScript对象的所有元素。
(3)JavaScript也提供了break和continue来改变循环的控制流;
......break:跳出循环;continue:结束本次循环,直接继续下一次循环。
*/
/*-------------------------------------------------------------------------------------*/
/*for in的第一个作用:遍历数组中的所有数组元素*/
/*var arr=new Array(5);
arr[0]=1;
arr[2]=3;
arr[3]="abc";
arr[5]=true;
for(var index in arr){
document.write(index+" "+arr[index]+"<br>");
}*/
/*若只是document.write(index+"<br>"); 那么只是输出有赋值数组的下标,并不是输出数组的元素值。
上面代码的运行结果是:
0 1
2 3
3 abc
5 true
*/
/*-------------------------------------------------------------------------------------*/
/*for in的第二个作用:遍历JavaScript对象的所有元素*/
/*for(var properties in navigator){
document.write("属性:"+properties+",属性值:"+navigator[properties]+"<br>");//其实这里可以省略分号
}*/
/*-------------------------------------------------------------------------------------*/
/*语句是JavaScript的基本执行单位,常用特殊语句:
(1)语句块
{
var name="chen";
var age=21;
alert("hello!"+name);
}
(2)空语句: “;”
(3)异常抛出语句
(4)异常捕捉语句
try{
var age=5;
if(age==5){
throw new Error("年龄太小");
}
}catch(e){
document.write("出错:"+e.message+"<br>");
}finally{
document.write("总会执行的finally块");
}
注意:JavaScript只有一个异常类就是Error;
在JavaScript是e.message,message是属性,在Java中是方法;
在Java中可以有很多catch,但是在JavaScript中只有一个catch
(5)with语句
{
with(document){
write("输出第一行数据<br>");
write("输出第二行数据<br>");
write("输出第三行数据<br>");
}
}
相当于:
document.write("输出第一行数据<br>");
document.write("输出第二行数据<br>");
document.write("输出第三行数据<br>");
*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript代码复用单位是函数,JavaScript定义函数主要有下面3种方式:
(1)第一种方式:命名函数
function 函数名(参数列表){
要执行的语句块;
}
eg.
function show(name){
alert("Hello,"+name);
}
show("chen");
//输出结果:弹出 Hello,chen
(2)第二种方式:匿名函数
function (参数列表){
要执行的语句块;
}
eg.
var f=function (name){
alert("验证匿名函数
Hello,"+name);
}
f("chen");
//输出结果为:验证匿名函数(此处换行)Hello,chen
(3)第三种方式:使用function类构造函数
new Function(参数列表,函数执行体);
注:参数需要加单引号,函数执行体需要加引号。
eg.
var f=new Function('name','age',"alert('名字:'+name+',年龄:'+age);");
f("chen",21);
//注意:是“Function”而不是“function”。输出结果为:名字:chen,年龄:21
//其实,上面代码也可以写为:var f=new Function('name','age','alert("名字:"+name+",年龄:"+age);');
注:第一种方式,函数调用可以在函数之前使用;第二种函数调用必须在函数声明之后使用;
函数的形参不需要做任何声明,也不用加var,这是JavaScript属于弱类型语言的一种表现。
大多数JavaScript框架都使用第二种匿名函数语法来定义函数,它的可读性好。
*/
/*-------------------------------------------------------------------------------------*/
/*函数的返回值:JavaScript中的函数没有返回类型,当函数想要返回值的时候直接加上return “值”即可,
假如不加就代表此函数没有任何返回值。
函数的局部变量和局部函数:
根据变量的定义范围不同,变量有全局变量和局部变量之分,直接定义的变量成为全局变量,
在函数中定义的变量称为局部变量,局部变量只能在函数内有效,
如果全局变量和局部变量使用相同的变量名,则局部变量将覆盖全局变量。
与局部变量对应的是局部函数,局部函数是在函数中定义的,外部函数可以直接调用其内部的函数,
在外部函数外不能直接调用内部函数,所以只有在外部函数被调用时,内部函数才会被执行。
*/
/*function show(){
}
var f=show();
alert(f);*/
/*输出结果为:undefined。*/
/*-------------------------------------------------------------------------------------*/
/*JavaScript中,函数的调用有3种方法
(1)直接调用函数:最常见最普通的方式
对象.函数引用
//当声明一个没有指明分配给哪个对象使用的时候,默认分配给的是window对象
(2)以call方法调用函数:
函数引用.call(调用者,参数1,参数2......)
(3)以apply方法调用函数:
函数引用.apply(调用者,arguments)
//arguments相当于数组,用来存放多个参数,和call调用方式类似
*/
/*function show(name,age){
alert(name+"----"+age);
}
//window.show('chen',21);
//show.call(window, 'chen',21);
//show.apply(window,['chen',21]);
*/
/*-------------------------------------------------------------------------------------*/
/*function show(arr,func){
func.call(window, arr);
}
show([1,2,3,4],function(arr){
for(var i in arr){
document.write(arr[i]+"<br>");
}
})
//输出结果为:1 2 3 4 。
*/
/*-------------------------------------------------------------------------------------*/