introduction to web frontend development with javascript
TRANSCRIPT
Introduction to Web Frontend Development
with JavaScript
InternetNetwork of Computer Networks
World Wide WebThe part of the Internet that communicates http and (often) html.
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
Web Development
is 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
But you can make great things!
The PlanetariumBeautiful Web Introduction to the solar system
BananBreadWeb FPS shoorter
CSS TricksWeb Animation (using data from 3d body tracking)
Not to mention all this stuff:
Let’s start…
Firefox ScratchpadShift+F4
alert()
Modal window
prompt()
Rarely used. Modal window.
console.log()Shows in console
Let’s take a look at some syntaxSyntax Reference
var
var aNumber = 1, aString = "a string", anArray = [1, 2, "string"], anObject = {a: 1; b: "string", "c": 4};
If Statement
if ( /* something truthy */ ) { //code to execute}else { // code to execute}
Switch Statement
switch (variable) { case value1: //statements break; case value2: //more statementsdefault: //more statements break;}
for loop
for (var i = 0; i < 5; i++) { //statements}
for … in
for (key in object) {//statements
}
while loop
while (condition) { statement;}
do … while
do { statement;} while (condition);
Weak Dynamic Typing
Truthy
When a value will be “true enough” for an if (or while) condition.
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");}
Two Concepts
1.A value that is not equal to true may still be truthy.
2.A value that is equal to true is truthy.
Truthiness
true1[1, 2]{a: 1}"something"
Falsiness
false0""NaNundefinednull
Two comparison Operators
== (equal) vs. === (strictly equal)
== does type coercion
It checks whether the values can be coerced into the same type and then if their values become equal.
=== checks type and value
ALWAYS use ===
== vs ===
1 == 1true
1 == "1"true
1 == truetrue
0 == falsetrue
1 === 1true
1 === "1"false
1 === truefalse
0 === falsefalse