Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
JavaScript Part 2: DOM, Math Object, and Form Validation - Prof. David L. Tarnoff, Study notes of Computer Science
A part of the csci 2910 client/server-side programming course. It covers advanced topics in javascript, including more objects, properties, and methods of the dom, the math object, and form validation. The concept of intermediate files and the difference between document.write() and document.writeln(). It also discusses the use of single and double quotes in strings, declaring variables, parsing functions, and the isnan() method. Additionally, it covers the math object and its properties and methods.
Typology: Study notes
Pre 2010
1 / 6
Related documents
Partial preview of the text
Download JavaScript Part 2: DOM, Math Object, and Form Validation - Prof. David L. Tarnoff and more Study notes Computer Science in PDF only on Docsity! 1 JavaScript Part 2 – Page 1 of 35CSCI 2910 – Client/Server-Side Programming CSCI 2910 Client/Server-Side Programming Topic: JavaScript Part 2 JavaScript Part 2 – Page 2 of 35CSCI 2910 – Client/Server-Side Programming Today’s Goals Today’s lecture will cover: – More objects, properties, and methods of the DOM – The Math object – Introduction to form validation JavaScript Part 2 – Page 3 of 35CSCI 2910 – Client/Server-Side Programming Intermediate File vs. HTML Output A sometimes difficult concept is that the output of a JavaScript script is not output to the browser window, but instead is output to the “intermediate” HTML file that the browser will interpret for display. XHTML file containing scripts XHTML with script output replacing scripts Document displayed in browser window Browser processes scripts JavaScript Part 2 – Page 4 of 35CSCI 2910 – Client/Server-Side Programming Intermediate File vs. HTML Output (continued) • Since the JavaScript output is to be interpreted by a browser as HTML, the output must contain tags. • Example – Assume we want a heading level 1 with a line break in the middle: – Wrong: document.write("This is my \n page title"); – Right: document.write("<h1>This is my <br /> page title</h1>"); JavaScript Part 2 – Page 5 of 35CSCI 2910 – Client/Server-Side Programming write vs. writeln • There are two document object methods used to write – document.write(string) – document.writeln(string) • The only difference between the two is that writeln appends a carriage return/linefeed (\n) to the end of the string when printing to the intermediate file. JavaScript Part 2 – Page 6 of 35CSCI 2910 – Client/Server-Side Programming Prompting as Page Loads • Remember that scripts within the body are executed as they are encountered • You can take advantage of this by prompting the user for information as the page loads using a function such as window.prompt(). 2 JavaScript Part 2 – Page 7 of 35CSCI 2910 – Client/Server-Side Programming Prompting as Page Loads (continued) <body> <script language= "JavaScript" type="text/JavaScript"> <!-- var head_color; head_color = window.prompt("What color would you like to display these headings in? (Enter web color)"); document.writeln("<h1 style=\"color:" + head_color + "\">" + "My Title" + "</h1>"); //--> </script> </body> JavaScript Part 2 – Page 8 of 35CSCI 2910 – Client/Server-Side Programming Double vs. Single Quotes • As with any language that relies heavily on the use of output strings, we must have a way to identify quotation marks within a string without affecting the way the interpreter views the string. • In JavaScript, there are three ways to embed quotation marks within a string: – use single quotes within a string identified using double quotes – use double quotes within a string identified using single quotes – use the JavaScript escape characters \' or \" JavaScript Part 2 – Page 9 of 35CSCI 2910 – Client/Server-Side Programming Double vs. Single Quotes (cont.) Examples: • document.write("<a class='menu'>"); • document.write('<a class="menu">'); • document.write("<a class=\"menu\">"); All three methods should work regardless of browser JavaScript Part 2 – Page 10 of 35CSCI 2910 – Client/Server-Side Programming Declaring Variables • Variables are declared using the keyword var • Example: var int_value, string_value • When variables are declared, they are not assigned a default value, unless specified by the programmer • All variables in JavaScript can contain a value of any data type, i.e., JavaScript does not rigorously follow types an will try to convert between types • null is a valid variable value JavaScript Part 2 – Page 11 of 35CSCI 2910 – Client/Server-Side Programming Parsing Functions • parseInt(string, radix) -- returns the first integer in the string. The radix argument specifies the base in which the number is represented in the string, e.g., 16 (hexadecimal), 10 (decimal), or 2 (binary). • Example: parseInt("313 Gilbreath", 10); would return 313 • If the first character is not a number, then the function returns "NaN" indicating the value is not a number. JavaScript Part 2 – Page 12 of 35CSCI 2910 – Client/Server-Side Programming Parsing Functions (continued) • parseFloat(string) – returns the first floating point number in the string. • Example: parseFloat("2.98% of students"); would return 2.98 • If the first character is not a number, then the function returns "NaN" indicating the value is not a number. This includes characters such as $ or #. 5 JavaScript Part 2 – Page 25 of 35CSCI 2910 – Client/Server-Side Programming Form Element Object Methods • blur( ) – removes the focus from the specified element • click( ) – simulates a mouse-click for some elements • focus( ) – returns focus to the specified element JavaScript Part 2 – Page 26 of 35CSCI 2910 – Client/Server-Side Programming The Use of value <form name="userinput" id="userinput"> <input type="checkbox" name="gen_check" id="gen_check" checked="checked" /> Checkbox<br /><br /> <input type="radio" name="gen_radiobutton" id="gen_radiobutton" value="1" /> First <input type="radio" name="gen_radiobutton" id="gen_radiobutton" value="2" /> Second <input type="radio" name="gen_radiobutton" id="gen_radiobutton" value="3" /> Third <br /><br /> <input type="text" name="gen_text" id="gen_text" value="Type name here"><br /><br /> <select name="gen_select" id="gen_select" size="1"> <option value="one">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="four">Four</option> </select><br /><br /> <input type="file" name="gen_file" id="gen_file" size="20" /><br /><br /> <input type="button" onClick = "printVals()" name="gen_button" id="gen_button" value="Click here" /> <input type="reset" value="Reset" /> <br /><br /><br /> <textarea cols="40" rows="6" name="output" id="output" /></textarea> </form> JavaScript Part 2 – Page 27 of 35CSCI 2910 – Client/Server-Side Programming The Use of value (continued) JavaScript Part 2 – Page 28 of 35CSCI 2910 – Client/Server-Side Programming The Use of value (continued) var output_string; function printVals() { output_string="Checkbox value = " + document.userinput.gen_check.checked + "\n" + "Radio button value = " + document.userinput.gen_radiobutton.value + "\n" + "Text value = " + document.userinput.gen_text.value + "\n" + "Select value = " + document.userinput.gen_select.value + "\n" + "File selection value = " + document.userinput.gen_file.value + "\n" + "Button value = " + document.userinput.gen_button.value + "\n"; document.userinput.output.value=output_string; } JavaScript Part 2 – Page 29 of 35CSCI 2910 – Client/Server-Side Programming The Use of value (continued) JavaScript Part 2 – Page 30 of 35CSCI 2910 – Client/Server-Side Programming The Use of value (continued) • Some of the values make sense, e.g., the text value equaled the text in the box. • Some of the values did not make sense – Checkbox value always equals "on" – Radio buttons always equal "undefined" – Button value equals the text on the button 6 JavaScript Part 2 – Page 31 of 35CSCI 2910 – Client/Server-Side Programming The Use of value (continued) • Solutions – To read the checkbox values, use the property checked – returns "true" or "false" – Associate an onClick event for each radio button that modifies a variable – Associate an onClick event for the button to indicate when it is pressed. JavaScript Part 2 – Page 32 of 35CSCI 2910 – Client/Server-Side Programming Form Validation • A very common application of client-side scripts is for validating the data users have entered on a form. • For example, we would like to make sure that the user has not done something like entered the word "dog" where the form asked for an age. • The functions covered over the past two lectures will allow us to access form data and verify that it is correct. JavaScript Part 2 – Page 33 of 35CSCI 2910 – Client/Server-Side Programming Simple Number Verification The form below creates a text box and a button. <form name="sample" id="sample"> Enter an integer in this field: <input type="text" size="20" name="justanumber" id="justanumber" onblur="integercheck()" /><br /> <input type="button" value="Finished" /> </form> JavaScript Part 2 – Page 34 of 35CSCI 2910 – Client/Server-Side Programming Simple Number Verification (continued) <script language="JavaScript" type="text/javascript"> function integercheck() { if (isNaN(document.sample.justanumber)) { window.alert("This field requires an integer!"); document.sample.justanumber.focus(); } } </script> JavaScript Part 2 – Page 35 of 35CSCI 2910 – Client/Server-Side Programming Checking for '@' in E-mail function emailcheck(email_string) { if(email_string.indexOf("@")==-1) window.alert("Not a valid email address!"); }
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved