Intro

Question 1

JavaScript

Answer 1

• a scripting language meaning that it does not need compile

- programming language that provides instructions to a web browser

Question 2

Ways to include JavaScript in your page

Answer 2

alert(“Hello Everybody”)

-use the script tags and place in the JS methods.

or use the source attribute as long as js file is in the same directory.

src= “alert.js”

Question 3

Datatypes

Answer 3

-specialized form of information.

-string: sequence of characters
-number: integer and floats
-boolean
-object: represents a group of key/value pairs
-date: represents date/time
-array: represents a collection of data
var arr= [1,’232’,582]

• undefined: value not yet defined
• null; empty value

Question 4

variable

Answer 4

a temporary storage unit that stores data

ex: var variableName;

Question 5

JS Naming rules

Answer 5

1. follow camelCase convention (start w lower case)
2. names must begin w letter, _, or $
3. numbers and Unicode escape sequence can be used after the first character
4. names are case sensitive

Question 6

variable value assignment

Answer 6

-use = sign then brackets
examples:

var name = "Jennifer";
var num = 3;

ex: var carSpecs = {
numWheels: 4,
engine: 'V6',
interior: 'cloth'
};

Question 7

Single and multiline comments

Answer 7

single - //

multiline - /*comment */

Question 8

to print to console

Answer 8

console.log(“”);

Question 9

creating function

Answer 9

group of block statements

use function keyword:

      function talk() {
              alert("Hello!");
        }

    talk();

Question 10

Hoisting

Answer 10

• a variable declared without using the var keyword, makes it available outside of the function
• hoisting is the process of assigning loose variables to the global window object

Question 11

Creating objects using literal notation

Answer 11

objects are key/value pairs

ex: var Person = {
numWheels: 4,
property: value,
property: value
};

OR use objects constructor

ex: var Person = new Object();

Question 12

dot notation

Answer 12

access properties of an object using a dot

Person.name = “Adam”;

Question 13

array notation

Answer 13

access properties using brackets

ex: Person[“name”] = “Adam”;

Question 14

defining a method

Answer 14

a method that is assigned as property of an object

var Person = {
givenName: function {
         //....
      }
}

Question 15

this keyword

Answer 15

this keyword refers to the current executing context but outside of it, it refers to the global window object

Question 16

HTML DOM - Document Object Model

Answer 16

**It is the programming interface that allows you to retrieve and manipulate elements of a webpage; otherwise referred to as document. **

**DOM, provides a tree-like structure or representation of all of the elements and their corresponding content of a webpage. Each element is referred to as a node. **

A browser’s DOM also provides methods for adding/removing/editing content. It provides what we call an API, which stands for Application Programming Interface

Question 17

API - Application Programming Interface

Answer 17

An API is like a recipe book that lists several methods used for a particular purpose. In our case, we use the API to manage elements on a webpage as well as manage user interactions such as button clicks.

Question 18

Accessing the DOM methods

Answer 18

specific methods that are used to retrieve elements or arrays of elements from the webpage document.

getElementById - will retrieve the first matched element with the specified id.

var doc = document.getElementById(“myID”)

getElementsByTagName – will retrieve an array of elements (list?) of the specified tag.

For example, you can retrieve all paragraphs on the page by passing in “p”, which corresponds to the paragraph tag.

getElementsByClassName – will retrieve an array (list?)of elements that have the specified class.

Question 19

Changing HTML : innerHTML

Answer 19

• text-based elements have the property innerHTML that you can access to change the contained text
  element. innerHTML = “new content”;

Question 20

Changing HTML : setAttribute()

Answer 20

• attributes can be set with this function

element. setAttribute(“name”, value);

Question 21

Changing CSS : use style property

Answer 21

• use style property to change the CSS of an element

element. style.property = value;

Question 22

Adding/Deleting elements from a page/document methods

Answer 22

createElement()
creates an element of the specified tag

appendChild()
adds a child element to the one specified

removeChild()
deletes a child element of the one specified

Question 23

Event Handling - events definition

Answer 23

-events are actions that occurs, initiated by user or within browser

ex:
user clicking their mouse

Question 24

Event handlers

Answer 24

event handlers/listeners are
registered with a particular event and notify when an event occurs

listeners can be added to DOM elements

Question 25

Adding even listener

Answer 25

Use addEventListener method to register event

Click Me!!

var btn = document.getElementById(“clicker”);

btn.addEventListener(“click”, function() {alert(“The button was clicked!!!”) } );

Question 26

Event Names

Answer 26

• click: occurs when user clicks their mouse
• change: occurs when an option is selected from a dropdown
• mouseover: occurs when a cursor is over an element
• keydown: occurs when a key is pressed
• load: occurs when element loads
• focus: occurs when an element has focus
• blur: occurs when an element loses focus
• submit: occurs when a form is submitted

Question 27

Callback function

Answer 27

The function that we pass to addEventListener is called a callback function.A callback function is a function that is a parameter.Typically, the method will execute the callback after all of its other statements complete.Callbacks are used in several other types of methods as well.

Question 28

IE Nuiances

Answer 28

attachEvent() same as addEventListener() but in older versions

Question 29

prevent default actions

Answer 29

use preventDefault() to stop default event actions

same as….

use preventDefault() to stop execution of default actions associated with an event

Question 30

Event propagation

Answer 30

-how events are moved throughout elements in the browsers

Question 31

Event propagation

Answer 31

capturing() - phase of event propagation through DOM from the root to the node of the target

bubbling() - phase of event propagation outward from the target up the DOM to the root node

When an event first occurs,such as a user click,the event is emitted fromthe topmost element in theDOM, which is the window.And, it moves down thedocument tree structure until itreaches the origination or targetof the event. This iscalled capturing. The eventis emitted and captured atthe location of the target.In contrast, after capturing, thebubbling phase occurs and eventsare propagated back up theDOM until it reaches thewindow object. The event issaid to bubble up towindow. By default, event listenersare triggered on the bubblingphase.

Question 32

phase: either true (event triggered under capturing) or false (event triggered under bubbling)

Answer 32

By default, event listeners are triggered on the bubbling phase. To set the phase programmatically,you would add a thirdparameter to the addEventListenermethod and specify a Booleanvalue. If this value istrue, the listener is setto trigger under capturing, ifit is false it willtrigger under bubbling.