Introduction to Javascript
What HTML Can & Can Not Do Display text Display images Display animated clipart Allow users to input data HTML Can Not Do calculations Display current date Check validity of input data Respond to user actions Be interactive
Programming For a Web Page to be able to be interactive Calculate Display current date Check validity of input data Add dynamic effects You need to include a program A set of detailed instruction to the computer to accomplish some task Using a programming language JavaScript VBScript php perl
What Is Javascript? (Now called EcmaScript) A scripting language used to add greater power and interactivity to Web pages Freely combined with HTML in the Web document Invented by Netscape, now controlled by Ecma International Often called a scripting language, rather than a programming language Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems.
Sample Web Page with Javascript Alert Demo (JS code) Prompt Demo (JS code) Date Demo (JS code)
Other Examples of JS Use Create a new window on the fly. Check validity of form entries. Manipulate document objects.
Calling Functions Greet on Click (Code) Change Background on MouseOver (Code) Alert on Click (Code)
<html> <head> <title>JS Demo</title> <script language="Javascript"> function greet() { alert("Hello"); } </script> </head> <body> <h1>Javascript ONCLICK Demo</h1> <form> <input type="button" value="Click Me“ onClick="greet()"> </form> </body> </html> Greet on Click
Change Background on MouseOver <html> <head> <title>JS Demo</title> <script language="Javascript"> function toBlue() { document.bgColor="0000ff| } function toWhite() { document.bgColor="ffffff"; } </script> </head> <body> . . .
. . . <body> <h1>Javascript ONMOUSEOVER Demo</h1> <form> <input type="button" onMouseOver="toBlue()“ onMouseOut="toWhite()"> </form> </body> </html
Alert on Click <html> <head> <title>JS Demo</title> <script language="Javascript"> function quote(mesg){ alert(mesg); } </script> </head> <body> <h1>Famous Quotes</h1> <form> <input type=“button” value=“Lincoln” onClick="quote('Four scores and seven years ago...')">
. . . <input type=“button” value=“Washington” onClick="quote('I cannot tell a lie.')"> <input type=“button” value=“Kennedy” onClick="quote('Let the race (to the moon) begin.')"> </from> </body> </html
Where to Embed JS Function (1) <html> <head><title>JS Demo</title> </head> <body> <h1>Javascript Demo</h1> <script language="Javascript"> <!– Javascript code goes here. //--> </script> </body> </html>
Where to Embed JS Function (2) <html> <head><title>JS Demo</title> <script language="Javascript"> function greet() { alert("Hello"); } </script> </head> <body> <h1>Javascript ONCLICK Demo</h1> <form> <input type="button" value="Click Me" onClick="greet()"> </form> </body> </html> Where to Embed JS Function (2)
Javascript Language Basics
General Rules JS is case sensitive. Statements end with a semicolon. Sum = n1 + n2; // These statements are different sum = N1 + N2; Statements end with a semicolon. today = new Date(); Comments // This form is for short comments to end of line /* This form of delimiters can span several lines of comments. */
Variables firstName = "Maria"; // String value lastName = "Martinez"; // " myMotto = "Be Prepared"; // " myAge = 21; // integer value priceOfBook = 27.25; // float value priceOfCD = 18.50; // "
Operators // concatenation operator fulName = firstName + " " + lastName; // arithmetic operator totalPrice = priceOfBook + priceOfCD; // arithmetic operator ageOfMyBrother = myAge - 2;
Pre-defined Functions // current date and time today = new Date(); // year value (integer) of today year = today.getYear(); // pop up a window displaying alert("Welcome to Honolulu"); // prints string to the current page document.write("Hello."). document.writeln(" Good-bye");
User-defined Functions function greet() { alert("Welcome to Hawaii."); } function greetWithName(name) { alert("Welcome to Hawaii, " + name); } function changeBackColor(someColor) { alert("Here is a new background color."); document.bgColor = someColor; }
Events Partial List of Events Event is an action external to the program that triggers a code to be executed. Partial List of Events Event Works with When Onclick A, INPUT (e.g., button), FORM, TABLE, & many others an element is clicked
Event Works with When onblur A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA the mouse leaves an element which was in focus onload BODY, FRAMESET a page is loaded into the browser ondblclick Same as ONCLICK an element is double-clicked onmouseover mouse is moved over the element onmouseout mouse is moved out of the element's area