JavaScript. The Bad Parts. Patrick Behr

Size: px

Start display at page:

Download "JavaScript. The Bad Parts. Patrick Behr"

Mitchell Reed
5 years ago
Views:

1 JavaScript The Bad Parts Patrick Behr

2 History Created in 1995 by Netscape Originally called Mocha, then LiveScript, then JavaScript It s not related to Java ECMAScript is the official name Many implementations (V8, JavaScript, Chakra, JScript.NET, ActionScript) 2005 Jesse James Garrett introduces Ajax 2009 ECMAScript 5 and Harmony 2015 ECMAScript 2015 (the 6 th edition) ECMAScript 2016, ECMAScript 2017

3 What is JavaScript HTML content and structure CSS style and layout JavaScript Programming language the runs in the browser Make your web pages interactive Dynamically update content Add or remove elements Animate images Modify styles Validate form data

4 What does JavaScript look like Variables Must start with letter, number, underscore, or dollar sign Case sensitive: myvariable, myvariable, MYVARIABLE You must declare a variable before you can reference it You don t define a data type

5 What does JavaScript look like

6 What does JavaScript look like Primitive Data Types Boolean Number String Null Undefined Objects Date Array

7 What does JavaScript look like Functions Can accept input parameters (up to 255) Can return a value If no return statement, it will return undefined by default Can have a name, but doesn t have to Can be assigned to a variable and passed as a parameter Must be defined before you can call it

8 What does JavaScript look like Function declaration

9 What does JavaScript look like Objects Key / Value pairs Surrounded by curly brackets Can contain variables, functions, and objects Can also be empty

10 What does JavaScript look like

11 How JavaScript does stuff Variable type is determined by it s value Variables can change type Use typeof to determine variable type

12 How JavaScript does stuff

13 How JavaScript does stuff Assignment =

14 How JavaScript does stuff Equality == and ===

15 How JavaScript does stuff Non-Equality!= and!==

16 How JavaScript does stuff Remember not to check equality using =

17 How JavaScript does stuff Remember not to check equality using = ASSIGNMENT

18 How JavaScript does stuff Remember not to check equality using =

19 You want the truthy? You can t handle the truthy! Falsey values false null undefined 0 (zero) (blank) Truthy If it s not falsey, it must be truthy

20 How JavaScript does stuff JavaScript is executed line by line Variables and functions must be defined before used

21 How JavaScript does stuff

22 How JavaScript does stuff You can use variables and functions prior to definition

23 How JavaScript does stuff

24 How JavaScript does stuff Referred to as Hoisting Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope w3schools

25 How JavaScript does stuff

26 How JavaScript does stuff

27 How JavaScript does stuff

28 How JavaScript does stuff

29 How JavaScript does stuff Declarations aren t actually moved anywhere Two phases for each new lexical scope (global, function) Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line

30 How JavaScript does stuff

31 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

32 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

33 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

34 How JavaScript does stuff DECLARATION Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

35 How JavaScript does stuff DECLARATION Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations REGISTERED INTERNALLY myvar = undefined

36 How JavaScript does stuff ASSIGNMENT Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations myvar = undefined

37 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line myvar = undefined

38 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line myvar = undefined

39 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations Execution 1. Execute line by line myvar = My variable

40 How JavaScript does stuff

41 How JavaScript does stuff

42 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations

43 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations REGISTERED INTERNALLY DECLARATION myvar = function

44 How JavaScript does stuff Creation 1. Function parameters 2. Scan for function declarations 3. Scan for variable declarations myvar already registered DECLARATION myvar = function

45 How JavaScript does stuff myvar = function

46 How JavaScript does stuff myvar = function

47 How JavaScript does stuff myvar = This is a string

48 How JavaScript does stuff myvar = This is a string

49 Uncle Aesop says Define variables and functions at the top

50 Review Variables Declaration Assignment Equality

51 Review Variables Declaration Assignment Equality Data Types Primitive Data Types Boolean Number String Null Undefined Objects Date Array

52 Review Variables Declaration Assignment Equality Data Types Functions

53 Review Variables Declaration Assignment Equality Data Types Functions Objects

54 Review Variables Declaration Assignment Equality Data Types Functions Objects Hoisting

55 Functions and Callbacks

56 A closer look at functions Can have a name, but can also be anonymous (unnamed) First class objects Stored in variables, passed into or returned from functions Often used as a Callback A callback is a function sent as an argument into another function The callback function is called from the other function

57 Callbacks

58 Callbacks

59 Callbacks

60 Callbacks

61 Callbacks

62 Callbacks

63 Uncle Aesop says It s a good idea to make sure the callback is actually a function before you call it!

64 Uncle Aesop says It s a good idea to make sure the callback is actually a function before you call it!

65 Synchronous and asynchronous functions Synchronous In-line function call The main function waits for the called function to complete Like a phone call Asynchronous Similar to a submitted job The main function is free to continue processing Like a text message

66 Synchronous and asynchronous functions Synchronous

67 Synchronous and asynchronous functions Synchronous QINTER QBATCH Program1 QINTER JOB QUEUE

68 Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED Program1 QINTER JOB QUEUE

69 Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OtherPgm Program1 QINTER JOB QUEUE

70 Synchronous and asynchronous functions Synchronous QINTER OtherPgm Program1 QBATCH SYNC STARTED OTHER PGM QINTER JOB QUEUE

71 Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM Program1 QINTER JOB QUEUE

72 Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM SYNC ENDING Program1 QINTER JOB QUEUE

73 Synchronous and asynchronous functions Synchronous QINTER QBATCH SYNC STARTED OTHER PGM SYNC ENDING QINTER JOB QUEUE

74 Synchronous and asynchronous functions Asynchronous

75 Synchronous and asynchronous functions Asynchronous QINTER QBATCH Program1 QINTER JOB QUEUE

76 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED Program1 QINTER JOB QUEUE

77 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED Program1 OtherPgm QINTER JOB QUEUE

78 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING Program1 OtherPgm QINTER JOB QUEUE

79 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING QINTER JOB QUEUE OtherPgm

80 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING OTHER PGM QINTER JOB QUEUE OtherPgm

81 Synchronous and asynchronous functions Asynchronous QINTER QBATCH ASYNC STARTED ASYNC ENDING OTHER PGM QINTER JOB QUEUE

82 Synchronous and asynchronous functions Callback Program to callback

83 Synchronous and asynchronous functions Callback QINTER QBATCH Program1 QINTER JOB QUEUE

84 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED Program1 QINTER JOB QUEUE

85 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED Program1 OtherPgm QINTER JOB QUEUE

86 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE Program1 OtherPgm QINTER JOB QUEUE

87 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM Program1 OtherPgm QINTER JOB QUEUE

88 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM Program1 OtherPgm Program2 QINTER JOB QUEUE

89 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM Program1 Program2 QINTER JOB QUEUE

90 Synchronous and asynchronous functions Callback QINTER Program1 QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED Program2 QINTER JOB QUEUE

91 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED Program2 QINTER JOB QUEUE

92 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED Program2 QINTER JOB QUEUE

93 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED Program2 QINTER JOB QUEUE PROGRAM2

94 Synchronous and asynchronous functions Callback QINTER QBATCH ASYNC STARTED ASYNC CONTINUE OTHER PGM ASYNC ENDED PROGRAM2 QINTER JOB QUEUE

95 Concurrency model and Event Loop Each function call form a stack of frames Each frame contains the functions arguments and variables When the function is done, the frame is removed from the stack WebAPIs Functionality (APIs) provided by the browser settimeout Animation stuff Callback Queue

96 Concurrency model and Event Loop STACK WebAPIs CALLBACK QUEUE

97 Concurrency model and Event Loop STACK WebAPIs main() CALLBACK QUEUE

98 Concurrency model and Event Loop STACK WebAPIs starting console.log main() CALLBACK QUEUE

99 Concurrency model and Event Loop STACK WebAPIs starting main() CALLBACK QUEUE

100 Concurrency model and Event Loop STACK WebAPIs starting settimeout main() CALLBACK QUEUE

101 Concurrency model and Event Loop STACK WebAPIs timer... starting settimeout main() CALLBACK QUEUE

102 Concurrency model and Event Loop STACK WebAPIs timer... starting main() CALLBACK QUEUE

103 Concurrency model and Event Loop STACK WebAPIs timer... starting ending console.log main() CALLBACK QUEUE

104 Concurrency model and Event Loop STACK WebAPIs timer... starting ending main() CALLBACK QUEUE

105 Concurrency model and Event Loop STACK WebAPIs timer... starting ending CALLBACK QUEUE

106 Concurrency model and Event Loop STACK WebAPIs timer... starting ending callback CALLBACK QUEUE

107 Concurrency model and Event Loop STACK WebAPIs starting ending callback CALLBACK QUEUE

108 Concurrency model and Event Loop STACK WebAPIs starting ending set timeout console.log CALLBACK QUEUE

109 Concurrency model and Event Loop STACK WebAPIs starting ending set timeout CALLBACK QUEUE

110

111 Callback nesting

112 Callback nesting, nesting, nesting, HELL

JavaScript CS 4640 Programming Languages for Web Applications

JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation