JavaScript基础
var
声明一个变量,可选择将其初始化为一个值
let
声明一个块作用域的局部变量,可选择将其初始化为一个值
const
声明一个只读的常量
变量
一个JS标识符必须以字母、下划线或者美元符号开头;后续的字符可以是数字,
而且JS语言区分大小写
声明变量
1.使用关键词var。例如var a=1,这个语法可以用来声明局部变量和全局变量
2.直接赋值。例如,x=1。这样就会声明一个全局变量并会在严格模式下产生一个
ReferenceError引用错误,表明一个不存在的变量被引用。声明变量时不应该用这种方式
3.使用关键词let。例如let y=2。这个语法可以用来声明块作用域的局部变量
变量求值
用var或let声明的且未赋值的变量,值会被设定为undifined。
试图访问一个未声明的变量或者访问一个使用let声明的但未初始化的变量会导致一个ReferenceError
异常被抛出
可以使用undefined来判断变量是否已赋值
var x; if(x===undefined){ doThis(); }else{ doThat(); }
undefined值相当于布尔值的false
var x; if(!x){ myFunction(); }
数值环境中undefined值会被转换为NaN
var x; a+2 //NaN
对一个null变量求值时,空值null在数值类型环境下会被当作0来对待,布尔类型环境中会被当作false
var n=null; typeof(n); //object
变量的作用域
在所有函数之外声明的变量叫做全局变量,它可被当前文档中的任何其他代码访问。在函数内部声明的变量,叫做局部变量,它只能在该函数内部引用。
if (true) { var x = 1; } console.log(x) // 1
控制台输出1,因为x的作用域是声明了x的那个函数(或全局范围),而不是if 语句块
if (true) { let y = 1 } console.log(y); //RefereceError:x is not defined
变量声明提升
JavaScript可以引用稍后声明的变量而不会引发异常。这一概念成为变量声明提升;然而提升后的变量返回undefined值
console.log(x === undefined); var x = 3;
函数提升
对于函数,只有函数声明会被提升到顶部,而不包括函数表达式。
/ * 函数声明 */ foo; // "bar" function foo(){ console.log("bar"); }
全局变量
全局变量实际上是全局对象的属性。在网页中,全局对象是window,所以可是用形如window.variable的语法来设置和访问全局变量。
常量
可以使用关键字const创建以一个只读的常量。常量标识符的命名规则和变量相同:必须以字母、下划线或美元符号开头并可以包含字母、数字或下划线。
const x = "xiaobai";
常量不可以通过赋值改变其值,也不可以在脚本运行时重新声明。它必须被初始化为某个值。
常量的作用域规则和let块级作用域变量相同。若省略const关键字,则该标识符将被视为变量。
在同一作用域中,不能使用与变量名或函数相同的名字来命名变量。
JavaScript的引入方式
1.直接编写
<script>
alert("hello world")
</script>
2.导入文件
<script src="helloworld.js"></script>
JavaScript的变量、常量和标识符
1.声明变量不用声明变量类型,全部使用var关键字
var x="xiaobai",a=1;
2.声明变量时可以不用var,如果不用var那么它是全局变量
3.变量命名,首字符只能是字母,下划线,$美元符三选一,余下的字符可以是下划线、美元符号或任何字符且区分大小写
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头。例如: var myFirstValue = 0, mySecondValue = "hello"; Pascal 标记法 首字母是大写的,接下来的字母都以大写字符开头。例如: Var MyFirstValue = 0, MySecondValue = "hello"; 匈牙利类型标记法 在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“ Var iMyFirstValue = 0, sMySecondValue = "hello";
标识符
1.由不以数字开头的字母、数字、下划线、美元符号组成
2.常用于表示函数、变量等的名称
3.JavaScript中代表特定含义的词称为保留字,不允许程序在定义为标识符
JavaScript的数据类型
数字类型
不区分整型数值和浮点型数值
左右数字都用64位浮点格式存储,相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324
字符串类型
由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;
字符串中部分特殊字符必须加上右划线\;常用的转义字符\n:换行 \':单引号 \":双引号 \\:右划线
布尔类型
Boolean类型有两个值:true和false,代表1和0,实际运算中true=1,false=0;Boolean值主要用于JavaScript的控制语句
Undefined类型
Undefined类型只有一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined。当函数无明确返回值时,返回值也是undefined
Null类型
另一种只有一个值的类型是Null,它只有一个专用值null,即它的字面量。值undefined实际上是从值null派生来的,因此ECMAScript把它们定义为相等的
尽管这两个值相等,但他们的含义不用。undefined是声明了变量但未对其初始化时赋值,null则用于表示尚未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是null
运算符
算术运算符:
+ - * / % ++ --
比较运算符:
> >= < <= != == === !==
逻辑运算符:
&& || !
赋值运算符:
= += -= *= /=
字符串运算符:
+ 连接,两边操作数有一个或两个是字符串就做连接运算
算数运算符
++自增加一
x++:先赋值再计算
ret=x++
++x:先计算再赋值
ret=++x
单元运算符
-除了可以表示减号还可以表示负号 例如a=-b
+除了可以表示加法运算还可以用于字符串的连接
NaN
var d="yuan";
d=+d;
alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d));//Number
//NaN特点:
var n=NaN;
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=
比较运算符
> >= < <= != == === !==
等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号,只是它们在检查相等性前,不执行类型转换
var bResult = "Blue" < "alpha"; alert(bResult); //输出 true 在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。 比较数字和字符串 另一种棘手的状况发生在比较两个字符串形式的数字时,比如: var bResult = "25" < "3"; alert(bResult); //输出 "true" 上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。 不过,如果把某个运算数该为数字,那么结果就有趣了: var bResult = "25" < 3; alert(bResult); //输出 "false" 这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。 总结: 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型. 比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.
等性运算符:执行类型转换的规则如下: 如果一个运算数是 Boolean 值,在检查相等性之前,把它转换成数字值。false 转换成 0,true 为 1。 如果一个运算数是字符串,另一个是数字,在检查相等性之前,要尝试把字符串转换成数字。 如果一个运算数是对象,另一个是字符串,在检查相等性之前,要尝试把对象转换成字符串。 如果一个运算数是对象,另一个是数字,在检查相等性之前,要尝试把对象转换成数字。 在比较时,该运算符还遵守下列规则: 值 null 和 undefined 相等。 在检查相等性时,不能把 null 和 undefined 转换成其他值。 如果某个运算数是 NaN,等号将返回 false,非等号将返回 true。 如果两个运算数都是对象,那么比较的是它们的引用值。如果两个运算数指向同一对象,那么等号返回 true,否则两个运算数不等。
流程控制
1.顺序结构
<script> console.log("星期一"); console.log("星期二"); </script>
2.分支结构
if else结构 if (表达式){ 语句一; }else{ 语句二; }
if elif else结构 if (表达式){ 语句1; }else if (表达式2){ 语句2; }else{ 语句3; }
switch case结构 var week=4; switch (week){ case 1:console.log("Monday");break; case 2:console.log("Tuesday");break; case 3:console.log("Wednesday");break; case 4:console.log("Thursday");break; case 5:console.log("Friday");break; case 6:console.log("Saturday");break; case 7:console.log("Sunday");break;
default:语句; }
3.循环结构
for循环
for (初始表达式;条件表达式;自增或自减){ 执行语句; ...... }
for (变量 in 数组或对象 ){ 执行语句; ...... }
for(var i=0,sum=0;i<101;i++){ sum=sum+i; } console.log(sum)
while循环
while (条件){ 语句1; ...... }
var i=0,sum=0; while (i<101){ sum=sum+i; i++ } console.log(sum)
异常处理
try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
//如果try代码块中抛出了异常,catch代码块中的代码就会被执行
//e是一个局部变量,用来指向Error对象或其他抛出的对象
}
finally {
//无论try中代码是否抛出异常(甚至是try代码块中有return语),finally代码块中始终会被执行}
主动抛出异常throw Error(......)
JavaScript的对象
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现
<script language="javascript"> var aa=Number.MAX_VALUE; //利用数字对象获取可表示最大数 var bb=new String("hello JavaScript"); //创建字符串对象 var cc=new Date(); //创建日期对象 var dd=new Array("星期一","星期二","星期三","星期四"); //数组对象 </script>
String对象
字符串创建
1.变量="字符串"
2.字符串对象名称=new String(字符串)
var s="hello"; var S=new String("world");
x.length 获取字符串的长度 x.toLowerCase() 转为小写 x.toUppercase() 转为大写 x.trim() 去除字符串两边空格 x.charAt(index) 获取指定位置字符,index为指定字符的索引 x.indexOf(findstr,index) 查询字符串位置,如果查询字符位置与输入的index不同输出-1 x.lastIndexOf(findstr) 从字符串查询指定最后的字符的索引 x.match(regexp) 返回匹配字符串的数组,如果没有匹配则返回null x.search(regexp) 返回匹配字符串的首字符位置索引 x.substr(start,length) start表示开始位置,length表示长度,包头不包尾 x.substring(start,end) end是结束位置,包头不包尾 x.slice(start,end) 字符串切片,包头不包尾 x.replace(findstr,tostr) 字符串替换 x.split() 分割字符串 x.concat(addstr) 拼接字符串
Array对象
数组创建
创建方式1: var arrname=[元素0,元素1,......]; 创建方式2: var arrname=new Array(元素0,元素1,......]; 创建方式3: var arrname=new Array(长度); var week=new Array[7]; week[0]="星期日"; week[1]="星期一"; ...... week[6]="星期六";
var week=new Array[7]; for (var i=0;i<=6;i++){ week[i]=new Array(2); } week[0][0]="星期日"; week[0][1]="Sunday"; week[1][0]="星期一"; week[1][1]="Monday"; ...... week[6][0]="星期六"; week[6][1]="Saturday";
数组对象的属性和方法
join方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var s1="hello"; var s2="world"; console.log([s1,s2].join("-")) //hello-world
concat方法:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var a="hello"; var b=a.concat(" world"); console.log(a); //hello console.log(b); //hello world
数组排序
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32 arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按着数字比较呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
数组前片操作
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//x.slice(start, end) // //使用注解 // //x代表数组对象 //start表示开始位置索引 //end是结束位置下一数组元素索引编号 //第一个数组元素索引为0 //start、end可为负数,-1代表最后一个数组元素 //end省略则相当于从start位置截取以后所有数组元素 var arr1=['a','b','c','d','e','f','g','h']; var arr2=arr1.slice(2,4); var arr3=arr1.slice(4); var arr4=arr1.slice(2,-1); alert(arr2.toString()); //结果为"c,d" alert(arr3.toString()); //结果为"e,f,g,h" alert(arr4.toString()); //结果为"c,d,e,f,g"
删除子数组
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//x. splice(start, deleteCount, value, ...) //使用注解 //x代表数组对象 //splice的主要用途是对数组指定位置进行删除和插入 //start表示开始位置索引 //deleteCount删除数组元素的个数 //value表示在删除位置插入的数组元素 //value参数可以省略 var a = [1,2,3,4,5,6,7,8]; a.splice(1,2); alert(a.toString());//a变为 [1,4,5,6,7,8] a.splice(1,1); alert(a.toString());//a变为[1,5,6,7,8] a.splice(1,0,2,3); alert(a.toString());//a变为[1,2,3,5,6,7,8]
数组的push和pop
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//push pop这两个方法模拟的是一个栈操作 //x.push(value, ...) 压栈 //x.pop() 弹栈 //使用注解 // //x代表数组对象 //value可以为字符串、数字、数组等任何值 //push是将value值添加到数组x的结尾 //pop是将数组x的最后一个元素删除 var arr1=[1,2,3]; arr1.push(4,5); alert(arr1); //结果为"1,2,3,4,5" arr1.push([6,7]); alert(arr1) //结果为"1,2,3,4,5,6,7" arr1.pop(); alert(arr1); //结果为"1,2,3,4,5"
数组的shift和unshift
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//x.unshift(value,...) //x.shift() //使用注解 //x代表数组对象 //value可以为字符串、数字、数组等任何值 //unshift是将value值插入到数组x的开始 //shift是将数组x的第一个元素删除 var arr1=[1,2,3]; arr1.unshift(4,5); alert(arr1); //结果为"4,5,1,2,3" arr1. unshift([6,7]); alert(arr1); //结果为"6,7,4,5,1,2,3" arr1.shift(); alert(arr1); //结果为"4,5,1,2,3"
总结JavaScript的特性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
// js中数组的特性 //java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型. //js中的数组特性1: js中的数组可以装任意类型,没有任何限制. //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长. var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')]; /* alert(arr5.length);//8 arr5[10] = "hahaha"; alert(arr5.length); //11 alert(arr5[9]);// undefined */
Date对象
//方法1:不指定参数 var nowd1=new Date(); console.log(nowd1.toLocaleString( )); //方法2:参数为日期字符串 var nowd2=new Date("2004/3/20 11:12"); console.log(nowd2.toLocaleString( )); //2004-3-20 11:12:00 var nowd3=new Date("04/03/20 11:12"); console.log(nowd3.toLocaleString( )); //2004-3-20 11:12:00 //方法3:参数为毫秒数 var nowd3=new Date(5000); console.log(nowd3.toLocaleString( ));//1970-1-1 08:00:05 console.log(nowd3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT //方法4:参数为年月日小时分钟秒毫秒 var nowd4=new Date(2004,2,20,11,12,0,300); console.log(nowd4.toLocaleString( ));//毫秒并不直接显示 2004-2-20 11:12:00
Date对象的方法
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月(0-11)
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
Date对象的方法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//设置日期和时间 //setDate(day_of_month) 设置日 //setMonth (month) 设置月 //setFullYear (year) 设置年 //setHours (hour) 设置小时 //setMinutes (minute) 设置分钟 //setSeconds (second) 设置秒 //setMillliseconds (ms) 设置毫秒(0-999) //setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12点23分50秒
日期和时间的转换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
日期和时间的转换: getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差,以分钟为单位 toUTCString() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
Math对象
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值。 exp(x) 返回 e 的指数。 floor(x)对数进行下舍入。 log(x) 返回数的自然对数(底为e)。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次幂。 random() 返回 0 ~ 1 之间的随机数。 round(x) 把数四舍五入为最接近的整数。 sin(x) 返回数的正弦。 sqrt(x) 返回数的平方根。 tan(x) 返回角的正切。 //方法练习: //alert(Math.random()); // 获得随机数 0~1 不包括1. //alert(Math.round(1.5)); // 四舍五入 //练习:获取1-100的随机整数,包括1和100 //var num=Math.random(); //num=num*10; //num=Math.round(num); //alert(num) //============max min========================= /* alert(Math.max(1,2));// 2 alert(Math.min(1,2));// 1 */ //-------------pow-------------------------------- alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.
Function对象
function 函数名(参数){ 函数语句; return 返回值; }
可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致,大小写是敏感的
返回值必须使用return
Function类可以表示开发者定义的任何函数
用Function类直接创建函数的语法如下
var funcname=new Function("参数1","参数2","function_body");
JavaScript的函数加载执行时在整体加载完才会执行,所以执行函数放在函数声明上或下都可以
arguments对象
在函数代码中,使用特殊对象arguments无需明确指出参数名,就能访问它们
引用属性arguments.length就可以检测函数的参数个数
function howManyArgs(){ console.log(arguments.length); } howManyArgs("xiao",66); //2 howManyArgs(); //0
JavaScript不会验证传递给函数的参数个数是否等于函数定义的参数个数,定义的函数可以接受任意个数的参数而不会引发任何错误。任何遗漏的参数都会以undefined传递给函数,函数将忽略多余的参数
匿名函数
(function(arg){
console.log(arg);
})("xiaobai")
BOM对象
window对象
所有浏览器都支持window对象
概念上讲:一个html文档对应一个window对象
功能上讲:控制浏览器窗口的
使用上讲:window对象不需要创建对象,直接使用即可
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。
setInterval clearInterval
setInterval()方法会不停地调用函数,直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可以用作clearInterval的参数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input type="text" id="time"> <button onclick="start()">start</button> <button onclick="end()">end</button> <script> var ID; function start(){ if (ID==undefined){ foo(); ID=setInterval(foo,1000); } } function foo(){ var timer=new Date().toString(); var ele=document.getElementByid("time") ele.value=timer; } function end(){ clearInterval(ID); ID=undefined; }
DOM对象
HTML Document Object Model 文档对象模型
HTML DOM定义了访问和操作HTML文档的标准方法
HTML DOM把HTML文档呈现为带有元素、属性和文本的树结构
DOM节点
HTML文档中的每个成分都是一个节点
DOM是这样规定的:
整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
节点关系
节点树种的节点彼此拥有层级关系
父parent,子child和兄弟sibling用来描述这些层级关系。父节点拥有子节点。同级的节点被称为兄弟
1.在节点树种,顶端节点被称为根root
2.每个节点都有父节点、除了根
3.一个节点可拥有任意数量的子
4.兄弟是拥有相同父节点的节点
节点查找
document.getElementById("idname")
document.getElementsByTagname("tagname")
document.getElementsByName("name")
document.getElementsByClassName("classname")
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script> 局部查找
导航节点属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
'''
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
'''
JavaScript没有办法找到所有的兄弟标签