DOM review

  • Webpage are built upon the DOM
    • Document Object Model
    • Structures documents like a tree
    • Every node has one parent, and possibly many children
    • Nodes have properties, methods and events
  • The DOM and the javascript
    • page content is represented by DOM
    • Scripting language (javascript) use the DOM to interact with the document
  • How does it work?
    • Accessing the DOM is done with an API – Application Programming Interface
      • No matter which browser, no matter which scripting language, the API is the same
  • The DOM objects/elements
    • document – the root of the page
      • document.URI, document.height, document.links, document.bgColor…
    • element – a node in the tree
      • returned by a member of the API
    • nodeList – any array (group) of elements
      • document.getElementByTagName(‘p’) would return a set of nodes
    • attribute
      • A node in the DOM, though rarely used that way. Another way to manipulate/change the document
  • Specific APIs
    • document.getElementById(id)
    • document.getElementsByClassName(class)
    • element.innerHTML
    • element.style
    • element.setAttribute(attribute, value)
    • element.removeAttribute(attribute)

Javascript Output

  • Interactivity
    • HTML5 and CSS3 are not really interactive
    • New elements and pseudo-classes can only go so far
  • What can Javascript do?
    • Read and write HTML elements
    • Reacts to events (mouse events, keyboard events, etc.)
    • Validate data
    • Dectect visitor’s browser
    • Create cookies
  • Javascript Output
    • Javascript doesn’t have a built-in print function
    • Data is displayed via
      • an alert box using window.alert()
      • a prompt using window.prompt()
      • HTML output using document.write()
      • HTML element using innerHTML()
      • the browser console using console.log()
  • alert()
    • In JS, an alert is a pop-up window that display information
      • alert(“My Message Here”);
    • The parentheses mean that this is a function
  • prompt()
    • very similar to alert, but wants input
      • prompt(“Enter your name: “);
  • document.write()
    • What if we want something permanent?
    • document.write() writes directly to the page
      • document.write(“Time to learn Javascript”);
    • Here we have combined a function with an object that will add to page
    • Not usually recommended since it can easily be misused
  • innerHTML
    • To change the contents of the DOM, use innerHTML combined with the element you want to change
      • element.innerHTML = “Time to learn Javascript”; // no parentheses!
    • The element will come from the API
  • console.log()
    • This option write the data to the browser console
      • console.log(“Leave a secret message”);
    • The console is a place to see what is going on during the execution of your program
  • The console
    • You should be utilizing the console by now
    • Does more than take “print” statements, also provides debugging information for javascript, HTML, CSS
  • Debugging
    • Sarari: Perferences -> Advanced Check the Show development menu in menu box
    • Google Chrome: Developer -> Javascript Console
    • Firefox: Tools -> Console
    • Edge: F12

Variables

  • Storing Data
    • Part of learning to program is learning to store data
    • In Javascript, data is stored in variables
    • To use a variable, you have to declare it
      • var name; // var: keyword, name: variable name
        Varaible Name Memory Location Value “stored in computer”
        name 11001100001101 “Christopher”
        age 11001100001110
        11001100001111
        11001100010000
        11001100010001
        11001100010011
  • Variable Names
    • Consists of letters, digits, underscores, and dollar sign ($)
    • Can not start with a digit
    • Are case-sensitive…
      • name, Name, naMe, NAME are all different variables
    • Should be mnemonic (meaningful)
  • Variable assignments
    • It is silly to have a variable if you are never going to use it
    • You can assign values using the = operator
      • var name = “Colleen”;
  • Assignment statements
    • I like to refer to the LHS and RHS of statement
    • LHS – the variable being updated
    • RHS – the new value that will be stored in the variable
      • +”Colleen” = name;+ // no
  • Using a variable
    var name = prompt("What is your name?");
    document.write(name);
    var date = Date();
    document.write(date);
    var location = window.loation;
    document.write(location);
    

Data Types

  • Assignments
    var name = prompt("What is your name?");
    var name = Date();
    var name = window.location;
    
  • Types
    • In many programming languages, variables need to have a single type
    • In Javascript, a variable can take on many different types
    • What are these types?
  • Number
    • Numerical values
      • with or without decimals
        var width = window.innerWidth;
        var pi = 3.14;
        
  • String
    • A String is a collection of characters (letters, numbers, punctuation,…)
    • To create a string you put the value in quotes “…”
      var location = window.location;
      var name = "Colleen";
      
  • Boolean
    • In programming, a boolean value is one that is either true or false
      var status = false
      var windowStatus = window.closed;
      
    • Later, we will learn how to write our own boolean expression to check if things are true or false
  • Object
    • Sometimes the variables are more complex
      • A node in the DOM are good example
      • var topic = document.getElementById('myID');
    • Nodes are more than a single value, they have attributes
  • Array
    • How can a function return more than one value?
    • var links = document.getElementsByTagName('a');
  • Accessing Array Elements
    • Arrays store multiple value using a variable name, and an index for each element in the array
      var links = document.getElementsByTagName('a');
      document.write(links[0])
      

Operators and Expressions

  • Statements
    • We have been using statements to execute our Javascript code
    • Statement often have expression
    • Expression produce values
  • Expression
    • So if you think back to LHS = RHS, the LHS is a variable and the RHS is what generates the value
    • What are our tools for generating values on the RHS?
  • Assignment Operators
    Operator Example Value stored in x
    = x = 5 5
    = y = 12
    x = y 12
  • Arithmetic Operators
    Operator Example Value stored in x
    + x = 2 + 5 7
    x = 5 – 2 3
    * x = 2 * 5 10
    % x = 5 % 2 1
  • More Operators
    Operator Example Value stored in x
    ++ x = 5; 6
    x++;
    x = 12;
    x–; 11
    += x = 2;
    x += 5; 7
  • String Operators
    Operator Example Value stored in x
    + x = “Hi” + “There” “HiThere”
    + x = “Hi” + 5 “Hi5”
    += x = “Hi”
    x += “There” “HiThere”
  • Boolean Operators
    • We can also use operators to compare values
    • Assume x = 12;
      Operator Example Returns
      == x == 5 false
      == x == 12 true
      != x != 5 true
    • Assume x = 12;
      Operator Example Returns
      > x > 12 false
      >= x >= 12 true
      < x < 12 false
      <= x <= 12 true
    • Assume x = 12;
      Operator Example Returns…
      == x == “12” true
      = x = “12” false
      !=== x !=== 12 false
  • Logical Operators
    • Assume x = 12
      Operator Example returns…
      && (15 > x) && (x > 5) true
      both side must be true
      || (15 > x)||(x > 5) true
      at least one side must be true
      ! !(x == 12) false
Notice: compact(): Undefined variable: limits in /var/www/html/wp-includes/class-wp-comment-query.php on line 853 Notice: compact(): Undefined variable: groupby in /var/www/html/wp-includes/class-wp-comment-query.php on line 853

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *