Download to read offline
![Tournament Rules
1. 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/](https://image.slidesharecdn.com/javascript-workshop-150614151655-lva1-app6892/75/Javascript-Workshop-32-2048.jpg)
Uploaded byAssaf Weinberg
Javascript Workshop
This document summarizes a JavaScript workshop that covers the fundamentals of JavaScript including: - JavaScript is loosely typed, uses mutable objects, and is a functional language. Functions are objects that have access to variables in their scope using closures. - The workshop includes exercises to create karate fighter objects that perform moves, and a fight function to simulate matches until a winner emerges after 3 rounds. - The second part covers using JavaScript in the browser by manipulating the DOM through finding elements, attaching event handlers, and editing HTML. Exercises demonstrate outputting to the console, updating a paragraph on button click, and adding items to a list from user input.
More Related Content
Javascript Workshop
- 1. TTS JavaScript Workshop 5/26/2015 @assafweinberg| assaf@levvel.io
- 2. Agenda • What isJavaScript? • 6 Language Fundamentals • Workshop part 1 • JavaScript in the Browser • Workshop part 2
- 3.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. In JavaScript… Objects aremutable Objects are mutable
- 15. What does itall mean?
- 16. Is JavaScript ObjectOriented?
- 17. JavaScript is… Not ObjectOriented, it’s Functional Not Object Oriented, it’s Functional
- 18.
- 19.
- 20.
- 21.
- 22.
- 23. In JavaScript… “this” refersto the caller of the function “this” refers to the caller of the function
- 24.
- 25. In JavaScript… Functions havescope, blocks do not Functions have scope, blocks do not
- 26.
- 27. Closures will always haveaccess to variables that were in scope when it w
- 28. JavaScript… Uses Closures (functions haveaccess to variables that were in scope when they were created) (functions have access to variables that were in scope when they were created) (functions have access to variables that were in scope when they were created)
- 29. 6 Lessons in JavaScript… Looselytyped Mutable objects Functional language Functions are Objects Uses the “this” keyword to refer to callers Uses closures Uses closures Uses closures Uses closures
- 30.
- 31.
- 32. Tournament Rules 1. Createan 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/
- 33. JavaScript in theBrowser
- 34. Runs before pageloads Runs after page loads
- 35. DOM Manipulation 1. Findsomething 2. Listen for it to fire an event 3. Edit the DOM based on event
- 36.
- 37.
- 38.
- 39.
- 40.
- 42. Browser Exercise 1.Create anHTML 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.
- 43. Thank You @assafweinberg |assaf@levvel.io
Editor's Notes
- #4 In 1995, Netscape wanted to add scriptability to the web. 1) Easy for beginners - given web pages weren't being developed by programmers 2) Look like java - to capitalize on the language’s popularity at the time - Brandon Eich modeled JavaScript after SCHEME in 10 days
- #5 JavaScript is NOT JAVA. Different classification of language (Object Oriented vs functional)
- #6 The key to not being frustrated with JS is to understand what it is before diving in.
- #7 Variables created with keyword ‘var’ JavaScript uses loose typing (e.g. var can be string or number) Goal was ease of use
- #8 Lesson 1
- #10 Runtime engine automatically converts vars to the type that makes the most sense Leads to unexpected behavior
- #11 Double equals attempts to coerce the two values before checking equality
- #12 “Falsey” values like 0, null, and undefined get evaluated to false, while everything else including strings and objects are “true”.
- #13 Arrays work like they do in most other languages
- #14 Objects are just hashes/maps/dictionaries Objects are mutable. Properties can be added or removed.
- #15 Mutable objects have huge consequences for how the language is used.
- #16 IN OO languages, parameters are of known type and their properties are known
- #17 In JS, mutable objects mean that object type is of limited value Is the object being passed into the teach function a student or an oak tree?
- #18 Many people argue JS is OO because it has objects and can support encapsulation. But without strong typing, most of the benefits of building systems in an Object Oriented way are lost, so most programmers don’t create true OO systems in JS.
- #21 Functions can be assigned as object properties, just like any other object
- #22 Functions can be passed in to other functions as parameters… just like any other object
- #23 The “this” keyword refers to the caller of the function. Imagine a function as a physical piece of paper with instructions. Some of those instructions might refer to the reader (e.g. “say your name”). The “this” keyword refers to the reader.
- #25 Variables go out of scope at the end of a function, not a block like an if statement or for loop.
- #28 In OO languages the only variables available inside a function are the ones passed in as parameters. In JS, all variables in scope when a function is declared are addressable inside the function.
- #31 Ok, enough theory (sanding floors and getting beat downs by the Cobra Kai)
- #33 Go to jsFiddle.net and complete this 5 step exercise.
- #34 Language fundamentals are great, but you’re probably learning JS so you can use it in the browser.
- #35 Add JS to your HTML page in the head or before body tag close, but preferably the latter for performance reasons. There are other nuances for inclusion, but this is the basics.
- #36 The typical pattern for adding simple browser interactivity is finding an element, adding an event handler to it, and editing the DOM when the event fires.
- #37 Browser injects a global window object that refers to the browser window. Most important property is window.document, that refers to the HTML document loaded in the browser.
- #38 The DOM is a hierarchical object representing the HTML loaded in the browser. It is query able and editable by JS. The API confuses a lot of people, so go to your happy place if you need to.
- #39 Step 1: find an element in the DOM
- #40 Step 2: set a function to run when an event happens to that element.
- #41 Step 3: edit the dom when the event fires. In thise case, a click.
- #42 Is just a helper library to help you do those three steps in a simpler syntax. Use it if you need to but be careful not to go too far before reaching for a full JS framework like backbone, angular, react, etc.