JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。
一,编写形式:
JavaScript代码存放位置
由于Html代码是从上到下执行,在<Head>中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么即使js代码耗时严重,也不会影响用户看到页面效果,只是js实现特效慢而已。

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
二,变量:
JavaScript中声明变量很容易出错,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量。

<body> <script> name = 'kaixin'; //定义全局变量 function f1(){ // 定义局部变量 var name = '开心'; alert(name) } f1(); alert( name) </script> </body>
三,数据类型:
有两种 原始类型 :数字,字符串,布尔值
对象类型 :数组 字典
// null、undefined
null 是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
undefined 是一个特殊值,表示变量未定义。
数字,布尔值,字符串 null undefined 是不可变的
1,数字(number)
s = 123 创建一个原始值 s1 = new Number(123) 根据Number类创建了一个对象
JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
转换:
- parseInt(..) 将某值转换成数字,不成功则NaN
ss = "123" "123" cc = parseInt(ss) 123 ss1 = "u123" cc1 = parseInt(ss1) 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 ="kaixin123" a.length 字符串长度 9 a.trimLeft() a.trimRight) a.trim() 去除空白 "kaixin123" a.charAt(n) 返回字符串中的第n个字符 a.concat("ss","_") 拼接 "kaixin123ss_" a.indexOf("xin",2) 3 a.lastIndexOf("ai",0) 子序列位置 -1 a.substring(2) 根据索引获取子序列 "ixin123" a.slice(2,5) 切片 "ixi" a.toUpperCase() 大写 "KAIXIN123" a.toLowerCase() 小写 "kaixin123" a.split(2) ["kaixin1", "3"] 分割 a.match(/xin/g) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。 ["xin", "xin"] a = "kai1xin2ge3" 替换 "kai1xin2ge3" a.replace(/()d+g/,'x') "kai1xinxe3" a.replace(/()d+/g,'123') "kai123xin123ge123" a.replace(/()d+/g,"$"+'23') $数字:匹配的第n个组内容; "kai$23xin$23ge$23" a.replace(/()d+/g,"$&"+'123') 当前匹配的内容; "kai1123xin2123ge3123" a.replace(/()d+/g,"$'") 位于匹配子串左侧的文本 "kaixin2ge3xinge3ge" a.replace(/()d+/g,"$`") 位于匹配子串左侧的文本 "kaikaixinkai1xingekai1xin2ge" a.replace(/()d+/g,"$$") 直接量$符号 "kai$xin$ge$"
3.布尔值(Boolean)
布尔类型仅包含真假,与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4,数组(Array)
类似于python中的列表
常用功能:

a = [11,22] a.length() 长度 2 a.push("xin") 尾部追加元素 3 a.pop("xin") 尾部删除并获取元素 "xin" a.unshift("kai") 头部插入元素 3 a.shift("xin") 头部移除元素 "xin" a.splice(1,0,55,66) 指定位置插入内容 [] a [11, 55, 66, "kai", "xin"] a.splice(1,2,"kai","xin") 指定位置替换内容 [22, 33] a [11, "kai", "xin"] a.splice(1,1) 指定位置删除内容 [55] a [11, 66, "kai", "xin"] a.slice(1,3) 切片 [66, "kai"] a.reverse() 反转 ["xin", "kai", 66, 11] a.join("---") 将数组元素连接起来以构建一个字符串 "xin---kai---66---11" s = a.concat([7,8,9,0]) 连接数组 ["xin", "kai", 66, 11, 7, 8, 9, 0] s.sort() 对数组进行排序 [0, 11, 66, 7, 8, 9, "kai", "xin"]
四,其他:
1,序列化:
s = [11,2,22,3,2222,33] c = JSON.stringify(s) 序列化 "[11,2,22,3,2222,33]" d = JSON.parse(c) 反序列化 [11, 2, 22, 3, 2222, 33]
2,转义:
a1 = "http://www.cnblogs.com/?k=理解"; aa = encodeURI(a1); URI中的转义字符 console.log(aa); aa2 = decodeURI(aa); URl中未转义的字符 console.log(aa2); s2 = "http://www.cnblogs.com/?k=理解"; ret = encodeURIComponent(s2); 转义URI组件中的字符 console.log(ret); ret2 = decodeURIComponent(ret); URI组件中的未转义字符 console.log(ret2) s1 = "开心"; console.log(s1); ret = escape(s1); 对字符串转义 c = unescape(ret); 给转义字符串解码
URIError 转义失败 提示
3,eval:
JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值;
eval("a=123") 123 a 123 eval("for(var i=1;i<10;i++){console.log(i)}") 执行表达式 1 2 3 4 5 6 7 8 9
4,正则表达式:
JavaScript中支持正则表达式,其主要提供了两个功能:
- test(string) 用于检测正则是否匹配
-
a = /^1[3|5|8]d{9}$/; a.test("115451235") false a.test("18734887005") true
- exec(string) 用于获取正则匹配的内容
-
a = /d+/ a.exec("xin1xin2xin3") ["1"] a = /d+/g; /d+/g a.exec("xin1xin2xin3") ["1"] a.exec("xin1xin2xin3") ["2"] a.exec("xin1xin2xin3") ["3"]
注:定义正则表达式时,“g”、“i”、“m”分别表示全局匹配,忽略大小写、多行匹配。
5,时间处理:
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
- 时间统一时间
- 本地时间(东8区)

data = new Date() Thu Jul 07 2016 15:56:33 GMT+0800 (中国标准时间) data.getDate() 返回一个月中的某一天 7 data.getDay() 返回一周中的某一天 4 data.getHours() 返回Date对象的小时字段 15
更多操作参见:http://www.shouce.ren/api/javascript/main.html
五,语句和异常:
1,条件语句:

if(条件){ }else if(条件){ }else{ }

switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
2,循环语句:

li = [11,22,33,44]; for (var item in li){ console.log(item); console.log(li[item]) } dic = {"k1":123,"k2":456}; for(var item in dic){ console.log(item); console.log(li[item]) }

li = [11,22,33,44]; for(var i = 0;i<li.length;i=i+1){ console.log(i,li[i]) }

while(条件){ // break; // continue; }
3,异常处理:
try { //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 } catch (e) { // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 //e是一个局部变量,用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。 }
注:主动抛出异常 throw Error('xxxx')
六,函数:
1,基本函数:

function f1(){ console.log(123); } f1()

function f1(){ console.log(123); } f1()

var a = function(){ console.log(789) }; a()
2,作用域:
JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在,则异常。
3,闭包:
「闭包」,是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
闭包是个函数,而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找,默认外部无法获取函数内部变量。闭包,在外部获取函数内部的变量。
name = "alex"; function f1(){ var name = "eric"; function f2(){ alert(name); } return f2 } var ret = f1(); ret();
4,面向对象:
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret);
这里需要注意
- Foo充当的构造函数 相当于python里的 __init__
- this 代指的就说对象 相当于python里的 self
- 创建对象是需要加个 new
- 每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:
- 原型有两种方式
function Foo(name,age){ this.Name = name; this.Age = age; } Foo.prototype = { Func:function(){ return this.Name + this.Age } }; obj1 = new Foo('alex',18); ret = obj1.Func(); console.log(ret)
function Foo(name,age){ this.Name = name; this.Age = age; } Foo.prototype.Func = function(){ return this.Name + this.Age }; obj1 = new Foo('alex',18); ret = obj1.Func(); console.log(ret)