Benefits of JavaScript
- 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.)
JavaScript
- use variable names
- several types of variables: string, integer, float/double, array
Arrays
- 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”]
JS and CSS
- directly change element styles
- change classes or IDs
- advanced animations/transitions
- content can also be changed
document.getElementBy__()
- 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
dot notation
- 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
camel case
- equivalent to style properties that contain a hyphen in CSS
- backgroundColor = background-color
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”;
- single class is usually a replacement
- multiple classes are usually additions
Event handling - event listeners
- style/content changes will typically be done as a result of an event
- user input events: mouse-based, keyboard-based
- load event
- timer events
2 main ways to add event listeners
- 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
Inline event listener
- starts with “on” followed by an event name
- eg. onclick, onmouseover, onmouseout, onfocus (focus on form field), onblur (leave a form field)
2 types of timer events
- 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)
Conditionals
- 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
Functions
- 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
what are the parameters to function average (x,y) {
var z = (x+y)/2;
document.write(“result: “ + z);
}
x and y
Loops
- run code repeatedly in a row
- while-loop and for-loop
- contains 3 parts: variable initialization, condition, increment
Form modifications
- hiding/showing fields
- changing the set of available options in a dropdown menu list
- automatically checking a series of checkboxes
show/hide a form field
- changing display style
- x.style.display = “none”;
- x.style.display = “block”;
Add a new text input box into the “con” container
var x = document.createElement(“input”)
x.type = “text”;
x.className = “contact”;
x.id = “provinceBox”;
var c = document.getElementById(“con”);
c.appendChild(x);
validate web forms
- ‘maxlength’ and ‘required’ attributes
- real-time validation: keypress/onkeyup, onblur
- submission-time validation: onclick/onsubmit
get input to examine for validation
- 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
isNaN() function
checks if value is Not a Number
