محمد احمدی نیا ahmadinia@gmail.com JavaScript محمد احمدی نیا ahmadinia@gmail.com
What is JavaScript? JavaScript was designed to add interactivity to HTML pages A scripting language is a lightweight programming language JavaScript is usually embedded directly into HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license زبانهای برنامه سازی وب
What Can JavaScript do? JavaScript can react to events JavaScript can read and write HTML elements JavaScript can be used to validate data JavaScript can be used to detect the visitor's browser JavaScript can be used to create cookies زبانهای برنامه سازی وب
JavaScript How To The HTML <script> tag is used to insert a JavaScript into an HTML page. زبانهای برنامه سازی وب
JavaScript Where To JavaScript in <body> <html> <body> <script type="text/javascript"> document.write("<p>" + Date() + "</p>"); </script> </body> </html> زبانهای برنامه سازی وب
JavaScript Where To JavaScript in <head> <html><head> <script type="text/javascript"> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <p id="demo"></p> <input type="button" onclick="displayDate()“ value=“DisplayDate”> </body> </html> زبانهای برنامه سازی وب
JavaScript Where To Using an External JavaScript External JavaScript files often contain code to be used on several different web pages. External JavaScript files have the file extension .js. <html> <head> <script type="text/javascript" src=“menu.js"></script> </head> <body> </body> </html> زبانهای برنامه سازی وب
JavaScript Statements JavaScript is Case Sensitive A JavaScript statement is a command to a browser This JavaScript statement tells the browser to write "Hello Dolly" to the web page: document.write("Hello Dolly"); The semicolon at the end of each executable statement is optional زبانهای برنامه سازی وب
JavaScript Comments Single line comments start with //. Multi line comments start with /* and end with */. <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script> زبانهای برنامه سازی وب
JavaScript Variables Variables are "containers" for storing information. Variable names are case sensitive (y and Y are two different variables) Variable names must begin with a letter, the $ character, or the underscore character Declaring (Creating) JavaScript Variables You declare JavaScript variables with the var keyword: var x; var carname=“volvo”; When you assign a text value to a variable, use quotes around the value. زبانهای برنامه سازی وب
Arithmetic Operators Operator Description Example Result + Addition x=y+2 x=7 y=5 - Subtraction x=y-2 x=3 * Multiplication x=y*2 x=10 / Division x=y/2 x=2.5 % Modulus x=y%2 x=1 ++ Increment x=++y x=6 y=6 x=y++ x=5 -- Decrement x=--y x=4 y=4 x=y-- زبانهای برنامه سازی وب
Assignment Operators Operator Example Same As Result = x=y x=5 += x+=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 زبانهای برنامه سازی وب
Comparison Operators Given that x=5, the table below explains the comparison operators: Operator Description Example == is equal to 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 زبانهای برنامه سازی وب
Logical Operators Logical operators are used to determine the logic between variables or values. Given that x=6 and y=3, the table below explains the logical operators: Operator Description Example && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true زبانهای برنامه سازی وب
Conditional Statements If...else Statement if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true } زبانهای برنامه سازی وب
Conditional Statements The JavaScript 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 } زبانهای برنامه سازی وب
Popup Boxes Alert Box alert("sometext"); <html> <head> <script type="text/javascript"> function show_alert(){ alert(" Starting the virus installation "); } </script> </head> <body> <input type="button" onclick="show_alert()" value="Show alert" /> </body> </html> زبانهای برنامه سازی وب
Popup Boxes Confirm Box A confirm box is often used if you want the user to verify or accept something. returns true or false confirm("sometext"); زبانهای برنامه سازی وب
Popup Boxes(Confirm Box) <html> <head> <script type="text/javascript"> function show_confirm(){ var r=confirm(“Are you ready …"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } </script> </head> زبانهای برنامه سازی وب
Popup Boxes Prompt Box A prompt box is often used if you want the user to input a value before entering a page. prompt("sometext","defaultvalue"); the user will have to click either "OK" or "Cancel“ returns value entered or null if no value was entered زبانهای برنامه سازی وب
Popup Boxes <html> <head> <script type="text/javascript"> function show_prompt() { var num=prompt(“Enter the number of viruses to inestall",“10"); if (num!=null ) { document.write("<p> the number of viruses you selected is " + num+ “</p>"); } } </script> </head> زبانهای برنامه سازی وب
JavaScript Functions A function will be executed by an event or by a call to the function. How to Define a Function function functionname(var1,var2,...,varX) { some code } زبانهای برنامه سازی وب
JavaScript Functions The return Statement <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> زبانهای برنامه سازی وب
JavaScript Loops The for Loop The for loop is used when you know in advance how many times the script should run. for (variable=startvalue;variable<=endvalue;variable=variable+increment) { code to be executed } var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write("<br />"); } زبانهای برنامه سازی وب
JavaScript Loops The while loop The while loop loops through a block of code while a specified condition is true. while (variable<=endvalue) { code to be executed } var i=0; while (i<=5) { document.write("The number is " + i); document.write("<br />"); i++; } زبانهای برنامه سازی وب
JavaScript Loops The do...while Loop do { code to be executed } while (variable<=endvalue); زبانهای برنامه سازی وب
JavaScript Events Examples of events: Events are actions that can be detected by JavaScript. Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Submitting an HTML form A keystroke … Events are normally used in combination with functions, and the function will not be executed before the event occurs! زبانهای برنامه سازی وب
JavaScript Events onLoad and onUnload onFocus, onBlur and onChange The onLoad and onUnload events are triggered when the user enters or leaves the page. onFocus, onBlur and onChange The onFocus, onBlur and onChange events are often used in combination with validation of form fields. <input type="text" size="30" id="email" onchange="checkEmail()" /> onSubmit The onSubmit event is used to validate ALL form fields before submitting it. زبانهای برنامه سازی وب
JavaScript Events زبانهای برنامه سازی وب Attribute Description onblur The event occurs when an element loses focus onchange The event occurs when the content of an element, the selection, or the checked state have changed onclick The event occurs when the user clicks on an element ondblclick The event occurs when the user double-clicks on an element onfocus The event occurs when an element gets focus onkeydown The event occurs when the user is pressing a key or holding down a key onkeypress onkeyup The event occurs when a keyboard key is released onload The event occurs when an object has been loaded onmousedown The event occurs when a user presses a mouse button over an element onmousemove The event occurs when a user moves the mouse pointer over an element onmouseover The event occurs when a user mouse over an element onmouseout The event occurs when a user moves the mouse pointer out of an element onmouseup The event occurs when a user releases a mouse button over an element onselect The event occurs after some text has been selected in an element onsubmit زبانهای برنامه سازی وب
Special Characters In JavaScript you can add special characters to a text string by using the backslash sign. document.write("We are the so-called \"Vikings\" from the north.“); Code Outputs \' single quote \" double quote \\ backslash \n new line \r carriage return \t tab \b backspace زبانهای برنامه سازی وب
Objects Based Programming JavaScript is an Object Based Programming language. Properties Are the values associated with an object. document.write(txt.length); Methods Are the actions that can be performed on objects. document.write(str.toUpperCase()); زبانهای برنامه سازی وب
String object The String object is used to manipulate a stored piece of text. var txt="Hello world!"; document.write(txt.length); 12 document.write(txt.toUpperCase()); HELLO WORLD! زبانهای برنامه سازی وب
Date Object The Date object is used to work with dates and times. ways of instantiating a date new Date() // current date and time new Date(milliseconds) //milliseconds since 1970/01/01 new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) var today = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) زبانهای برنامه سازی وب
Date Object Method Description getDate() Returns the day of the month (from 1-31) getDay() Returns the day of the week (from 0-6) getFullYear() Returns the year (four digits) getHours() Returns the hour (from 0-23) getMilliseconds() Returns the milliseconds (from 0-999) getMinutes() Returns the minutes (from 0-59) getMonth() Returns the month (from 0-11) getSeconds() Returns the seconds (from 0-59) setDate() Sets the day of the month (from 1-31) setFullYear() Sets the year (four digits) setHours() Sets the hour (from 0-23) setMilliseconds() Sets the milliseconds (from 0-999) setMinutes() Set the minutes (from 0-59) setMonth() Sets the month (from 0-11) setSeconds() Sets the seconds (from 0-59) زبانهای برنامه سازی وب
Array Object The Array object is used to store multiple values in a single variable. Create an Array var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; var myCars=new Array("Saab","Volvo","BMW"); // condensed array var myCars=["Saab","Volvo","BMW"]; // literal array Access an Array document.write(myCars[0]); // The index number starts at 0 زبانهای برنامه سازی وب
Timing Events With JavaScript, it is possible to execute some code after a specified time-interval. setTimeout() - executes a code some time in the future var t=setTimeout("javascript statement",milliseconds); <script type="text/javascript"> function timeMsg() { var t=setTimeout("alertMsg()",3000); } function alertMsg() { alert("Hello"); } </script> زبانهای برنامه سازی وب
Timing Events clearTimeout() - cancels the setTimeout() زبانهای برنامه سازی وب
DOM(Document Object Model) The HTML DOM defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure. The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. زبانهای برنامه سازی وب
DOM Nodes In the DOM, everything in an HTML document is a node. The entire document is a document node Every HTML element is an element node The text in the HTML elements are text nodes Every HTML attribute is an attribute node Comments are comment nodes زبانهای برنامه سازی وب
DOM Node Tree The HTML DOM views an HTML document as a node-tree. زبانهای برنامه سازی وب
all window anchors applets document document body frames embeds filters history forms navigator plugins images links location plugins event scripts screen styleSheets collections objects زبانهای برنامه سازی وب
DOM Properties and Methods Properties and methods define the programming interface of the HTML DOM. x.innerHTML – a property of x x.getElementById(id) – a method of x زبانهای برنامه سازی وب
Accessing Nodes You can access a node in two ways: By using the getElementById() method returns the element with the specified ID node.getElementById("id"); By using the getElementsByTagName() method returns all elements with a specified tag name node.getElementsByTagName("tagname"); x=document.getElementsByTagName("p"); selects all <p> nodes in a node-list.The nodes can be accessed by index. y=x[1]; زبانهای برنامه سازی وب
DOM - Change HTML Elements change the inner content and attributes of HTML elements <script type="text/javascript"> document.body.bgColor=“red"; </script> زبانهای برنامه سازی وب
DOM - Change HTML Elements modify the content of an element with innerHTML property <head> <script type="text/javascript"> function ChangeText(){ document.getElementById("p1").innerHTML="New text!"; } </script> </head> <body> <p id="p1">Hello world!</p> <input type="button" onclick="ChangeText()" value="Change text" /> </body> زبانهای برنامه سازی وب
DOM - Change HTML Elements Using the Style Object <head> <script type="text/javascript"> function ChangeBackground(){ document.body.style.backgroundColor=“blue"; } </script> </head> <body> <input type="button" onclick="ChangeBackground()" value="Change color" /> </body> زبانهای برنامه سازی وب
DOM - Change HTML Elements Change the font and color of an Element <head> <script type="text/javascript"> function ChangeStyle(){ document.getElementById("p1").style.color="blue"; document.getElementById("p1").style.fontFamily="Arial"; } </script> </head> <body> <p id="p1">Hello world!</p> <input type="button" onclick="ChangeStyle()" value="Change style" /> </body> زبانهای برنامه سازی وب
Form Validation JavaScript can be used to validate data in HTML forms before sending has the user left required fields empty? has the user entered a valid e-mail address? has the user entered a valid date? has the user entered text in a numeric field? زبانهای برنامه سازی وب