Web Dev - Quiz 4: JavaScript
javascript variables
- initialized by var = - variable name must start with a letter - do not need to specify the type when initializing i.e. var [name of it] = value
what are the 2 ajax methods?
"GET" or "POST"
logical operators
&& [and] || [or] ! [not]
what does AJAX stand for?
*A*synchronous *J*avaScript *a*nd *X*ML
What does JSON stand for?
*J*ava*S*cript *O*bject *N*otation
javascript if statements
conditions placed inside parentheses, followed by { that contains what will happen if it runs
using the event listener method
connects an existing function to a listener on an element in a cleaner way document.getElementbyId("click-me").addEventListener("click," incrementText/someOtherFunction); function incrementText() { code }
which request requires an extra line: post or get?
post http.setRequestHeader("content-type", "application/x-www-form-urlencoded")
onreadystatechange
property of the XMLHttpRequest to provide a function that will be called when the state of the XMLHttpRequest is change; gets called every time readyState changes; *where you handle the code that you want to run when the state of the ajax call changes (when the whole process is finished)*
What format will many APIs expect data to be in?
JSON format
how do you parse JSON into Javascript objects?
JSON.parse(jsonText);
Where can Javascript be placed?
anywhere in the head or body of your HTML
Where is the best place to put your Javascript?
at the end of the body so that they will be loaded after all of the HTML has been rendered
how do you start an ajax request?
var http = new XMLHttpRequest();
what are the options for async?
true or false (true = should be asynchronous, usually is true)
JavaScript
an object-oriented, dynamically typed programming that is designed to run in the browser and interact with a webpage
What does DOM stand for?
Document Object Model
how do you send an ajax request?
http.send()
what does this.status = 200 mean?
the request was successful without any errors
what are 3 methods to send form data?
1. Build a URL encoded string of form data 2. Use a FormData Object 3. use JSON
comparison operators
== equal to *=== equal value and equal type* != not equal *!== not equal value or not equal type* > greater than < less than >= greater than or equal to <= less than or equal to
What is DOM?
a fully-object oriented representation of the web page, can be modified with Javascript; represents what is actually shown by your browser at a given point in time; *a standard for how to get, change, add, or delete HTML elements*
document.getElementsByClassName(name)
Find elements by class name; returns an array-like collection of elements that must be iterated over with a loop
What is JSON?
a text-based solution for encoding data as javascript object; language independent; common way to pass data between servers and browsers
data attributes
allow you to save custom attributes in the HTML that you can reference in javascript; names use start with "data-" and contain at least 1 letter after the dash, name cannot contain any uppercase letters
callback function
a cleaner way to handle the AJAX response by creating a function somewhere in your code and then calling it from the onreadystatechange function (see slide 15 for an example)
this.responseText
contains the response from the AJAX request in a string format
this.response
contains the response from the AJAX request in whatever format the server returns - can be an array, object, HTML doc, or a string
for loops
for (i=0; i (comparison/logical statement to check and decide when loop ends); i++)
how do you create a new element HTML using DOM?
document.createElement("element name")
how are event handlers added to an element?
document.getElementbyId("id").onclick = function(){code} OR use event listener
how do you change the attribute (i.e. "src" or "href") value of an HTML element?
element.[attributeName] = "new value"
how do you add an HTML element?
element.appendChild(element)
how do you change the inner HTML of an element?
element.innerHTML="new html";
how do you edit the inner text of an element?
element.innerText = "new html"
how do you remove an HTML element?
element.removeChild(element)
how do you replace an HTML element?
element.replaceChild(element)
how do you change the attribute (i.e. "src", "href") value of an HTML element?
element.setAttribute("attribute", "value")
how do you change the style of an HTML element?
element.style.[propertyName (i.e. color, font-family)] = "new value"
document.getElementById("myForm").elements.namedItem("name").value
gets a form input value by name (where myForm would be replaced with Id of your form, name replaced w/ name of the input you want to select)
document.getElementById(id)
gets one element by id
how do you actually make an ajax request?
http.open(method, url, async)
**what should you check for before processing the AJAX response?
if this.readyState == 4 && this.status == 200
What does AJAX do?
it's a way to - update a web page without reloading the page - request and receive data from a server after the page has loaded - send data to a server in the background
while loops
loops through a block of code as long as the specified condition is true
javascript data types
number, string, boolean, array, object
XMLHttpRequest
object in JavaScript; used to exchange data with the server behind the scenes;
Why would you use a FormData object to send form data?
provides an easy way to convert from values to key value pairs; only use if the API you're working with allows this content type
document.querySelectorAll("p.intro")
selects elements based on a CSS selector query; returns an array-like list of elements
this.status
tells you the response code from the server
this.readyState
tells you the state of the request
**what does this.readyState = 4 mean?
the request is complete and has received a response
Cross-Origin Resource Sharing (CORS)
unless explicitly allowed by the server you are calling to, you cannot make requests to URLs from different domains
event handlers
used to specify a block of code that should run whenever a specific event happens on your webpage
event.preventDefault()
used to stop the default action of a form, otherwise it will also be submitted to the "action" URL; the "event" should be a parameter on your event function which will be passed through the element the event is called on
how do you access DOM elements?
using the *document* object
how do you parse JSON in an AJAX serve response?
var responseData = JSON.parse(this.reponseText);
How is JavaScript included in the page?
with the script tag (in angle brackets), can use the src (in quotes) attribute to specify an external file
what are the event handlers?
• "onclick" - when an element is clicked on • "onchange" - when a form field is changed • "onmouseover" and "onmouseout" - when a user hovers over na element, or no longer hovering over an element • "onmousedown" and "onmouseup" - when a user clicks on an element, or is no longer clicking on an element • "onload" - when the page loads • "onsubmit"
How do you Build a URL encoded string of form data to send form data?
• content-type request header will be application/x-www-form-urlencoded • use encodeURIComponent() to make sure all data is url encoded • build string with key value pairs, with "&" in between i.e. var fname = document.getElementById("name").value; var lname = document.getElementById("lname").value; var data = "fname=" + encodeURIComponent(fname) + "&" + "lname=" + encodeURIComponent(lname); xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhttp.send(data);
How do you use a FormData object to send form data?
• uses "content-type" header with value "multipart/form-data" i.e. var form = document.getElementById("myForm"); var formData = new FormData(form); xhttp.setRequestHeader("Content-Type", "multipart/form-data"); xhttp.send(formData);
How do you use JSON to send form data?
• uses "content-type" of "application/json" i.e. var data = { fname: document.getElementById("fname").value, lname: document.getElementById("lname").value }; xhttp.setRequestHeader("Content-Type", "application/json"); xhttp.send(JSON.stringify(data));