Javascript จาวาสคริปต์

.
JS001 ความรู้เบื้องต้นเกี่ยวกับจาวาสคริปต์
JS002 รูปแบบการเขียนจาวาสคริปต์
JS003 คำสั่งกำหนดเงื่อนไข
JS004 การเขียนฟังก์ชั่นแบบมี
          พารามิเตอร์
JS005 เทคนิคพิเศษสำหรับ
           Internet Explorer และ รูปภาพ
JS006 การสร้างแบบฟอร์มเอกสาร
           ( Form )

คำสั่งที่เกี่ยวข้องกับการสร้างฟอร์ม

การสร้างกรอบรับ Password

การสร้างแบบฟอร์มที่เป็น Checkbox

การสร้างแบบฟอร์มเอกสารแบบกรอกแถบเลื่อน (Drop Down List)

การสร้างแบบฟอร์มเพื่อกรอกข้อความในการคำนวณ
JS007 การเขียนโปรแกรมเพื่ออ่าน
Source Code
JS008 สรุปคำสั่งจาวาสคริปต์
JS009 เทคนิคพิเศษ

Test

จาวาสคริปต์

การสร้างแบบฟอร์มเอกสาร (Form)

รูปแบบหรือฟอร์ม (Form) ภายในเอกสารที่หน้าจอเว็บจะมีสภาวะการทำงานของฟอร์มอยู่ 2 ลักษณะ คือ สถานะที่เป็น Event หรือเหตุการณ์ที่จะกระทำกับสถานะที่เป็นวัตถุหรือชิ้นงานที่กำลังทำงาน

Event Object

     Onclick จะทำเมื่อมีการนำ mouse ไปคลิกที่วัตถุที่มีการกำหนดเหตุการณ์นั้นๆ           Text, bottom, selection list,        Onload จะทำเมื่อมีการอ่านเอกสาร                                                                          checkbox, radio
       Onunload จะทำเมื่อมีการ load เอกสารอื่นมาแทนที่                                                  Body, form
       Onmousecover จะทำเมื่อมีการนำ mouse เลื่อนมาบนวัตถุที่กำหนด event นั้นๆ        Body, form
       Onmouseout จะทำเมื่อมีการเลื่อน mouse ออกจากวัตถุ                                            Anchor, text, bottom,
       ที่กำหนด                                                                                                                  selection list, checkbox, radio
       Onblur จะทำเมื่อเกิดการสูญเสีย Focus จากวัตถุที่กำหนด Event นั้นๆ                       Anchor, text, bottom,
       Onchange จะทำเมื่อเกิดการเปลี่ยนแปลงกับ Event นั้นๆ                                         Text, selection list

                                          Form Object

                          Text                       แบบฟอร์มกรอกข้อมูลที่เป็นข้อความ
                          Password               แบบฟอร์มกรอกข้อมูลที่เป็นรหัสผ่าน
                          Text area               แบบฟอร์มกรอกข้อความที่มีพื้นกว้าง
                          Checkbox              แบบฟอร์มสำหรับการเลือกข้อที่ต้องการในแบบการเครื่องหมายถูก
                          Radio                     แบบฟอร์มสำหรับการเลือกข้อที่ต้องการในแบบ
                          Select                    แบบฟอร์มแบบแถบเลื่อน
                          Submit                    การส่งข้อมูลที่ขออนุญาต
                          Reset                     การยกเลิกข้อมูล
                          Button                    การสร้างปุ่มกด

                    แบบฟอร์มกรอกข้อมูล

             คำสั่งของ HTML ในการสร้างแบบฟอร์มได้แก่
                     <form ตัวแปร=“ ”>
                     <input type=text ตัวแปร=“ ”size=…..>
                     <input type=checkbox name=ชื่อ checkbox checked>ข้อความ
                     <input type=radio name=ชื่อ radio value=ค่าของ radio checked>ข้อความ
                     <input type=button value= “…” onclick=“…..”>
                     </form>

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

                     <html>
                              <head>
                                         <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม </title>
                                         <script language=javascript>
                                         function displayvalue( )
                                                 {
                                                 alert(“Your name is”+document.history.n.value+“\n”+“surename is”+document.history.s.value);
                                                 }
                                         </script>
                              </head>
                              <body>
                              <form name=“history”>
                              name:<input type=text name=“n”size=30><br>
                              surename:<input type=text name=“s”size=50><br>
                              <input type=button value=“OK”onclick=“displayvalue( )”>
                              </body>0
                   </html>

คำสั่งที่เกี่ยวข้องกับการสร้างฟอร์ม

                          1. Focus( ) เป็นคำสั่งที่กำหนดให้เคอร์เซอร์อยู่ที่ตำแหน่งใดของหน้าจอ (Method)
                          2. select( ) เป็นคำสั่งที่สร้างแถบสีคลุมตัวอักษร เมื่อยังต้องการให้ผู้ใช้พิมพ์ข้อความนั้นได้ใหม่อีกครั้ง

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

                <html>
                           <head>
                                      <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม </title>
                                      <script language=javascript>
                                      function displayvalue( )
                                      {
                                      alert(“Your name is”+document.history.n.value+“\n”+“surename is”+document.history.s.value);
                                      }
                                     </script>
                          </head>
                          <body onload=“document.history.n.focus( )”>
                          <form name=“history”>
                          name:<input type=text name=“n”size=30><br>
                          surename:<input type=text name=“s”size=50><br>
                          <input type=button value=“OK”onclick=“displayvalue( )”>
                          </body>
                </html>

การสร้างกรอบรับ Password

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

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

               <html>
                           <head>
                                      <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม </title>
                                      <script language=javascript>
                                      function displayvalue( )
                                      {
                                      if (document.history.x.value!= “1234”)
                                               }
                                               alert(“รหัสผ่านไม่ถูกต้อง โปรดกรอกใหม่อีกครั้ง);
                                               document.history.x.focus( );
                                               document.history.x.select( );
                                               }
                                     else
                                               {
                                               alert(“รหัสผ่านถูกต้อง ยินดีต้อนรับ”);
                                               }
                                     }
                                     </script>
                           </head>
                           <body onload=“document.history.n.focus( )”>
                           <form name=“history”>
                           name:<input type=text name=“n”size=30><br>
                           surename:<input type=text name=“s”size=50><br>
                           <input type=button value=“OK”onclick=“displayvalue( )”>
                           </body>
              </html>

การสร้างแบบฟอร์มที่เป็น Checkbox

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

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

                           รูปแบบที่ใช้สำหรับตัวอย่างนี้คือ

                           <input type=checkbox name=ชื่อ checkbox checked> ข้อความ
                   <html>
                             <head>
                                         <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม </title>
                                         <script language=javascript>
                                         </script>
                             </head>
                             <body>
                                         <form name=history>
                                         วุฒิการศึกษาสูงสุดของท่านคือ <br>
                                         <input type=checkbox name=a1>ป.6 <br>
                                         <input type= checkbox name=a2>ม.3 <br>
                                         <input type= checkbox name=a3>ม.6, ปวช. <br>
                                         <input type= checkbox name=a4>ปวส., อนุปริญญา <br>
                                         <input type= checkbox name=a5>ปริญญาตรี. <br>
                                         <input type= checkbox name=a1>สูงกว่าปริญญาตรี. <br>
                                         </form>
                             </body>
                    </html>

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

                  <html>
                             <head>
                                         <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม แบบ checkbox </title>
                                         <script language=javascript>
                                         function checklist( )
                                             {
                                             var text=“ ”;
                                             if(document.history.a1.checked)
                                                    {text=“\n”;}
                                             if(document.history.a2.checked)
                                                    {text=text+“วิทยาศาสตร์ \n”;}
                                             if(document.history.a3.checked)
                                                    {text=text+“ภาษาอังกฤษ \n”;}
                                             if(document.history.a4.checked)
                                                    {text=text+“ภาษาไทย \n”;}
                                             if(document.history.a5.checked)
                                                    {text=text+“สังคม \n”;}
                                             if(document.history.a6.checked)
                               {text=text+“พลานามัย \n”;}
                                             alert(“วิชาที่ท่านชอบคือ”+text);
                                             }
                                         </script>
                              </head>
                              <body>
                                         <form name=history>
                                          วิชาที่ท่านชอบได้แก่ <br>
                                         <input type=checkbox name=a1>คณิตศาสตร์ <br>
                                         <input type= checkbox name=a2>วิทยาศาสตร์ <br>
                                         <input type= checkbox name=a3>ภาษาอังกฤษ <br>
                                         <input type= checkbox name=a4>ภาษาไทย <br>
                                         <input type= checkbox name=a5>สังคม <br>
                                         <input type= checkbox name=a6>พลานามัย <br>
                   <center><input type=button name=button1 value=“OK” onclick=“checklist( )”></center>
                                         </form>
                              </body>
                   </html>

                           ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์ เพื่อสร้างแบบฟอร์มในการกรอกแบบสอบถาม โดยแสดงหัวข้อให้ผู้ตอบเลือกตอบแบบเลือกอย่างใดอย่างหนึ่งเพียงอย่างเดียว (Truth/False)

                           รูปแบบการสร้างฟอร์มคือ

                           <input type=radio name=ชื่อ radio value=ค่าของ radio checked> ข้อความ
              <html>
                       <head>
                                  <title> การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม แบบ radio </title>
                                  <script language=javascript>
                                  function showsex( )
                                         {
                                         var sex=“ ”;
                                         if(document.gender.sex[0].checked)
                                                {
                                                alert(document.gender.sex[0].value);
                           }
                                         else
                                                {
                                                alert(document.gender.sex[1].value);
                                                }
                                         }
                                   </script>
                        </head>
                        <body>
                                   <form name=gender>
                                   เพศของผู้ตอบแบบสอบถามคือ <br>
                                   <input type=radio name=sex value=“ชาย”>ชาย <br>
                                   <input type=radio name=sex value=“หญิง”>หญิง <br>
            <center><input type=button name=button1 value=“Show sex” onclick=“show sex( )”></center>
                                   </form>
                        </body>
            </html>

การสร้างแบบฟอร์มเอกสารแบบกรอกแถบเลื่อน (Drop Down List)

                       ลักษณะของแบบฟอร์มที่เป็นกรอบและมีแถบเลื่อนสำหรับเลือกดูรายงานภายในกรอบ เพื่อเลือกรายการที่ต้องการ เป็นแบบฟอร์มที่ใช้สำหรับการแสดงรายการที่ต้องการเลือกจำนวนมาก โดยประหยัดเนื้อที่ของน้าจอเว็บ เพราจะทำให้ผู้ใช้เห็นเพียงข้อความในการเลือกเท่านั้นเมื่อเลือกข้อความในกรอบแถบเลื่อนก็จะไปทำงานยังตำแหน่งที่ต้องการ คำสั่งที่ใช้ในการสร้างคือ
                                  Select
                                  รูปแบบคำสั่ง
                     <select name=ชื่อ select size=จำนวนบรรทัด>
                                  <option value=ค่าแต่ละรายการ>ข้อความ
                     ………
                     ……….
                    </select>

                           ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์ เพื่อสร้างแบบฟอร์มในแบบกรอบแถบเลื่อนโดยให้ผู้ใช้เลือกพื้นสีจากกรอบแถบเลื่อน
                           จัดเก็บไฟล์ใน java54.htm
                  <html>
                             <head>
                                         <title>การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม แบบ select </title>
                                         <script language=javascript>
                                         function changcolor( )
                                               {
                                document.bgColor=document.listcolor.color[document.listcolor.color.selectedIndex].value;
                                               }
                                         </script>
                            </head>
                            <body>
                                         <form name=listcolor>
                                         <select name=“color”size=1 onchange=“changcolor( )”>
                                         <option value=“yellow”>yellow
                                         <option value=“blue”>blue
                                         <option value=“green”>green
                                         <option value=“pink”>pink
                                         <option value=“cyan”>cyan
                                         <option value=“magenta”>magenta
                                         </select>
                                         </form>
                            </body>
                  </html>

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

                           <html>
                           <head>
                                       <title>การเขียนโปรแกรมจาวาสคริปต์เพื่อสร้างแบบฟอร์ม แบบ select </title>
                                       <script language=javascript>
                                       function changweb( )
                                              {
                 location.href =document.urld.website[document.url.website.selectedIndex].value;
                                              }
                                       </script>
                          </head>
                          <body>
                                       <form name=url>
                                       <select name=“website”size=1 onchange=“changweb( )”>
                                                  <option value=“http://www.thaigov.go.th”>Thaigov
                                                  <option value=“http://www.thairath.co.th”>Thairath
                                       <option value=“http://www.sanook.com”>Sanook
                                       <option value=“http://www.tei.or.th”>TEI
                                       <option value=“http://www.tu.ac.th”>TU
                                       <option value=“http://www.google.com”>Google
                                       <option value=“http://www.thai.net”>Thai
                                       </select>
                                       </form>
                          </body>
                </html>

                        คำสั่งเกี่ยวข้องกับการไปยัง Location ใหม่ กรณีที่ต้องเดินหน้าหรือถอยหลัง หรือไปยังเว็บที่เคยไปมาแล้วโดยกำหนด
                                  window.history.back( )                        การถอยไปยังพื้นที่ที่ผ่านมาแล้ว
                                  window.history.forward( )                     การไปยังพื้นที่ข้างหน้าที่เคยไปมาแล้ว
                                  window.history.go(ตัวเลข)                 การเลือกพื้นที่ที่เคยไปมาแล้ว โดยบอกหมายเลขได้


การสร้างแบบฟอร์มเพื่อกรอกข้อความในการคำนวณ

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

                           ตัวอย่าง การเขียนโปรแกรมจาวาสคริปต์บวกเลขในแบบฟอร์ม เมื่อกรอกตัวเลขลงในแบบฟอร์มที่ 1 และ 2 คลิกที่ปุ่มคำตอบจะได้คำตอบในแบบฟอร์มที่ 3

                 <HTML>
                                 <HEAD>
                                                 <TITLE>การเขียนโปรแกรมจาวาสคริปต์ ให้คำนวณตัวเลขในแบบฟอร์ม</TITLE>
                                                 <SCRIPT LANGAUGE=“JAVASCRIPT”>
                                                  function getanswer( )
                                                                 {
                                                                 var x =parseInt(document.FORM1.FirstNum.value);
                                                                 var y =parseInt(document.FORM1.SecondNum.value);
                                                                 var sum;
                                                                                 sum=x+y
                                                                                 document.FORM1.Answer.value=sum;
                                                                  }
                                                 </SCRIPT>
                                </HEAD>
                                <BODY>
                                                 < FORM NAME=“FORM1”>
                                                               <INPUT TYPE=“TEXT”NAME=“FirstNum”><BR>
                                                               <INPUT TYPE=“TEXT”NAME=“SecondNum”><BR>
                                                               <INPUT TYPE=“TEXT”NAME=“Answer”><BR>
                                                               <INPUT TYPE=“BUTTON”VALUE=“คำตอบ”ONCLICK=“getanswer( );
                                                 </FORM>
                                </BODY>
                </HTML>