Introduction to Javascript

Introduction to Javascript

What HTML Can & Can Not Do • HTML Can • Display text • Display images • Display even animated clipart • Allow users to input data • HTML Can Not • Do calculations • Display current date • Check validity of input data • Change color of a button when the cursor hovers over it • Be interactive

Programming • For a Web Page to be able to be interactive • Calculate • Display current date • Check validity of input data • Change color of a button when the cursor hovers over it • Add dynamic effects • You need to include aprogram • A set of detailed instruction to the computer to accomplish some task. • Using a programming language • JavaScript • Java • Visual Basic

What Is Javascript? • 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 a European Standards group • Often called a scripting language, rather than a programming language • Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems.

Screen Output • var message = alert(“Aloha, you’all.”); • var question = confirm(“Do you want to continue?”); • document.write (“Welcome to Hawaii.”);

Keyboard Input • var name = prompt(“What is your name?”);alert(“Welcome to Hawaii, “ + name);

Embedding JS Code in HTML Page <html> <head> <title>Java Script Demo</title> </head> <body> <h1>Javascript Demo</h1> <script type="text/javascript"> var mess = alert("Aloha, you'all."); var quest = confirm("Do you want to continue?"); var name = prompt("What is your name?", ""); document.write("How are you, " + name + "?"); </script> </body> </html>

Sample Web Page with Javascript • AlertDemo (JS code) • PromptDemo (JS code) • DateDemo (JS code)

Other Examples of JS Use • Create a New Window On the Fly • Check the 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>

<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. • Sum = n1 + n2; // These statements are differentsum = N1 + N2; • All JS variables are of variant type (not specific) • Variables may be declared, or not • var num1 = 5var str1 = “hello”num2 = 6str2 = “Goodbye” • 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 timetoday = new Date(); // year value (integer) of todayyear = today.getYear(); // pop up a window displaying alert("Welcome to Honolulu"); // prints string to the current pagedocument.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; }

Event is an action external to the program that triggers a code to be executed. Partial List of Events Events

Introduction to Javascript