ifi7174 lesson3

Download Ifi7174 lesson3

Post on 22-Jan-2018




0 download

Embed Size (px)


  1. 1. IFI7174.DT Lesson 3 JavaScript
  2. 2. JavaScript Is a lightweight Object Oriented Programming (OOP) language Why JavaScript? It helps you to add behaviors into your webpages It changes HTML Content It changes HTML Styles (CSS) 2015 @ Sonia Sousa 2
  3. 3. JavaScript Is typically used in browsers to power dynamic websites. add functionality; validate input, and communicate with web servers JS code is loaded and ran Inline within HTML code tags In blocks JS code 2015 @ Sonia Sousa 3
  4. 4. JavaScript Can be: Load as an external scripts External Inline within HTML code tags Embedded functions event change document.write("Hello, there!"); Embedded JS Example document.write("Oops"); 2015 @ Sonia Sousa 4
  5. 5. External JS Advantages It separates HTML and code It makes HTML and JavaScript easier to read and maintain Cached JavaScript files can speed up page loads 2015 @ Sonia Sousa 5
  6. 6. JS Embedded in HTML function myFunction() { document.write("Oops! The document disappeared!"); } Try it 2015 @ Sonia Sousa 6
  7. 7. JS inline with HTML My Web Page

    A Paragraph

    Try it function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } 2015 @ Sonia Sousa 7
  8. 8. The Document Object When an HTML document is loaded into a web browser, it becomes a document object. The document object provides properties and methods to access all node objects, from within JavaScript represents the root node of the HTML document It controls the element, text, attribute, and comment nodes 2015 @ Sonia Sousa 8
  9. 9. Document Object Model (DOM) starts by 1. browser window itself 2. document page, 3. the elements included on the page; and 4. their attributes. Source: Wikipedia The object hierarchy 2015 @ Sonia Sousa 9
  10. 10. How JS and the DOM cooperate When a web page is loaded, The browser creates a DOM of the page Like a tree Source: w3schools2015 @ Sonia Sousa 10
  11. 11. DOM Window documen t meta Textbox Radio button head body form[] link Imagestitle div ul li Establish the Order of things 2015 @ Sonia Sousa 11
  12. 12. How JS and the DOM cooperate JavaScript can change the HTML elements in the page the HTML attributes in the page the CSS styles in the page JavaScript can react to the events in the page This is done by object notation 2015 @ Sonia Sousa 12
  13. 13. Object notation Access to elements be referenced using dot notation starting with the highest-level object (i.e., window). But as the window is in the top hierarchy do not need to be refereed Objects can be referred to by name; or id; or by their position on the page document.getElementById("demo").innerHTML = "Hello JavaScript; 2015 @ Sonia Sousa 13
  14. 14. JavaScript Syntax Basic rules Ends with ; (semi-colons) ! is case sensitive ! Comments double slash (//) 1 line comment between /* and */ More than 1 line comment 2015 @ Sonia Sousa 14
  15. 15. JS programs A program is a list of "instructions to be "executed" by the computer These instructions are called statements JS statements are separated by semicolons ; A statement composed of: Values, Operators, Expressions, Keywords, and Comments. 2015 @ Sonia Sousa 15
  16. 16. JavaScript statements Statements includes Values, Operators, Expressions, Keywords, and Comments Values are Literal or variables Functions are a block of code that can execute some action Events are actions triggered by someone 2015 @ Sonia Sousa 16
  17. 17. Values Literal values are Numbers with or without decimals (10.50 or 1001) Strings Double or single quotes ("John Doe John Doe) Variables Are used to store data (var x; x = 6;) 2015 @ Sonia Sousa 17
  18. 18. JS Keywords To identify the JavaScript action to be performed. Keyword Description break Terminates a switch or a loop continue Jumps out of a loop and starts at the top do ... while Executes a block of statements, and repeats the block, while a condition is true for Marks a block of statements to be executed, as long as a condition is true function Declares a function if ... else Marks a block of statements to be executed, depending on a condition return Exits a function switch Marks a block of statements to be executed, depending on different cases try ... catch Implements error handling to a block of statements var Declares a variable 2015 @ Sonia Sousa 18
  19. 19. JS Statements A statement is the line of code that tell the browser to execute something document.getElementById("demo").innerHTML = "Hello!"; JavaScript statements Var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z; 2015 @ Sonia Sousa 19
  20. 20. JavaScript Statements Giving a command to the browser function myFunction() { document.write("Oops! The document disappeared!"); } Try it function myFunction() { document.write("Oops! The document disappeared!"); } 2015 @ Sonia Sousa 20
  21. 21. JS code and Blocks JS code blocks JS functions function myFunction() { document.write("Oops! The document disappeared!"); } 1. document.write("Hello, there!"); 2. document.getElementById("demo").innerHTML="Hello Dolly"; 3. document.getElementById("myDIV").innerHTML="How are you?; Define statements to be executed together JavaScript functions are statements grouped in blocks 2015 @ Sonia Sousa 21
  22. 22. JS and HTML Styles (CSS) JavaScript can change HTML elements (CSS) Styles Or validate input (data) Using methods, conditional and fuctions For instance, to change the text It uses getElementById() method document.getElementById("demo").innerHTML = "Hello JavaScript; 2015 @ Sonia Sousa 22
  23. 23. JavaScript Variables variables are "containers" of information We can name it using letters (like x) The variable can contain Letter, numerical values or expressions var x=5; var y=6; var z=x+y; "declaring" a variable assign a value var carname; carname="Volvo"; 2015 @ Sonia Sousa 23
  24. 24. Declaring (Creating) JS Variables Primitive data types Number var x = 5; String var carname = Volvo XC60"; Boolean var x = true; var y = false; 2015 @ Sonia Sousa 24
  25. 25. Declaring (Creating) JS Variables JS Array var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; var cars = ["Saab", "Volvo", "BMW"]; JavaScript Objects var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 2015 @ Sonia Sousa 25
  26. 26. Object (Properties and Methods) data (variables) as objects they have properties they have methods Object Properties Methods Car car.name = Fiat car.model = 500 car.weight = 850kg car.color = white car.start() car.drive() car.brake() 2015 @ Sonia Sousa 26
  27. 27. JS Operators Operators are used to assign values to variables using (=) var x = 5; var y = 6; Arithmetic operators Comparison operators Logical operators Operator Description + Addition - Subtraction * Multiplication / Division % Modulus ++ Increment -- Decrement 2015 @ Sonia Sousa 27
  28. 28. JS Operators Opera tors example results + x=y+2 Addition x=7 - x=y-2 Subtraction x=3 * x=y*2 Multiplication x=10 / x=y/2 Division x=2.5 ++ x=++y Increment x=6 -- x=--y Decrement x=4 == x==8 equal to false != x!=8 Not equal to true > x>8 greater than false < x= x>=8 greater than or equal to false x>8 < x= x>=8