Week3

• Document Object Model (DOM)

  The data representation of the objects that comprise the structure and content of a document on the web
• The DOM represents the page so that programs can change the document structure, style, and content
• The DOM represents the document as nodes and objects so that programming languages can connect to the page
• JavaScript


  An interpreted language (with JIT support) where each browser has its own JavaScript engine which executes our Client-side scripts
• "Browser Wars" have ensued in recent years, resulting in a vast increase in the performance of Client-side JavaScript
• JavaScript Engines


  • Google Chrome - V8 Engine
  • Microsoft Edge - Chakra Engine
  • Mozilla Firefox - Spidermonkey Engine
  • Apple Safari - JavaScript Core (Nitro)
• Client-side scripting


  Allows us to create more responsive web applications
• Major uses of Client-side JavaScript

  • Responding to UI events (clicks, hovers, focus)
  • Client-side validation (e.g. form processing)
  • Injecting/Modifying HTML content on the fly using the DOM
  • Dynamically changing the look/feel of HTML elements by controlling the CSS styling
  • Animations/Fades/Transitions
• What JavaScript can do

  • Change all the HTML elements in the page
  • Change all the HTML attributes in the page
  • Change all the CSS styles in the page
  • Remove existing HTML elements and attributes
  • Add new HTML elements and attributes
  • React to all existing HTML events in the page
  • Create new HTML events in the page
• JavaScript data types


  • Core data types: number, string, Boolean, array, object, function
  • Browser/DOM types: Document, Event, HTMLElement, Window
  • User-defined types
• JavaScript is a dynamically typed language
• We include our JavaScript libraries first, and then any custom JS file(s)
• Ways to access HTML elements with JavaScript

  • Finding by id
  • Finding by tag name
  • Finding by class name
  • Finding by CSS selectors
• querySelector and querySelectorAll


  Newer, all-in-one methods to select elements
• DOM Manipulation using JavaScript (EVENTS)

  1. getAttribute()

  2. setAttribute()

  3. appendChild()

  4. append()

  5. prepend()

  6. removeChild()

  7. remove()

  8. createElement()

  9. innerText

  10. innerHTML

  11. style

  12. value
• JavaScript runs inside a sandbox, so it has limited access to our machine resources
• Resources JavaScript has access to

  • Window
  • Navigator
  • Screen
  • Location
• JavaScript Display Possibilities


  • Writing into an HTML element, using innerHTML
  • Writing into the HTML output using document.write()
  • Writing into an alert box, using window.alert()
  • Writing into the browser console, using console.log()
• JQuery


  A JavaScript Library that simplifies DOM Traversal, searching and manipulation
• Document.ready function


  Prevents code from executing before the initial DOM has been built
• $() function


  Represents a selector in the same way as querySelector or getElementByID
• Useful JQuery Selectors


  • $("p") - select all paragraphs
  • $("img") - select all images
  • $(".anExample") - select all HTML elements using class "anExample"
  • $("#yetAnother") - select the HTML element with id "yetAnother"
• Features


  • DOM Selection
  • DOM Manipulation
  • Special Effects
  • Event Handling
  • AJAX
  • Cross browser support
• DOM Selection


  Provide selectors to retrieve DOM elements
• DOM Manipulation


  Manipulate DOM elements using various jQuery functions: adding or removing elements, modifying html/css contents
• Special Effects


  Show/Hide elements, fade-in/out, sliding, animations
• Event Handling


  Include functions for DOM events
• AJAX


  Includes AJAX functions to load data from server without reloading whole page
• The major feature of jQuery is the simplification of DOM Traversal, searching and manipulation, using its $ syntax
• Document.ready function


  The starting point for all jQuery code to be integrated into your website (whether its Static or Dynamic, jQuery doesn't care...)
• Useful jQuery Selectors


  • $("p") - select all paragraphs
  • $("img") - select all images
  • $(".anExample") - select all HTML elements using class "anExample"
  • $("#yetAnother") - select the HTML element which uses id "yetanother"
• DOM Manipulation Methods


  • text()
  • html()
  • val()
  • attr()
• text()


  Sets or returns the text content of selected elements
• html()


  Sets or returns the content of selected elements (including HTML markup)
• val()


  Sets or returns the value of form fields
• attr()


  Used to get and set attribute values
• css()


  Sets or returns one or more style properties for the selected elements
• To return the value of a specified CSS property, use css("propertyname");
• To set a CSS Property, use css("propertyname","value");
• To set multiple CSS Properties, use css({"propertyname":"value","propertyname":"value",...});