1. JavaScript محمد احمدی نیا ahmadinia@gmail.com

2. 2 Of 48 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 زبانهای برنامه سازی وب

3. 3 Of 48 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 زبانهای برنامه سازی وب

4. 4 Of 48 JavaScript How To  The HTML tag is used to insert a JavaScript into an HTML page. زبانهای برنامه سازی وب

5. 5 Of 48 JavaScript Where To  JavaScript in document.write(" " + Date() + " "); زبانهای برنامه سازی وب

6. 6 Of 48 JavaScript Where To  JavaScript in function displayDate() { document.getElementById("demo").innerHTML=Date(); } زبانهای برنامه سازی وب

7. 7 Of 48 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. زبانهای برنامه سازی وب

8. 8 Of 48 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 زبانهای برنامه سازی وب

9. 9 Of 48 JavaScript Comments  Single line comments start with //.  Multi line comments start with /* and end with */. // Write a heading document.write(" This is a heading "); /* The code below will write one heading and two paragraphs */ document.write(" This is a heading "); document.write(" This is a paragraph. "); زبانهای برنامه سازی وب

10. 10 Of 48 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. زبانهای برنامه سازی وب

11. 11 Of 48 Arithmetic Operators OperatorDescriptionExampleResult +Additionx=y+2x=7y=5 -Subtractionx=y-2x=3y=5 *Multiplicationx=y*2x=10y=5 /Divisionx=y/2x=2.5y=5 %Modulusx=y%2x=1y=5 ++Incrementx=++yx=6y=6 x=y++x=5y=6 --Decrementx=--yx=4y=4 x=y--x=5y=4 زبانهای برنامه سازی وب

12. 12 Of 48 Assignment Operators OperatorExampleSame AsResult =x=y x=5 +=x+=yx=x+yx=15 -=x-=yx=x-yx=5 *=x*=yx=x*yx=50 /=x/=yx=x/yx=2 %=x%=yx=x%yx=0 زبانهای برنامه سازی وب

13. 13 Of 48 Comparison Operators OperatorDescriptionExample ==is equal tox==8 is false x==5 is true ===is exactly equal to (value and type) x===5 is true x==="5" is false !=is not equalx!=8 is true >is greater thanx>8 is false <is less thanx<8 is true >=is greater than or equal tox>=8 is false <=is less than or equal tox<=8 is true زبانهای برنامه سازی وب Given that x=5, the table below explains the comparison operators:

14. 14 Of 48 Logical Operators OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true زبانهای برنامه سازی وب 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:

15. 15 Of 48 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 } زبانهای برنامه سازی وب

16. 16 Of 48 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 } زبانهای برنامه سازی وب

17. 17 Of 48 Popup Boxes  Alert Box  alert("sometext"); function show_alert(){ alert(" Starting the virus installation "); } زبانهای برنامه سازی وب

18. 18 Of 48 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"); زبانهای برنامه سازی وب

19. 19 Of 48 Popup Boxes(Confirm Box) function show_confirm(){ var r=confirm(“Are you ready …"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } } زبانهای برنامه سازی وب

20. 20 Of 48 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 زبانهای برنامه سازی وب

21. 21 Of 48 Popup Boxes function show_prompt() { var num=prompt(“Enter the number of viruses to inestall",“10"); if (num!=null && num!="") { document.write(" the number of viruses you selected is " + num+ “ "); } } زبانهای برنامه سازی وب

22. 22 Of 48 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 } زبانهای برنامه سازی وب

23. 23 Of 48 JavaScript Functions  The return Statement function product(a,b) { return a*b; } document.write(product(4,3)); زبانهای برنامه سازی وب

24. 24 Of 48 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 "); } زبانهای برنامه سازی وب

25. 25 Of 48 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 "); i++; } زبانهای برنامه سازی وب

26. 26 Of 48 JavaScript Loops  The do...while Loop do { code to be executed } while (variable<=endvalue); زبانهای برنامه سازی وب

27. 27 Of 48 JavaScript 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! زبانهای برنامه سازی وب

28. 28 Of 48 JavaScript Events  onLoad and onUnload  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.  onSubmit  The onSubmit event is used to validate ALL form fields before submitting it. زبانهای برنامه سازی وب

29. 29 Of 48 JavaScript Events AttributeDescription onblurThe 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 onclickThe event occurs when the user clicks on an element ondblclickThe event occurs when the user double-clicks on an element onfocusThe event occurs when an element gets focus onkeydownThe event occurs when the user is pressing a key or holding down a key onkeypressThe event occurs when the user is pressing a key or holding down a key onkeyupThe event occurs when a keyboard key is released onloadThe event occurs when an object has been loaded onmousedownThe event occurs when a user presses a mouse button over an element onmousemoveThe event occurs when a user moves the mouse pointer over an element onmouseoverThe event occurs when a user mouse over an element onmouseoutThe event occurs when a user moves the mouse pointer out of an element onmouseupThe event occurs when a user releases a mouse button over an element onselectThe event occurs after some text has been selected in an element onsubmit زبانهای برنامه سازی وب

30. 30 Of 48 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.“); زبانهای برنامه سازی وب CodeOutputs \'single quote \"double quote \\backslash \nnew line \rcarriage return \ttab \bbackspace

31. 31 Of 48 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()); زبانهای برنامه سازی وب

32. 32 Of 48 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! زبانهای برنامه سازی وب

33. 33 Of 48 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) زبانهای برنامه سازی وب

34. 34 Of 48 Date Object MethodDescription 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) زبانهای برنامه سازی وب

35. 35 Of 48 Array Object  The Array object is used to store multiple values in a single variable.  Create an Array 1.var myCars=new Array(); // regular array (add an optional integer myCars[0]="Saab"; // argument to control array's size) myCars[1]="Volvo"; 2.var myCars=new Array("Saab","Volvo","BMW"); // condensed array 3.var myCars=["Saab","Volvo","BMW"]; // literal array  Access an Array document.write(myCars[0]); // The index number starts at 0 زبانهای برنامه سازی وب

36. 36 Of 48 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); function timeMsg() { var t=setTimeout("alertMsg()",3000); } function alertMsg() { alert("Hello"); } زبانهای برنامه سازی وب

37. 37 Of 48 Timing Events  clearTimeout() - cancels the setTimeout() زبانهای برنامه سازی وب

38. 38 Of 48 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. زبانهای برنامه سازی وب

39. 39 Of 48 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 زبانهای برنامه سازی وب

40. 40 Of 48 DOM Node Tree  The HTML DOM views an HTML document as a node-tree. زبانهای برنامه سازی وب

41. 41 Of 48 زبانهای برنامه سازی وب window plugins document frames history navigator location event screen all collections anchors applets body embeds images forms filters links plugins styleSheets scripts objects

42. 42 Of 48 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 زبانهای برنامه سازی وب

43. 43 Of 48 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 nodes in a node-list.The nodes can be accessed by index. y=x[1]; زبانهای برنامه سازی وب

44. 44 Of 48 DOM - Change HTML Elements  change the inner content and attributes of HTML elements document.body.bgColor=“red"; زبانهای برنامه سازی وب

45. 45 Of 48 DOM - Change HTML Elements  modify the content of an element with innerHTML property function ChangeText(){ document.getElementById("p1").innerHTML="New text!"; } Hello world! زبانهای برنامه سازی وب

46. 46 Of 48 DOM - Change HTML Elements  Using the Style Object function ChangeBackground(){ document.body.style.backgroundColor=“blue"; } زبانهای برنامه سازی وب

47. 47 Of 48 DOM - Change HTML Elements  Change the font and color of an Element function ChangeStyle(){ document.getElementById("p1").style.color="blue"; document.getElementById("p1").style.fontFamily="Arial"; } Hello world! زبانهای برنامه سازی وب

48. 48 Of 48 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? زبانهای برنامه سازی وب