admintrick.com

วิธีใช้ JavaScript ใน HTML เพื่อสร้างเว็บเพจแบบโต้ตอบ

Tweet
Share
Share
Pin

HTML, CSS และ JavaScript เป็นสามภาษาหลักที่ใช้ในการพัฒนาส่วนหน้า HTML เป็นภาษามาร์กอัป ในขณะที่ CSS เป็นภาษาสไตล์

JavaScript เป็นภาษาการเขียนโปรแกรมเชิงวัตถุส่วนใหญ่ใช้ในการสร้างฝั่งไคลเอ็นต์ของเว็บและแอปพลิเคชันบนมือถือ ภาษาไดนามิกแบบโอเพ่นซอร์สนี้กลายเป็นภาษาโปรแกรมที่มีผู้ใช้มากที่สุดภาษาหนึ่งเนื่องจากมีความยืดหยุ่นและเข้าใจง่าย

ด้วย HTML5 และ CSS3 คุณสามารถสร้างเว็บไซต์แบบคงที่ได้ อย่างไรก็ตาม ในการเพิ่มการโต้ตอบกับไซต์ดังกล่าว คุณต้องใช้ภาษาโปรแกรม เช่น JavaScript ที่เบราว์เซอร์เข้าใจ

บทความนี้จะอธิบายว่าทำไมคุณต้องใช้ JavaScript กับ HTML แนวทางต่างๆ ในการเพิ่มโค้ด JavaScript ลงใน HTML และแนวทางปฏิบัติที่ดีที่สุดสำหรับการรวมสองภาษา

เหตุใดการใช้ JavaScript ใน HTML จึงมีความสำคัญ

  • เพิ่มการโต้ตอบ: การโต้ตอบตอบสนองต่ออินพุต/การกระทำของผู้ใช้แบบเรียลไทม์โดยไม่ต้องโหลดเบราว์เซอร์ซ้ำ ตัวอย่างเช่น คุณสามารถมีตัวนับที่เพิ่มขึ้นทีละตัวทุกครั้งที่มีการคลิก อีกตัวอย่างหนึ่งอาจเป็นการตอบกลับที่แจ้งให้ผู้ใช้ทราบว่ามีการส่งความคิดเห็นของพวกเขาทุกครั้งที่คลิกปุ่มส่ง
  • การตรวจสอบฝั่งไคลเอ็นต์: คุณสามารถใช้ JavaScript เพื่อบันทึกข้อมูลที่ถูกต้องในแบบฟอร์ม ตัวอย่างเช่น คุณสามารถใช้ภาษาการเขียนโปรแกรมนี้เพื่อตรวจสอบอินพุตของผู้ใช้ในหน้าลงทะเบียนตามรูปแบบอีเมล ความยาวของรหัสผ่าน และการรวมกันของอักขระที่จะใช้
  • การจัดการ DOM: JavaScript นำเสนอ Document Object Model (DOM) ซึ่งทำให้ง่ายต่อการเปลี่ยนเนื้อหาของหน้าเว็บแบบไดนามิก ด้วยเทคโนโลยีนี้ เนื้อหาของเพจจะได้รับการอัปเดตโดยอัตโนมัติตามอินพุตของผู้ใช้โดยไม่ต้องโหลดหน้าเว็บซ้ำ
  • ความเข้ากันได้ข้ามเบราว์เซอร์: JavaScript เข้ากันได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด หน้าเว็บที่สร้างโดยใช้ HTML, CSS และ JavaScript จะทำงานบนเบราว์เซอร์ต่างๆ ได้อย่างสมบูรณ์แบบ
  8 ซอฟต์แวร์การจัดการเวิร์กโฟลว์เพื่อเพิ่มประสิทธิภาพกระบวนการ

ข้อกำหนดเบื้องต้น

  • ความเข้าใจพื้นฐานของ HTML: คุณเข้าใจแท็ก HTML พื้นฐาน สามารถเพิ่มปุ่มและสร้างแบบฟอร์มโดยใช้ HTML
  • ความเข้าใจพื้นฐานของ CSS: คุณเข้าใจแนวคิดของ CSS เช่น id, class และ element selector
  • โปรแกรมแก้ไขโค้ด: คุณสามารถใช้โปรแกรมแก้ไขโค้ด เช่น VS Code หรือ Atom คุณยังสามารถใช้คอมไพเลอร์ JavaScript ออนไลน์ได้ หากคุณไม่ต้องการติดตั้งซอฟต์แวร์บนระบบของคุณ

วิธีใช้ JavaScript ใน HTML

คุณสามารถใช้สามวิธีหลักในการเพิ่มโค้ด JavaScript ลงใน HTML เราสำรวจแต่ละแนวทางและจุดที่เหมาะสมที่สุด

#1. ฝังโค้ดระหว่างแท็ก

วิธีการนี้ช่วยให้คุณมีโค้ด JavaScript และ HTML ในไฟล์เดียวกัน (ไฟล์ HTML) เราสามารถเริ่มต้นด้วยการสร้างโฟลเดอร์โครงการซึ่งเราจะสาธิตวิธีการทำงาน คุณสามารถใช้คำสั่งเหล่านี้เพื่อเริ่มต้น

mkdir javascript-html-playground

cd javascript-html-playground

สร้างสองไฟล์ index.html และ style.css

เพิ่มรหัสเริ่มต้นนี้ในไฟล์ HTML

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

เพิ่มรหัสเริ่มต้นนี้ในไฟล์ CSS ของคุณ

.form-container {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh; 

  }

  label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

  }

  input[type="text"],

  input[type="email"],

  textarea {

    display: block;

    margin-bottom: 10px;

    padding: 5px;

    border: 1px solid #ccc;

    border-radius: 5px;

    font-size: 8px;

  }

  input[type="submit"] {

    background-color: #4CAF50;

    color: white;

    padding: 5px 10px;

    border: none;

    border-radius: 2.5px;

    font-size: 8px;

    cursor: pointer;

  }

  input[type="submit"]:hover {

    background-color: #3e8e41;

  }

เมื่อแสดงผลหน้าเว็บแล้วจะได้หน้าตาแบบนี้

ขณะนี้เราสามารถเพิ่มโค้ด JavaScript อย่างง่ายที่ระบุว่า “ส่ง” เมื่อคุณคลิกปุ่มส่ง โค้ด HTML ที่ปรับโครงสร้างใหม่ด้วย JavaScript จะเป็น;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

เมื่อคุณคลิกปุ่มส่ง คุณจะได้รับสิ่งที่คล้ายกันนี้

  วิธี Undervolt A CPU เพื่อเพิ่มประสิทธิภาพพีซี

Pros of embedding JavaScript code between <script> … </script> tags


  • Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
    • 

  • Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
    • 

Cons of embedding JavaScript code between <script> … </script> tags


  • Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
    • 

  • Slows performance: Big code blocks on the HTML document can slow loading speeds. 
    • 

#2. Inline Code by using JavaScript code directly inside HTML


Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>


เมื่อคุณคลิกส่ง หน้าต่างเล็ก ๆ บนเบราว์เซอร์ของคุณพร้อมคำว่า "ส่งแบบอินไลน์" จะปรากฏขึ้น 


  วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับผู้ใช้มือถือ
ข้อดีของการเพิ่ม JavaScript เป็น Inline Code


    

  • นำไปใช้ได้อย่างรวดเร็ว: คุณไม่จำเป็นต้องเปลี่ยนจากเอกสารหนึ่งไปยังอีกเอกสารหนึ่งเพื่อเขียนโค้ด HTML และ JavaScript 
    • 

  • สมบูรณ์แบบสำหรับแอปขนาดเล็ก: หากคุณมีแอปขนาดเล็กที่ไม่ต้องการการโต้ตอบมากนัก Inline JavaScript เป็นตัวเลือกที่สมบูรณ์แบบ 
    • 



ข้อเสียของการเพิ่ม JavaScript เป็น Inline Code


    

  • โค้ดนี้ไม่สามารถใช้ซ้ำได้: หากแอปของคุณมีหลายรูปแบบ คุณจะสร้างโค้ด JavaScript สำหรับทุกแบบฟอร์ม
    • 

  • ประสิทธิภาพช้าลง: การบล็อกโค้ดขนาดใหญ่ในเอกสาร HTML อาจทำให้ความเร็วในการโหลดช้าลง 
    • 

  • ความสามารถในการอ่านรหัส: เนื่องจาก codebase เติบโตอย่างต่อเนื่อง ความสามารถในการอ่านรหัสจึงลดลง 
    • 



#3.  การสร้างไฟล์ JavaScript ภายนอก


เมื่อแอปพลิเคชันของคุณเติบโตขึ้น คุณจะทราบว่าการเพิ่มโค้ด JavaScript ลงในไฟล์ HTML โดยตรงนั้นไม่ใช่ความคิดที่ดี  นอกจากนี้ คุณยังมีแนวโน้มที่จะมีหน้าเว็บที่มีความเร็วในการโหลดต่ำ เมื่อคุณมีโค้ดจำนวนมากในไฟล์ HTML ของคุณ 


สร้างไฟล์ใหม่ script.js เพื่อนำรหัส JavaScript ของคุณ 


นำเข้าไฟล์ script.js บนไฟล์ HTML


<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>


หน้า HTML ที่อัปเดตใหม่จะมีรหัสนี้


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>


เพิ่มรหัสนี้ในไฟล์ script.js;


document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });


JavaScript นี้ทำสิ่งต่อไปนี้


    

  • เรามีตัวฟังเหตุการณ์ที่รอให้เหตุการณ์ DOMContentLoaded เริ่มทำงาน 
    • 

  • ฟังก์ชันการเรียกกลับจะทำงานหลังจากเหตุการณ์ DOMContentLoaded เริ่มทำงาน
    • 

  • รหัสใช้ querySelector เพื่อเลือกแบบฟอร์ม
    • 

  • เราใช้ event.preventDefault() เพื่อป้องกันไม่ให้ DOM เลือกพฤติกรรมเริ่มต้น (รีเฟรชหน้าหรือไปที่หน้าใหม่) เมื่อเหตุการณ์ส่งถูกทริกเกอร์ 
    • 

  • ข้อความ "ส่งแผ่นงาน JS ภายนอก" จะเริ่มทำงานเมื่อเหตุการณ์การส่งเริ่มทำงาน 
    • 





JavaScript ใน HTML: แนวทางปฏิบัติที่ดีที่สุด


    

  • ย่อขนาดไฟล์: ยิ่งไฟล์มีขนาดใหญ่เท่าใด เวลาที่ใช้ในการโหลดบนเบราว์เซอร์ก็จะยิ่งมากขึ้นเท่านั้น  การลดขนาดจะลบอักขระที่ไม่ต้องการทั้งหมดในซอร์สโค้ดโดยไม่เปลี่ยนความหมายหรือประสิทธิภาพ  คุณสามารถใช้เครื่องมือต่างๆ เช่น Yahoo YUI Compressor และ HTMLMinifier เพื่อสร้างโค้ดเบสที่มีขนาดกะทัดรัด 
    • 

  • จัดระเบียบโค้ดของคุณ: สิ่งนี้จะทำให้อ่านและบำรุงรักษาได้ง่าย  คุณสามารถใช้ส่วนขยายเช่น Prettier เพื่อจัดระเบียบรหัสของคุณ 
    • 

  • ใช้ไลบรารีภายนอก: หากไลบรารีสามารถทำงานบางอย่างสำหรับแอปของคุณได้ ก็ไม่จำเป็นต้องเขียนโค้ดตั้งแต่เริ่มต้น  อย่างไรก็ตาม หลีกเลี่ยงการใช้หลายไลบรารีที่บรรลุเป้าหมายเดียวกันในโครงการเดียวกัน 
    • 

  • ปรับตำแหน่ง JavaScript ให้เหมาะสม: หากคุณต้องการเพิ่มโค้ด JavaScript ลงในไฟล์ HTML ของคุณ ตรวจสอบให้แน่ใจว่าโค้ดดังกล่าวอยู่หลังโค้ด HTML  วาง JavaScript ระหว่างแท็ก
x