Javascript Workshop
•Download as PPT, PDF•
0 likes•650 views
Introduction to JavaScript workshop and exercises
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Javascript Workshop
Similar to Javascript Workshop (20)
Recently uploaded
Recently uploaded (20)
Javascript Workshop
- 1. TTS JavaScript Workshop 5/26/2015 @assafweinberg | assaf@levvel.io
- 2. Agenda • What is JavaScript? • 6 Language Fundamentals • Workshop part 1 • JavaScript in the Browser • Workshop part 2
- 6. Variables
- 7. JavaScript is… Loosely Typed Loosely Typed
- 8. Loose Typing
- 10. Coercion
- 11. Coercion
- 12. Arrays
- 13. Objects
- 14. In JavaScript… Objects are mutable Objects are mutable
- 15. What does it all mean?
- 16. Is JavaScript Object Oriented?
- 17. JavaScript is… Not Object Oriented, it’s Functional Not Object Oriented, it’s Functional
- 18. Functions
- 19. In JavaScript… Functions are Objects Functions are Objects
- 22. What’s this?
- 23. In JavaScript… “this” refers to the caller of the function “this” refers to the caller of the function
- 24. Variable Scope
- 25. In JavaScript… Functions have scope, blocks do not Functions have scope, blocks do not
- 26. Scope Closures
- 27. Closures will always have access to variables that were in scope when it w
- 28. JavaScript… Uses Closures (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) (functions have access to variables that were in scope when they were created)
- 29. 6 Lessons in JavaScript… Loosely typed Mutable objects Functional language Functions are Objects Uses the “this” keyword to refer to callers Uses closures Uses closures Uses closures Uses closures
- 30. WTF Miyagi?
- 31. It’s Code Time
- 32. 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/
- 33. JavaScript in the Browser
- 34. Runs before page loads Runs after page loads
- 35. DOM Manipulation 1. Find something 2. Listen for it to fire an event 3. Edit the DOM based on event
- 37. Document Object Model http://www.w3schools.com/jsref/obj_window.asp Editing HTML with JavaScript
- 38. Find Something
- 40. Another Example
- 42. Browser Exercise 1.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.
- 43. Thank You @assafweinberg | assaf@levvel.io
Editor's Notes
- 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
- JavaScript is NOT JAVA. Different classification of language (Object Oriented vs functional)
- The key to not being frustrated with JS is to understand what it is before diving in.
- Variables created with keyword ‘var’ JavaScript uses loose typing (e.g. var can be string or number) Goal was ease of use
- Lesson 1
- Runtime engine automatically converts vars to the type that makes the most sense Leads to unexpected behavior
- Double equals attempts to coerce the two values before checking equality
- “Falsey” values like 0, null, and undefined get evaluated to false, while everything else including strings and objects are “true”.
- Arrays work like they do in most other languages
- Objects are just hashes/maps/dictionaries Objects are mutable. Properties can be added or removed.
- Mutable objects have huge consequences for how the language is used.
- IN OO languages, parameters are of known type and their properties are known
- 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?
- 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.
- Functions can be assigned as object properties, just like any other object
- Functions can be passed in to other functions as parameters… just like any other object
- 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.
- Variables go out of scope at the end of a function, not a block like an if statement or for loop.
- 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.
- Ok, enough theory (sanding floors and getting beat downs by the Cobra Kai)
- Go to jsFiddle.net and complete this 5 step exercise.
- Language fundamentals are great, but you’re probably learning JS so you can use it in the browser.
- 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.
- 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.
- 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.
- 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.
- Step 1: find an element in the DOM
- Step 2: set a function to run when an event happens to that element.
- Step 3: edit the dom when the event fires. In thise case, a click.
- 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.