Introduction to Web Frontend Development with JavaScript

1. Introduction to Web Frontend Developmentwith JavaScript

2. Network of Computer Networks Internet

3. World Wide Web The part of the Internet that communicates http and (often) html.

4. 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

5. 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

6. But you can make great things!

7. The Planetarium • Beautiful Web Introduction to the solar system • BananBread • Web FPS shoorter • CSS Tricks • Web Animation (using data from 3d body tracking)

8. Not to mention all this stuff:

9. Let’s start…

10. Firefox Scratchpad Shift+F4

11. alert() • Modal window

12. prompt() • Rarely used. Modal window.

13. Shows in console console.log()

14. Let’s take a look at some syntax Syntax Reference

15. var • varaNumber = 1, • aString = "a string", • anArray = [1, 2, "string"], • anObject = {a: 1; b: "string", "c": 4};

16. If Statement • if ( /* something truthy */ ) { • //code to execute • } • else { • // code to execute • }

17. Switch Statement • switch (variable) { • case value1: • //statements • break; • case value2: • //more statements • default: • //more statements • break; • }

18. for loop • for (vari = 0; i < 5; i++) { • //statements • }

19. for … in • for (key in object) { • //statements • }

20. while loop • while (condition) { • statement; • }

21. do … while • do { • statement; • } while (condition);

22. Weak Dynamic Typing

23. Truthy • When a value will be “true enough” for an if (or while) condition.

24. Truthyvstrue • varobj = {}; • console.log("an empty object is not equal to true: " + (obj == true)); • if (obj) { • console.log("but it’s truthy"); • }

25. Two Concepts • A value that is not equal to true may still be truthy. • A value that is equal to true is truthy.

26. Truthiness • true • 1 • [1, 2] • {a: 1} • "something"

27. Falsiness • false • 0 • "" • NaN • undefined • null

28. == (equal) vs. === (strictly equal) Two comparison Operators

29. It checks whether the values can be coerced into the same type and then if their values become equal. == does type coercion

30. === checks type and value ALWAYS use ===

31. ==vs === • 1 == 1 • true • 1 == "1" • true • 1 == true • true • 0 == false • true • 1 === 1 • true • 1 === "1" • false • 1 === true • false • 0 === false • false