Javascript Introduction Norman White Material is from w
- Slides: 51
Javascript Introduction Norman White Material is from w 3 schools. com Go there to run examples interactively
Javascript overview • JS is the primary scripting language for browsers. – Supported by virtually all browsers – It is code that is embedded in the html and allows logic to be added that runs on the client instead of the server. – JS can dynamically change the content of the web page after it is downloaded – Official standard is ECMAScript-262
Background • CGI model means all processing is done on the server. • CGI processing means that the server has to generate all the HTML as well as embedded content. • CGI doesn’t scale well, since you have to keep adding more servers. • What if we could move some processing off the server and do it on the Client?
Client – side processing • Some Objectives 1) Move as much processing as possible to the client, thereby reducing server load 2) Eliminate redundant sending of HTML to client. 3) Provide a much nicer interface (GUI) than the forms-based interface of CGI processing.
Solutions • Early solution was Java. – Ship complete Java program to client and have browsers include a JVM (Java Virtual Machine) to run the program. – This was cumbersome, and Java programs were large. • Next were adding interpreters for VBScript and Javascript to browsers. – This is now the most common solution, with Javascript being the clear winner.
Javascript Advantages • JS runs on then browser, not the server. – Can dramatically reduce network traffic back to the server. – Move processing from the server to the browser, reduces/eliminates processing on the server. – If running on a mobile device, Javascript allows access to native mobile device capabilities through the Phone gap library. – Javascript, CSS 3 and HTML 5 will allow us to develop web pages that automatically display correctly on different devices, including mobile. • Many JS Libraries available, especially JQUERY and JQUERY Mobile, that make it much easier to implement solutions.
How do we use Javascript • Insert JS code directly into the html document, or include it from a file or the web. • The browser will execute the JS code when it sees it in the document. • IMPORTANT – JS is running on the browser NOT the server! – JS may need to retrieve information from a server. We will talk about that later.
Things JS can do • React to events – – – Mouse over Mouse click Page load Form submit … • Change the html code dynamically depending on events • Detect user’s browser • Manage Cookies • …
How to insert dynamic content into html <html> <body> <h 1>My First Web Page</h 1> <script type="text/javascript"> document. write("<p>" + Date() + "</p>"); </script> </body> </html>
Hiding JS on browsers that don’t support it Surround it in comments <html> <body> <script type="text/javascript"> <!-document. get. Element. By. Id("demo"). inner. HTML=Date(); //--> </script> </body> </html>
Controlling when JS executes • We may not want to execute it when/as the page loads, but after some event. – Like: • User does something • Page is completely loaded • …
Example – Print out current date and time We could compute the data and time on the server. Better is to just change the <p> element Avoids rewriting complete document <html> <body> <h 1>My First Web Page</h 1> <p id="demo"></p> <script type="text/javascript"> document. get. Element. By. Id("demo"). inner. HTML=Date(); </script> </body> </html>
JS Functions • • • <html><head> <script type="text/javascript"> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> <h 1>My First Web Page</h 1> <p id="demo"></p> <button type="button" onclick="display. Date()“ >Display Date</button> </body> </html>
JS can be in external files <html> <head> <script type="text/javascript" src="xxx. js"></script> </head> <body> </html>
JS Blocks Code can be grouped into blocks with { } <script type="text/javascript"> { document. write("<h 1>This is a heading</h 1>"); document. write("<p>This is a paragraph. </p>"); document. write("<p>This is another paragraph. </p>"); } </script>
Comments • Single line comments start with // – // this is a single line comment • Or • Some code // comment at the end of the line • Multiline comments start with /* and end with */ – This is a multi-line comment /* Some comments Some more comments */
Variables • Variables can take on different values at different times • Variable names are case sensitive • Names have to start with a letter, a $ or an underscore • Variables that hold text have to have the text in quotes, i. e. Myvar=“Hello”
Local and Global variables Local variables are declared in a function with the var declaration, i. e. var x; These variables only exist inside the function. i. e. created when the function is entered and deleted when it exits Global variables are declared outside a function, or without the “var” keyword in a function Global variables can be used anywhere on the web page, not just in the function they were created.
Arithmetic operators (assume y = 5) Operator + * / % ++ Description Addition Subtraction Multiplication Division -- Decrement Modulus (division remainder) Increment Example x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 x=++y x=y++ x=--y x=y-- Result x=7 x=3 x=10 x=2. 5 x=1 x=6 x=5 x=4 x=5 y=5 y=5 y=6 y=4 y=4
Assignment operators assume x=10 and y=5 Operator = += -= *= /= %= Example x=y x+=y x-=y x*=y x/=y x%=y Same As x=x+y x=x-y x=x*y x=x/y x=x%y Result x=5 x=15 x=50 x=2 x=0
Strings + = concatenation txt 1="What a very"; txt 2="nice day"; txt 3=txt 1+txt 2; txt 3 will be “What a verynice day” txt 1="What a very"; txt 2="nice day"; txt 3=txt 1+" "+txt 2; txt 3 will be “What a very nice day”
Strings and numbers • Result of adding strings and numbers is a string…. x=5+5; document. write(x); x="5"+"5"; document. write(x); x=5+"5"; document. write(x); x="5"+5; document. write(x);
Comparison Operators x=5 Operator == === != > < >= <= Description is equal to Example x==8 is false x==5 is true is exactly equal to (value and type) x===5 is true x==="5" is false is not equal x!=8 is true is greater than x>8 is false is less than x<8 is true is greater than or equal to x>=8 is false is less than or equal to x<=8 is true Use: If (age<18) document. write(“Too young”);
Logical Operators x=6 and y=3 Operator Description Example && || ! and or not (x < 10 && y > 1) is true (x==5 || y==5) is false !(x==y) is true Conditional operator Variablename= (condition)? value 1: value 2 <script type="text/javascript"> var visitor="PRES"; var greeting=(visitor=="PRES")? "Dear President ": "Dear "; document. write(greeting); </script>
Conditional Statements if if … else If. . else if … else switch
If Statement if (condition) { Code to be executed } <script type="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date(); var time=d. get. Hours(); if (time<10) { document. write("<b>Good morning</b>"); } </script>
If …else if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } <script type="text/javascript"> //If the time is less than 10, you will get a "Good morning" greeting. //Otherwise you will get a "Good day" greeting. var d = new Date(); var time = d. get. Hours(); if (time < 10) { document. write("Good morning!"); } else { document. write("Good day!"); } </script>
IF…else if (condition 1) { code to be executed if condition 1 is true } else if (condition 2) { code to be executed if condition 2 is true } else { code to be executed if neither condition 1 nor condition 2 is true }
Switch statement switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
Switch example <script type="text/javascript"> //You will receive a different greeting based //on what day it is. Note that Sunday=0, //Monday=1, Tuesday=2, etc. var d=new Date(); var the. Day=d. get. Day(); switch (the. Day) { case 5: document. write("Finally Friday"); break; case 6: document. write("Super Saturday"); break; case 0: document. write("Sleepy Sunday"); break; default: document. write("I'm looking forward to this weekend!"); } </script>
Popup boxes alert("sometext"); (user has to click ok) <html> <head> <script type="text/javascript"> function show_alert() { alert("I am an alert box!"); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert box" /> </body> </html>
Confirm box user clicks OK or Cancel confirm("sometext"); <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Press a button"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html>
Prompt box User can enter new value and click ok, or cancel prompt("sometext", "defaultvalue"); <html> <head> <script type="text/javascript"> function show_prompt() { var name=prompt("Please enter your name", "Harry Potter"); if (name!=null && name!="") { document. write("<p>Hello " + name + "! How are you today? </p>"); } } </script> </head> <body> <input type="button" onclick="show_prompt()" value="Show prompt box" /> </body> </html>
Functions (usually defined in head section, so that they are defined before calling) functionname(var 1, var 2, . . . , var. X) { some code } <html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click me!" onclick="displaymessage()" /> </form> </body> </html>
Return statement Used to return values from functions <html> <head> <script type="text/javascript"> function product(a, b) { return a*b; } </script> </head> <body> <script type="text/javascript"> document. write( product(4, 3) ); </script> </body> </html>
For Loops for (variable=startvalue; variable<=endvalue; variable=variable+increment) { code to be executed } <html> <body> <script type="text/javascript"> var i=0; for (i=0; i<=5; i++) { document. write("The number is " + i); document. write(" "); } </script> </body> </html>
While loop while (variable<=endvalue) { code to be executed } <html> <body> <script type="text/javascript"> var i=0; while (i<=5) { document. write("The number is " + i); document. write(" "); i++; } </script> </body> </html>
Do while (execute at least once) do { code to be executed } while (variable<=endvalue); <html> <body> <script type="text/javascript"> var i=0; do { document. write("The number is " + i); document. write(" "); i++; } while (i<=5); </script> </body> </html>
Break statement Breaks out of a loop <html> <body> <script type="text/javascript"> var i=0; for (i=0; i<=10; i++) { if (i==3) { break; } document. write("The number is " + i); document. write(" "); } </script> </body> </html>
Continue break current loop and continue with next value <html> <body> <script type="text/javascript"> var i=0 for (i=0; i<=10; i++) { if (i==3) { continue; } document. write("The number is " + i); document. write(" "); } </script> </body> </html>
For … in Loops through values of an object for (variable in object) { code to be executed } var person={fname: "John", lname: "Doe", age: 25}; var x; for (x in person) { document. write(person[x] + " "); } Result: John Doe 25
Events Actions that can be detected by JS <html> <head> <script type="text/javascript"> function display. Date() { document. get. Element. By. Id("demo"). inner. HTML=Date(); } </script> </head> <body> <h 1>My First Web Page</h 1> <p id="demo"></p> <button type="button" onclick="display. Date()">Display Date</button> </body> </html>
Events Many events, also functions that can cause events Some Examples: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input field in an HTML form Submitting an HTML form A keystroke
on. Submit Event Used to check form input <form method="post" action="xxx. htm" onsubmit="return check. Form()"> If check. Form returns “True” form will be submitted, otherwise it will be cancelled. This is how we would check form fields or compute the value of a hidden field like”fchar”
Catching Errors, Try … catch try { //Run some code here } catch(err) { //Handle errors here } <html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page. nn"; txt+="Error description: " + err. message + "nn"; txt+="Click OK to continue. nn"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
Throw Statement Generate an error exception throw exception <html> <body> <script type="text/javascript"> var x=prompt("Enter a number between 5 and 10: ", ""); try { if(x>10) { throw "Err 1"; } else if(x<5) { throw "Err 2"; } else if(is. Na. N(x)) { throw "Err 3"; } } catch(err) { if(err=="Err 1") { document. write("Error! The value is too high. "); } if(err=="Err 2") { document. write("Error! The value is too low. "); } if(err=="Err 3") { document. write("Error! The value is not a number. "); } } </script> </body> </html>
Special Characters Use the “” to insert special characters var txt="We are the so-called "Vikings" from the north. "; document. write(txt); INSTEAD use to escape the “ so it is interpreted as a regular character. var txt="We are the so-called "Vikings" from the north. "; document. write(txt);
Other special characters Code ‘ “ \ n r t b f Outputs single quote double quote backslash new line carriage return tab backspace form feed
Misc • Java. Script is Case Sensitive – A function named "myfunction" is not the same as "my. Function" and a variable named "my. Var" is not the same as "myvar". – Java. Script is case sensitive - therefore watch your capitalization closely when you create or call variables, objects and functions. • White Space – Java. Script ignores extra spaces. You can add white space to your script to make it more readable. The following lines are equivalent: • var name="Hege"; var name = "Hege"; • Break up a Code Line – You can break up a code line within a text string with a backslash. The example below will be displayed properly: • document. write("Hello World!"); • However, you cannot break up a code line like this: • document. write ("Hello World!");
Takeaway • • Javascript is a large language, many features Very powerful Need to be an expert to do “fancy” things Allows us to move a lot of processing to the client, reducing communications with server, very important for mobile devices where we may have limited/no bandwidth. • Would be nice if there were some preprogrammed functions to do useful things • SOLUTION: The JQUERY library
JQUERY • • Javascript library that works on most browsers. Hides many details from developers. In use at over 50% of large web sites There is now a JQUERY MOBILE library, customized for mobile devices • One statement allows you to use jquery – <script type=“text/javascript” src=“jquery. js”></script> • Next time, intro to JQUERY