【Java Web】速通JavaScript

參考筆記:JavaWeb 速通JavaScript_javascript 速通-CSDN博客


目錄

一、JavaScript快速入門

        1. 基本介紹

        2. JavaScript特點

        3. JavaScript的引入方式(重要)

                3.1 寫在script標簽中

                ?????3.2 以外部文件方式引入

二、JS的數據類型

        1. 變量

        2. 常用數據類型

        3.特殊值

三、JS的運算符

        1. 算數運算符

        2. 關系運算符 

        3. 邏輯運算符 || &&

         4.三目運算符

四、JS的分支結構和循環結構

        1. 分支結構

        2. 循環結構

五、JS中的數組

        1. 特點

        2. 創建方法

        3. 遍歷方法

六、JS的函數

        1. 簡介

        2. 聲明方式

        3. 使用的注意事項

七、JS事件

        1. 什么是事件

        2. 常見事件

        3. 事件的綁定

                3.1 通過屬性綁定

                3.2 通過DOM編程綁定

        4. 事件的案例演示

                4.1 onclick

               4.2 onblur

                4.3 onchange

八、JS創建對象的2種方式

九、BOM、DOM編程


一、JavaScript快速入門

        1. 基本介紹

        JavaScript 主要用于頁面元素的動態處理,能改變 HTML 的內容和屬性,能改變 HTML 的樣式(CSS),能完成頁面的數據驗證,能控制網頁的行為等等

        ② 關于 JS 代碼:

  • JS 代碼通常寫在 <head></head> 內的 <script></script> 標簽中

  • <script> 標簽中的屬性 type="text/javascript" 可加可不加

  • JS語句可不寫分號 " ;"

        2. JavaScript特點

  • 腳本語言

    • JavaScript 是一種解釋型的腳本語言。不同于 C、C++、Java 等語言需要先編譯后執行, JavaScript 不會產生編譯出來的字節碼文件( Java 文件編譯后會生成 .class 字節碼文件),而是在程序的運行過程中對源文件逐行進行解釋

  • 基于對象

    • JavaScript 是一種基于對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。但是面向對象的三大特性:『封裝』『繼承』『多態』中,JavaScript 能夠實現封裝,可以模擬繼承(但不是真正的繼承),不支持多態

var i = 10;
var str = "小馬"
  • 弱類型

    •  JavaScript 中有明確的數據類型,但是聲明一個變量后它可以接收任何類型的數據,并且會在程序執行過程中根據上下文自動轉換類型

    • JavaScript  的語法規范性沒有那么強,約束性較弱

        3. JavaScript的引入方式(重要)

                3.1 寫在script標簽中

        雖然可以在 html 文件任意位置嵌入 <script> 標簽,但通常還是寫在 <head> 中,因為 html 文件的執行順序是從上到下

                案例演示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script>function suprise(){alert("Hello,我是驚喜")}</script></head><body><button onclick="suprise()">點我有驚喜</button></body>
</html>

        缺陷 + 解決方案:

缺陷:僅能在當前頁面上使用,代碼復用度不高

解決方案:將腳本放在獨立的 js 文件中,通過 script 標簽引入外部腳本文件

                ?????3.2 以外部文件方式引入

        方法:  

         <script></script> 標簽中添加 src 屬性

        src 屬性指明 .js 文件的路徑,相對路徑和絕對路徑均可

                案例演示:

        第 1 步:抽取代碼到獨立的 js 文件中  

        第 2 步:在 html 文件中,通過 <script> 標簽的 src 屬性引入外部 js 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><script src="../js/button.js"></script><!--可引入多個外部JS文件--></head><body><button onclick="suprise()">點我有驚喜</button><button onclick="scare()">點我有驚嚇</button></body>
</html>

        運行效果:


二、JS的數據類型

        1. 變量

        變量是用于存儲信息的"容器"。JavaScript 變量可用于存放值(比如 x=5)和表達式(比如 z=x+y)JS變量對大小寫敏感

                內存指瀏覽器的內核空間。變量指向某一個內存空間
                如下圖所示 :   

        2. 常用數據類型

        ① number:數值類型。JS 中數值類型統一為 number ,包括整數和小數

        ② string:字符串類型。和 Java 的 String 相似,但 JS 中不嚴格區分單雙引號,都可以用于表示字符串

        ③ boolean:布爾類型。在 JSif 語句中,非空字符串會被轉換為 '真',非零數字也會被認為是 '真' 

        ④ Object:引用數據類型。各種對象和數組在 JS 中都是 Object 類型

        ⑤ function:函數類型。 JS 中的各種函數屬于 function  數據類型

                代碼演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">var i = 10console.log(typeof i)//numberi = "asf"console.log(typeof i)//stringi = falseconsole.log(typeof i)//booleani = new Object()console.log(typeof i)//Objecti = [1,2,3];console.log(typeof i)//Objectfunction say(){alert("hello")}console.log(typeof say)//function</script>
</head>
<body>
</body>
</html>

                運行效果:

        3.特殊值

        有 3 個比較特殊的值,如下:

        ① undefined:只聲明但未作初始化的變量,默認為 undefined 類型,其變量值也為 undefined 

        ② null:在 JS 中,如果給一個變量賦值 null ,其數據類型是 Object ,變量值是 null

        ③ Nan:非數值,全稱是 Not a Number ,一般進行錯誤的數學運算會導致變量值變為Nan

                代碼演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>special value</title><script type="text/javascript">var v1;console.log("v1 = " + v1 + ", v1 type: " + typeof v1);var v2 = null;console.log("v1 = " + v2 + ", v1 type: " + typeof v2);var v3 = 5 * '小馬';console.log("v3 = &#

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/907420.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/907420.shtml
英文地址,請注明出處:http://en.pswp.cn/news/907420.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python打卡訓練營-Day13-不平衡數據的處理

浙大疏錦行 知識點&#xff1a; 不平衡數據集的處理策略&#xff1a;過采樣、修改權重、修改閾值交叉驗證代碼 過采樣 過采樣一般包含2種做法&#xff1a;隨機采樣和SMOTE 過采樣是把少的類別補充和多的類別一樣多&#xff0c;欠采樣是把多的類別減少和少的類別一樣 一般都是缺…

Mac OS 使用說明

Mac 的啟動組合鍵 了解可通過在啟動時按住一個或多個按鍵來訪問的 Mac 功能和工具。 若要使用這些組合鍵中的任何一個&#xff0c;請在按下電源按鈕以開啟 Mac 后或在 Mac 開始重新啟動后&#xff0c;立即按住相應按鍵。請一直按住&#xff0c;直至電腦出現對應的行為。 !!!上…

LoadRunner 是什么

LoadRunner 是一款由 Micro Focus&#xff08;原惠普企業軟件部門&#xff09;開發的性能測試工具&#xff0c;廣泛應用于軟件、應用程序和系統的 負載測試、壓力測試 和 性能分析。它通過模擬大量用戶并發操作&#xff0c;幫助測試人員評估系統在高負載下的性能、穩定性和可擴…

RISC-V PMA、PMP機制深入分析

1 PMA PMA&#xff08;Physical Memory Attributes&#xff09;&#xff0c;物理內存屬性&#xff0c;顧名思義就是用來設置物理內存屬性的&#xff0c;但這里說“設置”&#xff0c;并不合理&#xff0c;因為一般情況下各存儲的屬性&#xff0c;在芯片設計時就固定了&#xf…

SQL正則表達式總結

這里寫目錄標題 一、元字符二、正則表達函數1、 regexp_like(x,pattern[,match_option])2、 regexp_instr(x,pattern[,start[,occurrence[,return_option[, match_option]]]]) 3、 REGEXP_SUBSTR(x,pattern[,start[,occurrence[, match_option]]]) 4、 REGEXP_REPLACE(x,patter…

Shortest path 代碼

Project https://graphics.cs.utah.edu/research/projects/shortest-path-to-boundary/ Build and Debug Fork:(在Win10上&#xff09; https://github.com/chunleili/Shortest-Path-to-Boundary-for-Self-Intersecting-Meshes commit hash d3160168d2b6a58188d12e6cd959da…

AMBA總線家族成員

在AMBA總線協議體系中&#xff0c;AXI4雖然是最新且性能最強的總線協議&#xff0c;但AHB和APB仍然被廣泛使用&#xff0c;主要原因在于??場景適配性、資源優化和系統兼容性??的綜合考量。以下是具體分析&#xff1a; AMBA 1?&#xff1a;僅包含ASB和APB1。?AMBA 2?&am…

前端高頻面試題1:HTML/CSS/瀏覽器/計算機網絡

目錄 1.為什么會出現margin塌陷&#xff1f; 2.如何解決margin塌陷&#xff1f; 3.HTML5有哪些新特性&#xff1f; 4.常見的語義化標簽有哪些&#xff1f;語義化標簽的好處&#xff1f; 5.使用css和js做動畫有何優劣 6.如何實現文本超出展示省略號 7.deep在css中存在嗎&…

基于 Spring Boot + Vue 的墻繪產品展示交易平臺設計與實現【含源碼+文檔】

項目簡介 本系統是一個基于 Spring Boot Vue 技術棧開發的墻繪產品展示交易平臺&#xff0c;旨在提供一個高效、便捷的在線商城平臺&#xff0c;方便用戶瀏覽、選購墻繪產品&#xff0c;并提供管理員進行商品管理、訂單管理等功能。系統采用了前后端分離的架構&#xff0c;前…

STM32F103_Bootloader程序開發05 - Keil修改生成文件的路徑與文件名,自動生成bin格式文件

導言 通過Keil的相關配置&#xff0c;可以靈活地修改輸出文件的保存路徑及文件名稱。在Bootloader程序開發過程中&#xff0c;合理配置輸出文件對于后續固件升級和自動化腳本處理至關重要。完成路徑和文件名配置后&#xff0c;還可以借助Keil自帶的fromelf.exe工具&#xff0c;…

力扣每日一題2025.5.28——題號:3372.連接兩棵樹后最大目標節點數目 |

目錄 題目鏈接&#xff1a;3372. 連接兩棵樹后最大目標節點數目 I - 力扣&#xff08;LeetCode&#xff09; 題目描述 解法一&#xff1a; Java寫法&#xff1a; C寫法&#xff1a; 運行時間 時間復雜度和空間復雜度 總結 題目鏈接&#xff1a;3372. 連接兩棵樹后最大目…

華為防火墻NAPT配置

1.實驗拓撲 2.實驗配置 [SW1]dis cu # sysname SW1 # vlan batch 10 20 # interface Vlanif10ip address 192.168.10.254 255.255.255.0 # interface Vlanif20ip address 192.168.20.253 255.255.255.0 # interface GigabitEthernet0/0/1port link-type accessport default vl…

java導入excel

這樣讀取excel時&#xff0c;得到的是結果值&#xff0c;而不是單元格的公式 import cn.hutool.poi.excel.ExcelReader; import cn.hutool.poi.excel.ExcelUtil;InputStream inputStream file.getInputStream(); ExcelReader reader ExcelUtil.getReader(inputStream, 1); L…

stm32cube ide如何生成LL庫工程

在 STM32Cube IDE 里生成使用 LL&#xff08;Low Layer&#xff09;庫的工程&#xff0c;可按以下步驟操作&#xff1a; 1. 新建 STM32 工程 啟動 STM32Cube IDE&#xff0c;選擇File→New→STM32 Project。依據需求挑選目標 MCU 型號&#xff0c;接著點擊Next。 2. 配置工程…

阿里通義實驗室突破空間音頻新紀元!OmniAudio讓360°全景視頻“聲”臨其境

在虛擬現實和沉浸式娛樂快速發展的今天&#xff0c;視覺體驗已經遠遠不夠&#xff0c;聲音的沉浸感成為打動用戶的關鍵。然而&#xff0c;傳統的視頻配音技術往往停留在“平面”的音頻層面&#xff0c;難以提供真正的空間感。阿里巴巴通義實驗室&#xff08;Qwen Lab&#xff0…

二十八、面向對象底層邏輯-SpringMVC九大組件之ViewResolver接口設計

在 Spring MVC 框架中&#xff0c;視圖解析器&#xff08;ViewResolver&#xff09;是連接控制器邏輯與具體視圖技術的核心紐帶。它通過抽象化的接口設計&#xff0c;將視圖的渲染邏輯與業務邏輯解耦&#xff0c;使開發者能夠靈活支持 JSP、Thymeleaf、FreeMarker 等多種視圖技…

LiveWallpaperMacOS:讓你的 Mac 桌面動起來

隨著桌面美化需求的不斷提升,用戶對于桌面壁紙的要求已經不再局限于靜態圖片。越來越多的 Mac 用戶希望桌面能像 Windows 一樣,擁有動態壁紙,展現個性、提升體驗。LiveWallpaperMacOS 正是這樣一款讓你的 Mac 桌面煥發活力的開源項目。 本文將詳細介紹 LiveWallpaperMacOS …

豆瓣電視劇數據工程實踐:從爬蟲到智能存儲的技術演進(含完整代碼)

通過網盤分享的文件&#xff1a;資料 鏈接: https://pan.baidu.com/s/1siOrGmM4n-m3jv95OCea9g?pwd4jir 提取碼: 4jir 1. 引言 1.1 選題背景 在影視內容消費升級背景下&#xff0c;豆瓣電視劇榜單作為國內最具影響力的影視評價體系&#xff0c;其數據價值體現在&#xff1a…

集成均衡功能電池保護芯片在大功率移動電源的應用,創芯微CM1341-DAT、杰華特JW3312、賽微微電CW1244、中穎SH366006

一文了解集成均衡功能電池保護IC在大功率移動電源的應用 創芯微CM1341-DAT 創芯微CM1341-DAT是一款專用于4串鋰離子/磷酸鐵鋰電池的保護芯片&#xff0c;內置有高精度電壓檢測電路和電流檢測電路。通過檢測各節電池的電壓、充放電電流及溫度等信息&#xff0c;實現電池過充電…

PHP生成pdf方法

1&#xff1a;第一種方法&#xff1a; 主要使用PHP的擴展 【 “spatie/browsershot”: “3.57”】 使用這個擴展生成PDF需要環境安裝以下依賴 1.1&#xff1a;NPM【版本&#xff1a;9.2.0】 1.2&#xff1a;NODE【版本&#xff1a;v18.19.1】 1.3&#xff1a;puppeteer【npm in…