前端之JavaScript
JavaScript
JavaScript 是一种轻量级的编程语言;是可插入 HTML 页面的编程代码;JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
一,编写方式
1、JavaScript代码存在形式
/*方式一*/
<script type="text/javascript" src="commons.js"> //src是导入JS文件
</script> /*方式二*/
<script>
function func(){
alert("Hello Welcome!") //弹窗,并显示
}
func() //执行func函数
2、JavaScript代码存放位置
把JavaScript代码放在HTML的<body>标签内的代码底部;
Html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面;
如果把js代码放在代码底部这样就不会影响页面显示,后续js的代码继续加载。
二、变量
JavaScript中的变量,局部变量前必须以 var 开头 ,没有加 var 默认为全局变量。
<script>
name = "alex"; //全局变量
function f1(){
var name = 123; //name是变量名,变量名前加var 表示局部变量
}
f1();
alert(name);
</script> // 表示单行注释
/* */ 表示多行注释 PS:这注释仅在Script块中生效
三、数据类型
JavaScript 中的数据类型分原始类型和对象类型:
原始类型
数字
字符串
布尔值
对象类型
数组
"字典"
数字、布尔值、null、undefined、字符串,是不可变的。
// null、undefined
null是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
undefined是一个特殊值,表示变量未定义。
1、数字(Number)
JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
1)创建:
> num1 = 123; //直接创建一个原始值
< 123 >num2 = new Number(123); //根据Number类创建一个对象
2)转换:
- parseInt(..) 将某值转换成数字,不成功则NaN
s1 = "qq123";
"qq123"
n1 = parseInt(s1);
NaN
s2 = "456";
"456"
n2 = parseInt(s2);
456
- parseFloat(..) 将某值转换成浮点数,不成功则NaN
a1 = 12.345313
12.345313
z1 = parseFloat(a1)
12.345313
特殊值:
- NaN,非数字。可使用 isNaN(num) 来判断。
s1 = "ww123";
n1 = parseInt(s1);
if(isNaN(n1)){ //isNaN判断是否是数字
else{
}
console.log(isNaN(n1))
- Infinity,无穷大。可使用 isFinite(num) 来判断。 flase则表示无穷;true则表示有限
- typeof, 判断类型
a = "123"
ret = typeof a
"number" a1 = "q123"
"q123"
ret = typeof a1
"string"
更多数值计算:
常量 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( )
计算正切值。 Math
2、字符串(String)
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本
常见功能:
测试地方在浏览器上进行,按F12,找到"Console"就可以进行调试了。
obj.length 获取字符串的长度
a1 = "alexseven"
"alexseven"
a1.length
9
obj.trim()移除两边空白
a1 = " alexseven "
" alexseven "
b = a1.trim()
"alexseven"
obj.trimLeft()移除左边空白
a1 = " alexseven "
" alexseven "
b = a1.trimLeft()
"alexseven "
obj.trimRight()移除右边空格
a1 = " alexseven "
" alexseven "
b = a1.trimRight()
" alexseven"
obj.charAt(n)根据索引,返回字符串中的第n个字符
b = "alexseven"
"alexseven"
b.charAt(0)
"a"
obj.concat(value, ...) 拼接
b = "alexseven"
"alexseven"
b.concat("Evc")
"alexsevenEvc"
obj.indexOf(substring,start)字符串找指定的字符的索引值
b = "alexseven"
"alexseven"
b.indexOf("x")
3
obj.lastIndexOf(substring,start)子序列位置
b = "alexseven"
"alexseven"
b.lastIndexOf("se")
4
b.lastIndexOf("en")
7
obj.substring(
from
, to)根据索引获取子序列
b = "alexseven"
"alexseven"
b.substring(0,3)
"ale"
b.substring(5,9)
"even"
obj.
slice
(start, end)切片
b = "alexseven" "alexseven"
b.slice(3,6)
"xse"
obj.toLowerCase()大写
obj.toUpperCase()小写
obj.split(delimiter, limit)分割
b = "alexseven"
"alexseven"
b.split("e")
["al", "xs", "v", "n"] a = "alexalexalex"
"alexalexalex"
a.split('le',2)
["a", "xa"]
a.split('le',3)
["a", "xa", "xa"]
obj.search(regexp)从头开始匹配,返回匹配成功的第一个位置
b = "alexseven" "alexseven"
b.split("e")
["al", "xs", "v", "n"]
b = "alexseven" "alexseven"
b.search("e")
2
b.search("le")
1
obj.match(regexp)全局搜索,如果正则中有 g 表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,
a = "alex7eric8Euuy"
"alex7eric8Euuy"
a.replace(/\d+/,"&"); //找到一个替换后就不继续找
"alex&eric8Euuy" a.replace(/\d+/g,"&"); //加上g后就是全局,找到所有
"alex&eric&Euuy"
$数字:匹配的第n个组内容;
a = "alex7eric8Euuy"
"alex7eric8Euuy"
a.replace(/(\d+)\w+(\d+)/g,"$1$2")
"alex78Euuy"
$&:当前匹配的内容;
a = "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/(\d+)/g,"$&"+"X")
"alex4Xeric5XEuuy"
$`:位于匹配子串左侧的文本;
a = "alex4eric5Euuy"
a.replace(/\d+/,"$`")
"alexalexeric5Euuy"
$':位于匹配子串右侧的文本
a = "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/\d+/,"$'")
"alexeric5Euuyeric5Euuy"
$$:直接量$符号;$$ = $
a = "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/(\d+)\w+(\d+)/g,"$$")
"alex$Euuy"
3、布尔类型(Boolean)
布尔类型仅包含真假
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
4、数组
JavaScript中的数组类似于Python中的列表。
a = [11,22,33,44,55,] #声明一个数组
[11,22,33,44,55,]
常见功能:
obj.length 数组的大小
a = [11,22,33,44]
[11, 22, 33, 44]
a.length
4
obj.pop()尾部获取一个元素
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.pop()
55
obj.shift() 头部获取元素
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.shift()
11
追加、插入、删除:
obj.push(ele) 尾部追加元素
obj.unshift(ele)头部插入元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,
0
,val) 指定位置插入元素
obj.splice(n,
1
,val) 指定位置替换元素
obj.splice(n,
1
)指定位置删除元素
a = [11,22,33,44] #声明一个数组
[11, 22, 33, 44]
a.push(55) #在数组最后增加一个元素
#这里是数组的长度
a
[11, 22, 33, 44, 55]
a.unshift(00) #在数组最前面增加一个元素
#长度
a
[0, 11, 22, 33, 44, 55]
a.splice(3,0,'insert') #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)
[]
a
[0, 11, 22, "insert", 33, 44, 55]
a.unshift(100)
obj.
slice
( )切片
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.slice(1,2)
[22]
obj.reverse( )反转
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.reverse()
[55, "alex", 33, 22, 11]
obj.join(sep)将数组元素连接起来以构建一个字符串
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.join("_")
"11_22_33_alex_55"
obj.concat(val,..)合并 ;连接数组
a = [11,22]
[11, 22]
b = [44,55]
[44, 55]
a.concat(b)
[11, 22, 44, 55]
a
[11, 22]
b.concat(a)
[44, 55, 11, 22]
obj.sort( )对数组元素进行排序
a = [11,22,33,"alex",55]
[11, 22, 33, "alex", 55]
a.sort()
[11, 22, 33, 55, "alex"]
5、字典
JS的字典,是对象实现的
a = {k1:123,k2:456}
Object {k1: 123, k2: 456}
a['k1']
123
四、其他
1、序列化
- JSON.stringify(obj) 序列化
b = [11,22,33,44,55]
[11, 22, 33, 44, 55]
JSON.stringify(b);
"[11,22,33,44,55]"
- JSON.parse(str) 反序列化
s = "[11,22,33,44,55]"
"[11,22,33,44,55]"
JSON.stringify(s);
JSON.parse(s);
[11, 22, 33, 44, 55]
2、转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
<script type="text/javascript">
s1 = "http://www.cnblogs.com/?k=%E6%9D%8E%E6%9D%BO";
console.log(s1); ret = decodeURI(s1); //解码
console.log(ret); s2 = encodeURI(ret); //编码
console.log(s2); </script>
3、eval
JavaScript中的eval是Python中eval和exec的合集,既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
var x=10document.write(eval(x+17)) 27
4、正则表达式
JavaScript中支持正则表达式,其主要提供了两个功能:
- test(string) 用于检测正则是否匹配
- exec(string) 用于获取正则匹配的内容
注:定义正则表达式时,“g”、“i”、“m”分别表示全局匹配,忽略大小写、多行匹配。
5、时间处理
JavaScript中提供了时间相关的操作,时间操作中分为两种时间:
- 时间统一时间
- 本地时间(东8区)
更多操作参见:http://www.shouce.ren/api/javascript/main.html
五、语句和异常
1、条件语句
if(条件){ }else if(条件){ }else{ }
if条件
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
} 777
switch条件
2、循环语句
第一种
for (var i=0;i<10;i++) {
console.log(i)
} 0
1
2
3
4
5
6
7
8
9
第二种
a = [11,22,33,44,55,66,77]
[11, 22, 33, 44, 55, 66, 77]
for (var item in a) {console.log(a[item])} 11
22
33
44
55
66
77
第三种
while(条件){
// break;
// continue;
}
3、异常处理
<script type="text/javascript">
try{ //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 var tiancai = isme
}catch(e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
console.log(e)
}finally{
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
console.log("shuaige is so smart;")
}
</script>
六、函数
1、基本函数
// 普通函数
function func() {
alert("Hello Word!")
}
// function是关键字
// 定义一个可传参数的函数
function func(arg) {
alert(arg)
}
func('Superman')
// 自执行函数,顾名思义,定义好之后可以自动执行
// ()():
(function f3(arg) {alert(arg)})("we i good man"); // 匿名函数,了解就行
var a = function() {
alert('meinv');
};
a();
注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。
function f1(a,b,c) {
// console.log(arguments);// arguments表示实际多少参数传多少参数
console.log(a,b,c);
}
f1(1,2)
//可以传一个参数也可以传多个参数,不会异常
2、作用域
JavaScript中每个函数都有自己的作用域,当出现函数嵌套时,就出现了作用域链。
当内层函数使用变量时,会根据作用域链从内到外一层层循环如果不存在,则异常。
PS:所有的作用域在创建函数且未执行时候就已经存在
<script>
// name = "alex";
// function f1(){
// var name = "eric";
// function f2(){
// alert(name);
// }
// f2()
// }
// f1(); name = "alex";
function f1(){
var name = "eric";
function f2(){
alert(name);
}
return f2
}
var ret = f1();
ret();
</script>
注:声明提前,在JavaScript引擎“预编译”时进行。
更多:http://www.cnblogs.com/wupeiqi/p/5649402.html
3、闭包
闭包就是,函数里面嵌套函数,并且记住所有的状态。
function f2(){ var arg= [11,22]; function f3(){ return arg; } return f3; } ret = f2(); ret(); f2就是一个闭包,在执行调用的时候只能通过f2去调用,也就是由外向内去获取调用;而不能由内向外
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充当的构造函数
- this代指对象
- 创建对象时需要使用 new ,new是关键字。
上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存。使用原型和可以解决该问题:
function Foo (name,age) {
//表示创建一个类Foo,并且创见Foo类的构造方法 this.Name = name; this.Age = age; } Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; } } //Foo.prototype.Func = function () {returnthis.Name +this.Age};//第二种
更多详情:http://www.cnblogs.com/wupeiqi/articles/5602773.html
前端之JavaScript的更多相关文章
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 互联网公司前端初级Javascript面试题
互联网公司前端初级Javascript面试题 1.JavaScript是一门什么样的语言,它有哪些特点?(简述javascript语言的特点)JavaScript是一种基于对象(Object)和事件驱 ...
- 第三篇:web之前端之JavaScript基础
前端之JavaScript基础 前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
- 好程序员web前端分享javascript关联数组用法总结
好程序员web前端分享javascript关联数组用法总结,有需要的朋友可以参考下. Hash关联数组定义 代码如下 // 定义空数组 myhash = { } // 直接定义数组 myhash = ...
- 前端之JavaScript(二)
一.概述 本篇主要介绍JavaScript的BOM和DOM操作,在前端之JavaScript(一)中介绍了JavaScript基础知识 1.1.BOM和DOM BOM(Browser Object M ...
- Python web前端 05 JavaScript
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...
- 我的前端规范——JavaScript篇
相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- web前端分享JavaScript到底是什么?特点有哪些?
web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容.今天为大家分享了这篇关于JavaScript的文章,我们一起来看看. 一.JavaScript是什么? ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- 前端(3)JavaScript
前端(3)JavaScript JavaScript概述 1ECMAScript和JavaScript的关系: 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaS ...
随机推荐
- Python报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe0 in position 0: ordinal not in range(128)
解决办法: 在报错的页面添加代码: import sys reload(sys) sys.setdefaultencoding('utf8')
- 添加和删除节点(HTML 元素)。
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素). 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一 ...
- Knockout.js, Asp.Net MVC and Bootstrap 前端设计
原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...
- MVC 将视图页table导出成excel
前台代码: <table class="tablelist" id="myTable"> <thead> <t ...
- css之border,dispaly
border:即为边框设置 solid:实线 dashed:虚线 dotted:圆点线 css代码: .c1{ width: 100%; height: 50px; border: 25px dott ...
- jquery点击改变图片src源码并toggle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- mysql edit
表外键5个相关性: cascade,restrict,set null,no action,default show character set ; show collation like ' ...
- android 反编译 逆向工具整理
需要准备的道具需要哪些软件会在后面逆向过程中详细介绍,这里先大致罗列一下 android一台root并安装了xposed框架的手机(主要是为了脱壳) 类似[海马玩]这种模拟器 android-kill ...
- bzoj3036: 绿豆蛙的归宿
Description 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点.到达每 ...
- python之pexpect模块
最近在看<Python自动化运维技术与最佳实战>这本书,学到了一个运维中用到的模块:pexpect 下面是其定义: Pexpect 是一个用来启动子程序并对其进行自动控制的 Python ...