文章目錄

前言
一、JS介紹
二、JS和HTML的結合方式
- 2.1 通過在html頭部定義script標簽來結合JS
- 2.2 使用script 標引入單獨的JavaScript代碼檔案
- 2.3 兩種方式的結合
三、變數
- JavaScript的變數型別
- Javascript里特殊的值
- Js中的定義變數格式
- 關系（比較）運算
- 邏輯運算
四、陣列
五、函式
- 函式的二種定義方式
- 函式的 arguments 隱形引數（只在 function 函式內
六、事件
- 常用的事件
- 事件的注冊又分為靜態注冊和動態注冊兩種：
七、DOM模型
- Document 物件的理解：
- Document 物件中的方法介紹

前言

文章學習于尚硅谷JavaWeb教程

一、JS介紹

Javascript 語言誕生主要是完成頁面的焱據驗證，因此它運行在客戶端，需要運行瀏覽器來決議執行Javascript代碼，

JS是Netscape網景公司的產品，最早取名為Livescript;為了吸引更多java程式員，更名為JavaScript

JS是弱型別,Java是強型別

弱型別就是型別可變，

強型別,就是定義變數的時候，型別已確定，而且不可變，

二、JS和HTML的結合方式

2.1 通過在html頭部定義script標簽來結合JS

<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script type="text/javascript">
        // window.onload = function (){
        //     var btnObj = document.getElementById("btnId");//[object HTMLButtonElement] -->DOM物件
        //     btnObj.onclick = function (){
        //         alert("js原生的單擊事件");
        //     }
        // }
    </script>
</head>

2.2 使用script 標引入單獨的JavaScript代碼檔案

2.3 兩種方式的結合

<script type="text/javascript" src="1.js"></script>
<script type="text/javascript">
    window.onload = function (){
        var btnObj = document.getElementById("btnId");//[object HTMLButtonElement] -->DOM物件
        btnObj.onclick = function (){
            alert("js原生的單擊事件");
        }
    }
</script>

三、變數

什么是變數?變數是可以存放某些值的記憶體的命名，

JavaScript的變數型別

數值型別:number
字串型別:string
物件型別:object
布爾型別:boolean
函式英型:functlion

Javascript里特殊的值

undefined 未定義，所有js 變數未賦于初始值的時候，默認值都是

null 空值

NAN 全稱是:Not a Number，非數字，非數值，

Js中的定義變數格式

? var變數名;
? var變數名=值;

關系（比較）運算

等于： == 等于是簡單的做字面值的比較

全等于： === 除了做字面值的比較之外，還會比較兩個變數的資料型別

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
</script>
</head>
<body>
</body>
</html>

邏輯運算

且運算： &&

或運算： ||

取反運算： |

四、陣列

JS 中陣列的定義：

格式：

var 陣列名 = []; // 空陣列

var 陣列名 = [1 , ’abc’ , true]; // 定義陣列同時賦值元素

五、函式

函式的二種定義方式

第一種，可以使用 function 關鍵字來定義函式，

? 使用的格式如下:

? function 函式名(形參串列){

? 函式體 }

? 在 JavaScript 語言中，如何定義帶有回傳值的函式？

? 只需要在函式體內直接使用 return

函式的第二種定義方式

格式如下：

? 使用格式如下：

? var 函式名 = function(形參串列) {函式體}

函式的 arguments 隱形引數（只在 function 函式內

就是在function函式中不需要定義，但卻可以直接用來獲取所有引數的變數，我們叫它隱形引數

就是在 function 函式中不需要定義，但卻可以直接用來獲取所有引數的變數，我們管它叫隱形引數，隱形引數特別像 java 基礎的可變長引數一樣， public void fun( Object … args ); 可變長引數其他是一個陣列，那么 js 中的隱形引數也跟 java 的可變長引數一樣，操作類似陣列，

六、事件

什么是事件？事件是電腦輸入設備與頁面進行交換的回應，我們稱之為事件

常用的事件

onload 加載完成事件：頁面加載完成之后，常用于做頁面 js 代碼初始化操作

onclick 單擊事件：常用于按鈕的點擊回應操作，

<script type="text/javascript">
    function funa() {
        alert("sadad");
    }

    //動態注冊onclick事件
    window.onload = function () {
        //獲取標簽物件
        var btnObj = document.getElementById("btn01");
        // alert(btnObj);//[object HTMLButtonElement]
        //通過標簽物件，事件名= function(){}
        btnObj.onclick = function () {
            alert("動態注冊的onclick事件");
        }
    }
</script>

onblur 失去焦點事件：常用用于輸入框失去焦點后驗證其輸入內容是否合法，

<script type="text/javascript">
    function onblurFun(){
        // 用于測驗使用
        // log（）列印方法
        console.log("靜態失去焦點列印日志");
    }

    //動態注冊onblur事件
    window.onload = function (){
        //1.獲取標簽物件
        var passwordObj = document.getElementById("password");
        //2.通過標簽物件.事件名 = function（）{}；
        passwordObj.onblur = function (){
            console.log("動態注冊失去焦點列印日志");
        }
    }
</script>

onchange 內容發生改變事件：常用于下拉串列和輸入框內容發生改變后操作

<script>
    function onchnageFun(){
        alert("國女已經改變了");
    }

    // 動態注冊onchange事件，格式都是固定的
    //通過Dom物件獲得標簽物件，之后給物件.事件系結內容即可
    window.onload = function (){
        var elementById = document.getElementById("list");
        elementById.onchange = function (){
            alert("國男已經改變了");
        }
    }
</script>

onsubmit 表單提交事件：常用于表單提交前，驗證所有表單項是否合法

<script>
    function onsubmitFun(){
        //要驗證所以表單是否合法，如果有一個不合法就阻止表單提交
        alert("靜態注冊表單提交事件")
        return false;
    }

    window.onload = function (){
        var elementById = document.getElementById("form");
        elementById.onsubmit = function (){
            alert("動態注冊表單提交事件--發現不合法")
            return false;
        }
    }

</script>

事件的注冊又分為靜態注冊和動態注冊兩種：

什么是事件的注冊（系結）？

其實就是告訴瀏覽器，當事件回應后要執行哪些操作代碼，叫事件注冊或事件系結，

靜態注冊事件：通過 html 標簽的事件屬性直接賦于事件回應后的代碼，這種方式我們叫靜態注冊，

動態注冊事件：是指先通過 js 代碼得到標簽的 dom 物件，然后再通過 dom 物件.事件名 = function(){} 這種形式賦于事件回應后的代碼，叫動態注冊，

七、DOM模型

DOM全稱是 Document Object Model 檔案物件模型

大白話，就是把檔案中的標簽，屬性，文本，轉換成為物件來管理，那么它們是如何實作把標簽，屬性，文本轉換成為物件來管理呢，這就是我們馬上要學習的重點

在這里插入圖片描述

Document 物件的理解：

第一點：Document 它管理了所有的 HTML 檔案內容，

第二點：document 它是一種樹結構的檔案，有層級關系，

第三點：它讓我們把所有的標簽都物件化

第四點：我們可以通過 document 訪問所有的標簽物件

Document 物件中的方法介紹

document.getElementById(elementId)

通過標簽的 id 屬性查找標簽 dom 物件，elementId 是標簽的 id 屬性值

document.getElementsByName(elementName)

通過標簽的 name 屬性查找標簽 dom 物件，elementName 標簽的 name 屬性值

document.getElementsByTagName(tagname)

通過標簽名查找標簽 dom 物件，tagname 是標簽名

document.createElement( tagName)

方法，通過給定的標簽名，創建一個標簽物件，tagName 是要創建的標簽名

document 物件的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢

如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢

如果 id 屬性和 name 屬性都沒有最后再按標簽名查 getElementsByTagName

以上三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽物件，

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/387884.html

標籤：java

上一篇：一個月內面了30家企業，不斷對比薪資，我從18K變成了38K

下一篇：C語言面向物件（上）：面向物件三大特性的實作

JavaWeb--快速入門JavaScript