1 / 12

Client-Side Scripts

Client-Side Scripts. เอกสารประกอบการบรรยายรายวิชา 204200 Browser-Based Application Development. วัตถุประสงค์. นักศึกษาสามารถอธิบายแนวคิดเกี่ยวกับ Client-Side Scripts นักศึกษาสามารถประยุกต์ใช้ Client-Side Scripts. หัวข้อบรรยาย. Hello World! Validation Link Rollover Image Rollover.

imogene-dixon
Download Presentation

Client-Side Scripts

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. Client-Side Scripts เอกสารประกอบการบรรยายรายวิชา204200Browser-Based Application Development

  2. วัตถุประสงค์ • นักศึกษาสามารถอธิบายแนวคิดเกี่ยวกับ Client-Side Scripts • นักศึกษาสามารถประยุกต์ใช้ Client-Side Scripts

  3. หัวข้อบรรยาย • Hello World! • Validation • Link Rollover • Image Rollover

  4. Hello World! <script language="javascript"> alert("Hello World!"); function HiJa() { alert("Hi Ja"); } </script> </head> <body MS_POSITIONING="GridLayout"> <a href="http://www.sut.ac.th/" onmouseover=HiJa()>Click Here</a> </body>

  5. Validation <script language="javascript"> function validateForm(form) { if(form.firstname.value=="") { alert("Please input firstname."); return false; } return true; } </script> <form id="Form1" method="post" onsubmit="return validateForm(this);"> <INPUT name="firstname" type="text"> <INPUT type="submit" value="Submit"> <DIV ms_positioning="FlowLayout">First Name</DIV> </form>

  6. Link Rollover We are SUT! Chula IBM Monk.com

  7. Link Rollover <script> function highlight(which,color){ if (document.all||document.getElementById) which.style.backgroundColor=color } </script> <p><a href="http://www.sut.ac.th/" onMouseover="highlight(this,'orange')" onMouseout="highlight(this,document.bgColor)"> We are SUT! </a> <p><a href="http://www.chula.ac.th/" onMouseover="highlight(this,'pink')" onMouseout="highlight(this,document.bgColor)"> Chula </a> <p><a href="http://www.ibm.com/" onMouseover="highlight(this,'lightblue')" onMouseout="highlight(this,document.bgColor)"> IBM </a> <p><a href="http://www.monk.com/" onMouseover="highlight(this,'yellow')" onMouseout="highlight(this,document.bgColor)"> Monk.com </a>

  8. Link Rollover <script> function highlight(which,color){ if (document.all||document.getElementById) which.style.backgroundColor=color } </script> <p><a href="http://www.sut.ac.th/" onMouseover="highlight(this,'orange')" onMouseout="highlight(this,document.bgColor)"> We are SUT! </a> <p><a href="http://www.chula.ac.th/" onMouseover="highlight(this,'pink')" onMouseout="highlight(this,document.bgColor)"> Chula </a> <p><a href="http://www.ibm.com/" onMouseover="highlight(this,'lightblue')" onMouseout="highlight(this,document.bgColor)"> IBM </a> <p><a href="http://www.monk.com/" onMouseover="highlight(this,'yellow')" onMouseout="highlight(this,document.bgColor)"> Monk.com </a>

  9. Link Rollover

  10. Image Rollover <script language="Javascript"> <!-- if (document.images) { button1 = new Image button2 = new Image button1.src = "img1.gif" button2.src = "img2.gif" } //--> </script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> </form> <a href="http://test.net" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"> <img src="img1.gif" border="0" name="rollover"></a> </body>

  11. Image Rollover

  12. E-mail • Reference http://www.java-scripts.net http://www.javascripts.com

More Related