JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应的代码,浏览器可以解释并作出相应的处理。
1 <!--方式一-->
2 <script type"text/javascript" src="js文件"></script>
3
4
5 <!--方式二 -->
6 <script type"text/javascript">
7 js代码内容...
8 </script>
·HTML的head中
·HTML的body代码块底部(强烈推荐)
由于html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么及时js代码耗时严重,也不会影响用户看到页面的效果,只是js实现特效慢而已。
1 如:
2 <script src="https://www.xxxx.com"></script>
3 <script>
4 alert("123");
5 </script>
6
7
8 //alert(弹窗)
·全局变量
·局部变量
JavaScript中变量的声明是一个非常容易出错的点,局部变量必须以个var开头,如果未使用var,则默人表示声明的是全局变量·
1 var name ="xxxx" //局部变量
2 age = 18 //全局变量
注:单行注释 // 多行注释 /* */
javascript 中的数据类型分为原始类型和对象类型:
·原始类型
·数字
·字符串
·布尔值
·对象类型
·数组
·"字典"
·...
特憋的,数字,布尔值,null,undefined,字符串是不可变的.
//null, undefined
null,是JavaScript语言的关键字,它表示以个特殊的值,常用来描述"空值".
undefined是一个特殊值,表示变量未定义.
1·数字(Number)
JavaScript中不区分整数值和浮点数值,java中所有数字均使用浮点数值表示·
转换:
·parseIne(变量名) 将某个值转换成数字,不成功则返现NaN
·parseFloat(变量名)将某个值转换成浮点数,不成功则返现NaN
特殊值:
·NaN:非数字,可使用isNaN(num)来判断·
·Infinity:无穷大,可使用isFinite(num)来判断·
更多数值计算:
常量
Math.E
常量e,自然对数的底数·
Math.LN10
10的自然对数·
Math.LN2
2的自然对数·
Math.LOG10E
以10为底的e的对数·
Math.LOG2E
以2为底的e的对数·
Math.PI
常量figs/U03C0.gif·
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( )
计算正切值。
2·字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法·
常见功能:
a = "huanyingguanglin"
"huanyingguanglin"
a.length (查看长度)
16
a = " wyc "
" wyc "
a.trim() (去除字符串的两边空格)
"wyc"
a.trimleft() (去除字符串的左边空格)
a.trimright (去除字符串的右边空格)
a = "nihao"
"nihao"
a.charAt(2) (返回字符串中的参数的字符)!参数可以定义,看字符串的长度定义
"h"
a = "wyc" "wyc" b = "nihao" "nihao" a.concat(b) (字符串的拼接) "wycnihao"
a = "wycnihao" "wycnihao" a.indexOf("ni",2) (寻找子序列位置) 3
a = "wycnihao" "wycnihao" a.lastIndexOf("yc",2) (子序列位置 ) 1
a = "wycnihao" "wycnihao" a.substring("yc",4) (根据索引获取子序列) "wycn"
a = "wycnihao" "wycnihao" a.slice(1,6) (切片,从字符串的1位置到6位置) "ycnih"
a = "wycnihao" "wycnihao" a.toLowerCase() (将字符串变小写) "wycnihao" a.toUpperCase() (将字符串变大写) "WYCNIHAO"
a = "wycnihao" "wycnihao" a.split("cn") (字符串的分割) ["wy", "ihao"]
a = "wycwyc9wycwyc" "wycwyc9wycwyc" a.split(/(\d+)/) (字符串的分割,支持正则分割) ["wycwyc", "9", "wycwyc"]
a = "wycwycwyc" "wycwycwyc" a.match(/w/) (全局匹配) ["w"] a.match(/w/g) (匹配的元素后边加个g,表示把字符串里边所有的w全部匹配出来) ["w", "w", "w"]
a = "wycwycwyc"
"wycwycwyc" a.search(/y/) (匹配出元素的位置) 1
a = "wyc7wycwyc9" "wyc7wycwyc9" a.replace(/(\d+)/g,"X") (将匹配到的数字全部替换为"X") "wycXwycwycX" a.replace(/(\d+)/g,"$&"+"L") (将匹配到的数字后边的元素替换为“L”) "wyc7Lwycwyc9L"
a.replace(/(\d+)/g,"&") (将所有匹配到的数字替换成艾特符号“&”) "wyc&wycwyc&"
a = "wyc7wycwyc9" "wyc7wycwyc9" a.replace(/(\d+)\w+(\d+)/g,"$2$1") (将匹配到数字的7,9交换一下位置) "wyc97"
a = "wyc7wycwyc9" "wyc7wycwyc9" a.replace(/\d+/,"$`") (用于匹配左侧文本) "wycwycwycwyc9"
a = "wyc7wycwyc9" "wyc7wycwyc9" a.replace(/(\d+)\w+(\d+)/g,"$$") (直接量"$"符号) "wyc$"
布尔类型仅包含真假,与python不同的是,python第一个字母是大写,("True","False"),则JavaScript里是小写("true","false")
· == (比较值相等)
· != (不等于)
· === (比较值和类型相等)
· !=== (不等于)
· || (或)
· && (且)
JavaScript中的数组类似于python中的列表[]
常见功能:
1 obj.length //数组的大小
2
3 obj.push(ele) //尾部追加元素
4
5 obj.pop //尾部获取元素
6
7 obj.shift() //头部移除元素
8
9 obj.splice(start,deleteCount,value,......) //插入·删除或替换数组的元素
10
11 obj.splice(n,0,val) //指定位置插入元素
12 obj.splice(n,1,val) //指定位置替换元素
13 obj.splice(n,1) //指定位置删除元素
14
15 obj.slice() //切片
16
17 obj.reverse() //反转
18
19 onj.join(sep) //将数组元素链接起来以构建一个字符串
20
21 obj.concat(val,...) //连接数组
22
23 obj.sort() //对数组元素进行排序
//查看数组元素的长度
a = [11,22,33,44,55]
[11, 22, 33, 44, 55]
a.length
5
// 给数组尾部添加元素
a.push(66)
6
a
[11, 22, 33, 44, 55, 66]
//删除数组元素
[11, 22, 33, 44, 55, 66]
ret = a.pop()
66
ret
66
a
[11, 22, 33, 44, 55]
//在数组头部添加元素
[11, 22, 33, 44, 55]
a.unshift(77)
6
a
[77, 11, 22, 33, 44, 55]
//在数组头部移除元素
[77, 11, 22, 33, 44, 55]
a.shift()
77
a
[11, 22, 33, 44, 55]
//splice即删除既添加
a
[11, 22, 33, 44, 55]
a.splice(1,0,"wyc") (表示在1的位置,0表示不删除,"wyc"表示在1的
位置添加进去)
[]
a
[11, "wyc", 22, 33, 44, 55]
//splice能添加多个元素
[11, "wyc", 22, 33, 44, 55]
a.splice(1,0,"wyc","nihao") (splice,可以在数组一次里边添加多个元素 )
[]
a
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]
//splice删除
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,2) (表示从数组的第一个位置删除两个元素)
["wyc", "nihao"]
a
[11, "wyc", 22, 33, 44, 55]
//splice替换
[11, "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,1,"hi") (表示在元素1的位置删除1在添加一个新的元素)
["nihao"]
a
[11, "hi", "wyc", 22, 33, 44, 55]
//切片
a
[11, "hi", "wyc", 22, 33, 44, 55]
a.slice(1,2)
["hi"]
//反转
[11, "hi", "wyc", 22, 33, 44, 55]
a.reverse() (将数组元素反转过来)
[55, 44, 33, 22, "wyc", "hi", 11]
//将数组元素拼接起来(join)
[55, 44, 33, 22, "wyc", "hi", 11]
a.join("_") //将数组元素用下滑线拼接起来
"55_44_33_22_wyc_hi_11"
//sort排序
[55, 44, 33, 22, "wyc", "hi", 11]
a.sort() //将数组进行排序
[11, 22, 33, 44, 55, "hi", "wyc"]
·JSON.stringify(obj) 序列化
·JSON.parse(str) 反序列化
a = 3
3
JSON.stringify(a) (将a序列化成字符串)
"3"
JSON.parse(a) (将a在反序列化成整数)
3
·decodeURI() URI中为转义的字符
·decodeURIComponent() URI组件中的未转义字符
·encodeURI() URI中的转义字符
·encodeURIComponent() 转义URI组件中的字符
·escape() 对字符串的转义
·unescape() 给转义字符串解码
·URIError 由URI的编码和解码方法抛出
JavaScript中的eval是python中eval和exec的合集,既可以编译代码也可以获取返回值·
·eval()
·EvalError 执行字符串中的JavaScript代码
JavaScript中支持正则表达式,其主要提供了两个功能:
·test(string) 用于检测正则是否匹配
·exec(string) 用于获取正则匹配的内容
注:定义正则表达式时,"g","i","m"分别表示去全局匹配,忽略大小写,多行匹配·
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
·时间统一时间
·本地时间(东8区)
更多操作参见:http://www.shouce.ren/api/javascript/main.html
javascript中支持两个条件语句分别是:if和switch
if(条件){
}else if(条件){
}else{
}
switch(name){
case"1":
age = 123;
break;
case"2":
age = 456;
break
default:
age = 777;
}
javascript中支持三种循环语句,分别是:
var names = ["wyc","nihao"];
for(var i=0;i>names.lengith;i++){
console.log(i);
console.log(name[i]);
}
var name = ["wyc","nihao"]
for (var index in name ){
console.log(index);
console.log(name[index]);
}
while(条件){
//break;
//continue;
}
1 try{
2 //这段代码从上到下运行,其中任何一个语句抛出异常该代码块就结束运行·
3 }
4 catch(e){
5 //如果try代码中抛出异常,catch代码块中的代码就会被执行.
6 //e是一个局部变量,用来指向Error对象或者其他抛出的对象
7 }
8 finally{
9 //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行·
10 }
注:主动跑出异常throw Error("xxxxx")
1·基本函数
javascript中函数基本可分为一下三类:
//普通函数
function function(arg){ //创建函数
return true;
}
//匿名函数
var func = function(arg){
return "tony";
}
//自动执行函数
(function(arg){
console.log(arg);
})("123")
注意:对于javascript中函数参数,十几参数的个数可能小于形参的个数,函数内的特殊值arguments中封装了所有的实际参数·
2·作用域
javascript中每个函数都有自己的的作用域,当出现函数嵌套时,就出现了作用域链,当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在则异常·
!切记:所有的作用域在创建函数且未执行的时候就已经存在了·
1 function f2(){
2 var arg = 111;
3 function f3(){
4 conlose.log(arg);
5 }
6 return f3();
7 }
8
9 ret = f2(); //执行函数
10 ret();
function f2(){
var arg = [11,22];
function f3(){
console.log(arg);
}
arg = [44,55];
return f3;
}
ret = f2();
ret();
注:声明提前,在javascript引擎"预编译"时进行·
更多:
3丶闭包
[闭包],是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分·
闭包是个函数,而他[记住了周围发生了什么]·表现为由[一个函数]体中定义了[另一个函数],由于作用域链只能从内向外找,默认外部无法获取函数内部变量.闭包、在外部获取函数内部的变量.
function f1(){
var arg = [11,22];
function f2(){
return arg;
}
return f2;
}
ret = f2();
ret();
function Foo (name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.name + arg;
}
}
var obj = new Foo("Wyc",19);
var ret = obj.Func("nihao");
console.log(ret);
对于上述代码需要注意:
· Foo充当的构造方法 在python构造方法代指的是(__init__)
· thif 代指对象
· 创建对象是需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存.使用原型和可以解决该问题.
function Foo(name,age){
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo:function(){
return this.Name + this.Age
},
Func : function(arg){
return this.Name + arg;
}
}