1 / 16

Introduction

Introduction to JavaScript scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt. Introduction. What is it? How does it work? What is Java? Learning JavaScript JavaScript Statements JavaScript and HTML forms. What is JavaScript?. Browsers have limited functionality

hope-meyers
Download Presentation

Introduction

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. Introduction to JavaScriptscom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt

  2. Introduction • What is it? • How does it work? • What is Java? • Learning JavaScript • JavaScript Statements • JavaScript and HTML forms

  3. What is JavaScript? • Browsers have limited functionality • Text, images, tables, frames • JavaScript allows for interactivity • Browser/page manipulation • Reacting to user actions • A type of programming language • Easy to learn • Developed by Netscape • Now a standard exists – www.ecma-international.org/publications/standards/ECMA-262.HTM

  4. JavaScript Allows Interactivity • Improve appearance • Especially graphics • Visual feedback • Site navigation • Perform calculations • Validation of input • Other technologies javascript.internet.com

  5. How Does It Work? • Embedded within HTML page • View source • Executes on client • Fast, no connection needed once loaded • Simple programming statements combined with HTML tags • Interpreted (not compiled) • No special tools required

  6. What is Java? • Totally different • A full programming language • Much harder! • A compiled language • Independent of the web • Sometimes used together

  7. Learning JavaScript • Special syntax to learn • Learn the basics and then use other people's (lots of free sites) • Write it in a text editor, view results in browser • You need to revise your HTML • You need patience and good eyesight!

  8. JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language="JavaScript"> document.write('This is my first  JavaScript Page'); </script> </body> </html> Note the workbook symbol for line continuation

  9. HTML written inside JavaScript JavaScript Statements <html> <head><title>My Page</title></head> <body> <script language=“JavaScript"> document.write('<h1>This is my first  JavaScript Page</h1>'); </script> </body> </html>

  10. JavaScript Statements <html> <head><title>My Page</title></head> <body> <p> <a href="myfile.html">My Page</a> <br /> <a href="myfile.html" onMouseover="window.alert('Hello');"> My Page</A> </p> </body> </html> JavaScript written inside HTML An Event

  11. Example Statements <script language="JavaScript"> window.prompt('Enter your name:',''); </script> <form> <input type="button" Value="Press" onClick="window.alert('Hello');"> </form> Another event Note quotes: " and '

  12. HTML Forms and JavaScript • JavaScript is very good at processing user input in the web browser • HTML <form> elements receive input • Forms and form elements have unique names • Each unique element can be identified • Uses JavaScript Document Object Model (DOM)

  13. Naming Form Elements in HTML <form name="addressform"> Name: <input name="yourname"><br /> Phone: <input name="phone"><br /> Email: <input name="email"><br /> </form>

  14. Forms and JavaScript document.formname.elementname.value Thus: document.addressform.yourname.value document.addressform.phone.value document.addressform.email.value

  15. Using Form Data Personalising an alert box <form name="alertform"> Enter your name: <input type="text" name="yourname"> <input type="button" value=“Go" onClick="window.alert('Hello ' + document.alertform.yourname.value);"> </form>

  16. Tips • Check your statements are on one line • Check your " and ' quotes match • Take care with capitalisation • Lay it out neatly - use tabs • Remember  in the workbook denotes a continuing line • Be patient

More Related