S ZRu YOcjm 3 C32 Qxo My HN 1669285904752

WELCOME TO FULL
STACK WEB
DEVELOPMENT
V2.2
www.inovotekacademy.com i-novotek academy inovotekacademy
Welcome to
Javascript
www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy
The Basics of Javascript
What is
Javascript


Noun

Noun

Noun Adjective

Noun Adjective

Noun Adjective

Noun Adjective Verb

How Does
Javascript
Work?






View in browser console

The Benefits
of
Javascript
Javascript
Variables
What is a
Variables ?
JavaScript
variables are
used to store
data
Basic rules of
JavaScript
syntax
Variable
naming
conventions
Javascript
data types
Javascript
Operators
Arithmetic
operators
Assignment
operators
Comparison
operators
Logical
operators
Conditional
Statements
Truthy and
falsy values
JavaScript
Loops
Javascript
Functions
Functions Syntax
function declaration

Functions Syntax
function Expression

Javascript
Strings

Javascript
ARRAYS

index 0 index 1 index 2

ARRAYS OF
BOOKS
ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS

ARRAYS OF BOOKS
3
2

Javascript
Objects
Person
Object
{} Syntax

Object Name Properties Methods
person.name = John person.greet()
person[name] = John person.walk()
person.age = 25 person.shout()
person[age] = 25 person.run()

Javascript
versions
Javascript versions

Javascript versions
JavaScript was created by Brendan

Eich in 1995 and became an ECMA
standard in 1997

Javascript versions
JavaScript was created by Brendan

Eich in 1995 and became an ECMA
standard in 1997

Organization

Javascript versions
The official name of the language is ECMAScript. ECMAScript versions
have been abbreviated to ES1, ES2, ES3, ES5, and ES6. Since 2016, new
versions have been named by year (ECMAScript 2016 / 2017 / 2018).

Javascript versions

Javascript versions
ECMA

Javascript versions
ECMA European Computer Manufacturers Association (ECMA)

Javascript versions

Javascript versions

Javascript versions
1997

Javascript versions
1997 ESI (ECMAScript 1) first version of JS language standard

Javascript versions
2007

Javascript versions
2007 ES5 (ECMAScript 5) New more features released

Javascript versions
2015
ES6 (ECMAScript 5) Biggest update

Javascript versions
2015
2016

Javascript versions
2015
2016
2017
Javascript versions
ES6/2015

Javascript versions
DESTRUCTURING ES6/2015

REST PARAMETERS (...)
ES6/2015
Rest parameters are a way to pass an

arbitrary number of arguments to a
function

ARROW FUNCTION
ES6/2015
() =>{}
ARROW FUNCTION
ES6/2015
An arrow function expression is a more concise way to
write a traditional function expression, but it cannot be
used in all situations.

ARROW FUNCTION
Synthax
ES6/2015

ARROW FUNCTION
ES6/2015
Arrow function limitations

ARROW FUNCTION
ES6/2015
Arrow functions do not have this keyword.

ARROW FUNCTION
ES6/2015
Arrow functions do not have arguments.

ARROW FUNCTION
ES6/2015
Arrow functions do not have arguments.
Arrow functions cannot use as a constructor.

SPREAD OPERATOR (...)
ES6/2015
The spread operator (...) is a
convenient way to copy all or part of
an existing array or object into
another array or object.
Spread vs Rest
Spread syntax "expands" an array into its elements,
while rest syntax collects multiple elements and
"condenses" them into a single element

Math Object

Number Methods

Number Methods
Primitive values cannot have properties and methods, but
JavaScript treats primitive values as objects when executing
methods and properties. This allows for methods and properties
to be available to primitive values.

Advanced Functions

Functions
Scope
Variable and function visibilities

Global Scope

Global Scope
Local scope

Global Scope Function scope
Local scope

Global Scope Function scope
Local scope
Block scope

HISTORY
OF
JAVASCRIPT
inovotekacademy
www.inovotekacademy.com i-novotek academy
HISTORY OF JAVASCRIPT
inovotekacademy
Brendan Eich
inovotekacademy
JavaScript was created in 1995 by Brendan Eich
Brendan Eich
inovotekacademy
It was originally named Mocha -> LiveScript ---> JavaScript.
Brendan Eich
inovotekacademy
In 1997, JavaScript was standardised by in the ECMAScript language specification.
Brendan Eich
inovotekacademy
In the early 2000s, Ajax were developed that use JavaScript to create dynamic applications
Brendan Eich
inovotekacademy
JavaScript’s syntax is heavily inspired by C++ and Java.
Brendan Eich
inovotekacademy
JavaScript is an interpreted language, not a compiled language
Brendan Eich
inovotekacademy
JavaScript is named after Java, and many of its concepts are borrowed from the Java language
Brendan Eich
inovotekacademy
JavaScript is named after Java, and many of its concepts are borrowed from the Java language
Brendan Eich
inovotekacademy
console.log()
inovotekacademy
console.log()
The console.log() is a function in JavaScript which is used to print any kind of variables
inovotekacademy
console.log()
It is like a command-line interface that runs JavaScript on your JavaScript engine.
inovotekacademy
console.log()
inovotekacademy
console.log()
read-eval-print loop (REPL). This refers to the loop that the console runs
inovotekacademy
Features of javascript
inovotekacademy
It's a single threaded language
inovotekacademy
It's a dynamically typed language
inovotekacademy
object-oriented language
inovotekacademy
It's a garbage collector
inovotekacademy
It's a client-side language
inovotekacademy
It's a server-side language
inovotekacademy
It's a non-blocking
inovotekacademy
It's a non-blocking
It's a high-level language
inovotekacademy
It's a single threaded language This means that js executes the code line
by line.
It's a non-blocking
inovotekacademy
This means that the type of a variable can

change during the program execution
It's a non-blocking
inovotekacademy
It's a dynamically typed language It's a programming paradigm that uses

object-oriented language objects as the primary way of representing
data which uses Prototypal Inheritance
It's a non-blocking
inovotekacademy
object-oriented language It's a process that frees up memory by

removing objects that are no longer used
in the program and it's called garbage
collection.
It's a non-blocking
inovotekacademy
It's a client-side language Using javascript in the browser
It's a non-blocking
inovotekacademy
It's a server-side language Using javascript on the server
It's a non-blocking
inovotekacademy
It's a code that runs concurrently in the

It's a non-blocking
background with the help of event loop
inovotekacademy
High-level language
For high level programming languages like

JavaScript, Python, Ruby, etc. resources
management are done automatically
inovotekacademy
High-level language
multi paradigm language
This a coding approach to structure code
1. Functional programming
2. Object oriented programming
3. Procedural programming
inovotekacademy
V8 Engine
inovotekacademy
V8 Engine
V8 Engine
inovotekacademy
V8 Engine
Javascript engine is a computer program that runs javascript code
V8 Engine
inovotekacademy
V8 Engine
Computers only understand machine code.
V8 Engine
inovotekacademy
V8 Engine
Computers only understand machine code.
V8 Engine
inovotekacademy
Code execution process
V8 Engine
inovotekacademy
source code
V8 Engine
inovotekacademy
source code
V8 Engine
inovotekacademy
source code
V8 Engine
inovotekacademy
source code
AST (abstract syntax tree)
V8 Engine
inovotekacademy
source code
parser
V8 Engine
inovotekacademy
source code
parser
V8 Engine
inovotekacademy
source code
parser
machine code
V8 Engine
inovotekacademy
source code
parser
Compilation
machine code
V8 Engine
inovotekacademy
source code
parser
Compilation
machine code
V8 Engine
browser
inovotekacademy
source code
parser
Compilation
machine code
V8 Engine
interpreter
browser
inovotekacademy
source code
parser
Compilation
machine code
V8 Engine
interpreter
browser
inovotekacademy
JS Runtime (Browser)
JS runtime, in a layman's point of view,

it's a box that contains all the things we
need to run our code.
inovotekacademy
inovotekacademy
JS Engine
inovotekacademy
JS Engine
Call Stack
inovotekacademy
JS Engine
fn1()
Call Stack
inovotekacademy
JS Engine
fn2()
fn1()
Call Stack
inovotekacademy
JS Engine
fn3()
fn2()
fn1()
Call Stack
inovotekacademy
JS Engine
fn3()
fn2()
fn1()
Heap Call Stack
inovotekacademy
JS Engine
WEB APIs
fn3()
fn2()
fn1()
Heap Call Stack
inovotekacademy
JS Engine
WEB APIs
DOM
fn3()
fn2()
fn1()
Heap Call Stack
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2()
fn1()
Heap Call Stack
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2()
fn1() setTimer
Heap Call Stack
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2()
fn1() setTimer
Heap Call Stack setInterval
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2()
fn1() setTimer
Callback Que
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2() Event loop
fn1() setTimer
Callback Que
inovotekacademy
JS Engine
WEB APIs
DOM Timers
fn3()
fn2() Event loop
fn1() setTimer
Callback Que
inovotekacademy
JS Callstack
Call Stack
fn3()
fn2()
fn1()
inovotekacademy
Synchronous
VS
Asynchronous
programming
inovotekacademy
Synchronous vs Asynchronous
Synchronous code is executed in a linear fashion, one

line at a time. Asynchronous code, on the other hand,
can be executed out of order or in parallel.
inovotekacademy
Synchronous Asynchronous
Single threaded Multi threaded
Code blocking None blocking code
Handle one request at a time Handle multiple requests at a time
Poor user experience Improve user experience
inovotekacademy
Synchronous
programming
Single threaded
inovotekacademy
Synchronous programming
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
50 minutes to cook
inovotekacademy
50 minutes to cook 10 minutes to cook
inovotekacademy
50 minutes to cook 10 minutes to cook 3 minutes to cook
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
inovotekacademy
3 minutes to cook
inovotekacademy
3 minutes to cook
inovotekacademy
inovotekacademy
Asynchronous
programming
Multi threaded
inovotekacademy
Asynchronous programming
Multi threaded
inovotekacademy
Multi threaded
inovotekacademy
Multi threaded
inovotekacademy
Multi threaded
50 minutes to cook
inovotekacademy
Multi threaded
inovotekacademy
Ways of writing
Async Code
inovotekacademy
Ways of writing Async Code
SetTimeout
inovotekacademy
SetTimeout Callback
inovotekacademy
SetTimeout Callback Promise
inovotekacademy
SetTimeout
inovotekacademy

S ZRu YOcjm 3 C32 Qxo My HN 1669285904752

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

S ZRu YOcjm 3 C32 Qxo My HN 1669285904752

Uploaded by

Copyright:

Available Formats

WELCOME TO FULL

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

Noun Adjective Verb

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

View in browser console

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy +233596038326/+8613051806737 inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

person.name = John person.greet()

person[name] = John person.walk()

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

JavaScript was created by Brendan

www.inovotekacademy.com i-novotek academy inovotekacademy

JavaScript was created by Brendan

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

ECMA European Computer Manufacturers Association (ECMA)

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

www.inovotekacademy.com i-novotek academy inovotekacademy

1997 ESI (ECMAScript 1) first version of JS language standard

www.inovotekacademy.com i-novotek academy inovotekacademy

1997 ESI (ECMAScript 1) first version of JS language standard

www.inovotekacademy.com i-novotek academy inovotekacademy

1997 ESI (ECMAScript 1) first version of JS language standard

2007 ES5 (ECMAScript 5) New more features released

www.inovotekacademy.com i-novotek academy inovotekacademy

1997 ESI (ECMAScript 1) first version of JS language standard

2007 ES5 (ECMAScript 5) New more features released

www.inovotekacademy.com i-novotek academy inovotekacademy