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]

Recap
var x = null;
var y;
y === undefined

Recap
true && true;
false || true;
!false;
falsy:
0
""
null
undefined

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

Recap
var greet = function(who) {
return "hello" + who;
}
function greet(who) {
return "hello" + who;
}
greet("world");

Recap
var a = [1, 2, "three"];
a[0]; // 1
a[2]; // "three"
a.length; // 3
a[3]; // undefiend

Recap
var 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"]

Recap
var coords = { x: 1, "y": 2 };
coords["x"]; // 1
coords.y; // 2
coords.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 work
switch (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();

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

Recap
if (something) { }
else { }
something();

Recap
for (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

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>

Finding Elements
var 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 Elements
var 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 ﬁzzbuzz
•Append it to the <ol>
•Create more <li> elements

Fizz Buzz DOM
var 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 Style
var 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

•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

Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/

Introduction to JavaScript: Week Two

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Mehr von Event Handler

Mehr von Event Handler (8)

Introduction to JavaScript: Week Two