introduction to javascript
TRANSCRIPT
![Page 1: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/1.jpg)
JavaScript Intro.
CITE – IT201 Timothy Bryan Marc
![Page 2: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/2.jpg)
Overview
■ What is the relationship between: ■ SGML ■ HTML ■ XHTML ■ CSS ■ JavaScript
![Page 3: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/3.jpg)
Recap
■ Markup ■ Annotations instructing how the document
should appear in print ■ Word processors use different markup
schemes ■ SGML
■ IBM - Standard Generalized Markup Language ■ Markup instructions stored with ASCII file
▪ Any computer could render document ▪ Lilly Example
![Page 4: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/4.jpg)
Recap
■ HTML ■ Tim Berners-Lee created HTML – subset of
SGML ■ Not platform or application specific ■ Only server software needed to publish file s
on the net ■ Structure versus content
■ Browser parses HTML file into a tree
![Page 5: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/5.jpg)
Recap
■ Sample HTML File ■ <FONT SIZE=14 FACE=Swing> ■ <B>Bryan Moore</B><BR> ■ </FONT> ■ <FONT SIZE=12 FACE=Textile> ■ 1234 Sunset Ave. <BR> ■ Walla Walla, WA 12345 <BR> ■ (123)123.4567<BR> ■ </FONT>
![Page 6: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/6.jpg)
RecapBrowser parse tree
![Page 7: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/7.jpg)
Recap
■ Problems with extracting data ■ Need to write a computer program to extract
the names and addresses by selecting text strings following font tags
■ Content and structure of document become intertwined
■ Not the intention of SGML and original HTML ■ Cascading Style Sheets
■ Attempt to separate content and style
![Page 8: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/8.jpg)
Recap
■ CSS ■ Can alter the look of entire file with a simple
coding change ■ Can keep styles in an external file ■ Increases the knowledge needed to code
pages ■ Initial rationale of HTML was to appeal to the
masses
![Page 9: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/9.jpg)
Recap
Parse tree using CSS
Still need to reference
Information based on
“second string after BR”
Information is not
meaningful
![Page 10: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/10.jpg)
Recap
■ Extensible Markup Language XML ■ Extensible- can create own tags ■ Complete separation of content and style
![Page 11: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/11.jpg)
Recap
■ Releases ■ HTML 4.0 1997 ■ XML 1.0 1998
■ XML and HTML need to better cooperate ■ XHTML 1.0 2000
■ XHTML ■ Contains elements and attributes of HTML ■ Elements must have closing tags ■ Lowercase ■ Attributes must have values ■ Attributes in single or double quotes
■ http://www.w3schools.com/xhtml/default.asp
![Page 12: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/12.jpg)
HTML Forms and JavaScript
■ Client Server Model ■ Client Side Processing
■ JavaScript downloaded from web page and processed by the client – typically form checking
■ JavaScript can interact directly with form data ■ Server Side processing
■ Information from a form sent to server for processing ■ PHP Perl C++ ■ Server can interact directly with the form data
![Page 13: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/13.jpg)
HTML Forms and JavaScript
■ JavaScript ■ HTML files are text files ■ JavaScript is interpreted not compiled ■ Object oriented
■ HTML forms are objects and can be manipulated via JavaScript
■ Dynamic HTML – merger of JavaScript and HTML ■ Different implementations of DHTML by
software companies
![Page 14: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/14.jpg)
What is JavaScript■ Scripting language (object-oriented)
■ Lightweight programming language developed by Netscape ■ Interpreted, not compiled
■ Designed to be embedded in browsers ■ Ideal for adding interactivity to HTML pages ■ Detect browser versions ■ Work with info from user via HTML forms ■ Create cookies ■ Validate form data ■ Read and write HTML elements
■ Supported by all major browsers ■ Internet Explorer has JScript (started in IE3)
■ http://www.faqts.com/knowledge_base/view.phtml/aid/1380
■ It’s free, no license required
![Page 15: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/15.jpg)
What is JavaScript
■ Syntax is similar to Java, but it’s not Java per se
■ Usually JavaScript code is embedded within HTML code using the script tag:
■ Can have more than one pair of script tags in a page
■ Semicolons: C++ and JAVA require them but in JavaScript it’s optional
![Page 16: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/16.jpg)
What is JavaScript
■ HelloWorld example program…
■ <html> ■ <head><title>JavaScript HelloWorld!</title></head> ■ <body> ■ <script language="JavaScript"> ■ ■ document.write('Javascript says "Hello World!"') ■ ■ </script> ■ </body>
■ </html>
■ Let’s try it in the browser
![Page 17: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/17.jpg)
What is JavaScript
■ Javascript can be located in the head, body or external file ■ Head section
■ Ensures script is loaded before trigger event ■ Body section
■ Script executes when body loads ■ External
■ Allows scripts to run on several pages ■ Examples:
■ http://www.w3schools.com/
![Page 18: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/18.jpg)
What is JavaScript
■ JavaScript statements in head write to the beginning of the body section but don’t violate HTML code already there.
■ JavaScript statements in body write based on their location
■ JavaScript interpreted first then HTML interpreted second ■ Document.write writes to the HTML document
not the web page
![Page 19: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/19.jpg)
What is JavaScript■ <html> ■ <head> ■ <script language=“JavaScript”> ■ document.write (“<b> This is first </b>); ■ </script> ■ </head>
■ <body> ■ Now where does this print on the web page???? <br />
■ <script language=“JavaScript”> ■ document.write ( “This might be last?”) ■ </script>
■ </body> ■ </html> ■ Lets try.
![Page 20: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/20.jpg)
What is JavaScript
■ Now, let JavaScript generate HTML for us…
■ <html> ■ <head><title>JavaScript HelloWorld!</title></head> ■ <body> ■ <script laguage="JavaScript"> ■ ■ document.write("<h2>Javascript-Generated output:</h2>
<p>This paragraph generated by JavaScript</p> ■ <p>It can even insert an image</p> ■ <img src='../assigns/RayWeb/images/cathedral.jpg' />") ■ ■ </script> ■ </body> ■ </html>
■ Let’s try it in the browser
![Page 21: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/21.jpg)
Identifier Etiquette
■ Identifier– The name of a variable (or function) ■ Starts with a letter, can contains digits & underscores ■ Case Sensitive!! ■ Should be meaningful to someone reading your code
■ Good: accountBalance, amountDue
■ Bad: bal, due,
■ Just plain wrong: 2bOrNotToBe, +var, total-value
![Page 22: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/22.jpg)
Variables
■ Must declare variables before they’re used in the program ■ Declare at the top of the program & terminate each
statement with ‘;’ ■ Intialize variables when appropriate ■ Local variables (declared within a function) destroyed
after function exit. ■ Can only be accessed within the function
■ Example – Note Assignments ■ var candyBarPrice = 2.50; ■ var taxRate = .075; ■ var candyBarsPurchased;
![Page 23: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/23.jpg)
Assignment Operator
■ Assignment ‘looks like’ equal sign but does NOT behave like it
■ subTotal = subTotal + 1.50
■ subTotal ‘is assigned the value’ that is currently in subTotal plus the value of 1.50
![Page 24: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/24.jpg)
Expressions
■ An expression is a statement that describes a computation
■ Usually look like algebra formulas ■ total = subTotal * taxRate
■ Operators (+, -, *, /, etc.) have different levels of precedence, similar to algebra ■ Don’t rely on it! For clarity, use parentheses
![Page 25: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/25.jpg)
Conditional Statements--if
if (some boolean expression is true){
execute the statements within the curly braces, otherwise skip to the first statement after the closing brace
} Resume execution here in either case
![Page 26: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/26.jpg)
Conditional Statements– if/else
if (some boolean expression is true){
execute these statements, otherwise skip to ‘else’ clause
} else { execute these statements if boolean expression is false
} Resume execution here in either case
![Page 27: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/27.jpg)
Conditional Test Program
Diagnostic messages indicate flow of control var variable1 = 1; var variable2 = 2; if(variable1 >= 0){ document.write(“<p> 1 is greater than 0 </p>"); } document.write(“<p>Resuming execution after 'if' statement</p>");
if(variable1 > variable2){ document.write(“<p>1 is greater than 2</p>"); } else { document.write(“<p>2 is greater than 1</p>"); } document.write("Resuming execution after 'if/else‘ statement</p>");
![Page 28: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/28.jpg)
Strings
■ Strings are sequences of keyboard characters enclosed in quotes ■ “Hello World” or ‘Hello World’
■ Variables can hold strings ■ var greeting = “Hello World”
■ String can be empty, i.e., contain no characters ■ var myAnswer = “”
■ Use ‘\’ (escape symbol) to ‘type’ prohibited characters ■ \b for backspace, \n for newline, \t for tab, \” for double
quote
![Page 29: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/29.jpg)
JavaScript Functions – Basic Principles
■ Abstraction ■ Experience has taught us that much code is
duplicated throughout program
■ Functions let us write the functionality once, then reuse it
![Page 30: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/30.jpg)
JavaScript Functions – Basic Principles
■ Encapsulation ■ Functions encapsulate a specific capability or feature
■ Function name allows us to access a function in our program
■ Parameterization ■ We can customize the function’s result by passing in different
values each time we use it
■ Must use functions to write serious software!
![Page 31: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/31.jpg)
JavaScript Functions – Basic Principles
■ Reasons to use functions ■ Ease of communication ■ Problem simplification ■ Easier construction ■ Code readability ■ Reusability ■ Maintainability
■ In JS, functions are the primary encapsulation mechanism
![Page 32: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/32.jpg)
JavaScript Functions – Syntax
■ JS function syntax
function myFunctionName (list of parameters) {
….JS code here…
}
![Page 33: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/33.jpg)
JavaScript Functions -- Issues
■ Key issues about using functions ■ Naming functions ■ Passing in parameters ■ Using local variables within functions ■ How to call (i.e., invoke) functions ■ How to handle a function’s return value ■ Where to put JS functions in your webpage
![Page 34: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/34.jpg)
JavaScript Functions – Naming
■ Function names ■ Name describes what function does ■ Name is an identifier, so follow JS identifier syntax rules
& course coding standards
■ Example, findMaxValue(‘put some parameters here’)
![Page 35: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/35.jpg)
JavaScript Functions -- Parameters
■ Passing parameters to the function ■ Parameters provide functions with input ■ Implicitly declared variables that can be accessed by
code within function body ■ You provide actual input values when you call the
function ■ Parameters are named variables separated by commas
■ Example, function findMaxValue(num1, num2, num3)
![Page 36: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/36.jpg)
JavaScript Functions – Where to put?
■ Put functions within <script>….</script> tags within the <head> section of the web page
<head> <script language=“JavaScript”>
declare functions here….
</script> </head>
![Page 37: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/37.jpg)
JavaScript Functions – Local Variables
■ If needed, you can declare local variables within a function
■ local variable is visible only within the function body after it’s declared
■ Commonly used to store results of an intermediate calculation
![Page 38: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/38.jpg)
JavaScript Functions – Local Variables
function findMaxValue(num1, num2,num3) { var tempMax; //local var
if (num1 >= num2) { tempMax = num1; }
else { tempMax = num2; }
if(num3 >= tempMax) { tempMax = num3; }
return tempMax;
} //end function
![Page 39: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/39.jpg)
JavaScript Functions -- Calling
■ To call a function from your program, add a statement that contains the function name with values for the parameters the function requires
■ Example…somewhere in the <body>…., var x = 1, y = 4, z = 2;
findMaxValue(x, y, z);
■ What value does the function return? ■ What happens with the result?
![Page 40: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/40.jpg)
JavaScript Functions -- Return
■ Return keyword tells function to return some value and exit immediately
■ Function can have multiple return statements but only 1 can be executed in any given function call
■ Normally used to return the final result of a calculation to the calling program
■ For an example, see findMaxValue function
![Page 41: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/41.jpg)
JavaScript Functions -- Return
■ Good Example ■ Uses var maxNumber in calling program ■ Function’s return value is assigned to maxNumber ■ Display of maxNumber has correct value for inputs
■ Code snippet ■ var x = 1, y = 4, z = 2;
var maxNumber = findMaxNumber(x, y, z);
document.write(“The maximum is: “ + maxNumber);
![Page 42: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/42.jpg)
JavaScript Functions -- Return
■ The return must be handled properly or it will be ‘lost’
■ Usually, you want to assign the result of a function to a variable
![Page 43: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/43.jpg)
JavaScript Functions – Parameter Sequence
■ When calling functions, must enter parameters in same order as specified in function argument list.
1. function calculateDensity(height, width, depth, mass){ 2. var volume = height * width * depth; 3. var density = mass / volume; 4. return density; 5. } 6. ………………………………………………. 7. var hth = 2, wth = 3, dth = 4, mass = 10;
8. var result = calculateDensity(2, 10, 3, 4); 9. //returns .07 but correct answer is .42!!!
![Page 44: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/44.jpg)
JavaScript Functions – Global Variables
■ Global variables are those declared outside of functions
■ Global variables are ‘visible’ from anywhere in the program, including inside functions
var globalHello = “Hello!”;
function writeHello() { document.write(globalHello); } // outputs “Hello!”
Example program
![Page 45: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/45.jpg)
JavaScript Functions – Testing
■ Test each function thoroughly before proceeding with next programming task
■ Using multiple sets of inputs, be sure to test all possible outcomes
■ For each test, be sure calling program is properly handling return values
![Page 46: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/46.jpg)
JavaScript Functions – Debugging
■ Use diagnostic output statements to trace program execution
■ Good places for diagnostic outputs ■ Just before entering function ■ Immediately upon entering function ■ Before/In/After complex logic or computation ■ Just before function return statement ■ Immediately after function returns to calling program
![Page 47: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/47.jpg)
JavaScript Functions
■ Built-In Functions ■ Prompt ■ Alert ■ Confirm
![Page 48: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/48.jpg)
JavaScript and HTML Forms
■ JavaScript Objects ■ Var truck = new Object(); ■ Expression on right is a constructor ■ Properties
■ truck.color=“white” ■ document.write(color);
■ Primitives ■ In JavaScript variable primitive types are
number, string and Boolean
![Page 49: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/49.jpg)
JavaScript and HTML Forms
■ Object Model for the Browser Window ■ Compound object structure is created when a
web page loads into a browser ■ Hierarchy
■ Window is an object, the HTML document is an object and its elements are objects
■ These objects have primitives associated with them
![Page 50: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/50.jpg)
JavaScript and HTML Forms
■ window [closed, location]
■ history [length]
■ document [bgColor, fgColor, URL, lastmodified,linkColor, vlinkColor] ▪ images [properties] ▪ links [properties] ▪ frames [properties] ▪ forms [properties]
![Page 51: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/51.jpg)
JavaScript and HTML Forms
■ Window object is parent of structure ■ window.closed is primitive that is Boolean ■ window.location primitive contains string of the URL of
the HTML file ■ window.document object is primary focus
■ When web page is loaded the HTML elements assign values to most of these window.document primitives
■ Often the word window is excluded as in document.write but need it if referring to multiple open windows
■ Properties can also be objects
![Page 52: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/52.jpg)
JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <TITLE>Document Properties</TITLE> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ document.write(closed); ■ document.write("<BR>"+ document.bgColor); ■ document.write("<BR>"+document.fgColor); ■ document.write("<BR>"+document.lastModified); ■ //--></SCRIPT> ■ </HEAD> ■ <BODY TEXT="#0000FF" BGCOLOR="#FFFFCC"> ■ <P>Blue text on a yellow background.<BR> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ document.write("<BR>"+ document.bgColor); ■ document.write("<BR>"+document.fgColor); ■ //--></SCRIPT> ■ </BODY> ■ </HTML>
![Page 53: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/53.jpg)
JavaScript and HTML Forms
■ false #ffffff#00000001/10/2001 17:18:30 Blue text on a yellow background.#ffffcc#0000ff
![Page 54: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/54.jpg)
JavaScript and HTML Forms
■ Methods ■ Behavior associated with an object ■ Essentially functions that perform an action ■ Some are built in and others user made
■ Built-In Methods of the window object ■ Confirm ■ Alert ■ Prompt
![Page 55: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/55.jpg)
JavaScript and HTML Forms
■ User Events ■ An event occurs when a user makes a change
to a form element ■ Ex. Click a button, mouseover an image
■ Detection of an event done by event handlers ■ Event handler is an attribute of the HTML
button ■ <form>
■ <input type=button value=“please click” onclick=“function name()”>
■ </form>
![Page 56: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/56.jpg)
JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function changecolor(){ ■ document.bgColor="#ff0000"; ■ } ■ //--></SCRIPT> ■ </HEAD> ■ <BODY> ■ <P><FORM > ■ <P><INPUT TYPE=button VALUE="Click Me"
onclick="changecolor()"> ■ </FORM> ■ </BODY> ■ </HTML>
![Page 57: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/57.jpg)
JavaScript and HTML Forms
■ Form Object ■ Window.document.form ■ A form is a property of the document but is also
an object ■ Form elements are properties of a form and are
also objects ■ Access to form’s properties is done through the
NAME attribute of the FORM tag ■ Access to the properties of the form elements
is done through the NAME attributes of the particular form element
![Page 58: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/58.jpg)
JavaScript and HTML Forms
![Page 59: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/59.jpg)
JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function plus(){ ■ var n1; ■ var n2; ■ n1=document.addmult.num1.value; ■ n2=document.addmult.num2.value; ■ ■ n1=parseFloat(n1); ■ n2=parseFloat(n2); ■ ■ document.addmult.result.value=n1+n2; ■ } ■ function times(){ ■ var n1; ■ var n2; ■ n1=document.addmult.num1.value; ■ n2=document.addmult.num2.value; ■ ■ n1=parseFloat(n1); ■ n2=parseFloat(n2); ■ ■ document.addmult.result.value=n1*n2; ■ }
■ //--></SCRIPT> ■ </HEAD> ■ <BODY BGCOLOR="#FFFFCC"> ■ <P><FORM name=addmult> ■ <P>Enter a number in each field: ■ <INPUT TYPE=text NAME=num1 VALUE="" SIZE=5> ■ <INPUT TYPE=text NAME=num2 VALUE=""
SIZE=5><BR> ■ <INPUT TYPE=button VALUE="+" onclick="plus()"> ■ <INPUT TYPE=button VALUE="*"
onclick="times()"><BR> ■ <INPUT TYPE=reset VALUE="Reset Form"><BR> ■ <TEXTAREA NAME=result ROWS=3 COLS=27
WRAP=virtual></TEXTAREA> ■ </FORM> ■ </BODY> ■ </HTML>
![Page 60: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/60.jpg)
JavaScript and HTML FormsForm for submitting info for server side processing
![Page 61: Introduction to JavaScript](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55c17418bb61eb704a8b4614/html5/thumbnails/61.jpg)
JavaScript and HTML Forms■ <HTML> ■ <HEAD> ■ <SCRIPT LANGUAGE=JavaScript><!-- ■ function verify(){ ■ with(document.infoform){ ■ if((fullname.value=="")||(address.value=="")||
(email.value=="")){ ■ alert("You have left one or more fields blank. Please
supply the necessary information, and re-submit the form.");
■ } ■ else { ■ display.value="The following information has been
added to our guestbook:\r"+fullname.value+"\r"+ address.value +"\r" +email.value;
■ } ■ } ■ } ■ //--></SCRIPT> ■ </HEAD> ■ <BODY BGCOLOR="#FFFFCC"> ■ <P><FORM name=infoform> ■ <P><TABLE BORDER=0> ■ <TR> ■ <TD WIDTH=83> ■ <P>Name: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=fullname VALUE=""
SIZE=32> ■ </TD> ■ </TR>
■ <TR> ■ <TD WIDTH=83> ■ <P>Address: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=address VALUE=""
SIZE=32> ■ </TD> ■ </TR> ■ <TR> ■ <TD WIDTH=83> ■ <P>E-mail: ■ </TD> ■ <TD> ■ <P><INPUT TYPE=text NAME=email VALUE="" SIZE=32> ■ </TD> ■ </TR> ■ <TR> ■ <TD WIDTH=83> ■ <P><INPUT TYPE=button VALUE="Submit"
onclick="verify()"> ■ </TD> ■ <TD> ■ <P><INPUT TYPE=reset VALUE="Clear Your
Information"> ■ </TD> ■ </TR> ■ <TR> ■ <TD COLSPAN=2> ■ <P><TEXTAREA NAME=display ROWS=5 COLS=41
WRAP=virtual></TEXTAREA> ■ </TD> ■ </TR> ■ </TABLE>
■ </FORM> ■ </BODY> ■ </HTML>