javascript workshop
TRANSCRIPT
TTS JavaScript Workshop5/26/2015
@assafweinberg | [email protected]
Agenda
• What is JavaScript?
• 6 Language Fundamentals
• Workshop part 1
• JavaScript in the Browser
• Workshop part 2
http://javascript.crockford.com/javascript.html
What is JavaScript?
Language Fundamentals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Variables
JavaScript is… Loosely Typed
Loose Typing
Type Coercion
Coercion
Coercion
Arrays
Objects
In JavaScript… Objects are mutable
What does it all mean?
Is JavaScript Object Oriented?
JavaScript is… Not Object Oriented, it’s Functional
Functions
In JavaScript… Functions are Objects
Functions as Properties
Functions as Parameters
What’s this?
In JavaScript… “this” refers to the caller of the function
Variable Scope
In JavaScript… Functions have scope, blocks do not
ScopeClosures
ClosuresA function will always have access to variables that were in scope when it was declared
JavaScript… Uses Closures (functions have access to variables that were in scope when they were created)
6 Lessons in JavaScript… Loosely typedMutable objectsFunctional languageFunctions are ObjectsUses the “this” keyword to refer to callersUses closures
WTF Miyagi?WTF Miyagi?
It’s Code Time
Tournament Rules1. Create an object to model a karate move. A move has a name (e.g. ‘karate chop’,
‘crane kick”, etc.), and a strength score between 1 and 10. Output the move’s name to the console.
2. Create an array with at least 5 karate move objects. Output the name of the 3rd item in the array to the console.
3. Create two objects to model karate fighters. Each fighter has a name, an array of moves, and a function called “performMove” that returns a random move.
4. Create a function called “fight” that takes 2 fighter objects, gets a move from each of them, and outputs a string “[fighter name] did [move name], [fighter 2 name] countered with [move name 2].” to the console. Then return the winning fighter object with the higher strength move. Null if tied.
5. Create a function that takes two fighters and makes them fight until one fighter has won 3 rounds, then outputs “[fightername] wins!” to the console
https://jsfiddle.net/
JavaScript in the Browser
Runs before page loads
Runs after page loads
DOM Manipulation
1. Find something
2. Listen for it to fire an event
3. Edit the DOM based on event
window Object
http://www.w3schools.com/jsref/obj_window.asp
Document Object Model
http://www.w3schools.com/jsref/obj_window.asp
Editing HTML with JavaScript
Find Something
Attach Event Handler
Another Example
Browser Exercise1.Create an HTML page and a script that outputs “hello world”
to the console. Import the script onto the page.
2.Create a button and a paragraph. When the button is clicked, the paragraph should say “button clicked”.
3.Change the button click action to display the # of times the button has been clicked in the paragraph.
4.Create an input box and a list on the page. Every time the button is clicked, add a an item to the list with the text from the text input.
* Bonus Problem - Add a delete button to each list item and remove the item when the corresponding button is clicked.
Thank You@assafweinberg | [email protected]