如何將 JavaScript 鏈接到 HTML 和 CSS

已發表: 2022-02-25

創建、設計和啟動您的網頁或網站很簡單。 如果您查看通常擠滿並填充屏幕的所有文本、代碼和腳本。 HTML、CSS 和 JavaScript 語言廣為人知並被廣泛使用。 為了更好地理解這一點，我們需要一些關於這 3 個的定義，使其相關且直截了當。

在我們繼續之前，我想有機會感謝 NaturHandel.dk 和 Virksomhedsoplysninger.dk 使這篇文章成為可能。

因此，請允許我們將您的網頁介紹為藝術品。 這件藝術品有 3 個元素，使其成為傑作。 當您確保開始雕刻、繪畫或創作您的作品所需的所有工具都經過徹底計劃和定義，以確定它們將為您的藝術做出什麼貢獻時，就可以實現這一目標。 這些包括（HTML）紙張或您的藝術品基礎。 (CSS) 顏色和設計被納入你的基礎，最後，(JavaScript) 這件藝術品的目的和功能。 有了所有這 3 個，就建立了一種和諧的關係，每個人都可以看到、使用和成為其中的一部分。

讓我們進一步分解它，這樣我們就可以完全關聯這些語言之間的關係，我們應該：

不同代碼語言的解釋

HTML

  • 您的超文本標記語言
  • 帶有所有標準集的空白畫布，您的傑作將隨之而來。
  • 在此處指明您網頁的基本文本、標題和操作
  • 這是您的所有其他部分將被託管、定義或合併的部分
  • UI 所在的位置

CSS

  • 層疊樣式表
  • 在這裡，您現在可以根據您在畫布中完成的想法或初稿，為您的作品或網頁添加配飾、設計、決定尺寸和添加顏色。 所有美學元素都可以在這裡引導並在此處輸入以供您的觀眾看到。

JavaScript

  • 您在網頁或藝術作品中使用的定義圖形、動畫和聲音的語言
  • 如果您希望您的作品具有其他特性和功能的獎勵，那麼這就是負責的部分。
  • 將其視為一種獎勵，並為您的藝術作品增添光彩。
  • 這負責為您的按鈕、鏈接、圖標以及與頁面上可點擊內容有關的任何內容提供便利的後續步驟
  • 這定義了您的藝術作品的全部內容和用途。

為確保您的作品或網頁充分利用您的 JavaScript 元素，您必須在標籤中清楚地介紹它需要執行的功能。 現在，您的標題或文本將能夠在單擊、播放視頻或呈現圖像時根據附加的鏈接/鏈接將您重定向到彈出頁面。 當在您的網頁上單擊文本、按鈕或圖標時，這種語言 (JavaScript) 負責您的圖形功能和所有其他操作。

但要實現這一點，您必須在命令中包含一個橋接元素，使您的語言能夠理解您想要執行的功能。 在你的用戶界面中進行任何交互的關鍵是由你的“標籤”的存在來定義的。 此標籤是您的網站定位它所在位置、了解您希望它做什麼以及頁面在瀏覽器上加載時需要採用的節奏或速度的方式。 您的標籤可以包含或放在您希望添加到站點的頭部、正文或外部文件中。 由於這是最常用的方法（腳本標籤），還有其他方法可以鏈接您的 JavaScript，具體取決於您的偏好和界面。

以下是有關如何鏈接 JavaScript（使用 HTML 和 CSS）的詳細說明：

帶有腳本標籤的 HTML

<title>JavaScript</title>

在本例中，您可以通過這種方式通過 HTML 鏈接您的 JavaScript。 當它加載時，這被視為“JavaScript”作為您網頁上的標題。

HTML 通過代碼編程

這更多地用於頁面中的動態操作，例如顏色轉換、文本大小、動畫等。這可以通過 <script type=”text/JavaScript”> ('<body style=”background-color 在您的語言中進行操作: (插入你喜歡的顏色)”>')

請記住，您可以在這部分中使用內部 JavaScript 代碼，然後在出現錯誤時將其轉換，因為您仍然可以以下面顯示的不同方式操作此功能。

通過單獨文件的 HTML

您也可以通過 javascript.js 將其作為沒有腳本標籤的單獨文件進行嘗試。 但是這種技術有點棘手，因為這會混淆瀏覽器定位代碼的位置並可能導致錯誤。

為避免在使用此方法時出現這些錯誤，請附加一個路徑以通過 <script src=(insert “PATH”)> 啟用方向

通過樣式標籤的 CSS

在您的 HTML 正文中，添加一些可以歸因於樣式的內容，包括通過 <title>Linking to CSS and JavaScript</title> 鏈接兩者（或您希望文本顯示的方式）

帶有 JavaScript 標記的鏈接元素應放置在源文檔和

HTML。 這樣，每個對應代碼的關係就被公平地歸因了。

儘管建議在大多數情況下不一定要這樣做，因為 CSS 和 JavaScript 中的某些功能都可以提供歸因於它們的內容，但它仍然是可能的。

頁面的背景顏色、文本或字體的大小以及文本的動態都可以在此處進行操作。

使用這些參數，您的站點圖像處理或動態內容更改和表單驗證的執行可以全部添加到您的網頁功能中。 通過它使您的藝術品或網頁更加全面。 這些命令將允許您導入外部和內部文件以將它們相應地附加到您的 JavaScript 代碼中，就像在 HTML 的情況下一樣，但在您的 CSS 中不是必需的。 所以請記住，在嵌入 JavaScript 之前，請務必先插入腳本或標籤，以便您的網站或 HTML 能夠理解您的語言，並知道它們如何直接翻譯您正在操縱它們執行的功能。 您的頁面很大程度上取決於您的命令在腳本標籤、代碼和編程之間輸入的邏輯，以逐步採取適當的操作。