JavaScript從零開(kāi)始：引入方式、注釋、輸入輸出

為前端開(kāi)發(fā)的基石，JavaScript編程語(yǔ)言不僅易學(xué)易用，還具有強(qiáng)大的跨平臺(tái)特性。本文將為你詳細(xì)介紹JavaScript的引入方式、注釋以及輸入輸出，幫助你輕松掌握J(rèn)avaScript編程的精髓，成為一名炙手可熱的前端開(kāi)發(fā)高手！

引入方式：輕松踏入JavaScript的大門(mén)

作為JavaScript編程語(yǔ)言的初學(xué)者，了解如何引入JavaScript代碼是你進(jìn)入這個(gè)神奇世界的第一步。有三種常見(jiàn)的引入方式：

內(nèi)聯(lián)方式：將JavaScript代碼直接寫(xiě)入HTML文件中的<script></script>標(biāo)簽中。這種方式簡(jiǎn)單快速，適合小型項(xiàng)目或簡(jiǎn)單功能的實(shí)現(xiàn)。

<!DOCTYPE html>
<html>
  <head>
    <title>內(nèi)聯(lián)方式</title>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>

    <script>
      // 在這里編寫(xiě)你的JavaScript代碼
    </script>
  </body>
</html>

內(nèi)部文件方式：將JavaScript代碼保存為外部文件，通過(guò)<script>標(biāo)簽的src屬性引入。這種方式適用于多個(gè)HTML文件共享同一段JavaScript代碼，提高了代碼的復(fù)用性和維護(hù)性。

<!DOCTYPE html>
<html>
  <head>
    <title>內(nèi)部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>
  </body>
</html>

外部文件方式：將JavaScript代碼保存為獨(dú)立的外部文件，通過(guò)HTML文件的<script>標(biāo)簽的src屬性引入。這種方式適合于大型項(xiàng)目，利于代碼的模塊化管理和團(tuán)隊(duì)協(xié)作。

<!DOCTYPE html>
<html>
  <head>
    <title>外部文件引入方式</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>你好，謐夜星球！</h1>
  </body>
</html>

注釋：注解代碼，提升開(kāi)發(fā)效率

在編程過(guò)程中，合理使用注釋可以方便自己和他人理解代碼的邏輯和用途，是良好編程風(fēng)格的重要一環(huán)。在JavaScript中，有兩種注釋方式：

單行注釋：使用//符號(hào)進(jìn)行注釋，注釋內(nèi)容從//后開(kāi)始，直到該行結(jié)束。

// 這是一個(gè)單行注釋

多行注釋：使用/* */符號(hào)進(jìn)行注釋，注釋內(nèi)容位于/*和*/之間。

/* 
  這是一個(gè)多行注釋，
  可以跨越多行
*/

通過(guò)合理注釋，你不僅能提高自己的代碼理解和維護(hù)效率，還能方便團(tuán)隊(duì)協(xié)作，使代碼更加易于管理。

輸入輸出：與用戶進(jìn)行互動(dòng)

在前端開(kāi)發(fā)中，與用戶進(jìn)行互動(dòng)是至關(guān)重要的。JavaScript提供了多種輸入輸出的方式，使得與用戶的交互變得簡(jiǎn)單而靈活。

彈窗輸出：使用alert()函數(shù)可以在頁(yè)面上彈出一個(gè)警告框，向用戶顯示一條消息。

alert("你好，謐夜星球！");

彈窗輸入：使用prompt()函數(shù)可以在頁(yè)面上彈出一個(gè)對(duì)話框，允許用戶輸入文本。

var name = prompt("請(qǐng)輸入用戶名：");
alert("你好, " + name + "!");

控制臺(tái)輸出：使用console.log()函數(shù)可以將信息輸出到瀏覽器的控制臺(tái)，方便開(kāi)發(fā)過(guò)程中的調(diào)試和日志記錄。

console.log("你好，謐夜星球！");

頁(yè)面輸出：通過(guò)操作HTML元素，可以將信息直接顯示在頁(yè)面上。

document.getElementById("output").innerHTML = "你好，謐夜星球！";

通過(guò)合理運(yùn)用輸入輸出的方式，你可以實(shí)現(xiàn)與用戶的互動(dòng)，接收用戶的輸入并輸出相應(yīng)的結(jié)果，增加頁(yè)面的交互性和用戶體驗(yàn)。

總結(jié)：通過(guò)本文的介紹，我們已經(jīng)了解了JavaScript編程語(yǔ)言的引入方式、注釋以及輸入輸出。作為前端開(kāi)發(fā)的基石，JavaScript在網(wǎng)頁(yè)開(kāi)發(fā)中扮演著重要的角色。希望通過(guò)學(xué)習(xí)JavaScript，能夠輕松掌握前端開(kāi)發(fā)的精髓，成為一名炙手可熱的前端開(kāi)發(fā)高手！加油！

速生成 Html5 骨架

在 Html 文件中輸入 html:5 按下回車(chē)鍵，可快速生成 HTML5 頁(yè)面模板：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

html:5

父子關(guān)系快速構(gòu)建

在 html 文件中輸入 div#id>ul.list>li.item*5 按下回車(chē)鍵，可快速生成父子關(guān)系的結(jié)構(gòu)：

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子關(guān)系構(gòu)建

多個(gè)相同標(biāo)簽

重復(fù)元素: 使用 * 加上數(shù)字來(lái)創(chuàng)建多個(gè)相同的標(biāo)簽。例如，p*3 后按 Tab 會(huì)產(chǎn)生三個(gè) <p> 段落標(biāo)簽。

<p></p>
<p></p>
<p></p>

類與 ID 的添加

類: 在標(biāo)簽名后加 . 再加上類名。如 div.container 生成帶有類 container 的 <div> 。

<div class="container"></div>

ID: 使用 # 加上 ID 名。如 div#main 生成 ID 為 main 的 <div> 。

<div id="main"></div>

屬性快速插入

屬性賦值: 在標(biāo)簽后用方括號(hào) [attr=value] 插入屬性。例如，a[href=https://example.com]。

<a href="https://example.com"></a>

組合使用

復(fù)合示例: 結(jié)合上述技巧，可以創(chuàng)建復(fù)雜結(jié)構(gòu)。比如，nav>ul>li.item$*4>a[href=#]{Item $} 會(huì)生成一個(gè)導(dǎo)航欄，包含 4 個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)都是一個(gè)鏈接，鏈接文本分別為 "Item 1" 到 "Item 4"，且每個(gè)鏈接的 href 屬性指向不同的 ID。

<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>

自定義 snippets（代碼片段）

高級(jí)結(jié)構(gòu): 如果有特定的復(fù)雜結(jié)構(gòu)經(jīng)常使用，可以創(chuàng)建自定義的 Emmet snippets。轉(zhuǎn)到 "文件" > "首選項(xiàng)" > "用戶代碼片段"，選擇或創(chuàng)建 HTML 片段文件，定義自己的縮寫(xiě)和展開(kāi)結(jié)構(gòu)。

Emmet 命令

Emmet: Wrap with Abbreviation: 選中現(xiàn)有代碼后，使用此命令（通過(guò)命令面板 Ctrl+Shift+P / Cmd+Shift+P 調(diào)出并搜索 “Wrap with Abbreviation” ），可以快速將選中內(nèi)容包裹在指定標(biāo)簽內(nèi)。

為一名編程人員，在學(xué)習(xí)各種編程語(yǔ)言時(shí)，會(huì)經(jīng)常翻閱官方的chm幫助手冊(cè)學(xué)習(xí)，那么你是否也想制作一個(gè)自己的幫助文檔呢？下面和我一起做吧！

1.首先制作html文檔

如果要用到圖片,即將圖片和該html文檔放到同一個(gè)文件夾下,如果要用到css文件,最好也放在同一文件夾下.

2.按以下圖步驟操作，工具HTML Help Workshop

軟件界面

新建方案

新建方案第二步

輸入方案名稱

可以新建一個(gè)后綴名為hhp的文件，必須和htm文件在同一個(gè)目錄，名稱隨意。

如果有，系統(tǒng)會(huì)提示已經(jīng)存在，是否繼續(xù)使用，點(diǎn)擊是。

選擇文件類型為html文件

添加需要制作的htm文件

選擇點(diǎn)擊打開(kāi)

然后下一步

新建方案完成

點(diǎn)擊目錄，會(huì)彈出一個(gè)框

彈框選擇確定

會(huì)分配一個(gè)默認(rèn)的hhc文件名稱，可以修改，然后點(diǎn)擊保存

目錄新建完之后的界面

插入標(biāo)題

修改標(biāo)題的默認(rèn)圖標(biāo)

然后插入頁(yè)面，點(diǎn)擊否

輸入頁(yè)面的名稱，添加頁(yè)面的相應(yīng)文件

點(diǎn)擊確定

按照以上方法把所有需要添加的文件添加進(jìn)來(lái)，頁(yè)面名稱可以修改

最后點(diǎn)擊編譯，頁(yè)面之間的順序可以用上下左右尖頭調(diào)整主次

編譯完成之后的截圖，學(xué)會(huì)了吧，小伙伴們！

有很多文檔資料對(duì)于公司或個(gè)人來(lái)說(shuō)非常重要，比如整理了好幾個(gè)月，搜羅整個(gè)網(wǎng)絡(luò)才找到，或者是公司核心資料，如果被他人隨意查閱泄漏出去，可能會(huì)造成不可估量的損失，利用具有加密功能的軟件（明鏡防泄密系統(tǒng)）對(duì)文件進(jìn)行加密，在“數(shù)據(jù)保護(hù)策略配置”里，選擇要保護(hù)的文件類型，然后保存，這樣對(duì)于要保護(hù)的類型的文件即可做到加密保護(hù)，不再擔(dān)憂被泄密了。

在線咨詢

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商