認識JavaScript
JavaScript是一種屬于網路的腳本語言，已經被廣泛用于web應用開發，常來為網頁添加各種各樣的動態功能，為用戶提供更流暢的瀏覽效果，通常JavaScript腳本是通過嵌入在HTML中來實作自身的功能，
- HTML定義了網頁的內容
- CSS渲染了網頁的布局和樣式
- JavaScript制定了網頁的行為
JavaScript是寫給瀏覽器的一門腳本語言，目前所有的瀏覽器都支持JavaScript
JavaScript是輕量級的一門面向物件的編程語言
不得不提的一件事：JavaScript和java是沒有任何關系的！（原名為LiveScript，只是蹭熱度改名為JavaScript）
簡單使用JavaScript
在HTML中使用JavaScript有兩種方式：
- 在HTML中使用< script>< /script>標簽，嵌入JavaScript腳本的內嵌式
- 在HTML中使用< script src="" >< /script>標簽，引入外部.js檔案的外鏈式
注意：如果使用了外鏈式，又在該標簽內寫了js代碼，那么標簽內的代碼不會執行，如果還想在頁面中使用內嵌式，再寫一個script標簽即可，script是一個雙標簽，即使使用外鏈式標簽中沒有內容，也要有結束標簽，
<!-- 外鏈式-->
<script src="../js/js_demo1.js"></script>
<!-- 內嵌式-->
<script>
document.write("hello javaScript")
</script>
語法規則
JavaScript嚴格區分大小寫
JavaScript是弱型別語言，
- 弱型別語言：不是沒有型別，而是定義變數時，不需要明確具體的資料型別
JavaScript變數的定義：var 變數名=值
JavaScript中的資料型別：
- 數字型別：number，表示任意數字
- 布爾型別：boolean，可以為true、false
- 字串型別：string，單引號和雙引號都可以宣告字串，因為JavaScript沒有字符型別
- 參考型別：object
- 空值：null，表示空，屬于object型別
- undefined：表示一個未初始化的變數
使用typeof可以回傳變數的真實型別
//定義變數
var num1 = 100;
var num2 = 99.99;
var str = "haha";//單引號雙引號都可以用來表示字串
var flag = true;
document.write(num1+"<br>");
document.write("num1的資料型別是："+typeof(num1)+"<br>");
document.write(num2+"<br>");
document.write("num2的資料型別是："+typeof (num2)+"<br>")
document.write(str+"<br>");
document.write("str的資料型別是："+typeof str+"<br>")
document.write(flag+"<br>")
document.write("flag的資料型別是："+typeof flag+"<br>")
三種輸出方式
- window.alert("")，提示框效果顯示
- console.log("")，在控制臺以日志的方式顯示
- document.write("")，直接顯示在HTML頁面中
var num="哈哈哈";
//輸出在彈出的對話框中
window.alert(num);
//輸出在頁面上（不管script標簽寫在哪，該輸出的陳述句都在body標簽內）
document.write(num);
//輸出在瀏覽器控制臺中
console.log("日志資訊");
console.warn("警告資訊");
console.error("錯誤資訊");
知識點
運算子中存在一個 === ，
=表示賦值，==表示比較值相等，===表示比較型別和值相等
var str = "100";
var num = 100;
document.write("使用==相等嗎？--"+(str==num))
document.write("<br>使用===相等嗎？--"+(str===num))
布爾型別的運算中：
- 數字型別非0就是真
- 字串型別非""（空串）就是真
- 0，null，undefined等都是false
var num1 = 15;
if (num1){
console.log("真的")
}
var str1 = "";
if (str1){
console.log("真的")
}else{
console.log("假的")
}
函式
JavaScript中的函式其實就是方法，但是格式和java中的方法不太相同
function 函式名(引數串列){
方法體
//有回傳值就寫return，沒有就不寫
}
特點：
- 函式中不需要宣告回傳值型別
- 引數串列中的引數不需要指定資料型別
- 不存在java中的多載的概念，只要兩個函式的函式名相同，后面的函式就會把前面的函式覆寫掉
- 使用函式時，如果函式需要引數，呼叫時不傳參也不會報錯，如果函式不需要引數，呼叫時傳入了引數也不會報錯
事件
JavaScript使我們有能力創建動態頁面，事件是可以被JavaScript檢測到的行為，當事件發生時，就可以動態的做一些事情
事件三要素：
- 事件源：在頁面中，用戶可以操作的元素都是事件源
- 事件：用戶對于事件源作出的行為（比如滑鼠點擊、懸浮···）
- 監聽器：用來監聽事件，當事件發生時，就會呼叫相應的函式處理事件
事件通常和函式配合使用，這樣就可以通過發生事件來驅動函式執行，從而根據用戶的行為來實作一些動態的效果
事件可以是瀏覽器的行為，也可以用戶的行為
常用事件：
| 事件名 | 說明 |
|---|---|
| onload | 某個頁面被完成加載 |
| onsubmit | 表單被提交時（事件源是form表單） |
| onclick | 滑鼠單擊一個物件 |
| onblur | 滑鼠雙擊一個物件 |
| onfocus | 失去焦點 |
| onchange | 獲得焦點（滑鼠指標放在元素上，該元素就獲得焦點） |
| onkeydown | 物件中的內容被改變 |
| onkeypress | 某個鍵盤按鍵被按下 |
| onkeyup | 某個鍵盤按鍵被按下或按住 |
| onmousedown | 滑鼠按鍵被按下 |
| onmouseup | 滑鼠按鍵被松開 |
| onmouseover | 滑鼠被移動到某個元素上 |
| onmouseout | 滑鼠移出某個元素 |
| onmousemove | 滑鼠被移動 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
<script>
function clickMethod(){
window.alert("你點擊了按鈕");
}
function loadMethod(){
window.alert("頁面被加載了");
}
function changeMethod(){
window.alert("你修改了文本框的內容")
}
function focusMethod(){
window.alert("文本框獲得了焦點")
}
</script>
</head>
<body onload="loadMethod()">
<input type="submit" onclick="clickMethod()" value="按鈕">
<input type="text" onchange="changeMethod()" onfocus="focusMethod()">
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/209351.html
標籤：其他
上一篇：upload-labs闖關筆記