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">歡迎領導蒞臨指導</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>
總結
- 上一篇： 关于母爱的作文600字（叙事母爱作文60
- 下一篇： 求墓地对联?上联?贵???下联?宝???