SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
A BRIEF INTRODUCTION TO JAVASCRIPT
WHAT IS JAVASCRIPT?
• JavaScript is a lightweight, cross-platform, object-oriented computer programming
language 😅
• JavaScript is one of the three core technologies of web development
• Today, JavaScript can be used in different places:
• Client-side: JavaScript was traditionally only used in the browser
• Server-side: Thanks to node.js, we can use JavaScript on the server as well
• Javascript is what made modern web development possible:
• Dynamic effects and interactivity
• Modern web applications that we can interact with
• Frameworks/libraries like React and Angular are 100% based on JavaScript: you
need to master JavaScript in order to use them!
THE ROLE OF JAVASCRIPT IN WEB DEVELOPMENT
CONTENT
DYNAMIC EFFECTS/
PRESENTATION
PROGRAMMING
NOUNS, ADJECTIVES AND VERBS
CONTENT PRESENTATION DYNAMIC EFFECTS/
PROGRAMMING
NOUNS ADJECTIVES VERBS
<p></p> p {color: red;} p.hide();
means “paragraph” means “the paragraph means “hide the
text is red” paragraph”
JAVASCRIPT VERSIONS... (MORE ABOUT THIS LATER)
ES5 ES6/ES2015 ES7/ES2016 ES8/ES2017
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
VARIABLES AND DATA TYPES
PRIMITIVE JAVASCRIPT DATA TYPES
1. Number: Floating point numbers, for decimals and integers
2. String: Sequence of characters, used for text
3. Boolean: Logical data type that can only be true or false
4. Undefined: Data type of a variable that does not have a value yet
5. Null: Also means ‘non-existent’
JavaScript has dynamic typing: data types are
automatically assigned to variables
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
VARIABLE MUTATION AND TYPE
COERCION
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
BOOLEAN LOGIC
BASIC BOOLEAN LOGIC: NOT, AND & OR
var A
• AND (&&) => true if ALL are true
AND TRUE FALSE
• OR (||) => true if ONE is true
var B
TRUE TRUE FALSE • NOT (!) => inverts true/false value
FALSE FALSE FALSE
var age = 16;
var A
age >= 20; // => false
OR TRUE FALSE age < 30; // => true
!(age < 30); // => false
var B
TRUE TRUE TRUE
age >= 20 && age < 30; // => false
age >= 20 || age < 30; // => true
FALSE TRUE FALSE
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
THE TERNARY OPERATOR AND SWITCH
STATEMENTS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
TRUTHY AND FALSY VALUES AND
EQUALITY OPERATORS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
FUNCTIONS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
FUNCTION STATEMENTS AND
EXPRESSIONS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
ARRAYS
SECTION
JAVASCRIPT LANGUAGE BASICS
LECTURE
JAVASCRIPT VERSIONS: ES5, ES6 /
ES2015 AND ES6+
A (VERY) SHORT HISTORY OF JAVASCRIPT
• 1996: Changed from LiveScript to JavaScript to attract Java developers. JavaScript has almost
nothing to do with Java ☝
• 1997: ES1 (ECMAScript 1) became the first version of the JavaScript language standard:
• ECMAScript: The language standard;
• JavaScript: The language in practice.
• 2009: ES5 (ECMAScript 5) was released with lots of new features.
• 2015: ES6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever!
• 2015: Changed to an annual release cycle 🙏
• 2016/2017/2018/2019/…: Release of ES2016/ES2017/ES2018/ES2019/…
JAVASCRIPT TODAY: WHICH VERSION TO USE?
• Fully supported in all browsers;
ES5
• Ready to be used today 👍
ES6/ES2015
http://kangax.github.io/compat-table
• Well supported in all modern browsers
ES7/ES2016 • No support in older browsers;
• Can use most features in production with transpiling and polyfilling (converting to ES5) 😃
ES8/ES2017
ES9/ES2018 • Future versions, together called ESNext;
• Some features supported in modern browsers;
• Can already use some features in production with transpiling and polyfilling 😊
ES10/ES2019
(As of mid-2018)
WE USE ES5 AND ES6 IN THIS COURSE: WHY?
• JavaScript fundamentals • ES6/ES2015 introduction
• How the language works • Asynchronous JavaScript
ES5 • DOM manipulation project
ES6+ • AJAX and API calls
• Advanced language features • Modern dev setups (Webpack and Babel)
• Huge real project • Huge real project
• You will have to understand ES5 today and in the future;
• Many tutorials and code you find online today are still in ES5;
• When working on older codebases, these will be written in ES5;
• It’s better and easier to learn the fundamentals in ES5, and then
update to ES6+.
SECTION 3 — HOW
JAVASCRIPT WORKS
BEHIND THE SCENES
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
SECTION INTRO
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
HOW OUR CODE IS EXECUTED:
JAVASCRIPT PARSERS AND ENGINES
WHAT HAPPENS TO OUR CODE?
OUR CODE JAVASCRIPT ENGINE
Conversion
Parser to Machine Code Runs
Code
Machine Code
Abstract Syntax Tree
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
EXECUTION CONTEXTS AND THE
EXECUTION STACK
EXECUTION CONTEXTS
THE DEFAULT
Execu&on Context Global ExecuMon
(A box, a container, or a Context
wrapper which stores variables
and in which a piece of our
code is evaluated and executed)
• Code that is not inside any func.on
• Associated with the global object
• In the browser, that’s the window
object
lastName === window.lastName
// true
ExecuMon Context
third()
ExecuMon Context
second()
ExecuMon Context
first()
Global ExecuMon
Context
EXECUTION STACK
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
EXECUTION CONTEXTS IN DETAIL:
CREATION AND EXECUTION PHASES
AND HOISTING
THE EXECUTION CONTEXT IN DETAIL
1. Crea&on phase
EXECUTION CONTEXT
OBJECT A) Crea&on of the Variable Object (VO)
B) Crea&on of the scope chain
Variable Object (VO)
C) Determine value of the ‘this’ variable
Scope chain
2. Execu&on phase
“This” variable
The code of the func&on that generated the
current execu&on context is ran line by line
THE VARIABLE OBJECT
EXECUTION CONTEXT
OBJECT
Variable Object (VO)
Scope chain
• The argument object is created, containing all the arguments that “This” variable
were passed into the func&on.
• Code is scanned for funcMon declaraMons: for each func&on, a
property is created in the Variable Object, poinMng to the funcMon.
HOISTING
• Code is scanned for variable declaraMons: for each variable, a
property is created in the Variable Object, and set to undefined.
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
HOISTING IN PRACTICE
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
SCOPING AND THE SCOPE CHAIN
SCOPING IN JAVASCRIPT
EXECUTION CONTEXT
OBJECT
Variable Object (VO)
Scope chain
• Scoping answers the ques&on “where can we access a certain “This” variable
variable?”
• Each new funcMon creates a scope: the space/environment, in
which the variables it defines are accessible.
• Lexical scoping: a func&on that is lexically within another func&on
gets access to the scope of the outer func&on.
Global scope
a = ‘Hello’
[VOGlobal]
SCOPE CHAIN
1
first() scope a = ‘Hello’
b = ‘Hi!’
[VO1]+[VOGlobal]
a = ‘Hello’
2 b = ‘Hi!’
second() scope c = ‘Hey!’
[VO2]+[VO1]+[VOGlobal]
EXECUTION CONTEXT
OBJECT
Variable Object (VO)
Scope chain
“This” variable (VO: Variable Object)
EXECUTION STACK VS SCOPE CHAIN
ExecuMon Context a = ‘Hello’
Global Scope
third()
EXECUTION STACK
ExecuMon Context Scope
SCOPE CHAIN
a = ‘Hello’
b = ‘Hi!’
second() first()
ExecuMon Context Scope a = ‘Hello’
b = ‘Hi!’
first() second() c = ‘Hey!’
Global ExecuMon Scope a = ‘Hello’
d = ‘John’
Context third()
Order in which
func&ons are called ≠ Order in which func&ons
are wri<en lexically
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
THE 'THIS' KEYWORD
THE ‘THIS’ VARIABLE
EXECUTION CONTEXT
OBJECT
Variable Object (VO)
Scope chain
• Regular func&on call: the this keyword points at the global object,
“This” variable
(the window object, in the browser).
• Method call: the this variable points to the object that is calling
the method.
• The this keyword is not assigned a value un5l a func5on where it is
defined is actually called.
SECTION
HOW JAVASCRIPT WORKS BEHIND THE
SCENES
LECTURE
THE 'THIS' KEYWORD IN PRACTICE
SECTION 4 —
JAVASCRIPT IN THE
BROWSER: DOM
MANIPULATION AND
EVENTS
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
SECTION INTRO
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
THE DOM AND DOM MANIPULATION
THE DOCUMENT OBJECT MODEL
<body>
<section>
• DOM: Document Object Model;
<p>A paragraph with a <a>link</a> .</p>
• Structured representa&on of an HTML
document; <p>Another second paragraph.</p>
• The DOM is used to connect </section>
webpages to scripts like JavaScript;
<section>
• For each HTML box, there is an object
<img src=“x.jpg” alt=“The DOM”>
in the DOM that we can access and
interact with. </section>
</body>
DOM MANIPULATION
JAVASCRIPT DOM
InteracMon/
ManipulaMon
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
PROJECT SETUP AND DETAILS
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
FIRST DOM ACCESS AND MANIPULATION
WHAT YOU WILL LEARN IN THIS LECTURE
• How to create our fundamental
game variables;
• How to generate a random
number;
• How to manipulate the DOM;
• How to read from the DOM;
• How to change CSS styles.
SECTION
JAVASCRIPT IN THE BROWSER: DOM
MANIPULATION AND EVENTS
LECTURE
EVENTS AND EVENT HANDLING:
ROLLING THE DICE
WHAT ARE EVENTS?
• Events: No&fica&ons that are sent to no&fy the code that
something happened on the webpage;
• Examples: clicking a buWon, resizing a window, scrolling down or
pressing a key;
• Event listener: A func&on that performs an ac&on based on a
certain event. It waits for a specific event to happen.
HOW EVENTS ARE PROCESSED
ExecuMon Context
second()
ExecuMon Context
ExecuMon Context
first()
clickHandler()
Global ExecuMon Click Scroll
Context Event Event
EXECUTION STACK MESSAGE QUEUE
