Introduction to JavaScript: Week Two

Introduction to JavaScript #2

@danielknell

Friday, 4 October 13

Recap 4 * 2;4 / 2;4 + 2;4 - 2;100 % 3;99 + (9 / 9);-3;-(3+1);


Recap var x = 5;var y = 99 + (9 / 9);var z = x * y;

x++;x--;


Recap "hello";'world';"hello" + "world";"five plus two equals: " + (5 + 2);

var who = 'world';var greeting = "hello" + who;

greeting[0]


Recapvar x = null;var y;

y === undefined


Recaptrue && true;false || true;!false;

falsy:0""nullundefined


Recap1 == "1";1 != "2";2 > "1";1 < "2";2 >= "1";1 <= "2";

1 === 1;1 !== "1";


Recapvar greet = function(who) { return "hello" + who;}

function greet(who) { return "hello" + who;}

greet("world");


Recapvar a = [1, 2, "three"];

a[0]; // 1a[2]; // "three"a.length; // 3a[3]; // undefiend


Recapvar a = [1, 2, "three"];

a.push("four");a; // [1, 2, "three", "four"]

var last = a.pop();a; [1, 2, "three"]last; // "four"

var first = a.shift();a; [2, "three"]first; // 1

a.unshift("one");a; ["one", 2, "three"]


Recapvar coords = { x: 1, "y": 2 };

coords["x"]; // 1coords.y; // 2coords.z; // undefined

{ var: 1 }{ "var": 1 }


Recap if (light === 'green') { crossTheRoad();}else if (light === 'red') { stop();}else { lookConfused();}


Recap switch (light) {case 'blue':case 'green': crossTheRoad(); break;case 'red': stop(); break;default: lookConfused();}


Recap var x = 1;

// this does not workswitch (x) {case x > 1: console.log('A'); break;case x === 1: console.log('B'); break;}


Recap while (light === 'red') { wait();}crossTheRoad();


Recap do { wait();} while (light === 'red');

crossTheRoad();


Recap for (var i = 0; i < 8; i++) { potato(i);}more();


Recap while (light === 'red') { if (axeMurder === true) { break; } wait();}crossTheRoad();


Recap do { wait(); if (light === 'flashing green') { continue; }} while (light === 'red');crossTheRoad();


Recapvar person = { name: "bob", greet: function() { return "hi " + this.name + "!"; }}

person.greet();


Recapif (something) { }else { }

something();


Recapfor (var i = 1; i <= 100; ++i) { if (i % 3 === 0 && i % 5 === 0) { console.log('FizzBuzz'); } else if (i % 3 === 0) { console.log('Fizz'); } else if (i % 5 === 0) { console.log('Buzz'); } else { console.log(i); }}


http://artsn.co/js-tpl


DOM


Sorry


Really, really sorry


DOM<!DOCTYPE html><html lang="en"> <head> <title>Hello World</title> <link rel="stylesheet" href="assets/css/main.css"> </head>

<body> <div id="output"></div> <form id="reload"> <button class="submit” type="submit">Random</button> </form> <script src="assets/js/main.js"></script> </body></html>


DOM


Finding Elementsvar element = document.getElementById('puzzle');

var elements = document.getElementsByTagName('div');

var elements = document.getElementsByClassName('submit'); // not IE < 9

element.getElementById('child');

element.getElementsByTagName('span');

element.getElementsByClassName('foo');


Finding Elements#foobar

<div id="foobar"></div>

.foobar

<div class="foobar"></div>

div

<div></div>

div#foobar

<div id="foobar"></div> <p id="foobar"></p>

div.foobar

<div class="foobar"></div> <p class="foobar"></p>

div .foobar

<div id="baz"><p id="foobar"></p></div><div id="foobar"></div>


Finding Elementsvar element = document.querySelector('#reload .submit'); // not IE < 8

var elements = document.querySelectorAll('#reload .submit'); // not IE < 8

element.querySelector('#reload .submit'); // not IE < 8

element.querySelectorAll('#reload .submit'); // not IE < 8


Traversing Elements var children = element.children;

var parent = element.parentNode;


Traversing Elements


Creating Elements var parent = document.getElementById('foobar');

var element = document.createElement('div');

parent.appendChild(element);

parent.insertBefore(element, someOtherElement);

parent.removeChild(element);

element.parentNode.removeChild(element);


Changing Elements var el = document.getElementById('output');

el.textContent = 'hello world';


Fizz Buzz DOM


Fizz Buzz DOM•Create a new <ol> element

•Append in the output div

•Create a new <li> element

•Set the contents to the line from fizzbuzz

•Append it to the <ol>

•Create more <li> elements


Fizz Buzz DOMvar ol = document.createElement('ol') , el ;

document.getElementById('output').appendChild(ol);

for (var i = 1; i <= 100; ++i) { el = document.createElement('li');

if (i % 3 === 0 && i % 5 === 0) { el.textContent = 'FizzBuzz'; } else if (i % 3 === 0) { el.textContent = 'Fizz'; } else if (i % 5 === 0) { el.textContent = 'Buzz'; } else { el.textContent = i; } ol.appendChild(el);}


Element Stylevar el = document.getElementById('output');

// <div id="output" style="background-image: url('bg.jpg')"></div>

el.style.backgroundImage = "url('bg.jpg')";

el.style.fontWeight = ‘bold’;

el.style.color = ‘red’;

window.getComputedStyle(el).backgroundImage; // not IE < 9

el.currentStyle.backgroundImage; // IE < 9


“Pretty” Fizz Buzz


“Pretty” Fizz Buzz

•Loop over the list elements in a new loop

•Set all elements containing the text Fizz, Buzz, and FizzBuzz to bold

•Make all odd lines red


“Pretty” Fizz Buzzvar items = ol.children ;

for (var i = 0; i < items.length; ++i) { el = items[i];

if ( el.textContent === 'FizzBuzz' || el.textContent === 'Fizz' || el.textContent === 'Buzz' ) { el.style.fontWeight = 'bold'; }

if (i % 2 === 0) { el.style.color = 'red'; }}


Thats All Folksemail: [email protected]

twitter: @danielknell

website: http://danielknell.co.uk/


Date post:	06-Nov-2014
Category:	Documents
Upload:	event-handler
View:	1,181 times
Download:	0 times

Introduction to JavaScript: Week Two

Documents