1 / 134

อ.สัญญา เครือ หงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ มหาวิทยาลัยนเรศวร

JavaScript. อ.สัญญา เครือ หงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ มหาวิทยาลัยนเรศวร. JavaScript HTML name ,id.

aileen
Download Presentation

อ.สัญญา เครือ หงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ มหาวิทยาลัยนเรศวร

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript อ.สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ มหาวิทยาลัยนเรศวร

  2. JavaScript HTML name ,id • HTML name,idความแตกต่างระหว่าง name="" และ id=""บางครั้งเราสั่งเกตุว่าการสร้าง Control หรือ Html Element จะประกอบด้วย name และ id ในความหมายคือ name จะเป็นการกำหนดเพื่อส่งค่าไปยัง Server ให้กับภาษาประเภท cgiรวมทั้ง client script ต่าง ๆ โดยที่ name สามารถกำหนดใน Form ชื่อเหมือนกันได้ แต่ตรงข้ามกับ idid จะเป็นกำหนดชื่อเพื่อใช้กับ Client Script พวก JavaScript หรือ VBScript โดยที่ชื่อ id ในแต่ล่ะ Form ชื่อจะต้องไม่ซ้ำกันซึ่ง Client Script สามารถอ่านได้ทั้งชื่อ name และ id แต่ในกรณีที่ไม่มี id ก็จะอ่านจาก name เป็นหลัก

  3. JavaScript HTML name ,id • Code <form name="form1" method="post" action=""><input name="txtSiteName" type="text"><input name="txtComment" type="text" id="txtComment"> <input name="txtName" type="text" id="txtName1"> <input name="txtName" type="text" id="txtName2"><input name="txtSurName[]" type="text" id="txtSurName1"><input name="txtSurName[]" type="text" id="txtSurName2"> <input name="rdoOption" type="radio" value="1" id="rdoOption1"> <input name="rdoOption" type="radio" value="2" id="rdoOption2"> </form>

  4. JavaScript OnClick • JavaScript OnClick คือเหตุการณ์ที่เกิดจากการคลิกเมาส์ตัวอย่างนี้จะเป็นการใช้JavaScript OnClickเพื่อควบคุมเหตุการณ์ต่าง ๆ ที่เกิดขึ้นภายในเว็บเพจที่เกิดจากการคลิกSyntax<element OnClick = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnClick<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>,button, document, checkbox, link, radio, reset, submit

  5. JavaScript OnClick • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input name="btnButton1" type="button" value="Hello" OnClick="JavaScript:fncAlert();"> <br> <br> <table width="142" border="1" OnClick="JavaScript:fncAlert();"> <tr> <td><div align="center">Hello</div></td> </tr> </table> <br> <br>

  6. JavaScript OnClick (ต่อ) <span OnClick="JavaScript:fncAlert();">Hello</span> <br> <br> <input name="btnButton2" type="button" value="Hello & Hide" OnClick="JavaScript:fncAlert();this.style.display='none';"> <br> <br> <table width="142" border="1" OnClick="JavaScript:fncAlert();this.bgColor='#0000FF'" style="cursor:hand"> <tr> <td><div align="center">Hello & Bg Color</div></td> </tr> </table> </form> </html>

  7. JavaScript OnClick (ต่อ)

  8. JavaScript OnKeyDown • JavaScript OnKeyDown คือเหตุการณ์ที่เกิดจากการกดปุ่ม Keyboard ลงในแป้นพิมพ์ตัวอย่างนี้จะเป็นการใช้ JavaScript OnKeyDown คือเมื่อการกดปุ่ม Keyboard และเกิด Event ในทันที Syntax<element OnKeyDown = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnKeyDown<input>,<textarea>,<body>,<form>

  9. JavaScript OnKeyDown (ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> Name <input name="txtName" type="text" OnKeyDown="JavaScript:fncAlert();"> <input name="btnSubmit" type="submit" value="Submit"> </form> </body> </html>

  10. JavaScript OnKeyDown (ต่อ)

  11. JavaScript OnKeyUp • JavaScript OnKeyUp คือเหตุการณ์ที่เกิดจากการกดปุ่ม Keyboard และทำการปล่อยปุ่มตัวอย่างนี้จะเป็นการใช้ JavaScript OnKeyUp คือเมื่อกดปุ่ม Keyboard และทำการปล่อยปุ่มSyntax<element OnKeyUp = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnKeyUp<input>,<textarea>,<body>,<form>

  12. JavaScript OnKeyUp (ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> Name <input name="txtName" type="text" onKeyUp="JavaScript:fncAlert();"> <input name="btnSubmit" type="submit" value="Submit"> </form> </body> </html>

  13. JavaScript OnKeyUp (ต่อ)

  14. JavaScript OnMouseUp • JavaScript OnMouseUp คือเหตุการณ์ที่เกิดจากการคลิกเมาส์และปล่อยปุ่มคลิกตัวอย่างนี้จะเป็นการใช้ JavaScript OnMouseUp คือเมื่อคลิกเมาส์และปล่อยปุ่มคลิกSyntax<element OnMouseUp = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnMouseUp<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>,button, document, checkbox, link, radio, reset, submit

  15. JavaScript OnMouseUp(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input name="btnButton1" type="button" value="Hello" OnMouseUp="JavaScript:fncAlert();"> <br> <br> <table width="142" border="1" OnMouseUp="JavaScript:fncAlert();"> <tr> <td><div align="center">Hello</div></td> </tr> </table>

  16. JavaScript OnMouseUp(ต่อ) <br> <br> <span OnMouseUp="JavaScript:fncAlert();">Hello</span> <br> <br> <input name="btnButton2" type="button" value="Hello & Hide" OnMouseUp="JavaScript:fncAlert();this.style.display='none';"> <br> <br> <table width="142" border="1" OnMouseUp="JavaScript:fncAlert();this.bgColor='#0000FF'" style="cursor:hand"> <tr> <td><div align="center">Hello & Bg Color</div></td> </tr> </table> </form> </body> </html>

  17. JavaScript OnMouseUp(ต่อ)

  18. JavaScript OnMouseOut • JavaScript OnMouseOutคือเหตุการณ์ที่เกิดจากการนำเมาส์ออกจากพื้นที่ควบคุมตัวอย่างนี้จะเป็นการใช้JavaScript OnMouseOut คือเมื่อนำเมาส์ออกจากในเขตพื้นที่ที่ได้ทำการควบคุมไว้Syntax<element OnMouseOut = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnMouseOut<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>,button, document, checkbox, link, radio, reset, submit

  19. JavaScript OnMouseOut(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input name="btnButton1" type="button" value="Hello" OnMouseOut="JavaScript:fncAlert();"> <br> <br> <table width="142" border="1" OnMouseOut="JavaScript:fncAlert();"> <tr> <td><div align="center">Hello</div></td> </tr> </table>

  20. JavaScript OnMouseOut(ต่อ) <br> <br> <span OnMouseOut="JavaScript:fncAlert();">Hello</span> <br> <br> <input name="btnButton2" type="button" value="Hello & Hide" OnMouseOut="JavaScript:fncAlert();this.style.display='none';"> <br> <br> <table width="142" border="1" OnMouseOut="JavaScript:fncAlert();this.bgColor='#0000FF'" style="cursor:hand"> <tr> <td><div align="center">Hello & Bg Color</div></td> </tr> </table> </form> </body> </html>

  21. JavaScript OnMouseOut(ต่อ)

  22. JavaScript OnSubmit • JavaScript OnSubmit คือเหตุการณ์ที่เกิดเมื่อกี่การคลิกที่ปุ่มหรือ Enter Submitตัวอย่างนี้จะเป็นการใช้ JavaScript OnSubmit เมื่อมีการคลิกที่ปุ่ม Submit โดย OnSubmit จะรับค่าการ Return ค่า true หรือ falseSyntax<element OnSubmit = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnSubmit<form>

  23. JavaScript OnSubmit(ต่อ) • Sample1 การใช้ปุ่ม OnSubmit JavaScript ในการ Submit Form และการยืนยันข้อมูล <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncSubmit() { if(confirm('Confirm to submit')==true) { return true; } else { return false; } }

  24. JavaScript OnSubmit(ต่อ) </script> <form action="page.cgi" method="post" name="form1" onSubmit="JavaScript:return fncSubmit();"> <input name="txtName" type="text" id="txtName"> <input name="btnSubmit" type="submit" value="Button"> </form> </body> </html>

  25. JavaScript OnSubmit(ต่อ)

  26. JavaScript OnFocus • JavaScript OnFocus คือเหตุการณ์ที่ใช้เมื่อมีการโฟกัดตำแหน่งใดตำแหน่งหนึ่งตัวอย่างนี้จะเป็นการใช้ JavaScript OnFocus เมื่อมีการตำแหน่งโฟกัสไปยัง Text boxSyntax<element OnFocus = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnFocus<input>,<textarea>,<select>,<form>,<table>,<div>,<button>,<submit>,...

  27. JavaScript OnFocus(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input type="text" name="txtName" value="" OnFocus="JavaScript:fncAlert();"> </form> </body> </html>

  28. JavaScript OnFocus(ต่อ)

  29. JavaScript OnError • JavaScript OnError คือเหตุการณ์ที่ใช้ตรวจสอบโหลดรูปภาพหรื่ออื่น ๆ ผิดพลาดตัวอย่างนี้จะเป็นการใช้ JavaScript OnError ตรวจสอบรูปภาพSyntax<element OnError = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnError<img>

  30. JavaScript OnError(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <img src="/img/thaicreate.gif" OnError="JavaScript:fncAlert();"> </form> </body> </html>

  31. JavaScript OnError(ต่อ)

  32. JavaScript OnUnload • JavaScript OnUnload คือเหตุการณ์ที่มีการย้ายตำแหน่งของหน้าเว็บไซต์ตัวอย่างนี้จะเป็นการใช้ JavaScript OnUnload เปลี่ยน URL ของเว็บไซต์เป็น URL อื่น ๆSyntax<element OnUnload = "JavaScript:[handler/function]"> HTML Tag Element ที่สามารถใส่ Event OnUnload<body>

  33. JavaScript OnUnload(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body OnUnLoad="JavaScript:fncAlert();"> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> </form> </body> </html>

  34. JavaScript OnUnload(ต่อ)

  35. JavaScript OnResize • JavaScript OnResize คือเหตุการณ์ที่เกิดขึ้นหลังที่มีการย่อหรือขยายขนาดของ Web Browserตัวอย่างนี้จะเป็นการใช้ JavaScript OnResize ในตรวจสอบการย่อหรือขยายหน้าจอSyntax<element OnResize = "JavaScript:[handler/function]"> • HTML Tag element ที่สามารถใส่ Event OnResize<body>,<form>,<span>,<p>,<img>,<textarea>,<input>,<table>,...

  36. JavaScript OnResize(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body OnResize="JavaScript:fncAlert();"> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> </form> </body> </html>

  37. JavaScript OnResize(ต่อ)

  38. JavaScript getElementById • JavaScript getElementById ใช้ในการตรวจสอบหรือหา Control หรือ Html Element ภายใน Form ของ HTML โดยที่ getElementById สามารถหาตรวจสอบ id ทั้งหมดที่อยู่ภายใน FormSyntaxdocument.getElementById('element-id');

  39. JavaScript getElementById(ต่อ) <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncShowHideInput(value) { var input1 = document.getElementById('txtName1'); var input2 = document.getElementById('txtName2'); if(value.checked) { input1.style.display='none'; input2.style.display='none'; } else

  40. JavaScript getElementById(ต่อ) { input1.style.display=''; input2.style.display=''; } } function fncShowHideTable(value) { var idTb = document.getElementById('tbMain'); if(value.checked) { idTb.style.display='none'; } else { idTb.style.display=''; } } </script>

  41. JavaScript getElementById(ต่อ) <form name="form1" method="post" action=""> <input type="checkbox" name="chkShowInput" value="Y" OnClick="JavaScript:fncShowHideInput(this);"> <input type="text" name="txtName" id="txtName1" value=""> <input type="text" name="txtName" id="txtName2" value=""> <br><br> <input type="checkbox" name="chkShowTable" value="Y" OnClick="JavaScript:fncShowHideTable(this);"> <table width="26%" border="1" id="tbMain"> <tr> <td>ThaiCreae.Com</td> </tr> </table> </form> </body> </html>

  42. JavaScript OnDblClick • JavaScript OnDblClick คือเหตุการณ์ที่เกิดจากการดับเบิ้ลคลิกเมาส์ตัวอย่างนี้จะเป็นการใช้ JavaScript OnDblClick คือจะต้องเป็นแบบดับเบิ้ลคลิก เพื่อควบคุมเหตุการณ์ต่าง ๆ ที่เกิดขึ้นภายในเว็บเพจSyntax<element OnDblClick = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnDblClick<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>,button, document, checkbox, link, radio, reset, submit

  43. JavaScript OnDblClick(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input name="btnButton1" type="button" value="Hello" onDblClick="JavaScript:fncAlert();"> <br> <br> <table width="142" border="1" onDblClick="JavaScript:fncAlert();"> <tr> <td><div align="center">Hello</div></td> </tr> </table>

  44. JavaScript OnDblClick(ต่อ) <br> <br> <span onDblClick="JavaScript:fncAlert();">Hello</span> <br> <br> <input name="btnButton2" type="button" value="Hello & Hide" onDblClick="JavaScript:fncAlert();this.style.display='none';"> <br> <br> <table width="142" border="1" onDblClick="JavaScript:fncAlert();this.bgColor='#0000FF'" style="cursor:hand"> <tr> <td><div align="center">Hello & Bg Color</div></td> </tr> </table> </form> </body> </html>

  45. JavaScript OnDblClick(ต่อ)

  46. JavaScript OnKeyPress • JavaScript OnKeyPress คือเหตุการณ์ที่เกิดจากการกดปุ่ม Keyboard ที่เป็นตัวอักษรเท่านั้นไม่รวมทุกปุ่มตัวอย่างนี้จะเป็นการใช้ JavaScript OnKeyPress คือเมื่อการกดปุ่ม Keyboard ที่เป็นตัวอักษรเท่านั้นไม่รวมทุกปุ่มSyntax<element OnKeyPress = "JavaScript:[handler/function]"> HTML Tag Element ที่สามารถใส่ Event OnKeyPress<input>,<textarea>,<body>,<form>

  47. JavaScript OnKeyPress(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> Name <input name="txtName" type="text" OnKeyPress="JavaScript:fncAlert();"> <input name="btnSubmit" type="submit" value="Submit"> </form> </body> </html>

  48. JavaScript OnKeyPress(ต่อ)

  49. JavaScript OnMouseDown • JavaScript OnMouseDown คือเหตุการณ์ที่เกิดจากการคลิกเมาส์ในทันทีที่คลิกตัวอย่างนี้จะเป็นการใช้ JavaScript OnMouseDown คือเมื่อคลิกเมาส์และเกิดเหตุการณ์ขึ้นทันที่Syntax<element OnMouseDown = "JavaScript:[handler/function]"> • HTML Tag Element ที่สามารถใส่ Event OnMouseDown<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>,<textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>,button, document, checkbox, link, radio, reset, submit

  50. JavaScript OnMouseDown(ต่อ) • Sample <html> <head> <title>ThaiCreate.Com Tutorial</title> </head> <body> <script language="javascript"> function fncAlert() { alert('Hello ThaiCreate.Com'); } </script> <form action="page.cgi" method="post" name="form1"> <input name="btnButton1" type="button" value="Hello" OnMouseDown="JavaScript:fncAlert();"> <br> <br> <table width="142" border="1" OnMouseDown="JavaScript:fncAlert();">

More Related