JavaScript基础
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。
一、基本知识
(一)、存在形式
1、JavaScript代码存在形式
1 2 3 4 5 6 | <span style= "font-size: 16px;" > <!--方式一-->
<script type= "<span" style= "color: #800000;" > "</script></span><span style=" color: #800000; ">text/javascript</span><span style=" color: #800000; ">" </span> src=<span style= "color: #800000;" > "</span><span style=" color: #800000; ">js文件</span><span style=" color: #800000; ">" </span>>
<!--方式二-->
<script type= "<span" style= "color: #800000;" > "<span style=" color: #800000; ">text/javascript<span style=" color: #800000; ">" ><span style= "color: #000000;" >
js内容
</script>
|
Salin selepas log masuk
2、JavaScript存放位置
HTML的head中
HTML的body代码块底部(推荐)
由于Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部(执行完body代码后再执行JavaScript代码),那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。

1 2 3 4 | <script src= "https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q" ></script>
<script><span style= "color: #000000;" >
alert( '123' <span style= "color: #000000;" >);
</script>
|
Salin selepas log masuk
例子
(二)、变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量
1 2 3 4 5 6 7 8 9 10 11 12 | <span style= "font-size: 16px;" > <script type= "text/javascript" >
<span style= "color: #008000;" >
name = 'seven' <span style= "color: #000000;" >;
</span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > func(){
</span><span style= "color: #008000;" >
<span style= "color: #0000ff;" > var </span> age = 18<span style= "color: #000000;" >;
</span><span style= "color: #008000;" >
gender = "男" ;<span style= "color: #000000;" >
}
</span>
|
Salin selepas log masuk
JavaScript中代码注释:
注:此注释仅在Script块中生效。
(三)、数据类型
JavaScript 中的数据类型分为原始类型和对象类型:
特别提醒:数字、布尔值、null、undefined、字符串的值是不可变的
null为特殊的值,表示什么都没有
undefined表示未定义

1 2 3 4 | <script type= "text/javascript" >
<span style= "color: #0000ff;" > var <span style= "color: #000000;" > a;
alert(a)
</script>
|
Salin selepas log masuk
例
1、数字(Number)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法
转换:
- parseInt(..) 将某值转换成数字,不成功则NaN
- parseFloat(..) 将某值转换成浮点数,不成功则NaN
特殊值:
- NaN,非数字。可使用 isNaN(num) 来判断。
- Infinity,无穷大。可使用 isFinite(num) 来判断。
更多数值计算:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | <span style= "color: #000000;" >常量
Math.E
常量e,自然对数的底数。
Math.LN10
10的自然对数。
Math.LN2
2的自然对数。
Math.LOG10E
以10为底的e的对数。
Math.LOG2E
以2为底的e的对数。
Math.PI
常量figs</span>/U03C0.gif。
<span style= "color: #000000;" >
Math.SQRT1_2
2的平方根除以1。
Math.SQRT2
2的平方根。
静态函数
Math. abs ( )
计算绝对值。
Math. acos ( )
计算反余弦值。
Math.asin( )
计算反正弦值。
Math. atan ( )
计算反正切值。
Math. atan2 ( )
计算从X轴到一个点的角度。
Math. ceil ( )
对一个数上舍入。
Math. cos ( )
计算余弦值。
Math. exp ( )
计算e的指数。
Math. floor ( )
对一个数下舍人。
Math.log( )
计算自然对数。
Math.max( )
返回两个数中较大的一个。
Math.min( )
返回两个数中较小的一个。
Math.pow( )
计算xy。
Math.random( )
计算一个随机数。
Math. round ( )
舍入为最接近的整数。
Math.sin( )
计算正弦值。
Math.sqrt( )
计算平方根。
Math.tan( )
计算正切值。</span>
|
Salin selepas log masuk
更多
2、字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
常见功能:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span style= "font-size: 16px;" >obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列(从原来的序列取出来便是子序列,子序列的位置按第一个字符取出来的位置定)位置(从前往后)
obj.lastIndexOf(substring,start) 子序列位置(从后往前)
obj.substring(from, to) 根据索引获取子序列(用于提取字符串中介于两个指定下标之间的字符)
obj.slice(start, end ) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号</span>
|
Salin selepas log masuk

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <meta charset= "UTF-8" >
<title>Title</title>
<div id= "i1" style= "display: inline-block;background-color: green;color: white" >欢迎宝强位临指导</div>
<script>
<span style= "color: #008000;" >
setInterval( 'f1()' ,1000<span style= "color: #000000;" >);
<span style= "color: #0000ff;" > function <span style= "color: #000000;" > f1() {
<span style= "color: #008000;" >
<span style= "color: #0000ff;" > var tag=document.getElementById( 'i1' <span style= "color: #000000;" >);
<span style= "color: #008000;" >
<span style= "color: #0000ff;" > var text =<span style= "color: #000000;" > tag.innerText;
<span style= "color: #0000ff;" > var a=text.charAt(0<span style= "color: #000000;" >);
<span style= "color: #0000ff;" > var sub=text.substring(1<span style= "color: #000000;" >,text.length);
<span style= "color: #0000ff;" > var new_str=sub+<span style= "color: #000000;" >a;
<span style= "color: #008000;" >
tag.innerText =<span style= "color: #000000;" > new_str;
}
</script>
|
Salin selepas log masuk
例
3、布尔类型(Boolean)
布尔类型仅包含真假,与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4、数组
JavaScript中的数组类似于Python中的列表
常见功能:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span style= "color: #000000;" >obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,</span>0<span style= "color: #000000;" >,val) 指定位置插入元素
obj.splice(n,</span>1<span style= "color: #000000;" >,val) 指定位置替换元素
obj.splice(n,</span>1<span style= "color: #000000;" >) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串(python是sep.join(obj))
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序<br></span>
|
Salin selepas log masuk
5、通过对象来构造字典
1 2 3 4 | <span style= "color: #008000;" >
a = { 'k1' :123, 'k2' :456<span style= "color: #000000;" >}
</span><span style= "color: #008000;" >
a[ 'k1' ]
|
Salin selepas log masuk
(四)、其他
1、序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
1 2 3 4 5 | a= {k1: 123, k2: 456<span style= "color: #000000;" >}
</span><span style= "color: #008000;" >
b=<span style= "color: #000000;" >JSON.stringify(a)
</span><span style= "color: #008000;" >
b=JSON.parse(b)
|
Salin selepas log masuk
2、转义
url的转义:
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
-
encodeURIComponent( ) 转义URI组件中的字符
发送值的转义:
- escape( ) 对字符串转义
-
unescape( ) 给转义字符串解码
----------------------------------------------------------
- URIError 由URl的编码和解码方法抛出
1 2 3 4 5 6 7 8 9 10 11 | <script>
<span style= "color: #0000ff;" > var url= "http://www.baidu.com?=王宝强"
<span style= "color: #008000;" >
<span style= "color: #0000ff;" > var a=<span style= "color: #000000;" >encodeURI(url)
console.log(a)
<span style= "color: #008000;" >
<span style= "color: #0000ff;" > var b=<span style= "color: #000000;" >decodeURI(url)
console.log(b)
<span style= "color: #008000;" >
<span style= "color: #0000ff;" > var c=<span style= "color: #000000;" >encodeURIComponent(url)
console.log(c) <br /> <span style= "color: #008000;" >
|
Salin selepas log masuk
3、eval
JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
4、正则表达式
JavaScript中支持正则表达式,其主要提供了两个功能:
- test(string) 用于检测正则是否匹配
- exec(string) 用于获取正则匹配的内容
注:定义正则表达式时,“g”、“i”、“m”分别表示全局匹配,忽略大小写、多行匹配。
5、时间处理
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
1 2 3 4 5 6 7 8 9 | d=<span style= "color: #0000ff;" > new </span><span style= "color: #000000;" > Date ()
结果:Fri Aug </span>19 2016 14:45:44 GMT+0800<span style= "color: #000000;" > (中国标准时间)
</span><span style= "color: #008000;" >
<span style= "color: #000000;" >d.getFullYear()
</span><span style= "color: #008000;" >
<span style= "color: #000000;" >d.getHours
d.getUTCHours()
</span><span style= "color: #008000;" >
d.setMinutes(d.setMinutes() + 2)
|
Salin selepas log masuk
更多操作参见:http://www.shouce.ren/api/javascript/main.html
6、typeof 运算符
返回一个用来表示表达式的数据类型的字符串。
- 未定义:typeof(x)="undefined" 如果运算数未定义,返回的就是 "undefined".
- 运算数为数字 :typeof(x) = "number"
- 字符串:typeof(x) = "string"
- 布尔值:typeof(x) = "boolean"
- 对象,数组和null:typeof(x) = "object"
- 函数:typeof(x) = "function
1 2 3 | <span style= "color: #0000ff;" > var </span><span style= "color: #000000;" > name
</span><span style= "color: #0000ff;" >typeof</span><span style= "color: #000000;" >(name)
结构:</span> "undefined"
|
Salin selepas log masuk
在js里用到数组,比如 多个名字相同的input, 若是动态生成的, 提交时就需要判断其是否是数组: if( typeof(document.mylist.length) != "undefined" ) {}或 if( !isNaN(document.mylist.length) ) {}
7、 document对象详解
(五)、条件语句及异常
1、条件语句
JavaScript中支持两个中条件语句,分别是:if 和 switch

1 2 3 4 5 6 7 | <span style= "color: #0000ff;" > if </span><span style= "color: #000000;" >(条件){
}</span><span style= "color: #0000ff;" > else </span> <span style= "color: #0000ff;" > if </span><span style= "color: #000000;" >(条件){
}</span><span style= "color: #0000ff;" > else </span><span style= "color: #000000;" >{
}</span>
|
Salin selepas log masuk
if

1 2 3 4 5 6 7 8 9 10 | <span style= "color: #0000ff;" > switch </span><span style= "color: #000000;" >(name){
</span><span style= "color: #0000ff;" > case </span> '1' <span style= "color: #000000;" >:
age </span>= 123<span style= "color: #000000;" >;
</span><span style= "color: #0000ff;" > break </span><span style= "color: #000000;" >;
</span><span style= "color: #0000ff;" > case </span> '2' <span style= "color: #000000;" >:
age </span>= 456<span style= "color: #000000;" >;
</span><span style= "color: #0000ff;" > break </span><span style= "color: #000000;" >;
</span><span style= "color: #0000ff;" > default </span><span style= "color: #000000;" > :
age </span>= 777<span style= "color: #000000;" >;
}</span>
|
Salin selepas log masuk
switch
2、循环语句
JavaScript中支持三种循环语句,分别是:

1 2 3 4 5 6 | <span style= "color: #0000ff;" > var </span> names = [ "alex" , "tony" , "rain" <span style= "color: #000000;" >];
</span><span style= "color: #0000ff;" > for </span>(<span style= "color: #0000ff;" > var </span> i=0;i<names.length style= "color: #000000;" >){
console.log(i);
console.log(names[i]);
}</names.length>
|
Salin selepas log masuk
方式一

1 2 3 4 5 6 | <span style= "color: #0000ff;" > var </span> names = [ "alex" , "tony" , "rain" <span style= "color: #000000;" >];
</span><span style= "color: #0000ff;" > for </span>(<span style= "color: #0000ff;" > var </span> index <span style= "color: #0000ff;" >in</span><span style= "color: #000000;" > names){
console.log(index);
console.log(names[index]);
}</span>
|
Salin selepas log masuk
方式二

1 2 3 4 | <span style= "color: #0000ff;" > while </span><span style= "color: #000000;" >(条件){
</span><span style= "color: #008000;" >
<span style= "color: #008000;" >
}
|
Salin selepas log masuk
方式三
3、异常处理
1 2 3 4 5 6 7 8 9 10 11 | <span style= "color: #0000ff;" > try </span><span style= "color: #000000;" > {
</span><span style= "color: #008000;" >
<span style= "color: #000000;" >}
</span><span style= "color: #0000ff;" > catch </span><span style= "color: #000000;" > (err) {
</span><span style= "color: #008000;" >
<span style= "color: #008000;" >
<span style= "color: #000000;" >}
</span><span style= "color: #0000ff;" >finally</span><span style= "color: #000000;" > {
</span><span style= "color: #008000;" >
<span style= "color: #000000;" >}
注:主动抛出异常 </span><span style= "color: #0000ff;" > throw </span> <span style= "color: #0000ff;" > new </span> Error( '错误信息' )
|
Salin selepas log masuk

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script>
<span style= "color: #0000ff;" > var txt= "" <span style= "color: #000000;" >;
<span style= "color: #0000ff;" > function <span style= "color: #000000;" > message()
{
<span style= "color: #0000ff;" > try <span style= "color: #000000;" >
{
adddlert( "Welcome guest!" <span style= "color: #000000;" >);
}
<span style= "color: #0000ff;" > catch <span style= "color: #000000;" >(err)
{
txt= "There was an error on this page.\n\n" <span style= "color: #000000;" >;
txt+= "Error description: " + err.message + "\n\n" <span style= "color: #000000;" >;
txt+= "Click OK to continue.\n\n" <span style= "color: #000000;" >;
alert(txt);
}
}
</script>
<input type= "button" value= "View message" onclick= "message()" >
|
Salin selepas log masuk
例子
更多:http://www.w3school.com.cn/js/js_errors.asp
二、函数
(一)、基本函数
1、基本函数
JavaScript中函数基本上可以分为一下三类:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span style= "color: #008000;" >
<span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > func(arg){
</span><span style= "color: #0000ff;" > return </span> <span style= "color: #0000ff;" >true</span><span style= "color: #000000;" >;
}
</span><span style= "color: #008000;" >
<span style= "color: #0000ff;" > var </span> func = <span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(arg){
</span><span style= "color: #0000ff;" > return </span> "tony" <span style= "color: #000000;" >;
}<br> 调用:func(alert(5));
</span><span style= "color: #008000;" >
(<span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(arg){
console.log(arg);
})(</span> '123' )
|
Salin selepas log masuk
注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。
(二)、作用域
在Java或C#中存在块级作用域,即:大括号就是一个作用域
在JavaScript语言中无块级作用域
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span style= "font-size: 16px;" ><script>
<span style= "color: #0000ff;" > function </script></span><span style= "color: #000000;" > f1()
{
</span><span style= "color: #0000ff;" > if </span> (1 == 1<span style= "color: #000000;" >)
{
</span><span style= "color: #0000ff;" > var </span> name = 'server' <span style= "color: #000000;" >;
}
console.log(name);
}
f1();
</span><span style= "color: #008000;" >
<span style= "color: #008000;" > </span>
|
Salin selepas log masuk
JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。
切记:所有的作用域在创建函数且未执行时候就已经存在。

1 2 3 4 5 6 7 8 9 10 11 | <span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > f2(){
</span><span style= "color: #0000ff;" > var </span> arg= [11,22<span style= "color: #000000;" >];
</span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > f3(){
console.log(arg);
}
arg </span>= [44,55<span style= "color: #000000;" >];
</span><span style= "color: #0000ff;" > return </span><span style= "color: #000000;" > f3;
}
ret </span>=<span style= "color: #000000;" > f2();
ret();</span>
|
Salin selepas log masuk
例子
注:声明提前,在JavaScript引擎“预编译”时进行(js的预编译大概顺序,js引擎读取一段js代码,首先预编译,就是逐行读取js代码,寻找变量和函数,遇到全局或局部变量,把变量的值变为undefind,存在内存中,遇到函数,直接存在内存中,这个过程如果发现语法错误,预编译终止。)
作用域和作用域链详解:
点我!点我!
(三)、闭包
「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span style= "font-size: 16px;" ><span style= "color: #008000;" >
(<span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(){
</span><span style= "color: #0000ff;" > var </span> = 'bibao1' <span style= "color: #000000;" >;
fuction f1()
{
console.log(</span><span style= "color: #0000ff;" > var </span><span style= "color: #000000;" >)
}
</span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > f2()
{
console.log(</span><span style= "color: #0000ff;" > var </span><span style= "color: #000000;" >)
}
})();
</span><span style= "color: #008000;" >
(<span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(){
</span><span style= "color: #0000ff;" > var </span> = 'bibao2' <span style= "color: #000000;" >;
fuction f1()
{
console.log(</span><span style= "color: #0000ff;" > var </span><span style= "color: #000000;" >)
}
</span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > f2()
{
console.log(</span><span style= "color: #0000ff;" > var </span><span style= "color: #000000;" >)
}
})();</span></span>
|
Salin selepas log masuk
(四)、面向对象
1 2 3 4 5 6 7 8 9 10 | <span style= "font-size: 16px;" ><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > Foo (name,age) {
</span><span style= "color: #0000ff;" >this</span>.Name =<span style= "color: #000000;" > name;
</span><span style= "color: #0000ff;" >this</span>.Age =<span style= "color: #000000;" > age;
</span><span style= "color: #0000ff;" >this</span>.Func = <span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(arg){
</span><span style= "color: #0000ff;" > return </span> <span style= "color: #0000ff;" >this</span>.Name +<span style= "color: #000000;" > arg;
}
}
</span><span style= "color: #0000ff;" > var </span> obj = <span style= "color: #0000ff;" > new </span> Foo( 'alex' , 18<span style= "color: #000000;" >);
</span><span style= "color: #0000ff;" > var </span> ret = obj.Func( "sb" <span style= "color: #000000;" >);
console.log(ret);</span></span>
|
Salin selepas log masuk
对于上述代码需要注意:
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span style= "color: #0000ff;" > function </span><span style= "color: #000000;" > Foo (name,age) {
</span><span style= "color: #0000ff;" >this</span>.Name =<span style= "color: #000000;" > name;
</span><span style= "color: #0000ff;" >this</span>.Age =<span style= "color: #000000;" > age;
}
Foo.prototype </span>=<span style= "color: #000000;" > {
GetInfo: </span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(){
</span><span style= "color: #0000ff;" > return </span> <span style= "color: #0000ff;" >this</span>.Name + <span style= "color: #0000ff;" >this</span><span style= "color: #000000;" >.Age
},
Func : </span><span style= "color: #0000ff;" > function </span><span style= "color: #000000;" >(arg){
</span><span style= "color: #0000ff;" > return </span> <span style= "color: #0000ff;" >this</span>.Name +<span style= "color: #000000;" > arg;
}
}
</span><span style= "color: #0000ff;" > var </span> obj= <span style= "color: #0000ff;" > new </span> Foo(11,22<span style= "color: #000000;" >)
name</span>=<span style= "color: #000000;" >obj.Name
obj.GetInto()</span>
|
Salin selepas log masuk