Intro to Web Clients (Week 6, part #2)

Question 1

What is an important distinction relating to JS, the browser and Node?

Answer 1

JavaScript + browser !== JavaScript + Node

Question 2

What are the key ideas with JS + browser? (7)

Answer 2

1) You’re dealing with a user!
2) Input and output via HTML & CSS (& DOM)
3) Deployment of your app is different
4) Different APIs in browser -> AJAX (XHR)
5) Dependencies on libraries -> ‘importing’ JS libraries is different e.g. CDN vs npm install, node packages –> npm cannot always work due to security issues in browser so need to design code differently
6) Project structure is different -> JS, HTML, CSS, other assets
7) Similar terminology, different meaning -> e.g. “routes” & “routing”

Question 3

What does “deployment of your app is different” mean in terms of JS + browser

Answer 3

1) You don’t know which browser, or version.
2) You don’t know the network-connection quality.
3) You don’t know whether cookies are enabled.
4) You don’t know the computing power of the hosting machine.

Question 4

What is CDN?

Answer 4

Content delivery network -> a geographically distributed group of servers which work together to provide fast delivery of Internet

Question 5

What does HTML stand for?

Answer 5

Hyper Text Markup Language

Question 6

What is HTML?

Answer 6

Most basic building block of the Web. It describes and defines the content of a webpage.

Other technologies besides HTML are generally used to describe a webpage’s appearance/presentation(CSS) or functionality (JavaScript).

Question 7

What is the difference between content and data?

Answer 7

DATA

1) gives us raw material from where we can provide information about our users
2) what’s in javascript structures (arrays & objects) want to inject data in html content

CONTENT

1) digestible forms of information.
2) what’s in HTML elements

Question 8

What is a single page web application (SPA)?

Answer 8

A web page that changes it view

Question 9

What type of language is HTML?

Answer 9

declarative

Question 10

What is HTML comprised of?

Answer 10

A declaration of a document type (HTML), together with a hierarchical structure of (nested) HTML elements, with elements and attributes

Question 11

In terms of HTML, how are elements identified?

Answer 11

by tags

Question 12

In terms of HTML, what do elements typically contain?

Answer 12

some kind of content(to display)

Question 13

In terms of HTML, what may elements have?

Answer 13

attributes

Question 14

In terms of HTML, what do attributes define?

Answer 14

characteristics of elements

Question 15

In terms of HTML, what do attributes often have?

Answer 15

values(for the characteristics)

Question 16

In terms of HTML, what do attributes allow for?

Answer 16

cross-referencing to CSS and JavaScript

Question 17

In terms of HTML, what may attributes be?

Answer 17

custom-defined

Question 18

Give the general heirarchy of an HTML document.

Answer 18

See images doc -> #1

Question 19

What are some elements of html?

Answer 19

tags, attributes

Question 20

Identify open and closing tags, content and element for:

[p]Javascript callbacks are turtles all the way down.[/p]

Note: [ = < and ] = >

Answer 20

[p] = opening tag

[/p] = closing tag

Javascript callbacks are turtles all the way down. = content

entire thing = element

Question 21

Identify the name and value and attribute:

[p class=”comment”]Javascript callbacks are turtles…[/p]

Note: [ = < and ] = >

Answer 21

class = name

“comment” = value

class=”comment” => attribute

Question 22

In terms of nested HTML elements, identify the nested element, open tag, closing tag and content:

[p]Javascript callbacks are [strong]turtles[/strong] …[/p]

Answer 22

[p] = opening tag

[/p] = closing tag

[strong]turtles[/strong] = nested element

Javascript callbacks are [strong]turtles[/strong] … = content

Question 23

What is one way to change HTML content using JavaScript?

Answer 23

Use getElementById to change styling.

E.g.

document.getElementById(“four”).innerHTML= “Hello world!”;

Question 24

How can custom attributes be specified?

Answer 24

HTML5 offers data-* attribute, where * is a unique string (watch out for name clashes)

Question 25

How do Vue.js and Angular.js use cumstom defined exceptions as part of their two-way ‘binding’ magic? What kind of development does this encourage?

Answer 25

Angular has ng-*attributes

Vue has v-* attributes e.g. v-bind, v-for

Encourages data driven development

Question 26

What is CSS? What does it stand for?

Answer 26

A (declarative) ‘language’ which is a set of rules for specifying how content of a web page should look.

Cascading Style Sheets

Question 27

In terms of CSS, what is a typical rule comprised of?

Answer 27

1) a selector

2) a set of properties and values for how HTML content should be presented

Question 28

In terms of CSS, what there selectors for?

Answer 28

1) Attributes e.g. select on attribute name

2) Element/s e.g. select on element type

Question 29

In terms of CSS, where can CSS be contained in? Comment on the preference of each three.

Answer 29

1) An external style sheet (recommended)
2) An internal style sheet (sometimes okay)
3) An inline style (are you insane?!)

Question 30

Give the CSS rule for the following:

• Select (all) [h1] elements, and
• Set three properties: color, background-color, and border

Answer 30

h1 {

color: blue;

background-color:yellow;

border: 1px solid black;

}

Question 31

Give the CSS rule for the following:

• Select (all) [p] elements
• Set one property: color

Answer 31

p {

color: red;

}

Question 32

How do you reference an external style sheet?

Answer 32

[head]
[meta charset="utf-8"]
[title]Blah[/title]
[link rel="stylesheet" href="style.css"]
[/head]

Question 33

Explain the process of displaying content on a web page.

Answer 33

See images doc -> #2

Question 34

How do CSS, HTML, Javascript and the DOM relate to each other? Draw rendering web page diagram

Answer 34

CSS adds style to HTML.

The DOM is constructed of HTML.

Javascript creates dynamic HTML.

Results are rendered, put into a layout and then painted.

See diagrams doc - #2

Question 35

How can elements be referenced?

Answer 35

By:

1) Element type e.g. [p]
2) Unique identifier e.g. id=”…” –> #id for styling
3) Attribute class e.g. class=”…” –> .class for styling

Question 36

What are CSS rules used for?

Answer 36

‘Apply’ presentation to referenced elements, through selectors

Question 37

What does JS get and based on what?

Answer 37

Gets (and sets):

1) Element content
2) Element attributes & values

based on references to those elements

Question 38

What does “HTML document is the primary source” means?

Answer 38

1) Contains HTML (duh)
2) Contains CSS or reference to CSS
3) Contains JS or reference to JS

Question 39

How do we handle data?

Answer 39

Data needs to be ‘injected’ into HTML content e.g. JavaScript setter

Question 40

How to we get the user entered data?

Answer 40

retrieved from the rendered fields on screen e.g. JavaScript ‘getters’

Question 41

How can we retrieve inputted data using Vue?

Answer 41

through two-way binding. -> ‘Injecting’ data into content; and retrieving content into data

Question 42

What may a server send?

Answer 42

1) Resources: HTML, CSS, JavaScript etc; and separately
2) Data: JSON, XML; and
3) The application on the client-side injects the data into the HTML etc when needed

Question 43

Can data injection and data retrieval take place on the client side? If so, how?

Answer 43

Data injected into HTML, and retrieved from HTML

But still need to be persisted somewhere: locally, or on server

Question 44

What is the motivation for the move to Single Page Applications (SPA)?

Answer 44

1) Users want responsiveness & interactivity; improved user experience
- >Compare user experience with native apps & stand alone apps
2) Managing the interactions with a user is much more complex than managing communication with server
- > Think of all those events (e.g. onClicks) to handle

Question 45

What distinguishes SPAs? How do they achieve this?

Answer 45

Their ability to redraw any part of the UI without requiring a server round trip to retrieve HTML.

This is achieved by separating the data from the presentation of data by having a model layer that handles data and a view layer that reads from the models

Question 46

Explain the ‘separate’ feature of SPAs.

Answer 46

Separate:

1) data
2) ‘Content’ & Presentation: HTML & CSS(and other resources)

Question 47

Explain how SPAs reduce communication with the server/s.

Answer 47

By:

1) Occasional download of resources e.g. HTML, CSS and JavaScript
2) Asynchronous ‘background’ fetching of data: AJAX / XHR or web sockets
3) Fetch data only e.g. JSON
4) Fetch data from different servers: CORS

Question 48

Explain SPAs’ ‘page’ navigation.

Answer 48

1) Client-side JavaScript handles the routing instead of the browser itself

–> Managing page history

2) Routing within the SPA

Question 49

What do SPAs re-balance workload across?

Answer 49

1) Server-side application

–> e.g. Node.js

2) Client-side application/

–> Front-end libraries and frameworks e.g. vue.js

3) Communication between client & server

–> API-driven/specified

–>e.g. AJAX & JSON

Question 50

What do SPAs need to consider?

Answer 50

1) Manage application assets/resources

–> •e.g. dependency management

2) Application design and implementation

–> Modularisation

–> Design patterns

3) Templating

Question 51

What types of resources are on the client side?

Answer 51

1) Design patterns
2) Virtual DOM
3) Templating
4) Routing

Question 52

What is used for the client and backend to communicate?

Answer 52

1) XHR / AJAX
2) Websockets
3) HTTP
4) CORS

Question 53

Label all of these

[title] A title [/title]

[!DOCTYPE html]

class = “aim”

Note: [ = < and ] = >

Answer 53

[title] = tag

[!DOCTYPE html] = declaration to the web server of what html version the page is written in.

A title = content

class = “aim” = attribute

[title] A title [/title] = element

Note: [ = < and ] = >

Question 54

Define declarative language

Answer 54

Declarative languages, also called nonprocedural or very high level, are programming languages in which (ideally) a program specifies what is to be done rather than how to do it.