JavaScript的基礎語法及DOM元素和事件

来源:https://www.cnblogs.com/yjtxin/archive/2020/05/25/12953824.html
-Advertisement-
Play Games

一，JavaScript是什麼？ 1，JavaScript簡稱：js，是一種瀏覽器解釋型語言，嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的動態效果，用戶交互及前後端的數據傳輸等。 2，JavaScript 組成 1，核心語法 - ECMAScript (ES5-ES6) 規範了Java ...


一，JavaScript是什麼？

1，JavaScript簡稱：js，是一種瀏覽器解釋型語言，嵌套在HTML文件中交給瀏覽器解釋執行。主要用來實現網頁的動態效果，用戶交互及前後端的數據傳輸等。

2，JavaScript 組成

1，核心語法 - ECMAScript (ES5-ES6) 規範了JavaScript的基本語法

 

2.1 瀏覽器對象模型 ：-BOM Browser Object Model，提供了一系列操作瀏覽器的方法

2.2 文檔對象模型： -DOM Document Object Model ，提供了一系列操作的文檔的方法

3. 使用方式

3.1元素綁定事件：

  • 事件 ：指用戶的行為（單擊，雙擊等）或元素的狀態（輸入框的焦點狀態等）
  • 事件處理：元素監聽某種事件併在事件發生後自動執行事件處理函數
  • 常用事件：onclick (單擊事件)
  • 語法 ：將事件名稱以標簽屬性的方式綁定到元素上，自定義事件處理
<!--實現點擊按鈕在控制台輸出-->
<button onclick="console.log('Hello World');">點擊</button>

3.2文檔內嵌：使用<script type="text/javascript"></script>標簽書寫。

<script type="text/javascript">
  alert("網頁警告框");
</script>

註意 ：<script></script>標簽可以書寫在文檔的任意位置，書寫多次，一旦載入到script標簽就會立即執行內部的JavaScript代碼，因此不同的位置會影響代碼最終的執行效果

3.3外部鏈接：創建外部的JavaScript文件 XX.JavaScript，在HTML文檔中使用<script src=""></script>引入

<script src="index.JavaScript"></script>

註意 ：<script></script>既可以實現內嵌 JavaScript 代碼，也可以實現引入外部的 JavaScript 文件，但是只能二選一。

3.44 JavaScript 輸入和輸出語句：

alert("")；普通的網頁彈框

console.log()；控制台輸出，多用於代碼調試

document.write("<h1>Hello</h1>")；實現在動態在網頁中寫入內容，
可以識別HTML標簽,腳本代碼可以在文檔任何地方書寫，如果是普通寫入（不涉及事件），
區分代碼的書寫位置插入

二、基礎語法

1.，語法規範：

  1. JavaScript是由語句組成,語句由關鍵字，變數，常量，運算符，方法組成。

  2. 分號可以作為語句結束的標誌，也可以省略

  3. JavaScript嚴格區分大小寫

  4. 註釋語法 單行註釋使用 // 多行註釋使用 /* */

2. JavaScript的變數與常量：

1，變數：

1.1作用 : 用於存儲程式運行過程中可動態修改的數據

1.2語法 : 使用關鍵var聲明,自定義變數名

var a;      //變數聲明
a = 100;    //變數賦值
var b = 200; //聲明並賦值
var m,n,k;  //同時聲明多個變數
var j = 10,c = 20; //同時聲明並賦值多個變數

1.3 命名規範 :

    1. 變數名，常量名，函數名，方法名自定義，可以由數字，字母，下劃線，$組成，禁止以數字開頭

    2. 禁止與關鍵字衝突(var const function if else for while do break case switch return class)

    3. 變數名嚴格區分大小寫

    4. 變數名儘量見名知意，多個單片語成採用小駝峰,例如："userName"

1.4使用註意 :

變數如果省略var關鍵字，並且未賦值，直接訪問會報錯

2，變數使用var關鍵字聲明但未賦值，變數初始值為undefined

3，變數省略var關鍵字聲明，已被賦值，可正常使用，影響變數作用域

2，常量

2.1 作用 : 存儲一經定義就無法修改的數據

2.2 語法 : 必須聲明的同時賦值

const PI = 3.14;

2.3 註意 :

常量一經定義，不能修改，強制修改會報錯

命名規範同變數，為了區分變數，常量名採用全大寫字母

2.4操作小數位：

toFixed(n)； 保留小數點後 n 位，並且四捨五入。

使用 ：

var num = 3.1415926;
//保留當前變數小數點後兩位
var res = num.toFixed(2);

3. 數據類型

 

3.1number 數值類型：

整數：

十進位表示

   var a = 100;

八進位表示 以0為首碼

   var b = 021; //結果為十進位的 17

使用 : 整數可以採用不同進位表示，在控制台輸出時一律會按照十進位輸出

小數：

 var m = 1.2345;

科學計數法 例 : 1.5e3 e表示10為底，e後面的數值表示10的次方數 1.5e3 等價於 1.5 * 10(3)

3.2string 字元串類型：

字元串：由一個或多個字元組成，使用""或''表示，每一位字元都有對應的Unicode編碼

var s = "100";
var s1 = "張三";

3.3boolean 布爾類型：

只有真和假兩個值，布爾值與number值可以互相轉換。true 為 1，false 為 0

var isSave = true;
var isChecked = false;

3.4undefined 特殊值：

變數聲明未賦值時顯示undefined

var a;
console.log(a);//undefined

3.5null 空類型 ：

定義對象引用時使用null，表示對象為空

  • 引用數據類型 主要指對象，函數等
  • 檢測數據類型 ​ typeof 變數或表達式 ​ typeof (變數或表達式)
var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. 數據類型轉換

不同類型的數據參與運算時,需要轉換類型

4.1強制類型轉換

1，轉換字元串類型 方法：toString() 返迴轉換後的字元串

 var a = 100;
 a = a.toString(); //"100"
 var b = true;
 b = b.toString(); //"true"

2，轉換number類型

Number(param) 參數為要進行數據類型轉換的變數或值，返迴轉換後的結果: 如果轉換成功，返回number值 如果轉換失敗，返回NaN，(Not a Number)，是非number字元，一律轉換失敗，返回 NaN

4.2隱式類型轉換（自動轉換）

  1. 當字元串與其他數據類型進行"+"運算時，表示字元串的拼接，不再是數學運算 轉換規則 ：將非字元串類型的數據轉換成字元串之後進行拼接，最終結果為字元串

  2. 其他情況下，一律將操作數轉number進行數學運算

5. 運算符

5.1賦值運算符：

= 將右邊的值賦給左邊變數

5.2算數運算符：

+ - * / % 加 減 乘 除 取餘

5.3符合運算符：

+= -= *= /= %=

5.4 自增或自減運算符：

++ -- 變數的自增和自減指的是在自身基礎上進行 +1或-1 的操作

註意：自增或自減運算符在單獨與變數結合時，放前和放後沒有區別，如果自增或自減運算符與其他運算符結合使用，要區分首碼和尾碼，做首碼，那就先++/--，再進行賦值或其他運算，如果做尾碼，就先結合其他運算符，再進行++ / --

5.5關係運算符/比較運算符：

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

1，關係運算符用來判斷表達式之間的關係，結果永遠是布爾值 true/false

2，使用

  • 字元串與字元串之間的比較 依次比較每位字元的Unicode碼，只要某位字元比較出結果，就返回最終結果

  • str.charCodeAt(index)

    方法可返回指定位置的字元的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數

    index必需。表示字元串中某個位置的數字，即字元在字元串中的下標。

3，相等與全等

    • 相等：不考慮數據類型，只做值的比較(包含自動類型轉換)

    • 全等：不會進行數據類型轉換，要求數據類型一致並且值相等才判斷全等

5.6邏輯運算符：

  1. && 邏輯與 ：表達式同時成立，最終結果才為true；1則1

  2. || 邏輯或 ：表達式中只要有一個成立，最終結果即為true；有1則1

  3. ! 邏輯非 ：對已有表達式的結果取反 註意：除零值以外，所有值都為真

5.7三目運算符：

語法 :

表達式1 ? 表達式2 : 表達式3;

過程 :

判斷表達式1是否成立，返回布爾值；

如果表達式1成立，執行表達式2；

如果表達式1不成立，執行表達式3；

三、DOM 元素和事件

什麼是事件？：事件是指用戶的行為或元素的狀態。由指定元素監聽相關的事件，並且綁定事件處理函數。

事件處理函數：元素監聽事件，併在事件發生時自動執行的操作。

1，事件函數分類

1.1 滑鼠事件：

onclick //單擊
ondblclick //雙擊
onmouseover //滑鼠移入
onmouseout //滑鼠移出
onmousemove //滑鼠移動

1.2文檔或元素載入完畢：

onload //元素或文檔載入完畢

1.3表單控制項狀態監聽：

onfocus //文本框獲取焦點
onblur //文本框失去焦點
oninput //實時監聽輸入
onchange //兩次輸入內容發生變化時觸發,或元素狀態改變時觸發
onsubmit //form元素監聽,點擊提交按鈕後觸發,通過返回值控制數據是否可以發送給伺服器

2，獲取元素節點

2.1根據標簽名獲取元素節點列表：

var elems = document.getElementsByTagName("");
/*
參數 : 標簽名
返回值 : 節點列表,需要從節點列表中獲取具體的元素節點對象,添加相應下標。
*/

2.2根據 class 屬性值獲取元素節點列表：

var elems = document.getElementsByClassName("");
/*
參數 : 類名(class屬性值)
返回值 : 節點列表
*/

2.3根據 id 屬性值取元素節點：

var elem = document.getElementById("");
/*
參數 : id屬性值
返回值 : 元素節點
*/

2.4根據 name 屬性值取元素列表：

var elems = document.getElementsByName("");
/*
參數 : name屬性值
返回 : 節點列表
*/

3，事件綁定方式

3.1內聯方式： 將事件名稱作為標簽屬性綁定到元素上

例 :

<button onclick="alert()">點擊</button>

3.2動態綁定 ：獲取元素節點，動態添加事件

例 :

btn.onclick = function (){
​
};

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

-Advertisement-
Play Games
更多相關文章
  • sysdatabaes表與sysobjects表
    sysdatabases表 sysdatabases是在master資料庫中的表，是一個只讀的表，裡面包含所有資料庫的信息 在創建資料庫是進行存在性檢測 use master go if exists(select * from sysdatabases where name='資料庫名') dro ...
  • 視圖view
    視圖：只有結構沒有數據 視圖是在數據表基礎上定義的一個虛擬表，在打開視圖是從數據表提取查詢結果 一個視圖是從特定的角度查看資料庫的方式、 限定不同用戶能看到的資料庫的範圍 維護數據安全的一種方式 視圖可以修改資料庫里的數據 視圖中只負責存儲select命令，不保存數據，不占據物理物理空間 創建視圖 ...
  • SQL保存查詢結果——生成新表
    將查詢結果生成新表 在同一資料庫中 select <表達式列表> into <新表名> form 原來的表 select * into 新表名 form 原來的表 基於多表查詢的DML update 表名 set 欄位=‘’ where 子查詢update 表名 set 欄位=‘’ from 表1 ...
  • 單表查詢DQL
    基本數據檢索：單表 複雜數據檢索：多表：連接查詢、子查詢（嵌套查詢）、集合運算 基本select語句： select <檢索欄位> from <表> where <檢索條件> group by<分類> having<檢索條件> order by <排序欄位> 操縱列： 1.輸出所有列：select ...
  • Redis入門(3) - 事務和緩存
    事務的使用方式 事務的錯誤處理 WATCH命令 生存時間 緩存策略 Redis中的事務（transaction）是一組命令的集合。事務同命令一樣都是Redis的最小執行單位，一個事務中的命令要麼都執行，要麼都不執行。 事務的原理是先將屬於一個事務的命令發送給Redis，然後再讓Redis依次執行這些 ...
  • MySQL是如何實現事務的隔離級別
    摘要 本文旨在瞭解MySQL InnoDB引擎如何支持事務的隔離級別。 文章主要內容分兩個部分。 第一部分闡述資料庫的併發問題以及為之產生的ANSI SQL 標準隔離級別。 第二部分根據 MySQL 官方文檔解釋 InnoDB 是如何支持這些隔離級別的。 資料庫事務的併發問題 ANSI SQL 隔離 ...
  • Android Gradle 插件
    從 Gradle 角度看，Android 插件是由 Google 的 Android 團隊開發的一個第三方插件。 從 Android 的角度看，Android 插件是基於 Gradle 構建的，是和 Android studio 完美搭配的新一代構建系統。 ...
  • andorid jar/庫源碼解析之apktool.jar
    目錄：andorid jar/庫源碼解析 Apktool.jar： 作用： 1、用於對APK文件進行解包，成可以讀的smali和xml，png等資源文件。 2、同時，把解碼之後的數據，重新打包成APK文件。 慄子： 使用命令的方式使用 1、apktool d xxx.apk // 解碼 apk文件 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類