Midterm Review
Midterm Review Questions
The images already rearrange themselves as you make the window wider or narrower! Why? Why did we have to make paragraphs float left to achieve a similar result?
-because the maximum width of the html document is by default the size of your screen. You have not specified any margins, but the margins are already predefined to be the size the users display as the absolute max. -images by default will float left next one another -each paragraph by default floats left, but also with a new line break.
The DOM (document object model)
Draw Elements from DOM
Child and parent relationship
<div id=“outerDiv”>
<p>Say what you mean and mean what you say.</p>
</div>
// children[0] = first child in queue
var odiv = document.getElementById(”outerDiv");
var pgh = odiv.children[0];
The DOM network
document
/ \
head body
/
outerdiv
/
p
function showChildren(el) {
var children = el.childNodes;
for (var i=0; i<children.length; i++)
{console.log(String(i)+String(children[i])+"\n"); }
}
Modifying the DOM
Adding style:
sty= pgh.style;
sty.backgroundColor ="pink";
Add and remove elements from the DOM
Adding Script Node will?
First, including a script url will embed the api script that is returned by that url.
But in general (and, in then) the script becomes executed automatically.
JSONp essentially acts like a script object
appendWoeidScript() {
var script = document.createElement('script');
script.src = model.woeid.woeidScript;
document.getElementById("scripts").appendChild(script);
//model.where.scripts.appendChild(script);
}
Removing children from parent
RemoveAllChildElements(node) {
while (node.hasChildNodes()) {
node.removeChild(node.lastChild);
};
}
// alternative way
par = document.getElementById("pic");
while (par.hasChildNodes())
{ par.removeChild(par.childNodes[0]); }
Objects
Defined as literals
Everything is public
Defined with constructor functions
Allows private data and methods, using var
this keywords defines public data.
function CarObj() {
this.car = "Toyota"; var b = 4;
this.tell =function() {console.log(this.car); }
}
Car = new CarObj() //new object
Car.tell() // Toyota
Car.car // Toyota
Car.b // undefined
If we return b in tell(), this can work.
Variable scope
A variable defined in a function without the var keyword become global.
Consider:
var a = function() { var b = 5; return b; }
a(); // 5
b // undefined -> not in global scope
var c = function() { d = 5; return d; }
c() // 5
c // 5 -> in global scope
Closures
How we can manage to define private variables
function sayHello(name) {
var p = document.getElementById("output");
function say() {
p.textContent = "Hi, "+name; }
return say;
}
sayHi = sayHello('Armando')
sayHi(); // Hi Armando
Another example
function Weather(weatherParam) {
this.weather = weatherParam;
var date = "Wednesday";
this.report = function() {
console.log("The weather is",this.weather,"on",date); };
}
var b = new Weather(78);
b.report() //The weather is 78 on Wednesday
data is both preserved in the closure, as well as remains private to the new object.
Asynchronous programming and Event Handlers
Web programs run by event handlers
Onclick, animation, callbacks
Here was the example with API request
SVG
Scalable vector Graphics
Is a program that defines vector graphic visual
Consider the following SVG
Which is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<rect x="180.5" y="336" fill="#FF8020" width="79" height="84"/>
<rect x="325" y="335" fill="#2297C6" width="79" height="84"/>
</svg>
Where we can notice we have 2 defined rectangle objects with properties:
Position x, y within the document
Fill colors in hex representation
Width and height properties
Timers and Animation
var animObj = setInterval(singleFrame, 30);
Runs callback function every 30 seconds
stop with clearInterval(animObj);
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Timer</title>
</head>
<body>
<p id="timer">Remaining time: 5:00</p>
<script src="timer.js"></script>
</body>
</html>
function Timer() {
var remainingMin = 5;
var remainingSec = 0;
var whereTimer = document.getElementById("timer");
var animObj = setInterval(callback,1000);
// Make the method that gets called every second and changes the Web page
function callback() {
whereTimer.textContent = "Remaining time: " + remainingMin + ":" + remainingSec;
if (remainingSec == 0) {
remainingSec = 59;
remainingMin--;
}
remainingSec--;
if (remainingMin == 0 && remainingSec == 0) {
clearInterval(animObj);
}
}
}
// Add a line to use the Timer object
Timer();
JSON and Object Access.
Javascript literal
Use to pass around information
Converted to and from object literals
Contains only data, not methods
dataString = '{"car": "Toyota"}'; // the string is JSON
yourCar = JSON.parse(dataString);
console.log(yourCar.car); // yourCar is an object
recipe = {};
recipe.ingredients = {};
recipe.ingredients.flour = "1 cup";
recipe.ingredients.water = "1/2 cup";
recipe.ingredients.scallions = "1/2 cup";
recipe.other = [];
recipe.other[0] = "random";
recipe.other[1] = "foo";
recipe.other[2] = {};
recipe.other[2].fooy = "ok";
JSON.stringify(recipe);
//"{"ingredients":{"flour":"1 cup","water":"1/2 cup","scallions":"1/2 cup"},"other":["random","foo",{"fooy":"ok"}]}"
recipe = {
ingredients: {
flour: "1 cup",
water: "1/2 cup",
scallions: "1/2 cup"
},
other: [
"random",
"foo",
{
fooy: "bar"
}
]
}
recipe.ingredients.scallions // 1/2 cup
recipe.other[1] // foo
recipe.other[2].fooy // bar
Accessing information from JSON
Indexing -> [] for lists
.whatever for dictionaries
Colors
Hexadecimal to Color:
#ff8020;
Read in 3 equal parts: red/green/blue
1) Convert each 2 numbers into base 10
2) In our case, 255/128/32
These number represent the intensity of each respected color
To interpret the color use this with the RGB intensities:

Color to Hexadecimal:
Start with the RGB color cube
Define the intensities in base 10
Convert to hexadecimal with base conversion.
Have all the same RGB code will define some color within the white->black range.
HTML (hyper-text-markup-language), CSS and Layout
Two types of elements: inline and block
Inline: Like words within paragraph tags
We use text-align to describe the horizontal properties of inline, and vertical-align for vertical properties.
ex:
<a>, <b> (bold), <i>(italics), <img>
img because it can be placed mid way between a group of words
Block: Like images, or complete paragraphs.
ex:
<p>, <h1>, <ul>,<nav>(nav bar),<div>
Responsive:
Fixed: use pixels, whose size is relative to the resolution of display. For smart phone devices, the size also varies appropriately with the device. (e.g. reference pixels which get larger based how far your eyes are from the screen (predefined ofcourse)).
Useful with icons
Fluid: use percentages
Size of element includes size of content and size of padding, border and margin.
Inline-block example:
<div id="left">
<img src="https://placehold.it/350x150"/>
<p> $ 5 Trillion </p>
</div>
<div id="right">
<img src="https://placehold.it/350x150"/>
<p> $ 13 billion </p>
</div>
#right, #left {
display: inline-block; margin: 10px;
}
Responsive Nav Bar Example:
<html>
<head>
<link rel="stylesheet" type="text/css" href="navbar.css">
</head>
<body>
<div id="search">
<input type="text" id="searchText">
<button onclick="doSearch()">search</button>
</div>
<h1>Arboretum Volunteer Handbook</h1>
<div id="pic">
<img src="https://placehold.it/800x500">
<p class="caption">Ducks in the UC Davis Arboretum</p>
</div>
</body>
</html>
body {
background-color: grey;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 0;
}
#search {
float: right;
margin: 40px;
}
h1 {
font-weight: bold;
color: orange;
padding: 35px;
background-color: blue;
}
#pic {
margin: auto 0;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
#pic img {
max-width: 100%;
height: auto;
/* optional
max-width: 200px;
min-width: 150px;
width: 33%;
*/
}
CSS Override Rules
Specificity
last specified property
div id over classes
MVC Architecture
Model
manages and stores data
responds to informational changes
manages logic, and rules
updates view
View
extends model
displays user interface
take current information from model
Controller
extends model
accepts input to manipulate model
Last updated
Was this helpful?