• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
An Introduction to JavaScript: Week One
 

An Introduction to JavaScript: Week One

on

  • 286 views

 

Statistics

Views

Total Views
286
Views on SlideShare
286
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    An Introduction to JavaScript: Week One An Introduction to JavaScript: Week One Presentation Transcript

    • Introduction to JavaScript #1 @danielknell
    • Basics
    • Basics •Expressions •Conditionals •Loops
    • Expressions
    • Expressions •Math and Numbers •Strings and Concatenation •Special •Booleans and Comparison •Functions •Objects and Arrays
    • http://artsn.co/js-repl
    • Numbers and Math
    • 42
    • 42.5
    • × ÷ + −
    • Math 4 * 2; 4 / 2; 4 + 2; 4 - 2; 100 % 3; 99 + (9 / 9); -3; -(3+1);
    • Mathmagical
    • Take a 4 digit number e.g. 1234
    • Shuffle the digits e.g. 2413
    • Subtract the smaller from the larger e.g. 2413 - 1234
    • Sum the digits of the result e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8
    • Sum the digits of the result e.g. 566 % 8
    • 0
    • Variables
    • Variables var x = 5; var y = 99 + (9 / 9); var z = x * y;
    • More Math var x = 5; x++; x--;
    • Strings and Concatenation
    • Strings "hello"; 'world'; "hello" + "world";
    • Strings "five plus two equals: " + (5 + 2);
    • Strings var who = 'world'; var greeting = "hello" + who; greeting[0]
    • Special
    • null
    • null var x = null;
    • undefined
    • undefined var x;
    • Boolean and Comparison
    • True / False
    • False-ish 0 "" null undefined
    • Boolean Math true && true; false || true; !false;
    • Comparison 1 == "1"; 1 != "2"; 2 > "1"; 1 < "2"; 2 >= "1"; 1 <= "2"; 1 === 1; 1 !== "1";
    • Functions
    • Functions function greet(who) { return "hello" + who; } greet("world");
    • Functions var greet = function(who) { return "hello" + who; } greet("world");
    • Arrays and Objects
    • Arrays var a = [1, 2, "three"]; a[0]; // 1 a[2]; // "three" a.length; // 3 a[3]; // undefiend
    • Arrays 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"]
    • Objects var coords = { x: 1, "y": 2 }; coords["x"]; // 1 coords.y; // 2 coords.z; // undefined { var: 1 } { "var": 1 }
    • Conditionals
    • Conditionals http://www.flickr.com/photos/blahflowers/4765476166
    • Conditionals
    • Conditionals if the light is green cross the road else stop
    • Conditionals if (light === 'green') { crossTheRoad(); } else { stop(); }
    • Conditionals switch (light) { case 'blue': case 'green': crossTheRoad(); break; case 'red': stop(); break; default: lookConfused(); }
    • Loops
    • Loops http://www.flickr.com/photos/blahflowers/4765476166
    • Loops
    • Loops while light is red wait cross the road
    • Loops while (light === 'red') { wait(); } crossTheRoad();
    • Loops do { wait(); } while (light === 'red'); crossTheRoad();
    • Loops for (var i = 0; i < 8; i++) { potato(i); } more();
    • Loops while (light === 'red') { if (axeMurder === true) { break; } wait(); } crossTheRoad();
    • Loops do { wait(); if (light === 'flashing green') { continue; } } while (light === 'red'); crossTheRoad();
    • Combined
    • Combined http://www.flickr.com/photos/davelevy/7190079438
    • Combined
    • Combined while light is not green if light is red wait if light is amber get ready GO GO GO!
    • Combined while (light != 'green') { switch (light) { case "red": wait(); break; case "amber": getReady(); break; default: lookConfused(); } } goGoGo();
    • Complex Objects
    • Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } person.greet();
    • Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } console.log(person.greet());
    • Fizz Buzz
    • Fizz Buzz •Count to 100 printing each number •For numbers divisible by 3 print “Fizz” instead •For numbers divisible by 5 print “Buzz” instead •For numbers divisible by 3 and 5 print “FizzBuzz” instead
    • Fizz Buzz
    • Fizz Buzz •Count to 100 printing each number •For numbers divisible by 3 print “Fizz” instead •For numbers divisible by 5 print “Buzz” instead •For numbers divisible by 3 and 5 print “FizzBuzz” instead
    • Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/