Introduction to Web Frontend Development with JavaScript
description
Transcript of Introduction to Web Frontend Development with JavaScript
![Page 1: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/1.jpg)
Introduction to Web Frontend Development
with JavaScript
![Page 2: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/2.jpg)
InternetNetwork of Computer Networks
![Page 3: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/3.jpg)
World Wide WebThe part of the Internet that communicates http and (often) html.
![Page 4: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/4.jpg)
HTTP• HyperText Transfer Protocol• Client/Server Network Protocol• Requests are sent with Verbs to
Resources• Get, Post, Put, Delete, Patch, Trace, Options
• Responses are returned by the server with a status code• 200 OK, 404 Not Found, 301 Permanent
Redirect
![Page 5: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/5.jpg)
Web Developmentis hard. You must know at least 3 (often 4) programming languages:
JavaScript the state and behavior of then frontend
CSS how things look
HTML structure of the UI/Document
Server Programming Stateful storage and interaction with other servers
![Page 6: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/6.jpg)
But you can make great things!
![Page 7: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/7.jpg)
The PlanetariumBeautiful Web Introduction to the solar system
BananBreadWeb FPS shoorter
CSS TricksWeb Animation (using data from 3d body tracking)
![Page 8: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/8.jpg)
Not to mention all this stuff:
![Page 9: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/9.jpg)
Let’s start…
![Page 10: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/10.jpg)
Firefox ScratchpadShift+F4
![Page 11: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/11.jpg)
alert()Modal window
![Page 12: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/12.jpg)
prompt()Rarely used. Modal window.
![Page 13: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/13.jpg)
console.log()Shows in console
![Page 14: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/14.jpg)
Let’s take a look at some syntaxSyntax Reference
![Page 15: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/15.jpg)
varvar aNumber = 1, aString = "a string", anArray = [1, 2, "string"], anObject = {a: 1; b: "string", "c": 4};
![Page 16: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/16.jpg)
If Statementif ( /* something truthy */ ) { //code to execute}else { // code to execute}
![Page 17: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/17.jpg)
Switch Statementswitch (variable) { case value1: //statements break; case value2: //more statementsdefault: //more statements break;}
![Page 18: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/18.jpg)
for loopfor (var i = 0; i < 5; i++) { //statements}
![Page 19: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/19.jpg)
for … infor (key in object) {
//statements}
![Page 20: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/20.jpg)
while loopwhile (condition) { statement;}
![Page 21: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/21.jpg)
do … whiledo { statement;} while (condition);
![Page 22: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/22.jpg)
Weak Dynamic Typing
![Page 23: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/23.jpg)
TruthyWhen a value will be “true enough” for an if (or while) condition.
![Page 24: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/24.jpg)
Truthy vs true
var obj = {};console.log("an empty object is not equal to true: " + (obj == true));if (obj) { console.log("but it’s truthy");}
![Page 25: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/25.jpg)
Two Concepts1.A value that is not equal to true may still be truthy.
2.A value that is equal to true is truthy.
![Page 26: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/26.jpg)
Truthinesstrue1[1, 2]{a: 1}"something"
![Page 27: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/27.jpg)
Falsinessfalse0""NaNundefinednull
![Page 28: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/28.jpg)
Two comparison Operators
== (equal) vs. === (strictly equal)
![Page 29: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/29.jpg)
== does type coercion It checks whether the values can be coerced into the same type and then if their values become equal.
![Page 30: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/30.jpg)
=== checks type and valueALWAYS use ===
![Page 31: Introduction to Web Frontend Development with JavaScript](https://reader036.fdocuments.in/reader036/viewer/2022062410/568163ac550346895dd4c0ab/html5/thumbnails/31.jpg)
== vs ===1 == 1
true1 == "1"
true1 == true
true0 == false
true
1 === 1true
1 === "1"false
1 === truefalse
0 === falsefalse