web前端之 JS
JavaScript概述
JavaScript是一门编程语言，简称js，由浏览器编译并运行，JS说白了就是让页面能够动起来
js存在形式
1、在html页面中
<script>
alert(123); // 弹出一个窗口，然后内容为123
</script>
2、在html文件中导入js
<!--导入本地js文件-->
<script src="js1.js"></script>
<!--导入远程js文件-->
<script src="http://xxx.xxx.com/js1.js"></script>
js放置位置
放置在body标签的底部
由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
js之变量
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
<script>
// 定义函数
function f1() {
var i = 123; // 局部变量
i = 123; // 全局变量
}
f1(); // 执行函数
alert(i);
</script>
js之注释
'//代码内容'为单行注释，’/代码内容/‘为多行注释
<script>
function f1() {
// 单行注释
// var i = 123;
// 多行注释
/*
* i = 123;
* */
}
</script>
js之数据类型
JavaScript 中的数据类型分为原始类型和对象类型:
原始类型:
数字
字符串
布尔值
对象类型：
数组
字典
...
注：数字、布尔值、null、undefined、字符串是不可变的
**null**是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值“
**undefined**是一个特殊值，表示变量未定义
1、数字(Number)
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示
- 创建数字类型的变量，并将其输出
-
数据类型转换
- parseInt(value) 转换成整形，不成功则返回NaN
- parseFloat(value) 转换成浮点数，不成功则返回NaN
-
特殊的值
- NaN，非数字。可使用 isNaN(num) 来判断
- Infinity，无穷大。可使用 isFinite(num) 来判断
2、字符串(String)
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常用功能
- obj.length 获取字符串的长度
- obj.trim() 移除空白，类似于python的strip()
-
obj.trimLeft() 移除左边的空白
-
obj.trimRight) 移除右边的空白
-
obj.charAt(n) 返回字符串中的第n个字符
- obj.concat(value, ...) 字符串拼接
- obj.indexOf(substring,start) 返回某个指定的字符串在字符串中首次出现的位置，start表示从第几个位置开始找，默认为0
-
obj.lastIndexOf(substring,start) 跟indexOf的功能类似，lastIndexOf是从后向前找
-
obj.substring(from, to) 根据索引获取子序列
- obj.slice(start, end) 跟substring的功能一样
- obj.toLowerCase() 将字符串转换为小写
- obj.toUpperCase() 将字符串转换为大写
- obj.split() 把字符串分割成字符串数组
正则表达式(后面再补充)
- obj.search(regexp)
- obj.match(regexp)
- obj.replace(regexp, replacement)
3、布尔类型(Boolean)
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于，比较的是值是否等于
- === 比较值和类型是否都相等
- !== 比较值和类型是否不相等
- || 或，有一个条件为真就为真
- && 且，两个条件都为真，才为真
3、数组
JavaScript中的数组类似于Python中的列表
常见功能
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
其他
1、序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化
2、转义
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
3、eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
eval()
EvalError 执行字符串中的JavaScript代码
4、正则表达式
JavaScript中支持正则表达式，其主要提供了两个功能：
test(string) 用于检测正则是否匹配
exec(string) 用于获取正则匹配的内容
注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。
5、时间处理
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
时间统一时间
本地时间（东8区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html
语句和异常
1、条件语句
JavaScript中支持两个中条件语句，分别是：if 和 switch
# if语句
if(条件){
}else if(条件){
}else{
}
# switch语句
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
2、循环语句
JavaScript中支持三种循环语句，分别是：
- for循环
var names = ["alex", "tony", "rain"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
var names = ["alex", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
- while循环
while(条件){
// break;
// continue;
}
3、异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
注：主动跑出异常 throw Error('xxxx')
函数
1、基本函数
JavaScript中函数基本上可以分为一下三类：
// 普通函数
function func(arg){
return true;
}
// 匿名函数
var func = function(arg){
return "tony";
}
// 自执行函数
(function(arg){
console.log(arg);
})('123')
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
2、作用域
JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
切记：所有的作用域在创建函数且未执行时候就已经存在。
function f2(){
var arg= 111;
function f3(){
console.log(arg);
}
return f3;
}
ret = f2();
ret();
function f2(){
var arg= [11,22];
function f3(){
console.log(arg);
}
arg = [44,55];
return f3;
}
ret = f2();
ret();
注：声明提前，在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();
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
上述代码中每个对象中均保存了一个相同的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;
}
}
利用JS做出炫酷的效果
利用JS做出LED屏跑马灯的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" style="display: inline-block; background-color: green; color: white;">欢迎领导莅临指导</div>
<script>
setInterval("f1()", 1000);
function f1() {
var tag = document.getElementById('i1'); // 先找到标签
var text = tag.innerText; // 获取标签中的字符串
var a = text.charAt(0); // 获取字符串中的第一个字符
var sub = text.substring(1, text.length); // 截取字符串,从第2个字符开始到最后
var new_str = sub + a; // 字符串拼接
tag.innerText = new_str; // 修改标签中的字符串
}
</script>
</body>
</html>
