js簡介以及在html中的2種使用方式(hello world)

簡介

javascript :是一個跨平臺的腳本語言;是一種輕量級的編程語言。

JavaScript 是 Web 的編程語言。所有現代的 HTML 頁面都使用 JavaScript。

HTML: 結構

css: 表現

JS: 行為

HTML+CSS 只能稱之為靜態網頁,加入js網頁則有了靈魂稱之為動態網頁

腳本語言的特點:

不能獨立運行,要依賴網頁;

可插入 HTML 頁面的編程代碼。

插入 HTML 頁面后,可由所有的現代瀏覽器執行。

javascript 在網頁中使用的兩種方式:

方式1:直接在script標簽中編寫;

方式2:引用外部js代碼

注意

1.可以有多個script標簽,多個script標簽都是自上而下順序執行

2.alert()的作用:控制瀏覽器彈出一個警告對話框

方式1實例:直接在script標簽中編寫

1.新建一個html文件(如:demo.html),并將下述內容寫入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件中插入一個script標簽

<script>alert("hello world"); </script>
<script>alert("hello world-2"); </script>

?

3.將html文件用瀏覽器打開,即可看見hello world

點擊確定后,可以看見hello world-2

demo.html完整文件內容如下:

<!DOCTYPE HTML>
<html><title>hello world</title><body><script>alert("hello world"); </script><script>alert("hello world-2"); </script></body>
</html>

方式2實例:引用外部js代碼

1.新建一個html文件(如:demo.html),并將下述內容寫入文件中

<!DOCTYPE HTML><html><title>hello world</title><body></body>
</html>

2.在html文件(如:demo.html)同目錄下新建一個js文件(如:demojs.js),并將下述內容寫入文件中

alert("hello world");

3.在html文件中引用外部js代碼(如:demojs.js)

<script src="./demojs.js">alert("hello world-2");</script>
<script>alert("hello world-3");</script>

?

4.將html文件用瀏覽器打開,即可看見hello world

點擊確定后,可以看見hello world-3

demo.html完整文件內容如下:

<!DOCTYPE HTML>
<html><title>hello world</title><body><script src="./demojs.js">alert("hello world-2");</script><script>alert("hello world-3");</script></body>
</html>

注意:script標簽一旦引入外部文件,就不能編寫代碼了,即使寫了瀏覽器也會自動忽略。

如果需要再創建一個script代碼即可。

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

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

相關文章

Rust交叉編譯簡述 —— Arm

使用系統&#xff1a;WSL2 —— Kali(Microsoft Store) 命令列表 rustup target list # 當前官方支持的構建目標架構列表 rustup target add aarch64-unknown-linux-gnu # 添加目標架構sudo apt-get install gcc-13-aarch64-linux-gnu gcc-13-aarch64-linux-gnu # 下載目標工具…

github以及上傳代碼處理

最近在github上傳代碼的時候出現了&#xff1a; /video_parser# git push -u origin main Username for https://github.com: gtnyxxx Password for https://gtny2010github.com: remote: Support for password authentication was removed on August 13, 2021. remote: Plea…

ROS局部路徑規劃器插件teb_local_planner流程梳理(上)

在我之前的文章《ROS導航包Navigation中的 Movebase節點路徑規劃相關流程梳理》中已經介紹過Move_base節點調用局部路徑規劃器插件的接口函數是computeVelocityCommands&#xff0c;接下來&#xff0c;我們就從這個函數入手梳理一下teb_local_planner功能包的工作流程。 ☆注&a…

推薦一個繪圖平臺(可替代Visio)

不廢話&#xff0c;簡易記網址&#xff1a; draw.io 網站會重定向到&#xff1a;https://app.diagrams.net/

編程語言中的++和--運算符介紹

編程語言中的和--運算符介紹 和--是編程語言&#xff08;C/C、JavaScript、Java&#xff09;中的自增&#xff08;加一&#xff09;和自減&#xff08;減一&#xff09;運算符。它們可以應用于變量&#xff0c;并且具有前綴和后綴兩種形式。 前綴形式&#xff1a; variable&…

Databend 開源周報第 106 期

Databend 是一款現代云數倉。專為彈性和高效設計&#xff0c;為您的大規模分析需求保駕護航。自由且開源。即刻體驗云服務&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新進展&#xff0c;遇到更貼近你心意的 Databend 。 數據脫敏 Data…

云原生 AI 工程化實踐之 FasterTransformer 加速 LLM 推理

作者&#xff1a;顏廷帥&#xff08;瀚廷&#xff09; 01 背景 OpenAI 在 3 月 15 日發布了備受矚目的 GPT4&#xff0c;它在司法考試和程序編程領域的驚人表現讓大家對大語言模型的熱情達到了頂點。人們紛紛議論我們是否已經跨入通用人工智能的時代。與此同時&#xff0c;基…

ISBN號碼(NOIP2008 普及組第一題)

ISBN號碼 說明 每一本正式出版的圖書都有一個ISBN號碼與之對應&#xff0c;ISBN碼包括9位數字、1位識別碼和3位分隔符&#xff0c;其規定格式如“x-xxx-xxxxx-x”&#xff0c;其中符號“-”就是分隔符&#xff08;鍵盤上的減號&#xff09;&#xff0c;最后一位是識別碼&#x…

CCF C3 走進百度:大模型與可持續生態發展

2023年8月10日&#xff0c;由CCF CTO Club發起的第22期C活動在百度北京總部進行&#xff0c;以“AI大語言模型技術與生態發展”主題&#xff0c;50余位企業界、學界專家、研究人員就此進行深入探討。 CCF C走進百度 本次活動&#xff0c;CCF秘書長唐衛清與百度集團副總裁、深…

如何保證數據傳輸的安全?

要確保數據傳輸的安全&#xff0c;您可以采取以下措施&#xff1a; 使用加密協議&#xff1a;使用安全的傳輸協議&#xff0c;如HTTPS(HTTP over SSL/TLS)或其他安全協議&#xff0c;以保護數據在傳輸過程中的安全性。加密協議可以有效防止數據被竊聽或篡改。 強化身份驗證&…

3種獲取OpenStreetMap數據的方法【OSM】

OpenStreetMap 是每個人都可以編輯的世界地圖。 這意味著你可以糾正錯誤、添加新地點&#xff0c;甚至自己為地圖做出貢獻&#xff01; 這是一個社區驅動的項目&#xff0c;擁有數百萬注冊用戶。 這是一個社區驅動的項目&#xff0c;旨在在開放許可下向每個人提供所有地理數據。…

【云計算原理及實戰】初識云計算

該學習筆記取自《云計算原理及實戰》一書&#xff0c;關于具體描述可以查閱原本書籍。 云計算被視為“革命性的計算模型”&#xff0c;因為它通過互聯網自由流通使超級計算能力成為可能。 2006年8月&#xff0c;在圣何塞舉辦的SES&#xff08;捜索引擎戰略&#xff09;大會上&a…

Sentinel 規則持久化

文章目錄 Sentinel 規則持久化一、修改order-service服務1.引入依賴2.配置nacos地址 第二步修改非常麻煩&#xff0c;可以略過&#xff0c;直接使用已經打好包的來使用二、修改sentinel-dashboard源碼1. 解壓2. 修改nacos依賴3. 添加nacos支持4. 修改nacos地址5. 配置nacos數據…

HCIP第五節------------------------------------------ospf

一、OSPF基礎 1、動態路由分類 2、距離矢量協議 運行距離矢量路由協議的路由器周期性地泛洪自己的路由表。通過路由的交互&#xff0c;每臺路由器都從相鄰的路由器學習到路由&#xff0c;并且加載進自己的路由表中&#xff0c;然后再通告給其他相鄰路由器。 對于網絡中的所有…

Django框架使用定時器-APScheduler實現定時任務:django實現簡單的定時任務

一、系統環境依賴 系統&#xff1a;windows10 python: python3.9.0 djnago3.2.0 APScheduler3.10.1 二、django項目配置 1、創建utils包&#xff0c;在包里面創建schedulers包 utils/schedulers/task.py #1、設置 Django 環境&#xff0c;就可以導入項目的模型類這些了 …

AR/VR眼鏡轉接器方案,實現同時傳輸視頻快充方案

簡介 虛擬現實頭戴顯示器設備&#xff0c;簡稱VR頭顯VR眼鏡&#xff0c;是利用仿真技術與計算機圖形學人機接口技術多媒體技術傳感技術網絡技術等多種技術集合的產品&#xff0c;是借助計算機及最新傳感器技術創造的一種嶄新的人機交互手段。VR頭顯VR眼鏡是一個跨時代的產品。不…

AgentBench——AI智能體基準測試和排行榜

如果您有興趣了解有關如何對AI大型語言模型或LLM進行基準測試的更多信息,那么一種新的基準測試工具Agent Bench已成為游戲規則的改變者。這個創新工具經過精心設計,將大型語言模型列為代理,對其性能進行全面評估。該工具的首次亮相已經在AI社區掀起了波瀾,揭示了ChatGPT-4目…

Selenium 測試用例編寫

編寫Selenium測試用例就是模擬用戶在瀏覽器上的一系列操作&#xff0c;通過腳本來完成自動化測試。 編寫測試用例的優勢&#xff1a; 開源&#xff0c;免費。 支持多種瀏覽器 IE&#xff0c;Firefox&#xff0c;Chrome&#xff0c;Safari。 支持多平臺 Windows&#xff0c;Li…

day-23 代碼隨想錄算法訓練營(19)part09

669.修剪二叉搜索樹 思路一&#xff1a;根據二叉搜索樹的特性進行中間值與去區間值判斷&#xff0c;有三種情況&#xff1a;1.在區間中&#xff0c;所以左右子樹都可能在區間中&#xff1b; 2.在區間外面的左側&#xff0c;必然只有右子樹可能存在區間中&#xff1b;3.在區間外…

Spring中JavaBean的生命周期及模式

( 本篇文章大部分講述了是底層知識&#xff0c;理念及原理 ) ( 如果只想了解&#xff0c;看我標記的重點即可&#xff0c;如果想明白其中原理&#xff0c;請耐心看完&#xff0c;對你大有受益 ) 目錄 一、簡介 ( 1 ) 是什么 ( 2 ) 背景概述 ( 3 ) 作用 二、生命周期 2.1 …