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;...
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:
lookCo...
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:
...
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.gr...
Fizz Buzz
Fizz Buzz
•Count to 100 printing each number
•For numbers divisible by 3 print “Fizz”
instead
•For numbers divisible by 5 ...
Fizz Buzz
Fizz Buzz
•Count to 100 printing
each number
•For numbers divisible by
3 print “Fizz” instead
•For numbers divisible by
5 ...
Thats All Folks
email: contact@danielknell.co.uk
twitter: @danielknell
website: http://danielknell.co.uk/
Upcoming SlideShare
Loading in...5
×

An Introduction to JavaScript: Week One

330
-1

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
330
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

An Introduction to JavaScript: Week One

  1. 1. Introduction to JavaScript #1 @danielknell
  2. 2. Basics
  3. 3. Basics •Expressions •Conditionals •Loops
  4. 4. Expressions
  5. 5. Expressions •Math and Numbers •Strings and Concatenation •Special •Booleans and Comparison •Functions •Objects and Arrays
  6. 6. http://artsn.co/js-repl
  7. 7. Numbers and Math
  8. 8. 42
  9. 9. 42.5
  10. 10. × ÷ + −
  11. 11. Math 4 * 2; 4 / 2; 4 + 2; 4 - 2; 100 % 3; 99 + (9 / 9); -3; -(3+1);
  12. 12. Mathmagical
  13. 13. Take a 4 digit number e.g. 1234
  14. 14. Shuffle the digits e.g. 2413
  15. 15. Subtract the smaller from the larger e.g. 2413 - 1234
  16. 16. Sum the digits of the result e.g. 566 → 5 + 6 + 6 → 1 + 7 → 8
  17. 17. Sum the digits of the result e.g. 566 % 8
  18. 18. 0
  19. 19. Variables
  20. 20. Variables var x = 5; var y = 99 + (9 / 9); var z = x * y;
  21. 21. More Math var x = 5; x++; x--;
  22. 22. Strings and Concatenation
  23. 23. Strings "hello"; 'world'; "hello" + "world";
  24. 24. Strings "five plus two equals: " + (5 + 2);
  25. 25. Strings var who = 'world'; var greeting = "hello" + who; greeting[0]
  26. 26. Special
  27. 27. null
  28. 28. null var x = null;
  29. 29. undefined
  30. 30. undefined var x;
  31. 31. Boolean and Comparison
  32. 32. True / False
  33. 33. False-ish 0 "" null undefined
  34. 34. Boolean Math true && true; false || true; !false;
  35. 35. Comparison 1 == "1"; 1 != "2"; 2 > "1"; 1 < "2"; 2 >= "1"; 1 <= "2"; 1 === 1; 1 !== "1";
  36. 36. Functions
  37. 37. Functions function greet(who) { return "hello" + who; } greet("world");
  38. 38. Functions var greet = function(who) { return "hello" + who; } greet("world");
  39. 39. Arrays and Objects
  40. 40. Arrays var a = [1, 2, "three"]; a[0]; // 1 a[2]; // "three" a.length; // 3 a[3]; // undefiend
  41. 41. 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"]
  42. 42. Objects var coords = { x: 1, "y": 2 }; coords["x"]; // 1 coords.y; // 2 coords.z; // undefined { var: 1 } { "var": 1 }
  43. 43. Conditionals
  44. 44. Conditionals http://www.flickr.com/photos/blahflowers/4765476166
  45. 45. Conditionals
  46. 46. Conditionals if the light is green cross the road else stop
  47. 47. Conditionals if (light === 'green') { crossTheRoad(); } else { stop(); }
  48. 48. Conditionals switch (light) { case 'blue': case 'green': crossTheRoad(); break; case 'red': stop(); break; default: lookConfused(); }
  49. 49. Loops
  50. 50. Loops http://www.flickr.com/photos/blahflowers/4765476166
  51. 51. Loops
  52. 52. Loops while light is red wait cross the road
  53. 53. Loops while (light === 'red') { wait(); } crossTheRoad();
  54. 54. Loops do { wait(); } while (light === 'red'); crossTheRoad();
  55. 55. Loops for (var i = 0; i < 8; i++) { potato(i); } more();
  56. 56. Loops while (light === 'red') { if (axeMurder === true) { break; } wait(); } crossTheRoad();
  57. 57. Loops do { wait(); if (light === 'flashing green') { continue; } } while (light === 'red'); crossTheRoad();
  58. 58. Combined
  59. 59. Combined http://www.flickr.com/photos/davelevy/7190079438
  60. 60. Combined
  61. 61. Combined while light is not green if light is red wait if light is amber get ready GO GO GO!
  62. 62. Combined while (light != 'green') { switch (light) { case "red": wait(); break; case "amber": getReady(); break; default: lookConfused(); } } goGoGo();
  63. 63. Complex Objects
  64. 64. Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } person.greet();
  65. 65. Complex Objects var person = { name: "bob" , greet: function() { return "hi " + this.name + "!"; } } console.log(person.greet());
  66. 66. Fizz Buzz
  67. 67. 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
  68. 68. Fizz Buzz
  69. 69. 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
  70. 70. Thats All Folks email: contact@danielknell.co.uk twitter: @danielknell website: http://danielknell.co.uk/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×