1 / 37

HTML Forms JavaScript Introduction / Overview Lab Homework #1

HTML Forms JavaScript Introduction / Overview Lab Homework #1. CS 183 4/8/2010. HTML Forms. A form is an area that can contain form elements.

ryu
Download Presentation

HTML Forms JavaScript Introduction / Overview Lab Homework #1

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. HTML FormsJavaScript Introduction / OverviewLab Homework #1 CS 183 4/8/2010

  2. HTML Forms • A form is an area that can contain form elements. • Form elements are elements that allow the user to enter information (like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. • A form is defined with the <form> tag. • <form>.input elements.</form>

  3. Input • The most used form tag is the <input> tag. • The type of input is specified with the type attribute. • <form>First name:<input type="text" name="firstname”><br />Last name:<input type="text" name="lastname”></form>

  4. More form elements • Radio buttons • <form><input type="radio" name="sex" value="male”> Male<br /><input type="radio" name="sex" value="female”> Female</form> • Check boxes • <form>I have a bike:<input type="checkbox" name="vehicle" value="Bike”><br />I have a car:<input type="checkbox" name="vehicle" value="Car”><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane”></form>

  5. Action Attribute • When the user clicks on the "Submit" button, the content of the form is sent to the server. • The form's action attribute defines the name of the file to send the content to. • The file defined in the action attribute usually does something with the received input. • <form name="input" action="html_form_submit.asp" method="get">Username:<input type="text" name="user”><input type="submit" value="Submit”></form>

  6. Form Tags

  7. What is JavaScript? • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language • A scripting language is a lightweight programming language • JavaScript is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license • Not the same as Java! • JavaScript's official name is ECMAScript. • Try: • http://www.w3schools.com/js/default.asp • (Slides are based on that tutorial)

  8. History • The language was invented by Brendan Eich at Netscape (with Navigator 2.0), and has appeared in all Netscape and Microsoft browsers since 1996. • Since 1997 standardized as ECMAScript (ECMA 262 or ISO/IEC 16262 , ECMA 290, ECMA 327 and ECMA 357 or ISO/IEC DIS 22537) • Gained lots of popularity, broad acceptance • ECMAScript also in Flash • The development of the standard is still in progress.

  9. What does it do? • gives HTML designers a programming tool • can put dynamic text into an HTML page • document.write("<h1>" + name + "</h1>") • can react to events • can read and write HTML elements • can be used to validate data in forms • can be used to detect the visitor's browser • can be used to create cookies

  10. Language Properties • Object based (but not object oriented) • Familiar scripting syntax • Not strictly typed • JavaScript is case sensitive • A JavaScript statement is a command to a browser • It is normal to add a semicolon at the end of each executable statement, but semicolon is optional, using EOL termination. • JavaScript code is a sequence of JavaScript statements • Each statement is executed by the browser in the sequence they are written. • JavaScript statements can be grouped together in blocks. • Blocks start with a left curly bracket {, and ends with a right curly bracket }. • The purpose of a block is to make the sequence of statements execute together, mostly used for grouping things together in a function or to specify a list of statements when a condition is met. • JavaScript comments: // (single line), and /* …. */ (multi-line)

  11. DOM (Document Object Model) • Represents an object centric view of a document • Platform independent API for HTML or XML elements

  12. JavaScript Integration • To insert a JavaScript into an HTML page, we use the <script> tag • Inside the <script> tag we use the type attribute to define the scripting language • Can appear anywhere in the doc, in HEAD, BODY, or in both • <html><body><script type="text/javascript">...</script></body></html>

  13. Document.write • <html><body><script type="text/javascript">document.write("Hello World!");</script></body></html>

  14. Support for older Browsers • Browsers that do not support JavaScript, will display JavaScript as page content. • Use HTML comment tag to "hide" the JavaScript. • <html><body><script type="text/javascript"><!--document.write("Hello World!");//--></script></body></html>

  15. Scripts in <head> • Scripts to be executed when they are called, or when an event is triggered, are placed in functions • Put your functions in the head section, this way they are all in one place, and they do not interfere with page content. • <html><head><script type="text/javascript">function message(){alert("This alert box was called with the onload event");}</script></head><body onload="message()"></body></html>

  16. Scripts in <body> • If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section. • <html><head></head><body><script type="text/javascript">document.write("This message is written by JavaScript");</script></body></html>

  17. Using an External JavaScript • Sharing of JS over several pages possible • Use include mechanism, put code in file: • Save the external JavaScript file with a .js file extension • The external script cannot contain the <script></script> tags! • To use the external script, point to the .js file in the "src" attribute of the <script> tag: • <html><head><script type="text/javascript" src="xxx.js"></script></head><body></body></html>

  18. JavaScript Variables • JavaScript variables are used to hold values or expressions • A variable can have a short name, like x, or a more descriptive name, like personName. • Variable names are case sensitive (y and Y are two different variables) • Variable names must begin with a letter or the underscore character • You can declare JavaScript variables with the varstatement: • varx;varpersonName; • After the declaration shown above, the variables are empty (they have no values yet), or • varx=5;varpersonName=”Hans"; • When you assign a text value to a variable, use quotes around the value • If you don’t declare a variable they will be automatically declared: • X = 5; • If you redeclare a JavaScript variable, it will not lose its original value. • varx=5;varx; • You can do arithmetic operations with JavaScript variables: • z = x + 5;

  19. JavaScript Operators • The assignment operator = is used to assign values to JavaScript variables • The arithmetic operator + is used to add values together. • y=5;z=2;x=y+z; • The value of x, after the execution of the statements above is 7.

  20. JavaScript Arithmetic Operators • Assume, y=5

  21. JavaScript Assignment Operators • Assume x=10, y=5

  22. The + Operator on Strings • To add two or more string variables together, use the + operator. • txt1="What a very";txt2="nice day";txt3=txt1+txt2; • variable txt3 contains "What a verynice day” • If you add a number and a string, the result will be a string! • x=5+5;document.write(x);x="5"+"5";document.write(x);

  23. JavaScript Comparison Operators • Assume x=5 if (age<18) document.write("Too young");

  24. JavaScript Logical Operators • Assume x=6, y=3

  25. JavaScript Conditional Operator • The conditional operator assigns a value to a variable based on some condition. • variablename=(condition)?value1:value2 • Example: • greeting=(visitor=="PRES")?"Dear President ":"Dear ";

  26. If … Else Statements • Conditional statements are used to perform different actions based on different conditions. • if statement - use this statement to execute some code only if a specified condition is true • if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false • if...else if....else statement - use this statement to select one of many blocks of code to be executed • switch statement - use this statement to select one of many blocks of code to be executed

  27. Example (if … else) • <script type="text/javascript">//If the time is less than 10, you will get a "Good morning" greeting.//Otherwise you will get a "Good day" greeting.vard = new Date();var time = d.getHours();if (time < 10)  {document.write("Good morning!");  }else  {document.write("Good day!");  }</script>

  28. Example (switch) • <script type="text/javascript">//You will receive a different greeting based//on what day it is. Note that Sunday=0,//Monday=1, Tuesday=2, etc.vard=new Date();theDay=d.getDay();switch (theDay){case 5:document.write("Finally Friday");  break;case 6:document.write("Super Saturday");  break;case 0:document.write("Sleepy Sunday");  break;default:document.write("I'm looking forward to this weekend!");}</script>

  29. JavaScript Popup Box • An alert box is often used if you want to make sure information comes through to the user. • When an alert box pops up, the user will have to click "OK" to proceed. • <html><head><script type="text/javascript">function show_alert(){alert("I am an alert box!");}</script></head><body><input type="button" onclick="show_alert()" value="Show alert box" /></body></html>

  30. Confirm Box • A confirm box is often used if you want the user to verify or accept something. • When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. • <html><head><script type="text/javascript">function show_confirm(){varr=confirm("Press a button");if (r==true)  {alert("You pressed OK!");  }else  {alert("You pressed Cancel!");  }}</script></head><body><input type="button" onclick="show_confirm()" value="Show confirm box” ></body></html>

  31. JavaScript Functions • To keep the browser from executing a script when the page loads, you can put your script into a function. • A function contains code that will be executed by an event or by a call to the function. • You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external .js file). • Functions can be defined both in the <head> and in the <body> section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the <head> section. • function functionname(var1,var2,...,varX){some code}

  32. Example • <html><head><script type="text/javascript">function displaymessage(){alert("Hello World!");}</script></head><body><form><input type="button" value="Click me!" onclick="displaymessage()”></form></body></html>

  33. The Return Statement • The return statement is used to specify the value that is returned from the function. • <html><head><script type="text/javascript">function product(a,b){return a*b;}</script></head><body><script type="text/javascript">document.write(product(4,3));</script></body></html>

  34. JavaScript loops • for - loops through a block of code a specified number of times, used when you know in advance how many times the script should run • for (var=startvalue;var<=endvalue;var=var+increment){code to be executed} • while - loops through a block of code while a specified condition is true • while (var<=endvalue)  {  code to be executed  } • Do .. While(), break, continue also exist and can be used accordingly

  35. Will cover later: • For .. In • Events • Try .. Catch • Throw • Special Characters • Objects

  36. Lab Homework #1 • Add some JavaScript to your HTML page from lab homework #0 to validate form input: • Add a HTML form to it for entering a person’s first name, last name, email, age • Form’s action attribute should be empty, since we don’t have PHP yet to do something useful • Upon submission (user clicks submit button) a JS function should be called • The function should verify: • Does the first name exist? • Does the last name exist? • Does the email exist, and does it have a @? • Does the age exist and is it a valid number? • When there is an error in the form data, an alert box should be shown, prompting the user to fix the particular error • Hint: • use document.getElementsByName to access form field values • Use return ‘false’ to prevent form submission • If there is no error an alert box should be shown that everything is correct, and then submission should be done (we just simulate this for now) • Submission as in previous lab homework, need URL of the HTML file • Will use firebug to debug, script should have no JS errors • Due: Next Tuesday in class (4/13)

More Related