JavaScript基礎中的基礎（小例子：滾動字幕）
阿新 • • 發佈：2018-12-17
一、變數
區域性變數宣告前面要加“var”
<script type="text/javascript">
// 全域性變數
name = 'alex';
function func(){
// 區域性變數
var age = 18;
// 修改全域性變數name
name = "eric"
}
</script>
二、資料型別
資料型別有：數字、字串、布林值 陣列、字典
數字、字串、布林值、null、undefined 為不可變型別
// null、undefined null是JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”。 undefined是一個特殊值，表示變數未定義。
·1、數字（Number）
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
- parseInt(..) 將某值轉換成數字，不成功則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 //常量 Math.SQRT1_2 //2的平方根除以1。 Math.SQRT2 //2的平方根。 /* 靜態函式 */ Math.abs( ) //計算絕對值。 Math.acos( ) //計算反餘弦值。 Math.asin( ) //計算反正弦值。 Math.atan( ) //Math計算反正切值。 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並未提供修改已知字串內容的方法。
常見功能：
obj.length 長度 obj.trim() 移除空白 obj.trimLeft() obj.trimRight) obj.charAt(n) 返回字串中的第n個字元 obj.concat(value, ...) 拼接 obj.indexOf(substring,start) 子序列位置 obj.lastIndexOf(substring,start) 子序列位置 obj.substring(from, to) 根據索引獲取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 大寫 obj.toUpperCase() 小寫 obj.split(delimiter, limit) 分割 obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效) obj.match(regexp) 全域性搜尋，如果正則中有g表示找到全部，否則只找到第一個。 obj.replace(regexp, replacement) 替換，正則中有g則替換所有，否則只替換第一個匹配項， $數字：匹配的第n個組內容； $&：當前匹配的內容； $`：位於匹配子串左側的文字； $'：位於匹配子串右側的文字 $$：直接量$符號
3、布林型別（Boolean）
布林型別僅包含 true/false，與Python不同的是其首字母小寫。
- == 比較值相等
- != 不等於
- === 比較值和型別相等
- !=== 不等於
- || 或
- && 且
4、陣列
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( ) 對陣列元素進行排序
5、字典
var d = {'k1':'v1','k2':'v2','k3':'v3'} //undefined d["k1"] //"v1" d["k4"] = 'v4' //"v4" d //{k1: "v1", k2: "v2", k3: "v3", k4: "v4"} d["k1"] = 'vv1' //"vv1" d //{k1: "vv1", k2: "v2", k3: "v3", k4: "v4"} delete d["k1"] //true d //{k2: "v2", k3: "v3", k4: "v4"}
三、基本函式
// 普通函式 function func(arg){ return true; } // 匿名函式 var func = function(arg){ return "tony"; } // 自執行函式 (function(arg){ console.log(arg); })('123')
注意：對於JavaScript中函式引數，實際引數的個數可能小於形式引數的個數，函式內的特殊值arguments中封裝了所有實際引數。
四、條件語句、迴圈語句
1、條件語句：if和switch
if(條件){ }else if(條件){ }else{ }if
switch
switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }switch
2、迴圈語句
var names = ["alex", "tony", "rain"]; //方式一 for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } for(var i=0;i<names.length;i=i+2){ console.log(i); console.log(names[i]); } //方式二 for(var index in names){ console.log(index); console.log(names[index]); }迴圈陣列
dic1 = {k1: "v1", k2: "v2", k3: "v3", k4: "v4"};
for(var k in dic1){
console.log(k);
console.log(dic1[k])
};
迴圈字典
while(條件){ // break; // continue; }while迴圈
滾動字幕的小例子：
<body> <h1 id="i1">歡迎各位小螞蟻來做客</h1> <script> function f1() { //獲取標籤 var tag = document.getElementById('i1'); //獲取標籤內文字 var content = tag.innerText; //獲取文字第一個字元 var first_char = content.charAt(0); //獲取文字剩下的字元，將第一個字元加到最後面 var new_str = content.substring(1, content.lenth) + first_char; //將新文字寫到標籤內 tag.innerText = new_str; } //定時器每1000毫秒執行一次f1(); setInterval('f1();', 1000); </script> </body>