ประยุกต์ Javaตัวอย่างสคริปต์พร้อมซอร์สโค้ด Code

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

⚡ สรุปอย่างชาญฉลาด

ประยุกต์ Code ตัวอย่างการใช้งาน Javaสคริปต์นี้แสดงให้เห็นว่าลูป การตรวจสอบความถูกต้องของแบบฟอร์ม และเหตุการณ์ต่างๆ สามารถแก้ปัญหาการทำงานประจำวันของเบราว์เซอร์ได้อย่างไร บทความนี้จะนำเสนอตัวสร้างตารางการคูณ ตัวตรวจสอบความถูกต้องของแบบฟอร์มลงทะเบียนที่สมบูรณ์ ป๊อปอัพที่แสดงเมื่อวางเมาส์เหนือวัตถุ นาฬิกาดิจิทัลแบบเรียลไทม์ และแนวทางปฏิบัติที่ทำให้สคริปต์เหล่านี้มีความน่าเชื่อถือ

  • ✖️ ลูปซ้อนกัน: ตารางการคูณสร้างสตริง HTML โดยใช้ลูปแถวภายนอกและลูปคอลัมน์ภายใน
  • 📝 การตรวจสอบความถูกต้องของแบบฟอร์ม: อาร์เรย์แบบขนานจะเชื่อมโยงอินพุตแต่ละรายการเข้ากับคอนเทนเนอร์ข้อผิดพลาดของตัวเอง ดังนั้นข้อความจะปรากฏอยู่ข้างๆ ช่องที่เกิดข้อผิดพลาด
  • 📧 กฎการส่งอีเมล: ระบบจะตรวจสอบตำแหน่งของเครื่องหมาย @ และจุดสุดท้ายเพื่อปฏิเสธที่อยู่ที่มีรูปแบบไม่ถูกต้องก่อนส่งข้อมูล
  • 🖱️ การจัดการกิจกรรม: addEventListener จะเพิ่มพฤติกรรมให้กับองค์ประกอบโดยไม่ต้องใส่สคริปต์ลงในโค้ด HTML
  • ⏰ การอัปเดตตามเวลาที่กำหนด: setInterval จะทำซ้ำฟังก์ชันตามตารางเวลาที่กำหนด ซึ่งเป็นตัวอย่างที่ใช้กับนาฬิกาแบบเรียลไทม์
  • 🔐 กฎของเซิร์ฟเวอร์: การตรวจสอบฝั่งไคลเอ็นต์ช่วยปรับปรุงประสบการณ์การใช้งานเท่านั้น และค่าทุกค่าจะต้องได้รับการตรวจสอบความถูกต้องอีกครั้งบนเซิร์ฟเวอร์
  • 🧹 การปฏิบัติสมัยใหม่: ในโค้ดใหม่ ให้แทนที่ document.write และตัวแปร global โดยปริยายด้วย textContent, let และ const
อ่านเพิ่มเติม

Javaตัวอย่างสคริปต์พร้อมซอร์สโค้ด Code

สิ่งที่คุณจะสร้างในสิ่งเหล่านี้ Javaตัวอย่างสคริปต์

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

ตัวอย่าง แนวคิดที่นำไปปฏิบัติ วิธีการหลักที่ใช้
ตารางสูตรคูณ ลูปซ้อนและการสร้างสตริง แจ้งเตือน สำหรับ ในขณะที่ เอกสารเขียน
การตรวจสอบแบบฟอร์ม อาร์เรย์ เงื่อนไข และการอัปเดต DOM getElementById, IndexOf, LastIndexOf, InnerHTML
ข้อความป๊อปอัพ การจัดการเหตุการณ์ เพิ่มตัวรับฟังเหตุการณ์, แจ้งเตือน
Digiนาฬิกา ตัวจับเวลาและการจัดรูปแบบวันที่ setInterval, วันที่, padStart, textContent

ความคุ้นเคยพื้นฐานกับ Javaต้นฉบับ ถือว่าคุณเข้าใจไวยากรณ์พื้นฐานแล้ว หากยังไม่คุ้นเคยกับลูป โปรดอ่านเพิ่มเติม วิธีการใช้ลูปใน Javaต้นฉบับ ก่อนที่จะเริ่ม

ตัวอย่าง #1: Javaตารางการคูณสคริปต์

สร้างตารางการคูณอย่างง่าย โดยถามผู้ใช้ถึงจำนวนแถวและคอลัมน์

วิธีการแก้:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

ผลลัพธ์ (3 แถว 4 คอลัมน์):

1   2   3   4
2   4   6   8
3   6   9  12

Code คำอธิบาย: ลูป for ภายนอกจะสร้างแถวตารางหนึ่งแถวต่อรอบ ในขณะที่ลูป while ภายในจะเติมแถวนั้นด้วยเซลล์หนึ่งเซลล์ต่อคอลัมน์ ตัวนับ j ค่าจะถูกรีเซ็ตเป็น 1 หลังจากแต่ละแถว ซึ่งเป็นขั้นตอนที่ผู้เริ่มต้นส่วนใหญ่มักลืม หากไม่มีการรีเซ็ตนี้ จะมีเพียงแถวแรกเท่านั้นที่มีเซลล์อยู่

💡 เคล็ดลับ: ฟังก์ชัน prompt จะส่งคืนค่าสตริงเสมอ นิพจน์ i*j ทำงานเพราะ Javaสคริปต์จะแปลงตัวถูกดำเนินการทั้งสองตัวให้เป็นตัวเลขสำหรับการคูณ แต่การเปรียบเทียบเช่น rows > 5 จะเปรียบเทียบข้อความ ห่ออินพุตด้วย Number() เมื่อนำค่าดังกล่าวไปใช้ในการคำนวณทางคณิตศาสตร์และการเปรียบเทียบ

ตัวอย่างที่ 2: ตัวอย่างแบบฟอร์ม JS

สร้างโปรแกรมแบบฟอร์มตัวอย่างที่เก็บรวบรวมชื่อจริง นามสกุล อีเมล รหัสผู้ใช้ รหัสผ่าน และยืนยันรหัสผ่านจากผู้ใช้ ข้อมูลทั้งหมดเป็นข้อมูลที่จำเป็น และที่อยู่อีเมลที่ป้อนต้องอยู่ในรูปแบบที่ถูกต้อง นอกจากนี้ ค่าที่ป้อนในช่องรหัสผ่านและช่องยืนยันรหัสผ่านต้องตรงกัน หลังจากตรวจสอบความถูกต้องแล้ว Javaต้นฉบับแสดงข้อความแสดงข้อผิดพลาดที่ถูกต้องเป็นสีแดงถัดจากช่องข้อความที่มีข้อผิดพลาด

วิธีแก้ปัญหาด้วยซอร์สโค้ด Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

พฤติกรรมที่คาดหวัง:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code คำอธิบาย: อาร์เรย์สามชุดทำงานแบบขนานกัน ปัจจัยการผลิต เก็บค่าปัจจุบันไว้ ข้อผิดพลาด เก็บข้อความที่ตรงกัน และ divs ตัวแปรนี้เก็บรหัสของคอนเทนเนอร์ที่แสดงข้อความแต่ละข้อความ ดังนั้นดัชนีจึงเชื่อมโยงฟิลด์ ข้อความแสดงข้อผิดพลาด และตำแหน่งที่แสดงผล ส่วนอีเมลจะยอมรับที่อยู่เฉพาะเมื่อเครื่องหมาย @ ไม่ใช่ตัวอักษรตัวแรก และเมื่อมีอักขระอย่างน้อยสองตัวคั่นระหว่างเครื่องหมาย @ กับจุดสุดท้าย

⚠️คำเตือน: การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์ช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้ แต่ไม่ให้ความปลอดภัยใดๆ ใครๆ ก็สามารถปิดใช้งานได้ Javaเขียนสคริปต์หรือโพสต์โดยตรงไปยังปลายทาง ดังนั้นกฎทุกข้อที่แสดงไว้ที่นี่จะต้องทำซ้ำบนเซิร์ฟเวอร์ด้วย

บทความที่เกี่ยวข้อง

ตัวอย่างที่ 3: การแสดงข้อความป๊อปอัพโดยใช้เหตุการณ์

แสดงข้อความง่ายๆ ว่า “ยินดีต้อนรับ!!!” บนหน้าเว็บสาธิตของคุณ และเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือข้อความนั้น ควรแสดงป๊อปอัพที่มีข้อความว่า “ยินดีต้อนรับสู่เว็บเพจของฉัน!!!”

วิธีการแก้:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

พฤติกรรมที่คาดหวัง:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code คำอธิบาย: ตัวรับฟังเหตุการณ์ถูกแนบไว้ภายในฟังก์ชันทริกเกอร์ ซึ่งจะทำงานในเหตุการณ์ onload ของเนื้อหา การรอให้โหลดเสร็จสมบูรณ์นั้นมีความสำคัญ เพราะย่อหน้าที่มี id “hover” จะยังไม่ปรากฏขึ้นในขณะที่ส่วนหัวยังคงถูกประมวลผลอยู่ วิธีการที่ได้ผลดีกว่าคือการวางสคริปต์ไว้ก่อนแท็กปิด body หรือโดยการเพิ่มแอตทริบิวต์ defer

ตัวอย่างที่ 4: ถ่ายทอดสด Digiนาฬิกา tal โดยใช้ setInterval

แสดงเวลาปัจจุบันบนหน้าเว็บและรีเฟรชทุกๆ หนึ่งวินาที ตัวอย่างนี้แนะนำการใช้งานตัวจับเวลาและแสดงทางเลือกที่ทันสมัยกว่าสำหรับ document.write

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

พฤติกรรมที่คาดหวัง:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

การเรียก showTime หนึ่งครั้งก่อน setInterval จะช่วยหลีกเลี่ยงความล่าช้าหนึ่งวินาทีที่มองเห็นได้เมื่อหน้าเว็บเปิดขึ้น ใช้ clearInterval กับค่าที่ส่งคืนโดย setInterval เมื่อต้องการหยุดนาฬิกา

แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนเอกสารเหล่านี้ Javaตัวอย่างสคริปต์

ตัวอย่างดั้งเดิมทั้งสามชิ้นนั้นมาจากรูปแบบในยุคก่อนหน้า Javaบทภาพยนตร์ รายการด้านล่างแสดงสิ่งที่ต้องเปลี่ยนแปลงเมื่อดัดแปลงบทภาพยนตร์เหล่านี้เพื่อนำไปใช้ในงานจริง

  1. แทนที่ document.write: เมื่อเรียกใช้ฟังก์ชันนี้หลังจากหน้าเว็บโหลดเสร็จแล้ว ฟังก์ชันที่ดีกว่าคือสร้างองค์ประกอบและตั้งค่า textContent หรือเพิ่มโหนดแทน
  2. ประกาศตัวแปรทุกตัว: ควรใช้ `let` และ `const` แทนการพึ่งพาตัวแปรส่วนกลางโดยปริยาย เช่น `counter` i ในลูปด้านบน
  3. ต้องการ textContent มากกว่า innerHTML: การแทรกข้อความที่ผู้ใช้ป้อนโดยใช้ innerHTML จะเปิดช่องโหว่การโจมตีแบบ Cross-site scripting (XSS)
  4. ย้ายตัวจัดการออกจากโค้ด HTML: แทนที่แอตทริบิวต์ onkeyup และ onclick ด้วย addEventListener ซึ่งจะช่วยแยกพฤติกรรมออกจากโครงสร้าง
  5. แปลงข้อมูลป้อนเข้าแบบพรอมต์: ควรห่อค่าด้วยฟังก์ชัน Number() ก่อนนำไปใช้ในการเปรียบเทียบ เนื่องจากฟังก์ชัน prompt จะส่งคืนค่าเป็นสตริงเสมอ
  6. ตรวจสอบความถูกต้องอีกครั้งบนเซิร์ฟเวอร์: ควรพิจารณาการตรวจสอบเบราว์เซอร์เป็นเพียงส่วนอำนวยความสะดวกเท่านั้น

เพื่อศึกษาตัวอย่างเหล่านี้ให้ละเอียดขึ้น โปรดทบทวน Javaวิธีการอาร์เรย์สคริปต์ สำหรับอาร์เรย์คู่ขนานที่ใช้ในตัวตรวจสอบความถูกต้องของแบบฟอร์ม Javaสตริงสคริปต์ สำหรับการตรวจสอบตำแหน่งอีเมล และ คุกกี้ใน Javaต้นฉบับ เพื่อจดจำค่าที่ผู้เข้าชมป้อนเข้ามา ตัดสินใจว่าสคริปต์ที่เสร็จสมบูรณ์แล้วควรอยู่ในหมวดหมู่ใดโดยการอ่าน ภายในและภายนอก Javaต้นฉบับ.

คำถามที่พบบ่อย

บันทึกโค้ดลงในไฟล์ที่มีนามสกุล .html แล้วเปิดในเบราว์เซอร์ใดก็ได้ ไม่จำเป็นต้องใช้เซิร์ฟเวอร์ คอมไพเลอร์ หรือไลบรารีใดๆ สำหรับตัวอย่างทั้งสี่ในหน้านี้

ลูป while จะหยุดเมื่อ j เกินจำนวนคอลัมน์ที่กำหนด หากไม่กำหนดค่า j ใหม่เป็น 1 ทุกแถวหลังจากแถวแรกจะไม่มีเซลล์เลย

ไม่เลย มันแค่ช่วยปรับปรุงประสบการณ์การใช้งานโดยการให้ผลตอบรับทันทีเท่านั้น คำขออาจข้ามขั้นตอนการทำงานของเบราว์เซอร์ไปโดยสิ้นเชิง ดังนั้นเซิร์ฟเวอร์จึงต้องใช้กฎเดียวกันก่อนที่จะบันทึกข้อมูลใดๆ

เมื่อตัวชี้เมาส์ไปวางบนองค์ประกอบย่อย การทำงานแบบ Mouseover จะเกิดขึ้นอีกครั้ง ในขณะที่ Mouseenter จะทำงานเพียงครั้งเดียวสำหรับองค์ประกอบนั้นเอง เลือกใช้ Mouseenter เมื่อไม่ต้องการให้เกิดการทำงานซ้ำหลายครั้ง

AI มีประโยชน์สำหรับร่างแรก แต่โค้ดที่สร้างขึ้นมักใช้ innerHTML ที่มีอินพุตที่ไม่ได้เข้ารหัส ควรตรวจสอบทุกบรรทัดและแทนที่การเขียน DOM ที่ไม่ปลอดภัยก่อนเผยแพร่

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

สรุปโพสต์นี้ด้วย: