Princess Nourah bint Abdulrahman University. Computer Sciences Department

Size: px

Start display at page:

Download "Princess Nourah bint Abdulrahman University. Computer Sciences Department"

Maximillian Harrington
5 years ago
Views:

1 Princess Nourah bint Abdulrahman University 1

2 And use

3 JavaScript

4 Objectives Introduction to JavaScript Objects Data Variables Operators Types Functions Events 4

5 Why Study JavaScript? 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 5

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 6

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 <script> and </script> tags. Scripts can be put in the <body> and in the <head> section of an HTML page. 7

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. 8

9 Scripts in <head> and <body> You can place an unlimited number of scripts in your document, and you can have scripts in both the <body> and the <head> section at the same time. It is a common practice to put functions in the <head> 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. 9

10 JavaScript Can Change HTML Content 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 10

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 11

12 Writing to The Document Output The example below writes a <p> element directly into the HTML document output 12

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. 13

14 JavaScript Statements -2 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. 14

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?"; 15

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?"; } 16

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. 17

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"; 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!"); 18

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."; 19

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."; 20

21 21

22 22

23 JavaScript: Reacting to Events

24 JavaScript: Reacting to Events

25 JavaScript: Changing HTML Content

26 JavaScript: Changing HTML Content

27 JavaScript: Changing HTML Images

28 JavaScript: Changing HTML Images

29 JavaScript Identifiers 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. 29

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

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"; 31

32 32

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"; 33

34 JavaScript Data Types JavaScript variables can hold many data types: numbers, strings, arrays, objects and more: 34

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 35

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

37 37

38 The typeof Operator You can use the JavaScript typeof operator to find the type of a JavaScript variable: 38

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"]; 39

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 }; 40

41 JavaScript Objects 41

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; JavaScript variables are all var x= new Number; var y= new Boolean; objects. When you declare a var cars= new Array; variable you create a new var person= new Object; object. 42

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

44 JavaScript Arithmetic 44 Example

45 JavaScript Functions 45

46 JavaScript Operators 46

47 JavaScript Comparison and Logical Operators 47

48 48

49 Calling a Function with Arguments 49

50 50

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; } 51

52 52

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. 53

54 Local JavaScript Variables 54

55 Global JavaScript Variables 55

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

57 JavaScript Events 57

58 JavaScript Math Object - 1 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 58

59 JavaScript Math Object - 2 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 59

60 60

61 JavaScript If...Else Statements 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 61

62 62

63 63

64 Different Kinds of Loops 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 64

65 JavaScript Loops 65

66 66

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]; } 67

68 68

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. 69

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 } 70

71 71

72 72

73 JavaScript Closures self-invoking functions Try 73

74 JavaScript Nested Functions Try 74

Manju Muralidharan Priya. CS4PM Web Aesthetics and Development WEEK 11

Manju Muralidharan Priya. CS4PM Web Aesthetics and Development WEEK 11 CS4PM Web Aesthetics and Development WEEK 11 Objective: Understand basics of JScript Outline: a. Basics of JScript Reading: Refer to w3schools websites and use the TRY IT YOURSELF editor and play with