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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈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…