Javascript Fundamentals - Part 1 PDF

SECTION JAVASCRIPT FUNDAMENTALS – PART 1 LECTURE A BRIEF INTRODUCTION TO JAVASCRIPT WHAT IS JAVASCRIPT? We don’t have to worry about complex...

SECTION JAVASCRIPT FUNDAMENTALS – PART 1 LECTURE A BRIEF INTRODUCTION TO JAVASCRIPT WHAT IS JAVASCRIPT? We don’t have to worry about complex stuff like memory management V A S C R I P T J A JAVASCRIPT IS A HIGH-LEVEL, We can use different styles of programming Based on objects, for OBJECT-ORIENTED, MULTI-PARADIGM storing most kinds of data PROGRAMMING LANGUAGE. 🤯 Instruct computer to do things THE ROLE OF JAVASCRIPT IN WEB DEVELOPMENT CONTENT NOUNS means “paragraph” ADJECTIVES VERBS p.hide(); p {color: red} means “hide the means “the paragraph” paragraph text is red” PRESENTATION PROGRAMMING LANGUAGE: BUILDING WEB APPLICATIONS EXAMPLE OF DYNAMIC EFFECTS / WEB APPLICATION Display user info on hover Show spinner + loading Show spinner + loading data in the background data in the background Show data after loading Show tweet box after clicking Display tweets after loading data THERE IS NOTHING YOU CAN’T DO WITH JAVASCRIPT (WELL, ALMOST…) Front-end apps Back-end apps Dynamic effects and Web applications on web applications in the web servers browser 😍 THIS COURSE 100% based on JavaScript. They might go away, but JavaScript won’t! Native mobile Native desktop applications applications  JAVASCRIPT RELEASES... (MORE ABOUT THIS LATER) Biggest update to the New updates to JS language EVER every single year... ES6/ ES7/ ES8/ ES9/ ES10/ ES11/... ES5 ES2015 ES2016 ES2017 ES2018 ES2019 ES2020 Modern JavaScript ECMAScript 🔥 Learn modern JavaScript from the beginning, but without forgetting the older parts! 🥳 Let’s finally get started! SECTION JAVASCRIPT FUNDAMENTALS – PART 1 LECTURE DATA TYPES OBJECTS AND PRIMITIVES VALUE EVERYTHING ELSE OBJECT OR PRIMITIVE THE 7 PRIMITIVE DATA TYPES 1. Number: Floating point numbers 👉 Used for decimals and integers 2. String: Sequence of characters 👉 Used for text 3. Boolean: Logical type that can only be true or false 👉 Used for taking decisions 4. Undefined: Value taken by a variable that is not yet de ned (‘empty value’) 5. Null: Also means ‘empty value’ 6. Symbol (ES2015): Value that is unique and cannot be changed [Not useful for now] 7. BigInt (ES2020): Larger integers than the Number type can hold ☝ JavaScript has dynamic typing: We do not have to manually de ne the data type of the value stored in a variable. Instead, data types are determined automatically. Value has type, NOT variable! fi fi SECTION JAVASCRIPT FUNDAMENTALS – PART 1 LECTURE BOOLEAN LOGIC BASIC BOOLEAN LOGIC: THE AND, OR & NOT OPERATORS A AND B A OR B NOT A, NOT B “Sarah has a driver’s license “Sarah has a driver’s license AND good vision” OR good vision” 👇 Possible values Inverts true/false value A A AND TRUE FALSE OR TRUE FALSE TRUE TRUE FALSE TRUE TRUE TRUE B B Results of operation, depending on 👉 EXAMPLE: FALSE FALSE FALSE 2 variables FALSE TRUE FALSE A: Sarah has a driver’s license B: Sarah has good vision 👇 👇 true when ALL are true true when ONE is true Boolean variables that can be either TRUE or FALSE No matter how many variables AN EXAMPLE 👩💻 A BOOLEAN VARIABLES age = 16 AND TRUE FALSE 👉 A: Age is greater or equal 20 false 👉 B: Age is less than 30 true TRUE TRUE FALSE B LET’S USE OPERATORS! FALSE FALSE FALSE 👉 !A true false A 👉 A AND B false false true OR TRUE FALSE 👉 A OR B true false true TRUE TRUE TRUE B 👉 !A AND B true true true 👉 A OR !B false FALSE TRUE FALSE false false SECTION JAVASCRIPT FUNDAMENTALS – PART 1 LECTURE JAVASCRIPT RELEASES: ES5, ES6+ AND ESNEXT A BRIEF HISTORY OF JAVASCRIPT 1995 👉 Brendan Eich creates the very first version of JavaScript in just 10 days. It was called Mocha, but already had many fundamental features of modern JavaScript! 1996 👉 Mocha changes to LiveScript and then to JavaScript, in order to attract Java developers. However, JavaScript has almost nothing to do with Java ☝ 👉 Microsoft launches IE, copying JavaScript from Netscape and calling it JScript; 1997 👉 With a need to standardize the language, ECMA releases ECMAScript 1 (ES1), the rst official standard for JavaScript (ECMAScript is the standard, JavaScript the language in practice); 2009 👉 ES5 (ECMAScript 5) is released with lots of great new features; 2015 👉 ES6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever! 👉 ECMAScript changes to an annual release cycle in order to ship less features per update 🙏 2016 – ∞ 👉 Release of ES2016 / ES2017 / ES2018 / ES2019 / ES2020 / ES2021 / … / ES2089 😅 fi BACKWARDS COMPATIBILITY: DON’T BREAK THE WEB! 👍 Modern JavaScript Engine BACKWARDS 1997 COMPATIBLE 2020 👉 Old features are never removed; 👉 Not really new versions, just DON’T BREAK THE WEB! incremental updates (releases) 👉 Websites keep working forever! 👎 Modern JavaScript 😂 Engine NOT FORWARDS 2020 COMPATIBLE 2089 HOW TO USE MODERN JAVASCRIPT TODAY 👩💻 During development: Simply use the latest Google Chrome! 🚀 During production: Use Babel to transpile and poly ll your code (converting back to ES5 to ensure browser compatibility for all users). http://kangax.github.io/compat-table 👉 Fully supported in all browsers (down to IE 9 from 2011); ES5 👉 Ready to be used today 👍 👉 ES6+: Well supported in all modern browsers; ES6/ES2015 ↓ 👉 No support in older browsers; ES2020 👉 Can use most features in production with transpiling and polyfilling 😃 👉 ESNext: Future versions of the language (new feature proposals that reach Stage 4); ES2021 – ∞ 👉 Can already use some features in production with transpiling and polyfilling. (As of 2020) Will add new videos fi MODERN JAVASCRIPT FROM THE BEGINNING 🔥 Learn modern JavaScript from the beginning! ☝ But, also learn how some things used to be done before modern JavaScript (e.g. const & let vs var and function constructors vs ES6 class). 3 reasons why we should not forget the Good Ol’ JavaScript: 👉 You will better understand how JavaScript actually works; 👉 Many tutorials and code you nd online today are still in ES5; 👉 When working on old codebases, these will be written in ES5. fi  JAVASCRIPT FUNDAMENTALS – PART 2 SECTION JAVASCRIPT FUNDAMENTALS – PART 2 LECTURE FUNCTIONS CALLING OTHER FUNCTIONS CALLING A FUNCTION INSIDE A FUNCTION: DATA FLOW 2 2 8 2 3 8 8 2 SECTION JAVASCRIPT FUNDAMENTALS – PART 2 LECTURE REVIEWING FUNCTIONS FUNCTIONS REVIEW; 3 DIFFERENT FUNCTION TYPES 👉 Function declaration Function that can be used before it’s declared 👉 Function expression Essentially a function value stored in a variable 👉 Arrow function Great for a quick one-line functions. Has no this keyword (more later...) ☝ Three different ways of writing functions, but they all work in a similar way: receive input data, transform data, and then output data. FUNCTIONS REVIEW: ANATOMY OF A FUNCTION Parameters: placeholders to receive input Function body: block of code that values. Like local variables of a function we want to reuse. Processes the Function name function’s input data return statement to output a value from the function and terminate execution Calling, running or invoking the function, using () Variable to save returned Arguments: actual values value (function output) of function parameters, to input data