Javascript Workshop
-
Upload
assaf-weinberg -
Category
Software
-
view
253 -
download
0
Transcript of Javascript Workshop
![Page 2: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/2.jpg)
Agenda
• What is JavaScript?
• 6 Language Fundamentals
• Workshop part 1
• JavaScript in the Browser
• Workshop part 2
![Page 3: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/3.jpg)
http://javascript.crockford.com/javascript.html
What is JavaScript?
![Page 4: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/4.jpg)
![Page 5: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/5.jpg)
Language Fundamentals
https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
![Page 6: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/6.jpg)
Variables
![Page 7: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/7.jpg)
JavaScript is… Loosely Typed
![Page 8: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/8.jpg)
Loose Typing
![Page 9: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/9.jpg)
Type Coercion
![Page 10: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/10.jpg)
Coercion
![Page 11: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/11.jpg)
Coercion
![Page 12: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/12.jpg)
Arrays
![Page 13: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/13.jpg)
Objects
![Page 14: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/14.jpg)
In JavaScript… Objects are mutable
![Page 15: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/15.jpg)
What does it all mean?
![Page 16: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/16.jpg)
Is JavaScript Object Oriented?
![Page 17: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/17.jpg)
JavaScript is… Not Object Oriented, it’s Functional
![Page 18: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/18.jpg)
Functions
![Page 19: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/19.jpg)
In JavaScript… Functions are Objects
![Page 20: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/20.jpg)
Functions as Properties
![Page 21: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/21.jpg)
Functions as Parameters
![Page 22: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/22.jpg)
What’s this?
![Page 23: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/23.jpg)
In JavaScript… “this” refers to the caller of the function
![Page 24: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/24.jpg)
Variable Scope
![Page 25: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/25.jpg)
In JavaScript… Functions have scope, blocks do not
![Page 26: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/26.jpg)
ScopeClosures
![Page 27: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/27.jpg)
ClosuresA function will always have access to variables that were in scope when it was declared
![Page 28: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/28.jpg)
JavaScript… Uses Closures (functions have access to variables that were in scope when they were created)
![Page 29: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/29.jpg)
6 Lessons in JavaScript… Loosely typedMutable objectsFunctional languageFunctions are ObjectsUses the “this” keyword to refer to callersUses closures
![Page 30: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/30.jpg)
WTF Miyagi?WTF Miyagi?
![Page 31: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/31.jpg)
It’s Code Time
![Page 32: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/32.jpg)
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/
![Page 33: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/33.jpg)
JavaScript in the Browser
![Page 34: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/34.jpg)
Runs before page loads
Runs after page loads
![Page 35: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/35.jpg)
DOM Manipulation
1. Find something
2. Listen for it to fire an event
3. Edit the DOM based on event
![Page 36: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/36.jpg)
window Object
http://www.w3schools.com/jsref/obj_window.asp
![Page 37: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/37.jpg)
Document Object Model
http://www.w3schools.com/jsref/obj_window.asp
Editing HTML with JavaScript
![Page 38: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/38.jpg)
Find Something
![Page 39: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/39.jpg)
Attach Event Handler
![Page 40: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/40.jpg)
Another Example
![Page 41: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/41.jpg)
![Page 42: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/42.jpg)
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.
![Page 43: Javascript Workshop](https://reader030.fdocuments.us/reader030/viewer/2022032619/55be21dabb61ebef3a8b47d6/html5/thumbnails/43.jpg)
Thank You@assafweinberg | [email protected]