Midterm Review

Midterm Review Questions

  1. 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

PreviousSection 9 - Let's Build a Framework or Library!NextFinal Review

Last updated

Was this helpful?