0基礎網站開發技術教學(二) --(前端篇 2)--

? ? ? ? 書接上回說到的前端3種主語言以及其用法,這期我們再來探討一下javascript的一些編碼技術。

一) 自定義函數

????????假如你要使用一個功能,正常來說直接敲出來便可。可如果這個功能你要用不止一次呢?難道你每次都敲出來嗎?這個時侯,就要用到我們的自定義函數了。

function <函數名>(){<函數內容>;        //設置函數
}<函數名>();            //調用函數

這就是自定義函數的模板,下面給大家舉個例子。

function warning(){alert("未滿18歲禁止瀏覽");    //定義warning為alert(彈窗警告)
}warning();    //調用warning函數

??

=> function的應用也分前後端的,而能夠在網頁顯示的都是屬於前端的(即上篇文章說的代碼)。

二) DOM操控

? ? ? ? 我們的網頁其實是一個HTML啊,而HTML背後就是DOM,即document模型。可document模型是啥呢?document就是文本的意思,而document跟windows一樣有很多層目錄啊,我們就可以通過document命令操作HTML標籤的屬性、樣式,內容。

<操作對象>.<對對象的操作>("<參數名>").<具體操作><body><p id="a">hello world</p>
</body>
<script>document.getElementById("a").innerHTML="你別在這睡"
</script>

- get = 獲取 , element = 元素 , by = 通過 , id = 名而己

? ? ? ? 所以getElementById = 透過Id找到該元素 (說白了 就是找到要操作的標籤)

- innerHTML=" "

? ? ? ? 就是以" "內的內容替代原來的內容,即hello world會變成你別在這睡。

DOM事件? ? ??

? ? ? ? DOM除了能修改內容外,還有非常多的功能。比如雙擊圖標打開程序,按Esc鍵退出全螢幕,服務器報錯時的彈窗等等。這些滿足條件後觸發的事件就是DOM事件。

? ? ? ? 因為DOM事件有很多哈,這邊只能挑一些跟大家講解,大家有興趣可以去 www.runoob.com/jsef/dom-obj-event.html?看看。

a.) onclick
//onclick = 點擊<body><button onclick="alert('你別在這睡,你怎麼哭著臉')>靠腰</button>    //不能用雙括號"",只能用單括''
</body>
<!-- 點解按鈕觸發彈窗 -->

b.) onkeydown
<script>document.addEventListener("keydown",function(event){    
//鍵盤監聽,注意:在非ie瀏覽器和非ie內核的瀏覽器
//參數1:表示事件,keydown:鍵盤向下按;參數2:表示要觸發的事件switch(event.key){case " ":    //按下空白鍵alert("超長前搖了解一下");break;case "Enter":    //按下回車鍵alert("superidol的笑容都沒你的甜");break;}});</script>
//這屬於後端指令,後面會跟大家細說

=> 按space鍵:

=> 按Enter鍵:

? ? ? ? 又或者可以直按在HTML裡使用:

<p onkeydown="if(event.key.toLowerCase()=='a'){alert('北極熊騎秦始皇')}" tabindex="0">秦始皇騎北極熊
</p>

? ? ? ? 好像很複雜的樣子,其實你只需要知道代碼的用處、運作的邏輯就可以了,上篇已經說了trae內置AI幫忙寫代碼[上篇開頭有下載鏈接],或者直接把要求打在代碼那邊就可以了。

????????所以我們只需要理解代碼而不是怎麼用代碼,當然,學是一定要學的,不然就真讓AI取代了。那麼好,這前端篇到這裡就結束了,下篇我們正式開始後端篇,欲知後事如何,且聽小編 下回分解。

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

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

相關文章

前端 拼多多4399筆試題目

拼多多 3 選擇題 opacity|visibity|display區別 在CSS中&#xff0c;opacity: 0 和 visibility: hidden 都可以讓元素不可見&#xff0c;但它們的行為不同&#xff1a; ? opacity: 0&#xff08;透明度為0&#xff09; 元素仍然占據空間&#xff08;不移除文檔流&#xff0…

數琨創享:全球汽車高端制造企業 QMS質量管理平臺案例

01.行業領軍者的質量升級使命在全球汽車產業鏈加速升級的浪潮中&#xff0c;質量管控能力已成為企業核心競爭力的關鍵。作為工信部認證的制造業單項冠軍示范企業&#xff0c;萬向集團始終以“全球制造、全球市場、做行業領跑者”為戰略愿景。面對奔馳、寶馬、大眾等“9N”高端客…

GaussDB 約束的使用舉例

1 not null 約束not null 約束強制列不接受 null 值。not null 約束強制字段始終包含值。這意味著&#xff0c;如果不向字段添加值&#xff0c;就無法插入新記錄或者更新記錄。GaussDB使用pg_get_tabledef()函數獲取customers表結構&#xff0c;如&#xff1a;csdn> set sea…

自動駕駛中的傳感器技術13——Camera(4)

1、自駕Camera開發的方案是否歸一化對于OEM&#xff0c;或者自駕方案商如Mobileye如果進行Camera的開發&#xff0c;一般建議采用Tesla的系統化最優方案&#xff0c;所有Camera統一某個或者某兩個MP設計&#xff08;增加CIS議價權&#xff0c;減少Camera PCBA的設計維護數量&am…

開源利器:glTF Compressor——高效優化3D模型的終極工具

在3D圖形開發領域,glTF(GL Transmission Format)已成為Web和移動端3D內容的通用標準。然而,3D模型的文件體積和紋理質量往往面臨權衡難題。Shopify最新開源的glTF Compressor工具,為開發者提供了一套精細化、自動化的解決方案,讓3D模型優化既高效又精準。本文將深入解析這…

LeetCode Hot 100,快速學習,不斷更

工作做多了有時候需要回歸本心&#xff0c;認真刷題記憶一下算法。那就用我這練習時長兩年半的代碼農民工來嘗試著快速解析LeetCode 100吧 快速解析 哈希 1. 兩數之和 - 力扣&#xff08;LeetCode&#xff09; 這題很簡單啊&#xff0c;思路也很多 1. 暴力搜索&#xff0c;…

MySQL的子查詢:

目錄 子查詢的相關概念&#xff1a; 子查詢的分類&#xff1a; 角度1&#xff1a; 單行子查詢&#xff1a; 單行比較操作符&#xff1a; 子查詢的空值情況&#xff1a; 多行子查詢&#xff1a; 多行比較操作符&#xff1a; ANY和ALL的區別&#xff1a; 子查詢為空值的…

Python批處理深度解析:構建高效大規模數據處理系統

引言&#xff1a;批處理的現代價值在大數據時代&#xff0c;批處理&#xff08;Batch Processing&#xff09; 作為數據處理的核心范式&#xff0c;正經歷著復興。盡管實時流處理備受關注&#xff0c;但批處理在數據倉庫構建、歷史數據分析、報表生成等場景中仍不可替代。Pytho…

是德科技的BenchVue和納米軟件的ATECLOUD有哪些區別?

是德科技的BenchVue和納米軟件的ATECLOUD雖然都是針對儀器儀表測試的軟件&#xff0c;但是在功能設計、測試場景、技術架構等方面有著明顯的差異。BenchVue&#xff08;是德科技&#xff09;由全球領先的測試測量設備供應商開發&#xff0c;專注于高端儀器控制與數據分析&#…

線上redis的使用

一.String1.緩存玩家單個數據&#xff0c;但是我覺得還是用hash好2.結合過期時間&#xff0c;比如:某個東西結算了&#xff0c;redis記錄一下&#xff0c;并設置過期時間3.分布式鎖二.Hash1.緩存一個單位的數據&#xff0c;比如&#xff1a;聯盟信息2.被封禁的列表&#xff0c;…

【實踐記錄】github倉庫的更新

首先登錄&#xff0c;參考&#xff1a;記一次github連接本地git_如何連接github-CSDN博客 SSH&#xff1a; git config --global user.name "GitHubUsername" git config --global user.email "emailexample.com" ssh-keygen -t ed25519 -C "emailex…

Nature圖形復現—Graphpad繪制帶P值的含數據點的小提琴圖

帶 P 值的含數據點的小提琴圖是一種科研數據可視化圖表&#xff0c;它同時呈現數據的分布特征、原始觀測值和統計顯著性&#xff1a;通過小提琴形狀展示概率密度分布&#xff08;反映數據集中趨勢和離散程度&#xff09;&#xff0c;疊加抖動散點顯示所有原始數據點&#xff08…

mongodb源代碼分析createCollection命令由create.idl變成create_gen.cpp過程

mongodb命令db.createCollection(name, options)創建一個新集合。由于 MongoDB 在命令中首次引用集合時會隱式創建集合&#xff0c;因此此方法主要用于創建使用特定選項的新集合。例如&#xff0c;您使用db.createCollection()創建&#xff1a;固定大小集合&#xff1b;集群化集…

達夢(DM8)常用管理SQL命令(3)

達夢(DM8)常用管理SQL命令(3) 1.表空間 -- 查看表空間信息 SQL> SELECT * FROM v$tablespace;-- 查看數據文件 SQL> SELECT * FROM v$datafile;-- 表空間使用情況 SQL> SELECT df.tablespace_name "表空間名稱",df.bytes/1024/1024 "總大小(MB)&q…

【Django】-5- ORM的其他用法

一、&#x1f680; ORM 新增數據魔法&#xff01;核心目標教你用 Django ORM 給數據庫 新增數據 &#xff01;就像給數據庫 “生小數據寶寶”&#x1f476;方法 1&#xff1a;實例化 Model save&#xff08;一步步喂數據&#xff09;obj Feedback() # 實例化 obj.quality d…

Flink Checkpoint機制:大數據流處理的堅固護盾

引言在大數據技術蓬勃發展的當下&#xff0c;數據處理框架層出不窮&#xff0c;Flink 憑借其卓越的流批一體化處理能力&#xff0c;在大數據流處理領域占據了舉足輕重的地位 。它以高吞吐量、低延遲和精準的一次性語義等特性&#xff0c;成為眾多企業處理實時數據的首選工具。在…

【STM32-HAL】 SPI通信與Flash數據寫入實戰

文章目錄1.參考教程2. 4種時間模式3. 3個編程接口3.1 HAL_StatusTypeDef HAL_SPI_Transmit(...) &#xff1a;3.1.1 參數說明3.1.2 例子3.2 HAL_StatusTypeDef HAL_SPI_Receive(...) &#xff1a;3.2.1參數說明3.2.2 例子3.3 HAL_StatusTypeDef HAL_SPI_TransmitReceive(...) &…

SNR-Aware Low-light Image Enhancement 論文閱讀

信噪比感知的低光照圖像增強 摘要 本文提出了一種新的低光照圖像增強解決方案&#xff0c;通過聯合利用信噪比&#xff08;SNR&#xff09;感知的變換器&#xff08;transformer&#xff09;和卷積模型&#xff0c;以空間變化的操作方式動態增強像素。對于極低信噪比&#xff0…

在 Vue3 中使用 Mammoth.js(在 Web 應用中預覽 Word 文檔)的詳解、常見場景、常見問題及最佳解決方案的綜合指南

一、Mammoth.js 簡介與核心功能 Mammoth.js 是一個專用于將 .docx 文檔轉換為 HTML 的庫,適用于在 Web 應用中預覽 Word 文檔。其核心特點包括: 語義化轉換:基于文檔樣式(如標題、段落)生成簡潔的 HTML 結構,忽略復雜樣式(如居中、首行縮進)。 輕量高效:適用于需要快…

2025 年 VSCode 插件離線下載硬核攻略

微軟 2025 年起關閉 VSCode 官方市場 .vsix 文件直接下載入口&#xff0c;給企業內網開發者帶來極大不便。不過別擔心,今天提供一個下載.vsix文件地址。 VSC插件下載 (dreamsoul.cn) 下載好的.vsix文件后&#xff0c;打開vscode的應用&#xff0c;選擇右上角...打開&#xff…