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));