Intro to JavaScript

Presented by Heather Brysiewicz / @caligoanimus

Prerequisites

Laptop
...with a browser!
Text Editor - SublimeText

a bit about this talk

Reveal.js
interactive examples

code that runs anywhere

laptop
desktop
tablet
cell phone
television
arduino

You already have an environmet for it

all you need is a browser
maybe a text editor

Game Plan

data types
conditionals, if/elseif/else, for loop, functions
events and DOM api
flipbook

Data Types

boolean
number
string
object
kind of arrays...

boolean


if (true) document.write("This is true! 
"); if (false) document.write("You won't ever see this :(
");

number


document.write(4 + 4);

document.write(144 / 12);

document.write(15 * 0.25);
						

string


document.write("I'm a string");

document.write("I'm a string... " + "And I am another string!");
						

object

{ name: "Heather" }


document.write({ name: "Heather" });

document.write({ name: "Heather" }.name);
						

arrays


document.write([1, 2, 3, 4, 5]);

document.write([1, 2, 3, 4, 5][0]);
						

variables


var myName = "Heather"
document.write(myName);

var myArray = [1, 2, 3, 4, 5];
document.write(myArray[0]);
						

break for kittens

conditionals

== equal
!= not equal
=== strong (identity) equal
!== strong (identity) not equal
< less than
> greater than
<= less than or equal
>= greater than or equal

== equal
=== strong equal


document.write(0 == '');

document.write(0 === '');
						

!= equal
!== strong equal


document.write(false != '0');

document.write(false !== '0');
						

< less than
> greater than


document.write(0 < 4);

document.write(4 < 4);

document.write(0 > 4);
						

<= less than or equal
>= greater than or equal


document.write(4 <= 4);

document.write(7 >= 4);

document.write(4 >= 4);
						

if/else

remember this example?


if (true) document.write("This is true! 
"); if (false) document.write("You won't ever see this :(
");

if/else


var score = 0
if (score < 15) {
  document.write("Keep playing!");
} else {
  document.write("Game over!");
}
						

if/else if/else


var score = 0
if (score == 14) {
  document.write("Game Point!");
} else if (score < 15) {
  document.write("Keep playing!");
} else {
  document.write("Game over!")
}
						

for loops


var animals = ['kitten', 'unicorn', 'narwhale'];
for (var i = 0; i < animals.length; i++) {
  document.write(animals[i] + "
"); }

functions


var printAnimals = function(animals) {
  for (var i = 0; i < animals.length; i++) {
    document.write(animals[i] + "
"); } } var animals = ['kitten', 'unicorn', 'narwhale']; printAnimals(animals);

break for kittens

DOM API - getElementById

4

4

document.getElementById('dom-box').style.backgroundColor = '#bbcc66';
document.getElementById('dom-box').innerHTML = 'I am a box!';
						

DOM API - getElementsByTagName


var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
  images[i].style.webkitFilter = 'grayscale(100%)';
}
						

Events

onclick
onmouseover
onfocus
onkeydown
onscroll
many, many more!

Events


document.getElementById('dom-btn').onclick = function(e) {
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    images[i].style.webkitFilter = 'grayscale(100%)';
  }
}
						

flipbook example!

Thank You!

Devdocs.io
MDN