JavaScript Intro Notes

javascript-intro.md

#Javascript Intro

#What the Week Looks Like

• Intro to JavaScript
• DOM Manipulation
• Object Oriented JavaScript
• EventLoop
• jQuery
• AJAX
• MVC in JavaScript
• Testing!

#Lecture Overview

• Prepare for Javascript Challenge

• Where to put it

• Debugging

• What's different?

• JavaScript Types

• It's All Event Driven - Event Handlers

• 'use strict';

#Prepare for Javascript Challenge

• JavaScript Racer
• Stujo JavaScript Racer

#Where to put it?

• HTML SCRIPT Tag
  • SCRIPT tag breakdown
• Separate Files

#Debugging

• Chrome Dev Tools ALL THE TIME
• debugger

#What's different?

• var to declare a variable
• function to begin a function definition
• { this is a block }
• a statement is ended with ;
• ( an expression )
• Loops: for(var i=0 ; i < 10; i++){}
• this kind of like self
• Gotchas
  • functions are first class
  • No Block Scope - Only Function Scope
  • == uses type coersion! So always use ===
    • Chart Here: http://zero.milosz.ca/

#JavaScript Types *JavaScript Primitive (literal) Values

• String
• Boolean
• Undefined
• Null
• Number

*Javascript Reference Types

• Object
• Array
• Function
• Date
• RegExp

#It's All Event Driven

• Understand Function references
• Attach functions as Event Handler Callbacks
  • window.addEventListener('load', callback, false);
  • document.getElementById('mybutton').addEventListener('click', callback, false);
  • document.querySelector('#mybutton').addEventListener('click', callback, false);
  • document.querySelectorAll('button')[0].addEventListener('click', callback, false);

#Pro Tips

• Differences between javascript and ruby
  • http://agentcooper.github.io/js-ruby-comparison/
• Always have devtools open
• 'use strict';
• Use jsbin for testing and sharing

#Resources

• http://www.hammerprinciple.com/therighttool/items/javascript/ruby
• http://blog.flatironschool.com/post/67666573907/javascript-vs-ruby
• http://youmightnotneedjquery.com/
• http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/
• http://www.sitepoint.com/jquery-vs-raw-javascript-3-events-ajax/