Download - Introduction to Javascript
![Page 1: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/1.jpg)
Introduction to Introduction to JavascriptJavascript
![Page 2: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/2.jpg)
What HTML Can & Can Not DoWhat HTML Can & Can Not Do
HTML CanHTML Can Display textDisplay text Display imagesDisplay images Display even animated clipartDisplay even animated clipart Allow users to input dataAllow users to input data
HTML Can NotHTML Can Not Do calculationsDo calculations Display current dateDisplay current date Check validity of input dataCheck validity of input data Change color of a button when the cursor hovers over itChange color of a button when the cursor hovers over it Be Be interactiveinteractive
![Page 3: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/3.jpg)
ProgrammingProgramming For a Web Page to be able to be For a Web Page to be able to be interactiveinteractive
CalculateCalculate Display current date Display current date Check validity of input dataCheck 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 effectsAdd dynamic effects
You need to include aYou need to include a program program A set of detailed instruction to the computer to accomplish A set of detailed instruction to the computer to accomplish
some tasksome task. . Using a Using a programming language programming language
JavaScriptJavaScript JavaJava Visual BasicVisual Basic
![Page 4: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/4.jpg)
What Is What Is JavascriptJavascript??
A scripting language used to add greater power and A scripting language used to add greater power and interactivity to Web pages 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 Invented by Netscape, now controlled by a European
Standards group Standards group Often called a Often called a scriptingscripting language, rather than a language, rather than a
programmingprogramming language language Distinct from Distinct from JavaJava, which is a full-fledged programming , which is a full-fledged programming
language invented by Sun Microsystems. language invented by Sun Microsystems.
![Page 5: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/5.jpg)
Screen OutputScreen Output
var message = alert(“Aloha, you’all.”);var message = alert(“Aloha, you’all.”); var question = confirm(“Do you want to var question = confirm(“Do you want to
continue?”); continue?”); document.write (“Welcome to Hawaii.”);document.write (“Welcome to Hawaii.”);
![Page 6: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/6.jpg)
Keyboard InputKeyboard Input
var name = prompt(“What is your name?”);var name = prompt(“What is your name?”);alert(“Welcome to Hawaii, “ + name);alert(“Welcome to Hawaii, “ + name);
![Page 7: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/7.jpg)
Embedding JS Code Embedding JS Code in HTML Pagein HTML Page<html><html>
<head><head>
<title>Java Script Demo</title><title>Java Script Demo</title>
</head></head>
<body><body>
<h1>Javascript Demo</h1><h1>Javascript Demo</h1>
<script type="text/javascript"><script type="text/javascript">
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></script>
</body></body>
</html></html>
![Page 8: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/8.jpg)
Sample Web Page with JavascriptSample Web Page with Javascript
Alert Demo (Demo (JS code)) Prompt Demo (Demo (JS code)) Date Demo (Demo (JS code))
![Page 9: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/9.jpg)
Other Examples of JS UseOther Examples of JS Use
Create a New Window On the Fly Create a New Window On the Fly Check the Validity of Form EntriesCheck the Validity of Form Entries Manipulate Document Objects Manipulate Document Objects
![Page 10: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/10.jpg)
Calling FunctionsCalling Functions
Greet on ClickGreet on Click (Code) (Code) Change Background on MouseOverChange Background on MouseOver (Code) (Code) Alert on ClickAlert on Click (Code) (Code)
![Page 11: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/11.jpg)
<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 ClickGreet on Click
![Page 12: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/12.jpg)
<html> <head> <title>JS Demo</title> <script language="Javascript"> function toBlue() { document.bgColor="0000ff| }
function toWhite() { document.bgColor="ffffff"; } </script> </head>
<body>
. . .
Change Background on MouseOverChange Background on MouseOver
![Page 13: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/13.jpg)
. . .
<body> <h1>Javascript ONMOUSEOVER Demo</h1> <form> <input type="button" onMouseOver="toBlue()“ onMouseOut="toWhite()"> </form> </body> </html
![Page 14: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/14.jpg)
<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...')">
Alert on ClickAlert on Click
![Page 15: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/15.jpg)
. . .
<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
![Page 16: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/16.jpg)
<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 (1)Where to Embed JS Function (1)
![Page 17: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/17.jpg)
<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)Where to Embed JS Function (2)
![Page 18: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/18.jpg)
Javascript Language Javascript Language BasicsBasics
![Page 19: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/19.jpg)
General RulesGeneral Rules JS is case sensitive. JS is case sensitive.
Sum = n1 + n2;Sum = n1 + n2; // These statements are different // These statements are differentsum = N1 + N2;sum = N1 + N2;
All JS variables are of All JS variables are of variantvariant type (not specific) type (not specific) Variables may be declared, or notVariables may be declared, or not
var num1 = 5var num1 = 5var str1 = “hello”var str1 = “hello”num2 = 6num2 = 6str2 = “Goodbye”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. */ */
![Page 20: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/20.jpg)
VariablesVariables
firstName = "Maria"; // String value lastName = "Martinez"; // " myMotto = "Be Prepared"; // " myAge = 21; // integer value priceOfBook = 27.25; // float value priceOfCD = 18.50; // "
![Page 21: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/21.jpg)
OperatorsOperators
// concatenation operator fulName = firstName + " " + lastName;
// arithmetic operator totalPrice = priceOfBook + priceOfCD;
// arithmetic operator ageOfMyBrother = myAge - 2;
![Page 22: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/22.jpg)
Pre-defined FunctionsPre-defined Functions
// current date and timetoday = new Date();
// year value (integer) of today year = today.getYear();
// pop up a window displaying alert("Welcome to Honolulu");
// prints string to the current pagedocument.write("Hello."). document.writeln(" Good-bye");
![Page 23: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/23.jpg)
User-defined FunctionsUser-defined Functionsfunction 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; }
![Page 24: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/24.jpg)
EventsEvents
EventEvent is an action external to the program that is an action external to the program that triggers a code to be executed. triggers a code to be executed.
Partial List of EventsPartial List of Events
EventEvent Works withWorks with WhenWhen
OnclickOnclick A, INPUT (e.g., button), A, INPUT (e.g., button), FORM, TABLE, & FORM, TABLE, & many othersmany others
an element is an element is clicked clicked
![Page 25: Introduction to Javascript](https://reader033.vdocuments.us/reader033/viewer/2022052414/5681484f550346895db5624e/html5/thumbnails/25.jpg)
EventEvent Works withWorks with WhenWhen
onbluronblur A, AREA, BUTTON, A, AREA, BUTTON, INPUT, LABEL, INPUT, LABEL, SELECT, SELECT, TEXTAREA TEXTAREA
the mouse leaves an the mouse leaves an element which was element which was in focus in focus
onloadonload BODY, FRAMESETBODY, FRAMESET a page is loaded a page is loaded into the browserinto the browser
ondblclickondblclick Same as ONCLICKSame as ONCLICK an element is an element is double-clicked double-clicked
onmouseoveronmouseover Same as ONCLICK Same as ONCLICK mouse is moved mouse is moved over the elementover the element
onmouseoutonmouseout Same as ONCLICKSame as ONCLICK mouse is moved out mouse is moved out of the element's of the element's areaarea