Javascript Refresher

Advanced Javascript Lecture 1

Instructor: Ryan Lewis



Based on A re-introduction to Javascript  

Javascript...

  • Was released in 1996 for Netscape Navigator
  • Is named after Java; purely a marketing decision
  • Standards released by ECMA International 
  • Is currently on ECMAscript 5. 6 releasing soon.
  • Runs in browsers, node.js, Apache CouchDB.

Variables

//declaring with var keyword attaches it to current scope

var x = 2;
//declaring without var keyword attaches it to global scope

y = 5;
//general rule is to keep the global scope clean.

//associate as many of your variables to objects as possible.

Data types

  • Number
  • String
  • Boolean
  • Object
    • Function
    • Array
    • Date
    • RegExp
  • Null
  • Undefined

NUMBERS

var x = 2;

var y = 2.3;

var z = parseInt('5');

// > 5
var numberStr = 5 + '7';

// > '57'
+ numberStr;

// > 57
x = parseInt('huh?');

// > NaN

String

var word = 'hello';

// > 'hello'
word.length;

// > 5
word[1];

// same as word.charAt(1);

// > 'e'
word.toUpperCase();

// > 'HELLO'
word

// > 'hello'

Boolean

var isBool = true;

if(isBool) { // some code }
// defined variables are truth-y

// undefined or null variables are false-y
var msg = 'Hi There!';

if(msg) { console.log('msg');} else { console.log('not truthy');}

// > 'Hi There!'

Objects


var myObj = new Object();

var yourObj = {};

// these are semantically equivalent. second is more convenient.
var thatObj = { aProp : 'something', anotherProp : 'someone' };

thatObj.aProp;

// > 'something'

thatObj['aProp'];

// > 'something'
var finalObj = { hello : function(name) { console.log('hello ' + name); } };

finalObj.hello('ryan');

// > hello ryan

finalObj['hello']('world');

// > hello world

Arrays

var firstArr = new Array();
var secondArr = [];
// do the same thing. similar to Object instantiation
var thirdArr = ['dog', 'cat', 'bunny'];
thirdArr[1];
// > 'cat'
thirdArr[1] = 'unicorn';
thirdArr[1];
// > 'unicorn'
thidArr.length;
// > 3
thirdArr[9] = 'cat';
thirdArr;
// depends on browser:
// ['dog', 'unicorn', 'bunny', undefined x6, 'cat']

Functions

function add(x, y)

{ var total = x + y;

return total;}

add(2, 3);

// > 5

add();

// > NaN

add(5, 6, 7);

// > 11 (7 is ignored)
if(add)

{ console.log('add function exists');}

// > 'add function exists'

Using Javascript w/ html

Inline Javascript
<script>  console.log('hello world');</script>
External Javascript
HelloWorld.js >
console.log('hello world');
index.html >
<html>  <head>   <script src="HelloWorld.js"></script>

messing with javascript

Chrome/Firefox/IE console

Tools


Chrome Developer Tools
Firefox Developer Tools

cool js thing for the day

Browser based game written entirely in JavaScript

AJS Lecture 1: Javascript Refresher

By Ryan Lewis

Made with Slides.com

AJS Lecture 1: Javascript Refresher

  • 792

More from Ryan Lewis