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.
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.
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
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.
Which is defined as follows:
