Introduction to Javascript
What HTML Can & Can Not Do HTML Can HTML Can Display text Display text Display images Display images Display even animated clipart Display even animated clipart Allow users to input data Allow users to input data HTML Can Not HTML Can Not Do calculations Do calculations Display current date Display current date Check validity of input data Check validity of input data Change color of a button when the cursor hovers over it Change color of a button when the cursor hovers over it Be interactive Be interactive
Programming For a Web Page to be able to be interactive For a Web Page to be able to be interactive Calculate Calculate Display current date Display current date Check validity of input data Check validity of input data Change color of a button when the cursor hovers over it Change color of a button when the cursor hovers over it Add dynamic effects Add dynamic effects You need to include a program You need to include a program A set of detailed instruction to the computer to accomplish some task. A set of detailed instruction to the computer to accomplish some task. Using a programming language Using a programming language JavaScript JavaScript Java Java Visual Basic Visual Basic
What Is Javascript? A scripting language used to add greater power and interactivity to Web pages A scripting language used to add greater power and interactivity to Web pages Freely combined with HTML in the Web document Freely combined with HTML in the Web document Invented by Netscape, now controlled by a European Standards group Invented by Netscape, now controlled by a European Standards group Often called a scripting language, rather than a programming language Often called a scripting language, rather than a programming language Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems. Distinct from Java, which is a full-fledged programming language invented by Sun Microsystems.
Screen Output var message = alert(“Aloha, you’all.”); var message = alert(“Aloha, you’all.”); var question = confirm(“Do you want to continue?”); var question = confirm(“Do you want to continue?”); document.write (“Welcome to Hawaii.”); document.write (“Welcome to Hawaii.”);
Keyboard Input var name = prompt(“What is your name?”); alert(“Welcome to Hawaii, “ + name); var name = prompt(“What is your name?”); alert(“Welcome to Hawaii, “ + name);
Embedding JS Code in HTML Page <html><head> Java Script Demo Java Script Demo </head><body> Javascript Demo Javascript Demo var mess = alert("Aloha, you'all."); var mess = alert("Aloha, you'all."); var quest = confirm("Do you want to continue?"); var quest = confirm("Do you want to continue?"); var name = prompt("What is your name?", ""); var name = prompt("What is your name?", ""); document.write("How are you, " + name + "?"); document.write("How are you, " + name + "?");</script></body></html>
Sample Web Page with Javascript Alert Demo (JS code) Alert Demo (JS code) Alert JS code Alert JS code Prompt Demo (JS code) Prompt Demo (JS code) Prompt JS code Prompt JS code Date Demo (JS code) Date Demo (JS code) Date JS code Date JS code
Other Examples of JS Use Create a New Window On the Fly Create a New Window On the Fly Create a New Window On the Fly Create a New Window On the Fly Check the Validity of Form Entries Check the Validity of Form Entries Check the Validity of Form Entries Check the Validity of Form Entries Manipulate Document Objects Manipulate Document Objects Manipulate Document Objects Manipulate Document Objects
Calling Functions Greet on Click (Code) Greet on Click (Code) Greet on Click Code Greet on Click Code Change Background on MouseOver (Code) Change Background on MouseOver (Code) Change Background on MouseOver Code Change Background on MouseOver Code Alert on Click (Code) Alert on Click (Code) Alert on Click Code Alert on Click Code
JS Demo function greet() { alert("Hello"); } Javascript ONCLICK Demo Greet on Click
JS Demo function toBlue() { document.bgColor="0000ff| } function toWhite() { document.bgColor="ffffff"; }... Change Background on MouseOver
... Javascript ONMOUSEOVER Demo </html
JS Demo function quote(mesg){ alert(mesg); } Famous Quotes Alert on Click
... </html
JS Demo Javascript Demo Where to Embed JS Function (1)
JS Demo function greet() { alert("Hello"); } Javascript ONCLICK Demo Where to Embed JS Function (2)
Javascript Language Basics
General Rules JS is case sensitive. JS is case sensitive. Sum = n1 + n2; // These statements are different sum = N1 + N2; Sum = n1 + n2; // These statements are different sum = N1 + N2; All JS variables are of variant type (not specific) All JS variables are of variant type (not specific) Variables may be declared, or not Variables may be declared, or not var num1 = 5 var str1 = “hello” num2 = 6 str2 = “Goodbye” var num1 = 5 var str1 = “hello” num2 = 6 str2 = “Goodbye” Comments Comments // This form is for short comments to end of line // This form is for short comments to end of line /* This form of delimiters can span several lines of comments. */ /* 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 Event is an action external to the program that triggers a code to be executed. Event is an action external to the program that triggers a code to be executed. Partial List of Events 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 Same as ONCLICK mouse is moved over the element onmouseout Same as ONCLICK mouse is moved out of the element's area
Open/Close New Window To Open a new window: To Open a new window: myWindow = window.open( “nameOfMyWindow”); myWindow = window.open( “nameOfMyWindow”); To Close a window: To Close a window: nameOfMyWindow.close(); or (for active window) nameOfMyWindow.close(); or (for active window) window.close(); window.close();
Customizing Window OptionExplanation toolbar = yes | noAdd /remove browser toolbar location = yes | noAdd/ remove browser location field directories = yes | noAdd/ remove browser directories field status = yes | noAdd/ remove browser status field menubar = yes | noAdd/ remove browser menubar scrollbar = yes | noAdd/remove browser scrollbar resizable = yes | noAllow new window to be resizable width = valueSet window width in pixels height = valueSet window height in pixels
New Window--Example pageURL= windowName=“myPopupWindow”; pageURL= windowName=“myPopupWindow”; settings= "toolbar=yes,location=yes,directories=yes,"+ "status=no,menubar=no,scrollbars=yes,"+ "resizable=yes,width=600,height=300"; myNewWindow= window.open(pageURL, windowName, settings); (Note: no space between settings)
New Window--Example Click Here To Go to Yahoo