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.
How do you tell the world that your file is a modern html file?
<!DOCTYPE html>
<html>
...
</html>
What is the head tag in html?
What is its purpose?
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.
What are meta tags?
Meta tags contain meta information for browsers and other tools to help interpret.
All tags except which tags should be closed for ease of reading and parsing?
Void tags. All other tags should be closed for the ease of reading and parsing.
Void tag < > or < />(XHTML)
regular tag <></> (closed)
What does the body tag hold?
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
What is XHTML?
HTML written using XML syntax
XML is stricter and requires well-formed syntax.
You must close all tags and use lowercase tag names.
What are the limitations for XHTML?
XML is “unforgiving” — minor errors stop the document from parsing.
It broke methods like Document.write() and specific HTML features like <template>.</template>
What is the MIME type for XHTML documents?
Content-Type: application/xhtml+xml
What is the <p></p> tag?
It is the paragraph tag
Use CSS to style these blocks
Whitespace in the <p> block doesn’t matter
How do we make line breaks in html?
We can make line-breaks explicit with <br></br>
What is <img></img>
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.
What is the Text Layout Philosophy?
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.
What are <div> and <span> tags?</span>
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>
What are HTML attributes?
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>
What are style attributes
The style attributes are Cascading Style Sheet (CSS) properties.
What is Cascading?
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.
What are the CSS properties most important to know?
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 do you write a CSS class?
.classname{
bakground-color: red;
}
in html
<p> Example
</p>
^ would be red paragraph background
In this code:
<style>
.highlight {background-color: yellow; }
p.highlight { background-colour: orange; }</style>What would <p class="highlight">ALERT</p>
be?
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.
What are Id selectors?
id
ID selectors are like class selectors except they aim at the one tag with the id=”idtag” as an attribute.
background-color:yellow;
}
What are element selectors?
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;
}
What are context selectors?
: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
How do you do CSS positioning?
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!
How do you do CSS text alignment?
One big problem with CSS is how to center something!
Margins can be used
text-align: center can be used
What are the CSS Units?
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.
What units should you use in CSS?
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.
What does the form tag do?
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.
What does the <input></input> tag do?
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.
How do we use JavaScript on webpages?
Put the JavaScript within <`script> tags.
Or you can put the js at a separate url with script tags.
What are anonymous functions? Why are they preferred?
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;
}
How does scope work in JavaScript by default?
By default creating a variable makes globals
Solution: use ‘use strict’;, let, const, and var.
How does let and const work with scope?
let and const scopes variables/constants to the enclosing block
var scopes variables to the enclosing function
How do you loop over arrays in js?
loop over arrays with for … of
let a = [1, 2, 3, 4, 5];
for (let i of a) {
console.log(i);
}
What are objects in JS?
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
How do we loop over properties of an object in JS?
Use the for … in syntax
for … in includes properties from the prototype!
How do you manipulate the DOM of HTML?
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
What is the structure of the DOM?
<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!
What is AJAX?
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
What are the disadvantages of Ajax?
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
What is the new way to make HTTP requests in js?
Fetch API
new Request(“some-url”);
Promises!
What are the timers in JS?
Timers
window.setInterval lets you run a function every so many milliseconds.
window.setTimeout lets you run a function once after so many milliseconds.
What is JSON? What does json.parse and json.stringify do?
JavaScript Object Notation
Strict subset of JavaScript
JSON.parse parses JSON text into an Object
JSON.stringify turns an Object into JSON text
What are the design suggestions of AJAX?
Minimize AJAX requests and traffic
Don’t hook into every event, use timeouts?
Use to ease page state transitions
What is the AJAX observer pattern?
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!
What is async and await in js?
async functions
- Return a promise!
await in async functions
- blocks code execution (stop and wait for the promise to resolve)
