Intro to JavaScript

View Github Repository Open presentation in a new window

hbrysiewicz

See all presentation from hbrysiewicz

Intro to JavaScript

0 0

geekgirl-js

Such JavaScript, wow.

On Github hbrysiewicz / geekgirl-js

Intro to JavaScript

Presented by Heather Brysiewicz / @caligoanimus

Prerequisites

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

to follow along example at end - laptop with chrome or firefox with dev tools our example doesn't need text editor - sublime text

a bit about this talk

Reveal.js interactive examples

I'm going to be using a presentation tool called reveal.js its awesome because it actually runs in my browser which means it can run javascript code inside of my presentation if you're feeling daring, check it out. but in this talk there will be some interactive examples and this is how they work. good segway - javascripts pretty awesome because it can run anywhere

code that runs anywhere

laptop desktop tablet cell phone television arduino

why javascript? it runs basically anywhere large reach for what you create. don't need to buy an xbox to play your game, just load up a browser and you can share your game with anyone

You already have an environmet for it

all you need is a browser maybe a text editor

not only does it run everywhere, but it is easy to get started writing javascript because all you need is a browser that can understand and execute javascript if you use wordpress or tumblr, you can easily leave today and start messing around with javascript in the custom edit sections of those sites and add some awesome interactivity to your website

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...

for sake of this talk - 4 data types arrays, which are special objects but ultimately just objects with special methods and behaviors.

boolean

if (true) document.write("This is true! ");

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

what I think is the most simple, true/false yes/no document.write is a way for us to write out onto the document. in this instance its the page here.

number

document.write(4 + 4);

document.write(144 / 12);

document.write(15 * 0.25);
Show Result
8123.75

string

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

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

string of text, characters, numbers, whatever you can concatenate them together using a plus sign

object

{ name: "Heather" } 

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

document.write({ name: "Heather" }.name);
Show Result
[object Object]Heather

key value pairs building block of javascript

arrays

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

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

arrays are merely a special kind of object array objects have a toString method on them and they know how to print themselves out

variables

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

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

variables pretty cool because you can store data and reference it later

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

operators you can use to compare items is an orange an apple? is 4 greater than 10

== equal=== strong equal

document.write(0 == '');

document.write(0 === '');
Show Result
truefalse

loose and strong equal strong or identity equal loose will do some type conversions before ultimately determining result

!= equal!== strong equal

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

document.write(false !== '0');
Show Result
falsetrue

< less than> greater than

document.write(0 < 4);

document.write(4 < 4);

document.write(0 > 4);
Show Result
truefalsefalse

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

document.write(4 <= 4);

document.write(7 >= 4);

document.write(4 >= 4);
Show Result
truetruetrue

if/else

remember this example?

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

here we used an if to check the value and do stuff but we can also say if this is true, do this, otherwise do that

if/else

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

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!")
}
Score: 0
Increase Score!
Keep playing!

for loops

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

there are a few different kind of loops we're just going to cover the for - used most often

functions

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

there are a few different kind of loops we're just going to cover the for - used most often

break for kittens

DOM API - getElementById

4 
 4 

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

						Do It!

				
DOM API - getElementsByTagName

					

						


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

						Do It!

				
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%)';
  }
}
						

						Do It!

				
flipbook example!

					

						

				
Thank You!

					

						Devdocs.ioMDN