CS 110 Web Development - Quiz 2

HTML, Forms, Events, and Javascript

selector

styling for tag, no period

external style sheet

browser can cache so performance improved

class selector

.

id selector

#, id can only be used once per page

attribute selector

[], select presence of element attribute or by value of attribute

pseudo-element selector

select something that doesn’t exist as an element in HTML, but is recognizable (ex. div p { … })

contextual selector

select elements based on ancestors/descendants/siblings (ex. #main div p first-child { … } is first p in a div in something with id = main)

dynamic interactivity

allowed using plugins, applets, and extending HTML into programming language

plugin

code loaded into browser using API, browser/platform specific, security problems

applets

Java programs downloaded and run by browser, security problems

client-side scripting advantages

processing off-loaded from server to cilent, brower can respond faster to user events, better user experience

client-side scripting disadvantage

Javascript is messy and hard to debug, unexpected behavior on different browsers

AJAX

Asynchronous Javascript And XML, performs asynchronous data requests

Javascript in head

runs immediately as browser parses itJ

Javascript in body

runs after HTML content has fully loaded

Javascript defer attribute

runs after page is fully parsed, even if in head

Javascript variables

dynamically typedd

dynamically typed

variable can be integer, then later a string, then later an object

const scope

function, block, can’t be reassigned

let scope

function, block, and can be reassigned

var scope

global, function, and can be reassigned

Javascript loops

for, for/in, while, do/while

Javascript error

throws exception, stops Javascript engine

try-catch block

catches errors and prevents disruption

Javascript objects support

constructors, properties, and methods

Javascript objects don’t support

inheritance and polymorphism

arrays

behave more link linked lists, behave differently amongst browsers, push and pop

window object corresponds to

browser itself

window object accesses

current URL, history, status bar, opening new window

DOM

document object model, interface that allows interaction and dynamic changes to document

DOM node

each element in HTML document, individual branch of tree

DOM document object

root Javascript object representing entire HTML document

modifying DOM element

innerHTML property

Javascript event

action that can be detected by Javascript (mouse, keyboard, form, frame)

listeners

onclick() & addEventListener()

form interaction with server

user requests server → browser returns HTML w/ form → user fills form and submits → requests server → form data sent inside request → server processes form data

form action attribue

specifies URL of server-side that will process form data

form method attribute

specifies how the query string data will be transmitted from the browser to server → GET and POST

GET

less secure, data can be seen in address bar & bookmarked & cached

POST

more secure, data hidden from user, can be binary data

var access before declaration

undefined

let access before declaration

ReferenceError

const access before declaration

ReferenceError

var redeclaration

allowed

let redeclaration

SyntaxError

const redeclaration

SyntaxError

var reassignment

allowed

let reassignment

allowed

const reassignment

TypeError

promise

object created to represent result of async operation

promise lifecycle

in pending → operation completes, considered settled → either is fufilled or rejected

AJAX user interaction

async, users can interact while new data is being requested

AJAX method

1. Javascript makes request object, initializes it, and send it to the server (page can continue)

2. server responds with contents of file or output of program

3. response arrives, Javascript function triggered

4. Javascript function refreshes display using DOM, avoids refresh of entire page

backend

part of AJAX application that resides on web server, could be file or program

XMLHttpRequest object

backbone of AJAX method, can send info. using GET and POST to the server

fetch returns a

promise

a fetch promise is fufilled with a

response object

selector, selector, selector

list of elements that style will target

selector1 selector2

elements that have selector 2 inside selector 1

async function returns a

promise