JavaScript

Question 1

Benefits of JavaScript

Answer 1

• user input (mouse, keyboard, etc.)
• modify HTML elements and CSS dynamically (change styles, etc.)
• analyze data like user input (validating form input, etc.)
• change content based on specific conditions (diff message for student vs teachers, etc.)

Question 2

JavaScript

Answer 2

• use variable names
• several types of variables: string, integer, float/double, array

Question 3

Arrays

Answer 3

• indexes such that each item has a position, starting at 0
• access individual elements using square brackets and an index
• ie Boolean and arrays, if colors = [“red”,”blue”]

Question 4

JS and CSS

Answer 4

• directly change element styles
• change classes or IDs
• advanced animations/transitions
• content can also be changed

Question 5

document.getElementBy__()

Answer 5

• ById, TagName, or ClassName
• ID element getter is the best one to use since it returns one specific object
• getting elements by tag or class may be helpful in specific cases in which an array of elements need to be accessed at once

Question 6

dot notation

Answer 6

• accessing levels of properties, so styles can be modified
• style is a property in HTML elements
• CSS styles are properties within style
• element.style.styleproperty
• eg. md.style.width
• after specifying a style, use ‘=’ and set the new value in quotation marks

Question 7

camel case

Answer 7

• equivalent to style properties that contain a hyphen in CSS
• backgroundColor = background-color

Question 8

HTML to JSS class change options
HTML: div id=”tb” class=”box”
JS: var tb = document.getElementbyId(“tb”);
tb.className = “newbox”;
tb.className = “box newbox”;

Answer 8

• single class is usually a replacement
• multiple classes are usually additions

Question 9

Event handling - event listeners

Answer 9

• style/content changes will typically be done as a result of an event
• user input events: mouse-based, keyboard-based
• load event
• timer events

Question 10

2 main ways to add event listeners

Answer 10

• inline: attach event listener as an attribute in the HTML element tag
• dot notation: use the addEventListener() function as a property on the element using dot notation

Question 11

Inline event listener

Answer 11

• starts with “on” followed by an event name
• eg. onclick, onmouseover, onmouseout, onfocus (focus on form field), onblur (leave a form field)

Question 12

2 types of timer events

Answer 12

• timeout: trigger a function once after a specified time has elapsed
• interval: trigger a function repeatedly in intervals of the specified time
• setTimeout(function, ms) or setInterval(function, ms)

Question 13

Conditionals

Answer 13

• portions of code will only execute if specific conditions are met
• if-else statements are used
• combined them with && (and) operator or use ||(or) operator

Question 14

Functions

Answer 14

• process that can be executed at any time, and any number of times
• call function –> myFunction();
• have input parameters which are placed within parentheses
• parameters make the function reusable and flexible to work in different scenarios

Question 15

what are the parameters to function average (x,y) {
var z = (x+y)/2;
document.write(“result: “ + z);
}

Answer 15

x and y

Question 16

Loops

Answer 16

• run code repeatedly in a row
• while-loop and for-loop
• contains 3 parts: variable initialization, condition, increment

Question 17

Form modifications

Answer 17

• hiding/showing fields
• changing the set of available options in a dropdown menu list
• automatically checking a series of checkboxes

Question 18

show/hide a form field

Answer 18

• changing display style
• x.style.display = “none”;
• x.style.display = “block”;

Question 19

Add a new text input box into the “con” container

Answer 19

var x = document.createElement(“input”)
x.type = “text”;
x.className = “contact”;
x.id = “provinceBox”;
var c = document.getElementById(“con”);
c.appendChild(x);

Question 20

validate web forms

Answer 20

• ‘maxlength’ and ‘required’ attributes
• real-time validation: keypress/onkeyup, onblur
• submission-time validation: onclick/onsubmit

Question 21

get input to examine for validation

Answer 21

• get elements by ID/class/tag
• use dot notation to retrieve the value of that element
• for text, password, and textarea, use element.value
• for radio button and checkboxes, use element.checked

Question 22

isNaN() function

Answer 22

checks if value is Not a Number