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