What js? Its environment
-
Upload
lucio-martinez -
Category
Technology
-
view
24 -
download
0
Transcript of What js? Its environment
![Page 1: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/1.jpg)
What JavaScript?Remove your whats
of JavaScript
![Page 2: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/2.jpg)
JavaScript
Simple to use.
![Page 3: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/3.jpg)
Good or bad
ECMA
![Page 4: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/4.jpg)
Good or bad
JavaScript Dev
![Page 5: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/5.jpg)
Be a JavaScript coder
Adapt
Other programming language solution may not be a solution
Read javascript code, understand it
![Page 6: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/6.jpg)
Discovering JS
Practices
Debugging
Libraries
![Page 7: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/7.jpg)
Badvar userResponse = getResponseIfAny(); // Could be false, true or null
if (userResponse != false) {
console.log(“User says yes”)
} else {
console.log(“User says no”)
}
// This does not cover null
![Page 8: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/8.jpg)
Badvar userResponse = getResponseIfAny(); // Could be false, true or null
if (userResponse == true) {
console.log(“User says yes”)
} else if (userResponse != null) {
console.log(“User says no”) // This won’t never get printed
} else {
console.log(“User did not give a response”)
}
![Page 9: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/9.jpg)
Badvar userResponse = getResponseIfAny(); // Could be false, true or null
if (userResponse === null) {
console.log(“User did not give a response”)
} else if (userResponse == true) { // Works but is not good enough
console.log(“User says yes”)
} else {
console.log(“User says no”)
}
![Page 10: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/10.jpg)
Goodvar userResponse = getResponseIfAny(); // Could be false, true or null
if (userResponse === null) {
console.log(“User did not give a response”)
} else if (userResponse) { // Awesome!
console.log(“User says yes”)
} else {
console.log(“User says no”)
}
![Page 11: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/11.jpg)
Badvar userResponse = getResponse(); // Could be false or true
if (userResponse == true) {
console.log(“User says yes”)
} else {
console.log(“User says no”)
}
// This does work but is shity javascript
![Page 12: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/12.jpg)
Goodvar userResponse = getResponse(); // Could be false or true
if (userResponse) {
console.log(“User says yes”)
} else {
console.log(“User says no”)
}
// Cool javascript
![Page 13: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/13.jpg)
Discovering JS
Practices
Debugging
Libraries
![Page 14: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/14.jpg)
Debugging
Use the console
It will almost always be right
Use the debugger from the browser
Chromium tools will always be your friend
Pay attention to exclamation signs and colors
![Page 15: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/15.jpg)
Debugging
Dear Firefox.
![Page 16: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/16.jpg)
![Page 17: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/17.jpg)
Debugging
Chrome in the other hand.
![Page 18: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/18.jpg)
![Page 19: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/19.jpg)
![Page 20: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/20.jpg)
Debugging
Using debugger keyword
![Page 21: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/21.jpg)
![Page 22: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/22.jpg)
Debugging
Add watches
![Page 23: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/23.jpg)
![Page 24: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/24.jpg)
Debugging
Dear Firefox
![Page 25: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/25.jpg)
Debugging
Chrome for the win
![Page 26: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/26.jpg)
Debugging
![Page 27: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/27.jpg)
Debugging
![Page 28: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/28.jpg)
Debugging
On our side
Chrome Dev Tools
![Page 29: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/29.jpg)
Debugging
Pay attention to symbols in the console!
![Page 30: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/30.jpg)
Debugging
First, everything normal so far.
![Page 31: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/31.jpg)
Debugging
Then WAT¿
![Page 32: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/32.jpg)
Debugging
Colors are important too!
![Page 33: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/33.jpg)
Debugging
![Page 34: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/34.jpg)
JavaScript frameworks
![Page 35: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/35.jpg)
Discovering JS
Practices
Debugging
Libraries
![Page 36: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/36.jpg)
Libraries
External forces are on our side too.
Things like lodash underscore and such make common functionality ready for use.
![Page 37: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/37.jpg)
Libraries
Lodash
![Page 38: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/38.jpg)
Libraries
Moment
![Page 39: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/39.jpg)
Libraries
jQuery
![Page 40: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/40.jpg)
Libraries
jQuery is NOT a Framework
![Page 41: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/41.jpg)
Libraries
jQuery is NOT a Framework
![Page 42: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/42.jpg)
Libraries
jQuery is NOT a Framework
![Page 43: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/43.jpg)
Libraries
jQuery is NOT a Framework
![Page 44: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/44.jpg)
Libraries
jQuery is NOT a Framework
![Page 45: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/45.jpg)
Libraries
jQuery is NOT a Framework
![Page 46: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/46.jpg)
Libraries
jQuery is NOT a Framework
![Page 47: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/47.jpg)
Libraries
jQuery is NOT a Framework
![Page 48: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/48.jpg)
Libraries
jQuery is NOT a Framework
![Page 49: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/49.jpg)
Fin.
![Page 50: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/50.jpg)
Libraries
jQuery is NOT a Framework
![Page 51: What js? Its environment](https://reader035.fdocuments.in/reader035/viewer/2022062412/58e49fcc1a28abf5428b5e83/html5/thumbnails/51.jpg)