1. 1Computer Sciences Department Princess Nourah bint Abdulrahman University

2. And use http://www.w3schools.com/http://www.w3schools.com/

3. JavaScript

4.  Introduction to JavaScript  Objects Data  Variables  Operators Types  Functions  Events Objectives Computer Sciences Department4

5.  JavaScript is one of the 3 languages all web developers must learn: 1. HTML to define the content of web pages 2. CSS to specify the layout of web pages 3. JavaScript to program the behavior of web pages Computer Sciences Department5 Why Study JavaScript?

6. Introduction  JavaScript is THE scripting language of the Web (its role as the scripting language of the WWW).  JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more.  JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers, PCs, laptops, tablets, smart phones, and more.  JavaScript is standards-based and the only language that runs in all web browsers.  The -Script suffix suggests that it is not a real programming language, that a scripting language is less than a programming language 6Computer Sciences Department

7. JavaScript is a Scripting Language  JavaScript is a dynamic computer programming language.  A scripting language is a lightweight programming language.  JavaScript is code statements inserted into HTML pages to be executed by the web browser.  Scripts in HTML must be inserted between and tags.  Scripts can be put in the and in the section of an HTML page. 7Computer Sciences Department

8. JavaScript Functions and Events  is executed when the page loads.  Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. Then we can write the script inside a function, and call the function when the event occurs. 8Computer Sciences Department

9. Scripts in and  You can place an unlimited number of scripts in your document, and you can have scripts in both the and the section at the same time.  It is a common practice to put functions in the section, or at the bottom of the page. This way they are all in one place and do not interfere with page content.  Scripts can also be placed in external files. External files often contain code to be used by several different web pages. 9Computer Sciences Department

10.  One of many HTML methods is document.getElementById().  This example "finds" the HTML element with id="demo", and changes its content (innerHTML):  Use the "id" attribute to identify the HTML element Computer Sciences Department10 JavaScript Can Change HTML Content

11. Manipulating HTML Elements  To access an HTML element from JavaScript, you can use the document.getElementById(id) method.  Use the "id" attribute to identify the HTML element 11Computer Sciences Department

12. Writing to The Document Output  The example below writes a element directly into the HTML document output 12Computer Sciences Department

13. JavaScript Statements -1  JavaScript statements are "commands" to the browser. The purpose of the statements is to tell the browser what to do.  This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element with id="demo":  document.getElementById("demo").innerHTML="Hello Dolly";  Semicolon ;  Semicolon separates JavaScript statements.  Normally you add a semicolon at the end of each executable statement.  Using semicolons also makes it possible to write many statements on one line.  Ending statements with semicolon is optional in JavaScript. 13Computer Sciences Department

14.  A computer program is a list of "instructions" to be "executed" by the computer.  In a programming language, these program instructions are called statements.  JavaScript is a programming language.  JavaScript statements are separated by semicolon. Computer Sciences Department14 JavaScript Statements -2

15. JavaScript Code  JavaScript code (or just JavaScript) is a sequence of JavaScript statements.  Each statement is executed by the browser in the sequence they are written.  Example  document.getElementById("demo").innerHTML="Hello Dolly";  document.getElementById("myDIV").innerHTML="How are you?"; 15Computer Sciences Department

16. JavaScript Code Blocks  JavaScript statements can be grouped together in blocks.  Blocks start with a left curly bracket, and end with a right curly bracket.  The purpose of a block is to make the sequence of statements execute together.  A good example of statements grouped together in blocks, are JavaScript functions.  Example  function myFunction() { document.getElementById("demo").innerHTML="Hello Dolly"; document.getElementById("myDIV").innerHTML="How are you?"; } 16Computer Sciences Department

17. JavaScript is Case Sensitive  JavaScript is case sensitive.  Watch your capitalization closely when you write JavaScript statements:  A function getElementById is not the same as getElementbyID.  A variable named myVariable is not the same as MyVariable. 17Computer Sciences Department

18.  White Space  JavaScript ignores extra spaces. You can add white space to your script to make it more readable.  The following lines are equivalent:  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!"); 18Computer Sciences Department

19. Single line comments Comments will not be executed by JavaScript. Comments can be added to explain the JavaScript, or to make the code more readable. Single line comments start with //. // is used to prevent the execution of one of the codelines. // is placed at the end of a code line. The following example uses single line comments to explain the code: Example  // Write to a heading: document.getElementById("myH1").innerHTML="Welcome to my Homepage";  // Write to a paragraph: document.getElementById("myP").innerHTML="This is my first paragraph."; 19Computer Sciences Department

20. Multi-Line Comments  Multi line comments start with /* and end with */.  The following example uses a multi line comment to explain the code: Example  /* The code below will write to a heading and to a paragraph, and will represent the start of my homepage: */ document.getElementById("myH1").innerHTML="Welcome to my Homepage"; document.getElementById("myP").innerHTML="This is my first paragraph."; 20Computer Sciences Department

21. 21Computer Sciences Department

22. 22Computer Sciences Department

23. JavaScript: Reacting to Events -1.1 23Computer Sciences Department

24. JavaScript: Reacting to Events -1.2 24Computer Sciences Department

25. JavaScript: Changing HTML Content -2.1 25Computer Sciences Department

26. JavaScript: Changing HTML Content -2.2 26Computer Sciences Department

27. JavaScript: Changing HTML Images 3.1 27Computer Sciences Department

28. JavaScript: Changing HTML Images 3.2 28Computer Sciences Department

29.  All JavaScript variables must be identified with unique names.  These unique names are called identifiers.  Identifiers can be short names (like x and y), or more descriptive names (age, sum, totalVolume).  The general rules for constructing names for variables (unique identifiers) are:  Names can contain letters, digits, underscores, and dollar signs.  Names must begin with a letter  Names can also begin with $ and _ (but we will not use it in this tutorial)  Names are case sensitive (y and Y are different variables)  Reserved words (like JavaScript keywords) cannot be used as names Note: JavaScript identifiers are case-sensitive. Computer Sciences Department29 JavaScript Identifiers

30. JavaScript Variables  JavaScript variables are "containers" for storing information:  Example  var x=5;  var y=6;  var z=x+y; 30Computer Sciences Department

31. JavaScript Data Types  String, Number, Boolean, Array, Object, Null, Undefined  Example:  var pi=3.14;  var name="John Doe";  var answer='Yes I am!';  Declaring (Creating) JavaScript Variables  Creating a variable in JavaScript is most often referred to as "declaring" a variable.  declare JavaScript variables with the var keyword:  var carname;  After the declaration, the variable is empty (it has no value).  To assign a value to the variable, use the equal sign:  carname="Volvo";  However, you can also assign a value to the variable when you declare it:  var carname="Volvo"; 31Computer Sciences Department

32. 32 Computer Sciences Department

33. One Statement, Many Variables  You can declare many variables in one statement. Just start the statement with var and separate the variables by comma:  var name="Doe", age=30, job="carpenter";  Your declaration can also span multiple lines:  var name="Doe", age=30, job="carpenter"; 33Computer Sciences Department

34.  JavaScript variables can hold many data types: numbers, strings, arrays, objects and more: Computer Sciences Department34 JavaScript Data Types

35.  In programming, data types is an important concept.  To be able to operate on variables, it is important to know something about the type.  Without data types, a computer cannot safely implement the JS code Computer Sciences Department35

36.  JavaScript has dynamic types. This means that the same variable can be used as different types: Computer Sciences Department36 JavaScript Has Dynamic Types

37. Computer Sciences Department37

38.  You can use the JavaScript typeof operator to find the type of a JavaScript variable: Computer Sciences Department38 The typeof Operator

39. JavaScript Arrays  The following code creates an Array called cars:  var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW";  or (condensed array):  var cars=new Array("Saab","Volvo","BMW");  or (literal array):  var cars=["Saab","Volvo","BMW"]; 39Computer Sciences Department

40. JavaScript Objects  An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas:  var person={firstname:"John", lastname:"Doe", id:5566};  The object (person) in the example above has 3 properties: firstname, lastname, and id.  Spaces and line breaks are not important. Your declaration can span multiple lines:  var person={ firstname : "John", lastname : "Doe", id : 5566 }; 40Computer Sciences Department

41. JavaScript Objects 41Computer Sciences Department

42. Undefined and Null - Declaring Variable Types  Undefined is the value of a variable with no value.  Variables can be emptied by setting the value to null;  Example  cars=null; person=null;  When you declare a new variable, you can declare its type using the "new" keyword:  var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; 42 JavaScript variables are all objects. When you declare a variable you create a new object. Computer Sciences Department

43. Creating JavaScript Objects  Almost "everything" in JavaScript is an object. Strings, Dates, Arrays, Functions.  You can also create your own objects. 43Computer Sciences Department

44. JavaScript Arithmetic 44 Example Computer Sciences Department

45. JavaScript Functions 45Computer Sciences Department

46. JavaScript Operators 46Computer Sciences Department

47. JavaScript Comparison and Logical Operators 47Computer Sciences Department

48. 48Computer Sciences Department

49. Calling a Function with Arguments 49Computer Sciences Department

50. 50Computer Sciences Department

51. Functions With a Return Value  This is possible by using the return statement.  When using the return statement, the function will stop executing, and return the specified value.  Syntax  function myFunction() { var x=5; return x; } 51Computer Sciences Department

52. 52Computer Sciences Department

53. JavaScript Scope  In JavaScript, objects and functions, are also variables.  In JavaScript, scope is the set of variables, objects, and functions you have access to.  Variables declared within a JavaScript function, become LOCAL to the function.  Local variables have local scope: They can only be accessed within the function  variable declared outside a function, becomes GLOBAL.  A global variable has global scope: All scripts and functions on a web page can access it. 53Computer Sciences Department

54. 54 Local JavaScript Variables

55. Computer Sciences Department55 Global JavaScript Variables

56. In HTML, the global scope is the window object: All global variables belong to the window object Computer Sciences Department56 Global Variables in HTML

57. Computer Sciences Department57 JavaScript Events

58.  The Math object allows you to perform mathematical tasks.  The Math object includes several mathematical methods.  Math.random(); // returns a random number  Math.min() // can be used to find the lowest value in a list of arguments  Math.max() // can be used to find the lowest highest value in a list of arguments  Math.round() //rounds a number to the nearest integer  Math.ceil() // rounds a number up to the nearest integer  Math.floor() // rounds a number down to the nearest integer Computer Sciences Department58 JavaScript Math Object - 1

59.  Math.E; // returns Euler's number Math.PI // returns PI Math.SQRT2 // returns the square root of 2 Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E Math.LOG10E // returns base 10 logarithm of E Math.pow(x,y) //Returns the value of x to the power of y Computer Sciences Department59 JavaScript Math Object - 2

60. Computer Sciences Department60

61.  Use if to specify a block of code to be executed, if a specified condition is true  Use else to specify a block of code to be executed, if the same condition is false  Use else if to specify a new condition to test, if the first condition is false  Use switch to specify many alternative blocks of code to be executed Computer Sciences Department61 JavaScript If...Else Statements

62. Computer Sciences Department62

63. Computer Sciences Department63

64.  JavaScript supports different kinds of loops:  for - loops through a block of code a number of times  for/in - loops through the properties of an object  while - loops through a block of code while a specified condition is true  do/while - also loops through a block of code while a specified condition is true Computer Sciences Department64 Different Kinds of Loops

65. Computer Sciences Department65 JavaScript Loops

66. Computer Sciences Department66

67. The For/In Loop  The JavaScript for/in statement loops through the properties of an object:  Example  var person={fname:"John",lname:"Doe",age:25}; for (x in person) { txt=txt + person[x]; } 67Computer Sciences Department

68. 68Computer Sciences Department

69. JavaScript Errors - Throw and Try to Catch  The try statement lets you to test a block of code for errors.  The catch statement lets you handle the error.  The throw statement lets you create custom errors. 69Computer Sciences Department

70. JavaScript try and catch  The try statement allows you to define a block of code to be tested for errors while it is being executed.  The catch statement allows you to define a block of code to be executed, if an error occurs in the try block.  The JavaScript statements try and catch come in pairs.  Syntax  try { //Run some code here } catch(err) { //Handle errors here } 70Computer Sciences Department

71. 71Computer Sciences Department

72. 72Computer Sciences Department

73. 73 Try JavaScript Closures self-invoking functions

74. Computer Sciences Department74 JavaScript Nested Functions Try