Document Object Model (For JS)

Question 1

Types of Javascript in Website

Answer 1

Inline - This works similar to inline CSS, but instead of ‘style’ property, we use [ onload = “ js-command( ‘ argument ‘ ) “ ]
Internal - When scripts are included in the HTML, right at the end - before the closing body tag - and b/w open/close ‘script’ tag.
External - When an external file is linked to HTML document, we call it external JS.

Question 2

DOM

Answer 2

Helps in categorizing all the elements in an HTML so they can be selectively targeted by javascript in order to modify them.

Question 3

Some frequent commands

Answer 3

some-dom-element-parent . firstElementChild = selects the first child of a parent DOM targeted
some-dom-element-parent . lastElementChild = selects the last child of a parent DOM targeted
some-dom-element . click ( ) = simulates a click on targeted element
some-dom-element . innerHTML = changes the HTML thats being targeted
some-dom-element . textContent = changes the content for the element targeted, but no change in HTML.

document . querySelector ( ‘HTMLtag / class / id’ ) = Targets the first occurence of element mentioned w/i bracket
document . querySelectorAll ( ‘HTMLtag / class / id’ ) = Targets all occurence of the mentioned element and returns an array as o/p

Question 4

What should I always remember about querying for an DOM object?

Answer 4

The fact that when I query for an object - the o/p might be an array and to access the element, I will need to specify array index, without which - I will not get the expected result - and worse, will waste a bunch of time not knowing where I am doing wrong.

Its a good idea to open up the browser and use the console window to target and ‘get’ the properties of the particular element first before seeing how to change them.

Question 5

Changing CSS from JS

Answer 5

document.querySelector( ‘tag’ ) . style . css-property-camelCased = “the value passed as string”

Example -

document.querySelector( ‘div’ ) . style . backgroundColor = “midnightblue”;

Question 6

Query Class List and keeping stylesheeet separate from JS

Answer 6

Can be used to list all the classes attacked to an element.

document. querySelector(“HTMLtag/class/id”).classList = Lists the classes related to the target object
document. querySelector(“HTMLtag/class/id”).classList.add = self explanatory
document. querySelector(“HTMLtag/class/id”).classList.remove = self explanatory

These can be used to keep the CSS sheet separate from Javascript.

Question 7

Getting Attributes and Setting Attributes

Answer 7

document. querySelector(‘HTMLtag/class/id’).getAttribute(‘the-property-to-get’);
document. querySelector(‘HTMLtag/class/id’).setAttribute(“the-property-to-set” , “what-to-change attribute-to”) ;

Question 8

Add Event Listener

Answer 8

Dom-object-target.addEventListener (“type-of-event” , firstFunct );

function firstFunct ( arguments )
{
       code here;
}

OR

dom-object-target.addEventListener (“type-of-event” , function ( ) { code here; } );

The purpose of this METHOD is to listen to type of event specified as first parameter and then run the function specified as second parameter.

type-of-event —–> https://developer.mozilla.org/en-US/docs/Web/Events

Question 9

Higher order function

Answer 9

when a function calls another function as an argument.

Question 10

Play Audio

Answer 10

var sound = new Audio( 'location of track' );
sound.play( );

play( ) is method to play a sound.

Question 11

Creating an ‘Object’

Answer 11

Object is a kind of data type, which helps us to store multiple other types of data namely - multiple string, integer and boolean.

Example

let myVar = {
property1: value1;
property2: value2;
property3: string1;
}

And to access one of these property, we pass the following command:

myVar . property1

Question 12

Initialize an Object Constructor Function

Answer 12

let myVar = new MyVar ( “values-here-separated-by-comma”, “like here in the example” );

function MyVar ( "passed arguments from where this is called", "gets caught here")
{
               this.property1 = passed arguments from where this is called;
               this.property2 = gets caught here;
               this.method1 = function( ) {   //code here;   } 
}

So when I pass myVar.method1 —–> It will execute the function which is written in method1.

NOTICE - the function is not Camel-cased anymore, and first letter is capitalized. That is how we differentiate between object name and function name!

NOTICE2 - the constructor function can also have a function too that can be called to perform an operation.

Question 13

Switch Case

Answer 13

When if-else become longer and very specific - use Switch case.

switch ( variable )
{
   case value-of variable for 1st case:
   {
        code here;
        .
        .
        break;      // break statement is very important here.
   }
   case value-of variable for second case:
   {
        code here;
        .
        .
        break;      // break statement is very important here.
   }
   default:              //when none of the case match
   {
        code here;
        .
        .
        break;      // break statement is very important here.
   }
}

Question 14

Simple animation with JS and timeout

Answer 14

Simple animation with JS can be doneby adding/removing classes with different CSS, hence changing the look. Timing it with the setTimeout( function ( ) { } , delay ) method - we can do some simplistic animation.