Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Web Applications and Architectures > Part 2 - HTML, JS, and Ajax > Flashcards

Part 2 - HTML, JS, and Ajax Flashcards

Most of this should just be programming, but I will make some flash cards just in case. 2nd Quarter of the course.

1
Q

How do you tell the world that your file is a modern html file?

A

<!DOCTYPE html>

<html>
...
</html>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the head tag in html?
What is its purpose?

A

The head tag is where we put info about the web page. Title is included here.
Its basically where we put all of the meta data.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are meta tags?

A

Meta tags contain meta information for browsers and other tools to help interpret.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

All tags except which tags should be closed for ease of reading and parsing?

A

Void tags. All other tags should be closed for the ease of reading and parsing.

Void tag < > or < />(XHTML)
regular tag <></> (closed)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does the body tag hold?

A

Visibly content
Consider that you should not directly specify layout information here but that you should mark up blocks with a class allowing you to apply layouts later. You can abstract layout

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is XHTML?

A

HTML written using XML syntax

XML is stricter and requires well-formed syntax.

You must close all tags and use lowercase tag names.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What are the limitations for XHTML?

A

XML is “unforgiving” — minor errors stop the document from parsing.
It broke methods like Document.write() and specific HTML features like <template>.</template>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the MIME type for XHTML documents?

A

Content-Type: application/xhtml+xml

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the <p></p> tag?

A

It is the paragraph tag
Use CSS to style these blocks
Whitespace in the <p> block doesn’t matter

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How do we make line breaks in html?

A

We can make line-breaks explicit with <br></br>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is <img></img>

A

The image tag

We want to show images, we cannot embed them in HTML easily so we use hyperlinks (URIs) to reference them and include them.

Remember to include alt tags so they are machine and human-readable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What is the Text Layout Philosophy?

A

Let the user agent (browser) and CSS decide how to display the text, you do not have to control everything.

Provide semantics first with html, if you want something to show in particular way, use HTML element that most well resembles the meaning of the text.

Then use a CSS class to style it.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are <div> and <span> tags?</span>

A

Non-semantic HTML elements. They have no meaning for the text inside them, purely for styling purposes.

<div> will cause a line break before it is displayed

<span> will be inlined
</span></div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are HTML attributes?

A

HTML attributes provide additional information about an HTML element. Attributes are always included in the opening tag of an element and are composed of a name-value pair:

<tag>
</tag>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are style attributes

A

The style attributes are Cascading Style Sheet (CSS) properties.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is Cascading?

A

Cascading refers to accumulation of CSS properties (like color, font-weight, etc.).

CSS can be applied on a per tag level, but can also be applied globally.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are the CSS properties most important to know?

A

color – color of the text or object
color:green
font-family – the font
font-family:”Times New Roman”
font-size – the font size
font-size:10px;
font-size:10pt;
font-size:large;
font-size:200%;
font-style – normal, italic, oblique

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

How do you write a CSS class?

A

.classname{
bakground-color: red;
}

in html

<p> Example
</p>

^ would be red paragraph background

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

In this code:

<style>

      .highlight {background-color: yellow; }
      p.highlight { background-colour: orange; }
</style>

What would <p class="highlight">ALERT</p>

be?

A

Orange, in this example, the orange background color is only applied to the “p” tags of class “highlight”. However, as we can see with the div element of class highlight, the yellow background color is applied to all tags with class “highlight”. This is because the “p” tag selector is more specific than the class selector.

20
Q

What are Id selectors?

A

id

ID selectors are like class selectors except they aim at the one tag with the id=”idtag” as an attribute.

background-color:yellow;
}

21
Q

What are element selectors?

A

element
element selectors let you style entire HTML elements (tags).
Important because you might want to theme all divs or imgs or links

p {
background-color:yellow;
}

22
Q

What are context selectors?

A

:context
Selectors that behave depending on the context
Can be chained with other selectors
:hover - when the mouse is over
:active - active link
:first-letter - operate on the first letter
:nth-child(2) - second child

23
Q

How do you do CSS positioning?

A

position: (use left, right, top, bottom)
fixed – stays on one spot in the browser
relative – position relative to where it normally goes.
absolute – absolute positioning relative to the first parent that was positioned (often the page itself).

z-index can be used to order overlapping elements!

24
Q

How do you do CSS text alignment?

A

One big problem with CSS is how to center something!

Margins can be used
text-align: center can be used

25
Q

What are the CSS Units?

A

px - 1/96th of an inch. One pixel if DPI & zoom is 96.
% - percentage, usually of the containing (parent) element.
em - the font size. For example, 2em is twice the size of the font.
ex - the height of the letter ‘x’ (usually) in the current font and font size.

26
Q

What units should you use in CSS?

A

Prefer to use % or units based on font size (em, ex).
Avoid px, it won’t react to zooming and user’s font size, monitor resolution, etc. as well.

27
Q

What does the form tag do?

A

The form tag encloses a group of HTML input/UI widgets which can then be submitted as once.
method - We can specify the HTTP method (POST/GET)
action - We can specify the URI to GET or POST to.

28
Q

What does the <input></input> tag do?

A

The input tag can take in textual input, passwords, or act as submit button.

name= the name to send in the query string or post
value= the default value
Hidden type lets you embed values to send to help track the request.

29
Q

How do we use JavaScript on webpages?

A

Put the JavaScript within <`script> tags.

Or you can put the js at a separate url with script tags.


















30










Q













What are anonymous functions? Why are they preferred?


















A















Anonymous functions are functions that cannot be redefined, which makes them preferred. They are also defined to variables, like const, that cannot be redefined.


e.g.


// Function could be accidentally redefined
function one() {
    return 1;
}
// Function cannot be accidentally redefined
const two = function() { 
    return 2; 
}

















31










Q













How does scope work in JavaScript by default?


















A















By default creating a variable makes globals


Solution: use ‘use strict’;, let, const, and var.

















32










Q













How does let and const work with scope?


















A













let and const scopes variables/constants to the enclosing block
var scopes variables to the enclosing function















33










Q













How do you loop over arrays in js?


















A













loop over arrays with for … of
let a = [1, 2, 3, 4, 5];
for (let i of a) {
    console.log(i);
}















34










Q













What are objects in JS?


















A













Everything is an object except booleans, numbers and strings
Booleans, numbers and strings still have methods
Objects have properties
Properties are named by a string
Property values can be anything including undefined
Objects don’t have a class
Pass by reference















35










Q













How do we loop over properties of an object in JS?


















A













Use the for … in syntax
for … in includes properties from the prototype!















36










Q













How do you manipulate the DOM of HTML?


















A













Manipulating the DOM
You can use JavaScript to manipulate what’s on the page
Browser turns HTML into the DOM
Document Object Model
Document: the stuff on your page, the content
Object: gets turned into objects accessible by JS
Model: it’s a tree with children nodes















37










Q













What is the structure of the DOM?


















A















<p>A paragraph</p>


<div>
      Hi!
      <a>Click me!
      </a>
</div>


Top of the DOM
Document (it’s a tree with children nodes!)
Root Element: HTML ( document.children[0] )
Element: Head ( document.children[0].children[0] )
Element: Body ( document.children[0].children[1] )
Element: p ( document.children[0].children[1].children[0] )
Text: A paragrah
Element: div
Text: Hi!
Element: a ; attribute href
Text: Click me!

















38










Q













What is AJAX?


















A















Asynchronous Javascript and XML


Client Side
Allows Javascript to make HTTP requests and use the results without redirecting the browser.
Enables heavy-clients and lightweight webservices
Can be used to avoid presentation responsibility on the webservice.
JSON is a common replacement for XML
Modern social media is heavy on Ajax

















39










Q













What are the disadvantages of Ajax?


















A













You have to manage History, Back button, Bookmarks in JS
Security: browsers heavily restrict AJAX to prevent abuse
Same-Origin Policy
Even more HTTP requests, CPU and RAM















40










Q













What is the new way to make HTTP requests in js?


















A













Fetch API
new Request(“some-url”);
Promises!















41










Q













What are the timers in JS?


















A













Timers
window.setInterval lets you run a function every so many milliseconds.
window.setTimeout lets you run a function once after so many milliseconds.















42










Q













What is JSON? What does json.parse and json.stringify do?


















A













JavaScript Object Notation
Strict subset of JavaScript
JSON.parse parses JSON text into an Object
JSON.stringify turns an Object into JSON text















43










Q













What are the design suggestions of AJAX?


















A













Minimize AJAX requests and traffic
Don’t hook into every event, use timeouts?
Use to ease page state transitions















44










Q













What is the AJAX observer pattern?


















A













Observer pattern is where an observable keeps a collection of observers (listeners) and notifies those observers if anything changed by sending an update message.
This works great with AJAX if the observable is held client side in a browser and the observer is client side in the browser! Go ahead!















45










Q













What is async and await in js?


















A













async functions
- Return a promise!
await in async functions
- blocks code execution (stop and wait for the promise to resolve)






























Web Applications and Architectures (4 decks)


























Brainscape helps you reach your goals faster, through stronger study habits.


© 2024 Bold Learning Solutions. Terms and Conditions