1Computer Sciences Department Princess Nourah bint Abdulrahman University

And use

JavaScript

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

 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?

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

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

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

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

 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

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

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

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

 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

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

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

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

 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

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

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

21Computer Sciences Department

22Computer Sciences Department

JavaScript: Reacting to Events Computer Sciences Department

JavaScript: Reacting to Events Computer Sciences Department

JavaScript: Changing HTML Content Computer Sciences Department

JavaScript: Changing HTML Content Computer Sciences Department

JavaScript: Changing HTML Images Computer Sciences Department

JavaScript: Changing HTML Images Computer Sciences Department

 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

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

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 Computer Sciences Department

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

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

 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

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

Computer Sciences Department37

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

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

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

JavaScript Objects 41Computer Sciences Department

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

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

JavaScript Arithmetic 44 Example Computer Sciences Department

JavaScript Functions 45Computer Sciences Department

JavaScript Operators 46Computer Sciences Department

JavaScript Comparison and Logical Operators 47Computer Sciences Department

48Computer Sciences Department

Calling a Function with Arguments 49Computer Sciences Department

50Computer Sciences Department

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

52Computer Sciences Department

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 Local JavaScript Variables

Computer Sciences Department55 Global JavaScript Variables

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

Computer Sciences Department57 JavaScript Events

 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

 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

Computer Sciences Department60

 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

Computer Sciences Department62

Computer Sciences Department63

 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

Computer Sciences Department65 JavaScript Loops

Computer Sciences Department66

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

68Computer Sciences Department

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

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

71Computer Sciences Department

72Computer Sciences Department

73 Try JavaScript Closures self-invoking functions

Computer Sciences Department74 JavaScript Nested Functions Try