認識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/shujuku/210124.html

標籤：其他

上一篇：JQuery第一天案列總結

下一篇：JavaScript的三種彈出提示框(alert、confirm、prompt)

JavaScript簡介（認識、入門）

認識JavaScript

簡單使用JavaScript

語法規則

三種輸出方式

知識點

函式

事件