Skip to content

Files

Latest commit

 

History

History
237 lines (191 loc) · 11.5 KB

201-session-06.md

File metadata and controls

237 lines (191 loc) · 11.5 KB

From the Duckett JS book

Chapter 3: “Object Literals” (pp.100-105)

What is an object?

Objects group together a set of variables and functions to create a model of something you would recognize from the real world. In an object, variables and functions take on new names.

In an Object: Variables become known as properties

If a variable is part of an object, it is calles property. Properties tell us about the object, such as the name of a hotel or the number of rooms it has.

In an Object: Functions become known as methods

If a function is part of an object, it is called a method. Methods represent tasks that are associated with the object. For example, you can check how many rooms are available by subtracting the number of booked rooms from the total number of rooms. like variables and named functions, properties and methods have a name and a value. In an object that value is called a key; cannot have two keys with the same name; the value of a property can be a string, number, boolean, array or even another object;

Creating an object in literal notation;

note the object is the curly braces and their content; separate each key from its value with a colon; separate each property and method with a comma;

Creating an Object
var hotel = {
  name: 'Quay',
  rooms: 40,
  booked: 25,
  gym: true,
  roomTypes: ['twin', 'double', 'suite'],
  checkAvailability: function() {
    return this.rooms - this.booked;
  }
};

key value

Accessing an Object and Dot notation

To access a property or method of an object you use the name of the object, followed by a period, then the name of the property or method. This is known as dot notation.

Also we can access the properties or methods of an object using square bracket syntax.

Dot notation
var hotelName = hotel.name;
var roomsFree = hotel.checkAvailability();
Square bracket syntax
var hotelName = hotel['name'];
var roomsFree = hotel['checkAvailability']();

Square bracket syntax is most commonly used when:

  • The name of the property or method contains special characters (such as a dash)
  • The name of the property is a number (technically allowed, but should generally be avoided)
  • A variable is being used in place of the property name.

Chapter 5: “Document Object Model” (pp.183-242)

Document Object Model (DOM)

The Document Object Model specifies how browsers should create a model of an HTML page and how JavaScript can access and update the contents of a web page while it is in the browser window.

The DOM is neither part of HTML, nor part of JavaScript; it is a separate set of rules. It is implemented by all major browser makers, and covers two primary areas:

Making a Model of the HTML Page

When the browser loads a web page, it creates a model of the page in memory.

The DOM specifies the way in which the browser should structure this model using a DOM tree. The DOM is called an object model because the model (the DOM tree) is made of objects.

Each object represents a different part of the page loaded in the browser window.

Accessing and changing the HTML Page

The DOM also defines methods and properties to access and update each object in this model, which in turn updates what the user sees in the browser.

Body of HTML Page

<html>
  <body>
    <div id = "page">
      <h1 id ='header'>List</h1>
      <h2>Buy groceries</h2>
      <ul>
        <li id = "one" class = "hot"><em>fresh</em> figs</li>
        <li id = "two" class = "hot">pine nuts</li>
        <li id = "three" class = "hot">honey</li>
        <li id = "four">balsamic vinegar</li>
      </ul>
      <script src = "js/list.js"></script>
    </div>
  </body>
</html>

DOM Tree Dom Tree

As a browser loads a web page, it creates a model of that page. The model is called a DOM tree, and it is stored in the browsers' memory. It consists of four main types of nodes.

The Document Node

Every element, attribute, and piece of text in the HTML is represented by its own DOM node. At the top of the tree a document node is added; it represents the entire page. When you access any element, attribute, or text node, you navigate to it via the document node. It is the starting point for all visits to the DOM tree.

Element Nodes

HTML elements describe the structure of an HTML page. The <h1> - <h6> elements describe what parts are headings; the <p> tags indicate where paragraphs of text start and finish; and so on. To access the DOM tree, you start by looking for elements. Once you find the element you want, then you can access its text and attribute nodes if you want to. This is why you start by learning methods that allow you to access element nodes, before learning to access and alter text or attributes.

Attribute Nodes

The opening tags of HTML elements can carry attributes and these are represented by attribute nodes in the DOM tree. Attribute nodes are not children of the element thar carries them; they are part of that element. Once you access an element, there are specific JavaScript methods and properties to read or change that element's attributes. For example, it is common to change the values of cl ass attributes to trigger new CSS rules that affect their presentation.

Text Nodes

Once you have accessed an element node, you can then reach the text within that element. This is stored in its own text node. Text nodes cannot have children. If an element contains text and another child element, the child element is not a child of the text node but rather a child of the containing element. (See the element on the first

  • item.) This illustrates how the text node is always a new branch of the DOM tree, and no further branches come off of it.

    Working with the DOM tree

    Accessing and updating the DOM tree involves two steps:

    Locate the node that represents the element you want to work with. Use its text content, child elements, and attributes

    Step 1: Access The Elements

    Select an individual element node

    + getElementById('id')- uses the value of an element's id attribute (which should be unique within the page)
    + querySelector('css selector') - uses CSS selector, and returns the first matching element
    #### Select multiple elements (Nodelists)
    + getElementsByClassName('class')- selects all elements that have a specific value for their class attribute
    + getElementsByTagName('tagName') - selects all elements that have the specified tag name
    + querySelectorAll('css selector')- uses a CSS selector to select all matching elements.

    Traversing between Element Nodes

    + parentNode- selects the parent of the current element node (which will return just one element)
    + previousSibling / nextSibling - selects the previous or next sibling from the DOM tree
    + firstChild/ lastChild - select the first or last child of the current element.
    

    Step 2: Work with those Elements

    Access / Update text Nodes

    • nodeValue- this property lets you access or update contents of a text node

    Work with HTML Content

    • innerHTML- allows access to child elements and text content
    • textContent- allows access just to the text content
    • createElement(), createTextNode(), appendChild()/removeChild()- let you create new nodes, add nodes an dremove nodes froma tree.

    Access or update Attribute Values

    • hasAttribute()- checks if an attribute
    • getAttribute()- gets its value
    • setAttribute()- updates the value
    • removeAttribute()- removes an attribute

    caching DOM querries:

    methods that find elements in the DOM tree are called DOM querries. When you work w an element > 1 u should use a var to store the results of this querry so the interpreter doent have to search again. You are storing the location of the elements within the DOM tree in a variable. The properties and methods of that element node work on the variable.

    var itemOne = getElementById('one'); doesnt store the element but a reference to where that element node is on the DOM tree; to access the text content of that element, u might use the variable name itemOne.textContent.

    Methods that return a single element node

    • selecting elements using ID attributes - getElementById

    select the element and store it in a variable; var el = document.getElementById('one'); - select the element and store it in a variable; el.className = 'cool'; - update the value of the class attribute to ="cool";

    • selecting elements using querySelector - css selector

    returns only the first of matching elements;

    Methods that return one or more elements in a node-list

    comes back in a node list like an array - with index number 0-...; but it is a type of object (type of) --- called a collection; --- you can select a specific item out of that node-list; --- you can loop through the items of the list and change and perform the same statements on each of the element nodes

    • selecting elements using class attributes

    var elements = document.getElementsByClassName('hot'); // Find hot items

    if (elements.length > 2) {     // If 3 or more are found
         
         var el = elements[2];     // Select the third one from the Nodelist
         el.className = 'cool';    // Change the value of its class attribute
    }
    
    • selecting elements by tag name

    var elements = document.getElementsByTagName('li');   // Find <li> elements
    
    if (elements.length > 0) {    // If 1 or more are found
    
     var el = elements[0];      // Select the first one using array syntax
     el.className = 'cool';     // Change the value of the class attribute
    }
    
    • querrySelectorAll - css selector

    use CSS selector syntax to select one or more elements and return all of those that match;

    Looping through a Nodelist

    If you want to apply the same code to numerous elements, looping through a Nodelist is a powerful technique.

    It involves finding out how many items are in the Nodelist, and then setting a counter to loop through them, one-by-one.

    var hotItems = document.querySelectorAll('li.hot');  //Store Nodelist in array
    
    if (hotItems.length > 0) {    // If it contains items
    
      for (var i = 0; i < hotItems.length; i++) {    //Loop through each item
          hotItems[i].className = 'cool';  // Change value of class attribute
      }
    }
    

    Explanation of an example above: In this example, the Nodelist is generated using querySelectorAll(), and it is looking for any <li> elements that have a class attribute whose value is hot. The Nodelist is stored in a variable called hotItems, and the number of elements in the list is found using the length property. For each of the elements in the Nodelist, the value of the cl ass attribute is changed to cool .

    Accessing & Changing a text Node

    var itemTwo = document.getElementById('two');  //Get second list item
    var elText = itemTwo.firstChild.nodeValue;   // Get its content
    elText = elText.replace('pine nuts', 'kale');  // Change pine nuts to kale
    itemTwo.firstChild.nodeValue = elText;   // Update the list item
    

    Adding an element to the DOM tree

    Create a new element and store it in a variable 
    var newEl = document.createElement('li');
    Create a text node and store it in a variable 
    var newText = document.createTextNode('quinoa');
    Attach the new text node to the new element 
    newEl.appendChild(newText);
    Find the position where the new element should be added 
    var position = document.getElementsByTagName('ul')[0];
    Insert the new element into its position
    position.appendChild(newEl);
    

    Removing an element from DOM tree

    var removeEl = document.getElementsByTagName('li')[3];  // The element to remove
    var containerEl = removeEl.parentNode;   // Its containing element
    containerEl.removeChild(removeEl);   // Removing the element