Javascript學習總結
(1)javascript是web程式語言的一種,是一種指令碼語言。
(2)javascript指令碼必須位於<script></script>標籤中,指令碼可以位於head和body中。
對於外部引用的js檔案,引用語句:<script src="myScript.js"></script>
(3)javascript輸出:
document.getElementById("demo").innerHTML = "段落已修改。"; //修改指定id元素的網頁內容
<script>
document.write(Date()); //直接在網頁中增加了日期句子
</script>
console.log(c) //用於瀏覽器除錯
(4)javascript變數型別
var length = 16; // Number 通過數字字面量賦值
var points = x * 10; // Number 通過表示式字面量賦值
var lastName = "Johnson"; // String 通過字串字面量賦值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通過陣列字面量賦值
var person = {firstName:"John", lastName:"Doe"}; // Object 通過物件字面量賦值
(5)在javascript中可以通過\來隔開字串。
您可以在文字字串中使用反斜槓對程式碼行進行換行。下面的例子會正確地顯示:
document.write("你好 \
世界!");
(6)javascript中可以同時宣告賦值多個變數:var a = 1, b = 2;
(7)javascript中宣告的無值的變數,其值是undefined。
(8)
在以下兩條語句執行後,變數 carname 的值依然是 "Volvo":
var carname="Volvo";
var carname;
(9)javascript中擁有動態型別,這意味著相同的變數可以有不同的型別。
var x; x = 5; x = "hello";
(10)javascript中陣列的多種宣告方式。
var array = new Array();
array[0] = "1";
var array = new Array("1",2);
var array = ["1",2];
(11) javascript中的物件宣告方式:
var person={firstname:"John", lastname:"Doe", id:5566};
獲取物件中數值的方式:
person.lastname;
person["lastname"]
(12) 通過將變數賦值為null,就可以清楚變數資料,將其變為undefined
(13)建立javascript物件,並且呼叫其中的方法:
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
(14)javascript的宣告方法:
function myFunction(var1,var2)
{
程式碼
}
(15)javascript變數作用於問題:
// 此處不能呼叫 carName 變數
function myFunction() {
var carName = "Volvo";
// 函式內可呼叫 carName 變數
}
var carName = " Volvo";
// 此處可呼叫 carName 變數
function myFunction() {
// 函式內可呼叫 carName 變數
}
// 此處可呼叫 carName 變數
function myFunction() {
carName = "Volvo";
// 此處可呼叫 carName 變數
}
(16)Javascript事件可以使瀏覽器行為,也可以是使用者行為。頁面載入成功,頁面關閉等都屬於瀏覽器行為,單擊按鈕,改變輸入框都屬於使用者行為。
(17)字串也可以宣告為物件的方式,如new String("hello"),此時就是一個物件了。
var x = "John";
var y = new String("John");
typeof x // returns String
typeof y // returns Object
(18)比較運算子: var x = 5; x == "5" 返回true
(19)物件遍歷方式
var person={fname:"John",lname:"Doe",age:25};
for (x in person){
txt=txt + person[x];
}
(20)在javascript中不僅有傳統的continue和break,而且可以使用continue labelname跳轉到固定的位置。
label:
statements
continue label;
(21)javascript中的Null與undefined
var person = null; // Value is null, but type is still an object null表示什麼都沒有
var person = undefined; // 值為 undefined, type is undefined undefined表示變數沒有賦值
null === undefined // false
null == undefined // true
(22)字串轉換
String(x) // 將變數 x 轉換為字串並返回
x.toString() //轉換為str
(23)javascript中的正則表示式
在javascript中的正則表示式主要用於搜尋或者替換方法中,即search和replace方法。
var n = str.search(/w3cschool/i); 返回字串中w3cschool的位置,不區分大小寫。
var res = str.replace(/microsoft/i, "w3cschool"); //字串的替換
在javascript中也有一些函式可以用於判斷字串是否滿足某種匹配關係:
var patt = /e/;
patt.test("The best things in life are free!");
字串中含有 "e",所以該例項輸出為:
true
還有另外一個函式exec用於返回所有匹配的內容:
/e/.exec("The best things in life are free!");
字串中含有 "e",所以該例項輸出為:
e
(24)在javascript中也具有異常處理程式碼,try catch 模組
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty"; //自己丟擲異常 在catch程式碼塊進行處理
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
(25)表單驗證,獲取表單內容的方式還是比較簡單的
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓必須填寫");
return false;
}
}
</script>
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
(26)javascript中json字串的轉換問題。直接呼叫現有的方法就可以實現json字串的轉換。
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
(27)javascript:void(0)表示呼叫一個函式,但是不反悔任何內容。
<a href="javascript:void(alert('Warning!!!'))">點我!</a>
href="#"與href="javascript:void(0)"的區別
# 包含了一個位置資訊,預設的錨是#top 也就是網頁的上端。
而javascript:void(0), 僅僅表示一個死連結。
(28)javascript函式的定義以及提升。
函式宣告:
function functionName(parameters) {
執行的程式碼
}
函式表示式:
var x = function (a, b) {return a * b};
function建構函式,因為函式本身也是物件:
var myFunction = new Function("a", "b", "return a * b");
函式提升(Hoisting) 通過宣告式進行函式定義比較好一些
在之前的教程中我們已經瞭解了 "hoisting(提升)"。
提升(Hoisting)是 JavaScript 預設將當前作用域提升到前面去的的行為。
提升(Hoisting)應用在變數的宣告與函式的宣告。
因此,函式可以在宣告之前呼叫:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表示式定義函式時無法提升
自呼叫函式:
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! 我是自己呼叫的";
})();
</script>
(29)函式引數的傳遞
javascript中函式中如果有三個引數,呼叫的時候如果引數不夠,那麼其他引數就會預設賦值為undefined
functionName(parameter1, parameter2, parameter3) {
code to be executed
}
在函式呼叫的過程中,函式中自帶arguments物件,通過該物件可以獲取到所有的引數。
JavaScript 函式有個內建的物件 arguments 物件.,argument 物件包含了函式呼叫的引數陣列。通過這種方式你可以很方便的找到最後一個引數的值:
例項
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
對於函式findMax,它肯定也屬於某一物件,該物件可以被全域性訪問,預設的物件就是網頁本身,也就是window。呼叫window.findMax也是可以的。
(30)函式的閉包問題
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 計數器為 3
(31)給元素增加事件(同一個元素可以增加多個事件)
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
也可以為window物件增加事件
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
(32)事件捕獲的方式有兩種。一種是冒泡,即裡面的先搞,外面的再搞。一種是事件捕獲,即誰最先被觸發,誰先執行。
(33)javascript window物件
瀏覽器物件模型 BOM 文件物件模型 DOM
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
甚至 HTML DOM 的 document 也是 window 物件的屬性之一:
window.document.getElementById("header");
與此相同:
document.getElementById("header");
window.screen 物件包含有關使用者螢幕的資訊。
- screen.availWidth - 可用的螢幕寬度
- screen.availHeight - 可用的螢幕高度
window.location 物件用於獲得當前頁面的地址 (URL),並把瀏覽器重定向到新的頁面。
- location.hostname 返回 web 主機的域名
- location.pathname 返回當前頁面的路徑和檔名
- location.port 返回 web 主機的埠 (80 或 443)
- location.protocol 返回所使用的 web 協議(http:// 或 https://)
window.history 物件包含瀏覽器的歷史。
- history.back() - 與在瀏覽器點選後退按鈕相同
- history.forward() - 與在瀏覽器中點選按鈕向前相同
window.navigator 物件包含有關訪問者瀏覽器的資訊。
(34)javascript計時函式:
window.setInterval("javascript function",milliseconds);
window.setInterval() 方法可以不使用window字首,直接使用函式setInterval()。
setInterval() 第一個引數是函式(function)。
第二個引數間隔的毫秒數
停止計時:
window.clearInterval(intervalVariable)
window.clearInterval() 方法可以不使用window字首,直接使用函式clearInterval()。
以上是反覆間隔執行。
下面的方式只是執行一次:
window.setTimeout("javascript 函式",毫秒數);
window.clearTimeout(timeoutVariable)
(35)javascript cookie相關