TTS JavaScript Workshop5/26/2015

@assafweinberg | assaf@levvel.io

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 | assaf@levvel.io