Web基礎瞭解版02-JavaScript

来源:https://www.cnblogs.com/Open-ing/archive/2019/12/18/12046020.html
-Advertisement-
Play Games

JavaScript 特性 ① 解釋型語言。JavaScript是一種解釋型的腳本語言，JavaScript是在程式的運行過程中逐行進行解釋，不需要被編譯為機器碼再執行。 ② 面向對象。JavaScript是一種面向對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。 ③ 類C和Java的語法。 ...


JavaScript

特性

 ① 解釋型語言。JavaScript是一種解釋型的腳本語言，JavaScript是在程式的運行過程中逐行進行解釋，不需要被編譯為機器碼再執行。

 ② 面向對象。JavaScript是一種面向對象的腳本語言，它不僅可以創建對象，也能使用現有的對象。

 ③ 類C和Java的語法。JavaScript的語法結構與C和Java很像，像for、if、while等語句和Java的基本上是一模一樣的。

 ④ 簡單。JavaScript語言中採用的是弱類型的變數類型，對使用的數據類型未做出嚴格的要求，是基於Java基本語句和控制的腳本語言。

 ⑤ 動態性。所謂的動態性，可以暫時理解為在語言中的一切內容都是不確定的。比如一個變數，這一刻是個整數，下一刻可能會變成字元串了。

 ⑥ 跨平臺性。JavaScript腳本語言不依賴於操作系統（Java依賴於JVM），僅需要瀏覽器的支持。

 ⑦ 安全性。JavaScript是不允許直接訪問本地硬碟的。

 構成

  • ECMAScript：ECMAScript是一個標準，而這需要由各廠商去實現。

  • DOM：JS 中通過 DOM來對 HTML 文檔進行操作。只要理解了DOM就可以隨心所欲的操作 WEB 頁面。

  • BOM：要想在瀏覽器中使用 JavaScript，必須使用BOM(瀏覽器對象模型)。BOM提供了很多對象，通過修改這些對象的屬性，調用他們的方法，用於控制瀏覽器的各種行為。

基本語法

編寫位置

JavaScript需要包括在<script>標簽中，這個標簽可以出現在頁面的任何位置。

方式一：編寫到HTML中<script>標簽中，聲明在head標簽或者body標簽中。一般聲明在head標簽

<script type="text/javascript">
        alert("如果還能重來？");
</script>

 

方式二：寫在外部的.js文件中。然後通過script標簽的src屬性引入。

<script type="text/javascript" src="script.js"></script>

 

說明：type屬性 ：預設值 text/javascript可以不寫，不寫也是這個值。

src屬性：使用該屬性指向文件的地址，可以是相對路徑，也可以是絕對路徑。

特別註意：方式一和方式二不要同時使用。一旦同時使用，會預設執行方式二中js文件中的js代碼。

標識符的命名規則

  • 由26個英文字母大小寫，0-9，_或 $ 組成。

  • 數字不可以開頭。

  • 不可以使用關鍵字和保留字，但能包含關鍵字和保留字。

  • JavaScript中嚴格區分大小寫。

  • 標識符不能包含空格。

關鍵字

保留字

數據類型

  • 基本數據類型（5種）

    • 數值類型：number

    • 字元串類型：string

    • 布爾類型：boolean

    • null型：null

    • undefined型（Undefined）

  • 對象類型：

    • 函數對象：Function

    • 數組對象：Array

      • 使用typeof 判斷，結果是Object

    • 一般對象：Object

常量值

  • undefined：表示未定義，Undefined類型只有一個值，即特殊的 undefined 。所有的js中的變數在未初始化的時候預設值都是undefined。

    • typeof(undefined)結果是undefined。

  • null：表示空值，Null類型只有一個值，即為null。

    • 從語義上看 null表示的是一個空對象。所以使用 typeof檢查 null會返回一個Object。

    • undefined是由null值衍生出來的，所以undefined和null是否相等，會返回true。

  • NaN：not a number(非數值)，在數學運算中對數值進行計算時，沒有結果返回，則返回NaN

  • boolean類型：只能取值真(true)或假(false)。

變數的聲明

  • 使用var定義即可。比如：var num = 65; var name = "馬大雲"；

  • 變數聲明時不需要指定類型，可以接受所有的數據類型。

變數的賦值

  • 變數在賦值過程中可以接受不同類型的值。比如：var x = 123; x = "atguigu.com";

  • 沒有賦值的變數，預設為undefined

  • 使用typeof(變數名)，判斷變數的類型

  • JS中每一條語句以分號(;)結尾。如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源。

註釋

  • //表示單行註釋

  • /* */表示多行註釋

算術運算符

賦值運算符

  • 符號：=

  • 擴展賦值運算符： +=, -=, *=, /=, %=

關係運算符

  • <, >, <=, >=, !=, ==, ===（全等）, !==（不全等）

邏輯運算符

  • 邏輯運算符，結果返回一個布爾值。

  • 如果進行邏輯運算時，操作數不是布爾類型，則會將其轉換為布爾類型再進行計算。

  • && ：與運算

    • 情況一：當表達式全為真的時候，返回最後一個表達式的值

    • 情況二：當表達式中有一個為假的時候，返回第一個為假的表達式的值

  • ||：或運算
    • 情況一：當表達式全為假時，返回最後一個表達式的值
    • 情況二：只要有一個表達式為真，就會返回第一個為真的表達式的值

三元運算符

流程式控制制

if結構

switch-case

while

for

do-while

break和continue

  • break只能用於switch語句和迴圈語句中。

  • continue 只能用於迴圈語句中。

  • 二者功能類似，但continue是終止本次迴圈，break是終止本層迴圈。

  • break、continue之後不能有其他的語句，因為程式永遠不會執行其後的語句

數組

  • 定義一個空數組：var arr = [] 或 var arr = new Array();

  • 定義一個非空數組：var arr1 = ["Tom","atguigu.com",true];

  • 數組的角標是從0開始的，直接通過角標進行調用。比如： alert(arr[0]);

  • 通過調用數組的屬性length獲取數組的長度

  • 在JavaScript的數組中，只要我們通過元素的下標給數組賦值，js就可以根據賦值的最大下標自動給數組擴容

函數

  • 使用function關鍵字

  • 不需要指定返回值。如果函數有返回值，只需要在函數體內直接使用return語句返回需要的值即可。

  • 不需要指定形參類型（因為js所有類型都使用var來聲明）

  • 函數在js中也是一種對象，可以將函數的引用賦值給變數

方式一：

function 函數名(形參列表){
    函數體
}

 

方式二：匿名函數

var 變數名 = function(形參列表){
    函數體;
}

 

函數的重載問題

  • 註意1：調用JavaScript函數時系統不檢查傳入參數的個數和類型，所以js中沒有重載一說

  • 註意2：一旦定義了同名不同參數個數的函數以後，後定義的函數會覆蓋先前定義的同名的所有函數

隱形參數：arguments

  • arguments跟java中的可變形參非常類似，可以傳遞不確定個數的實參到函數中

  • 操作arguments和操作數組一致，也是用來接收傳遞的參數值。

  • 可以通過角標獲取指定的參數。遍歷arguments.

  • 可以通過arguments的length屬性獲取調用函數時傳入的實參的個數。

對象

創建一：

var 變數名 = new Object();//創建一個空的對象實例
變數名.屬性名 = 值;//給創建的對象添加一個屬性
變數名.函數名 = function(){}; //給創建的對象添加一個函數

創建二：

var 變數名 = {          //定義一個空對象
    屬性名1：值1，    //聲明屬性1
    屬性名2：值2，    //聲明屬性2
    函數名:function(){} //聲明函數
};

訪問方式形同

變數名.屬性;
變數名.函數名();

函數也是對象，函數也作為一種數據類型存在，而且是引用數據類型

在JavaScript函數中，this關鍵字指向的是調用當前函數的對象。

  • JavaScript內置對象

    • Array 、Date、Math、……

  • 瀏覽器對象

    • window、location 　　location.href="路徑"

  • dom對象

    • document、body、button……

事件

  • 系統事件：由系統觸發的事件，例如文檔載入完成。

  • 用戶事件：用戶操作，例如單擊、滑鼠移入、滑鼠移出等。

常見事件

 

函數名說明
onload 載入完成事件，常用於頁面載入完成之後做的一些功能
onclick 單擊事件，常用於用戶點擊視圖的時候觸發功能
onblur 失去焦點事件，常用於失去焦點的時候觸發功能
onchange 內容發生改變事件，常用於下拉列表和文本輸入框內容發生改變時
onsubmit 表單提交事件，常用於表單提交事件的時候做一些表單驗證的工作

 

事件的註冊

 先通過js代碼查找到標簽對象。然後通過 標簽對象.事件名=function(){} 這種形式

window.onload = function(){        //頁面載入完成之後
    //1、查找標簽對象
       var btn= document.getElementById("btn");
    //2、通過標簽對象.事件名 = function(){}
       btn.onclick = function(){}
}

響應函數

 事件觸發後我們要執行的函數稱為響應函數。如何將響應函數與事件關聯起來？我們常使用為事件賦值函數的方式。

步驟一：從文檔對象模型中獲取控制項對象 [藉助DOM API實現]

步驟二：聲明一個事件響應函數

步驟三：將事件響應函數的引用賦值給控制項對象的事件屬性

取消控制項預設行為

  • 預設行為：某些事件觸發後，系統會有預設的響應處理。如：

    • 超鏈接點擊後會自動跳轉

    • 表單提交點擊後會發送請求

  • 取消預設行為的方式：return false; 即在事件響應函數內return false;

JavaScript嵌入方式

瀏覽器載入順序

  • 按從上到下的順序載入

  • 遇到script標簽先執行腳本程式，執行完成後再繼續載入

window.onload = function(){}

  • window對象：代表當前瀏覽器視窗

  • onload事件：當整個文檔載入完成後觸發

即在script內先聲明此函數，等頁面文檔全部載入完畢之後在觸發此函數內的響應事件

DOM

Document Object Model：（文檔對象模型）定義了訪問和處理 HTML 文檔的標準方法。目的其實就是為了能讓js操作html元素而制定的一個規範。

HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹。

HTML載入完畢，渲染引擎會在記憶體中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。然後操作的時候修改的是該元素的屬性

DOM可以做什麼

找對象（元素節點）

設置元素的屬性值

設置元素的樣式

動態創建和刪除元素

事件的觸發響應：事件源、事件、事件的驅動程式

document對象

  • document對象是window對象的一個屬性，代表當前HTML文檔，將這個文檔抽象成了document對象。

  • document對象管理了所有的HTML文檔內容。

  • 它是包含了整個文檔的樹形結構，有層級關係。

  • 它讓我們把所有的標簽都對象化。

  • 我們可以通過document訪問所有的標簽對象。

  • 獲取document對象的本質方法是：window.document，而“window.”可以省略。

在HTML當中，一切都是節點，所有的節點都是Object。

  • 文檔節點(Document)：DOM標准將整個HTML文檔的相關信息封裝後得到的對象。

  • 元素節點(Element)：DOM標准將HTML標簽的相關信息封裝後得到的對象。

  • 屬性節點(Attribute)：DOM標准將HTML標簽屬性的相關信息封裝後得到的對象。

  • 文本節點(Text)：DOM標准將HTML文本的相關信息封裝後得到的對象。

節點的屬性

  • nodeName: 代表當前節點的名字，只讀屬性。如果給定節點是一個文本節點，nodeName 屬性將返回內容為 #text 的字元串。

  • nodeType：返回一個整數, 這個數值代表著給定節點的類型，只讀屬性。 1 -- 元素節點 2 -- 屬性節點 3 -- 文本節點

  • nodeValue：返回給定節點的當前值(字元串)，可讀寫的屬性。

    • 元素節點：返回值是 null

    • 屬性節點： 返回值是這個屬性的值

    • 文本節點： 返回值是這個文本節點的內容

節點之間的關係指元素節點、和文本節點再加換行節點之間的父子或兄弟關係（標簽內的屬性可通過元素節點操作）

標簽內的屬性直接通過元素節點對象來get、set方法獲取、設置值就可以了，其標簽內的文本值可通過再次獲取其元素節點對象的子節點對象來取值或賦值=

文本節點的父節點是包含它的標簽就是他的父節點

當然W3C考慮換行也是一個節點，多個換行為一個節點

元素節點

獲取DOM節點

功能API返回值
根據id值 document.getElementById(“id值”) 一個具體的元素節點
根據標簽名 document.getElementsByTagName(“標簽名”) 元素節點數組
根據name屬性值 document.getElementsByName(“name值”) 元素節點數組
根據class屬性值 document.getElementsByClassName("class值") 元素節點數組

通過節點關係獲取都是.屬性

 

功能API返回值
查找指定元素節點的父節點 element.parentNode 節點對象
功能API返回值
查找前一個兄弟節點 node.previousSibling【W3C考慮換行，IE≤8不考慮】 節點對象
查找後一個兄弟節點 node.nextSibling【W3C考慮換行，IE≤8不考慮】 節點對象
功能API返回值
查找全部子節點 element.childNodes【W3C考慮換行，IE≤8不考慮】 節點數組
查找第一個子節點 element.firstChild【W3C考慮換行，IE≤8不考慮】 節點對象
查找最後一個子節點 element.lastChild【W3C考慮換行，IE≤8不考慮】 節點對象
查找指定標簽名的子節點 element.getElementsByTagName(“標簽名”) 元素節點數組

children：非標準屬性。返回的是指定元素的子元素節點的集合。（用的最多）

  • 它只返回HTML節點，甚至不返迴文本節點。
  • 在IE6/7/8中包含註釋節點（在IE678中，註釋節點不要寫在裡面）。

雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。

子節點數組 = 父節點.children;   //獲取所有節點。用的最多。

節點操作

上一段的內容：節點的訪問關係都是屬性。

節點的操作都是函數（方法）

屬性節點篇

  • 讀取屬性值：元素對象.屬性名

  • 修改屬性值：元素對象.屬性名=新的屬性值

    元素節點.getAttribute("屬性名稱");
元素節點.setAttribute(屬性名, 新的屬性值);
    元素節點.removeAttribute(屬性名);【刪除節點】

文本節點篇

  • 獲取文本值三步曲：

    • 獲取文本節點的父節點

    • 獲取父節點的第一個子節點： parentEle.firstChild

    • 獲取文本節點的節點值：parentEle.firstChild.nodeValue

  • 常見操作：

    • 讀取文本值：element.firstChild.nodeValue

    • 修改文本值：element.firstChild.nodeValue=新文本值

DOM增刪改API

API功能
document.createElement(“標簽名”) 創建元素節點並返回，但不會自動添加到文檔中
document.createTextNode(“文本值”) 創建文本節點並返回，但不會自動添加到文檔中
element.appendChild(ele) 將ele添加到element所有子節點後面
parentEle.insertBefore(newEle,targetEle) 將newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle) 用新節點替換原有的舊子節點
parentEle.removeChild(childNode) 刪除指定的子節點
element.innerHTML 讀寫起始標簽和結束標簽中的內容
element.innerText 讀寫起始標簽和結束標簽中的文本

innerHTML

  • 返回對象的起始位置到終止位置的全部內容，包括HTML標簽。

  • 讀取元素內部HTML代碼

    • 元素對象.innerHTML

  • 修改元素內部HTML代碼

    • 元素對象.innerHTML=HTML代碼


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2.Android-sdk目錄介紹、ADT使用介紹、創建helloworld
    1.android中常用名詞介紹 ADT: ADT為Eclipse的插件。為Eclipse和SDK之間起了一個橋梁的作用。 SDK: 軟體開發工具包(Soft Development Kit),它為開發者提供了Android庫文件以及其它開發所用到的工具 JDK: java開發工具包,提供java工 ...
  • 遇見的奇葩問題
    最近在維護項目遇到一些奇葩的問題，自己研究了一下，但並沒有解決，再此做個記錄，路過的大牛還望，出個思路；再此，描述問題，以供大家研討1. MJRefresh 佈局問題ViewController裡面有兩個和self.View 一樣大小的View 一個 是添加了MJRefresh.mj_header ...
  • javascript中引用傳遞的問題如何解決
    我們有時候會向一個方法中傳入一個參數，並且對這個參數做一些處理的操作； 但是因為是引用傳遞，處理過後會對原有的對象造成修改，無法進行反覆使用。 如例子： 兩次列印的結果一模一樣。這樣下一個方法在繼續使用arr這個數的時候就不是["a","b","c"]這個值了，而是["a","b","c",2]; ...
  • 用js寫一個滑鼠坐標實例
    HTML代碼 寫一個div來作為滑鼠區域 div中寫一個span顯示坐標信息 <body> <div id=""> <span></span> </div> </body> 給div和span增加樣式並定位 <style type="text/css"> div{ position: relativ ...
  • React中setState學習總結
    react中setState方法到底是非同步還是同步，其實這個是分在什麼條件下是非同步或者同步。 1.先來回顧一下react組件中改變state的幾種方式： import React, { Component } from 'react' class Index extends Component { ...
  • 一起學Vue之樣式綁定
    在前端開發中，設置元素的 class 列表和內聯樣式是基本要求。本文主要講解Vue開發中，樣式列表和內聯樣式的綁定，僅供學習分享使用，如果有不足之處，還請指正。 ...
  • 滾輪滾動事件
    滾輪滾動事件 ~~~javascript ~~~ ...
  • 【前端學習】網頁tab鍵的實現 01
    友情提醒：閱讀本文需要瞭解一些基本的html/Css/Javascript知識 前端常用tab鍵的實現，用到的原理是當點擊一個元素時，通過javascript操作css的display屬性，達到控制另一個元素的顯示(display: block)與不顯示(display: none) 需要註意的是， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類