Key concepts of the web JavaScript
Key concepts of the web JavaScript
Key concepts of the web JavaScript
Exercise : Create a variable called carName and assign the value
Volvo to it and print it in the console
Key concepts of the web JavaScript
JavaScript can change HTML content
Key concepts of the web JavaScript
JavaScript can change HTML attributes
Key concepts of the web JavaScript
JavaScript can change HTML styles
Key concepts of the web JavaScript
JavaScript can hide HTML Elements
Key concepts of the web JavaScript
JavaScript can show HTML Elements
Key concepts of the web JavaScript
Where do I put my JavaScripts ?
Key concepts of the web JavaScript
Where do I put my JavaScripts ?
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an
HTML page, or in both.
Key concepts of the web JavaScript
Where do I put my JavaScripts ?
Key concepts of the web JavaScript
JavaScripts Statement
A computer program is a list of "instructions" to be "executed" by a
computer.
In a programming language, these programming instructions are called
statements.
A JavaScript program is a list of programming statements.
Key concepts of the web JavaScript
JavaScripts Statement
Key concepts of the web JavaScript
JavaScripts White Space
A good practice is to put spaces around operators ( = + - * / ):
Instead of like this :
Key concepts of the web JavaScript
Practice : Let’s write some JavaScript code with all the operators and
display them however you like.
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Variables declared with the var always have Global Scope.
Variables declared with let have Block Scope
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Re-declaring a variable using the var keyword can impose problems.
Re-declaring a variable inside a block will also redeclare the variable
outside the block:
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Re-declaring a variable using the let keyword can solve this problem.
Re-declaring a variable inside a block will not redeclare the variable outside
the block:
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
JavaScript const variables must be assigned a value when they are
declared:
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
The keyword const is a little misleading.
It does not define a constant value. It defines a constant reference to a
value.
Because of this you can NOT:
● Re-assign a constant value
● Re-assign a constant array
● Reassign a constant object
● But you CAN:Change the elements of constant array
● Change the properties of constant object
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Practice : Identify which of the following causes an error
Key concepts of the web JavaScript
JavaScripts Variables (var, let, const)
Practice : Identify which of the following causes an error
Key concepts of the web JavaScript
JavaScripts Arithmetic
Key concepts of the web JavaScript
JavaScripts Assignment Operators
Key concepts of the web JavaScript
JavaScripts Data Types
JavaScript has 8 Datatypes
String
Number
Bigint
Boolean
Undefined
Null
Symbol
Object
Key concepts of the web JavaScript
JavaScripts Functions
A function performs actions and returns a result. It is a piece of code that is
used
to do something specific. We say that a function has an input and an output.
Key concepts of the web JavaScript
JavaScripts Functions
A function performs actions and returns a result. It is a piece of code that is
used
to do something specific. We say that a function has an input and an output.
Input Block Output
Key concepts of the web JavaScript
JavaScripts Functions
Example :
Key concepts of the web JavaScript
JavaScripts Functions
Syntax :
Key concepts of the web JavaScript
JavaScripts Functions
Key concepts of the web JavaScript
JavaScripts Functions
Functions Used as Variable Values
Key concepts of the web JavaScript
JavaScripts Objects
In real life, objects are things like: houses, cars, people, animals, or any
other subjects.
Here is a car object example:
Key concepts of the web JavaScript
JavaScripts Objects
Initialize an object
Key concepts of the web JavaScript
JavaScripts Objects
Add properties to an object
Key concepts of the web JavaScript
JavaScripts Objects
Accessing object properties
Key concepts of the web JavaScript
JavaScripts Objects
Accessing object properties
Key concepts of the web JavaScript
JavaScripts Objects
Accessing object properties
Key concepts of the web JavaScript
JavaScripts Objects
Accessing object properties
Key concepts of the web JavaScript
JavaScripts Objects
Object Methods
In this example, this refers to the
person object:
this.firstName means the
firstName property of person.
this.lastName means the
lastName property of person.
Key concepts of the web JavaScript
JavaScripts Objects
Deleting properties
The delete keyword
deletes both the value of
the property and the
property itself.
Key concepts of the web JavaScript
JavaScripts Objects
Nested Objects
Key concepts of the web JavaScript
JavaScripts Objects
Display objects
Object.values() creates an array from the property values:
Object.entries() makes it simple to use objects in loops:
JSON.stringify() converts an object to a string
Key concepts of the web JavaScript
JavaScripts Objects
Object Constructors
Key concepts of the web JavaScript
JavaScripts Objects
Object Constructors Default Values
Key concepts of the web JavaScript
JavaScripts Objects
JavaScript Built-in Constructors
Key concepts of the web JavaScript
JavaScripts Objects
JavaScript Built-in Constructors
Key concepts of the web JavaScript
JavaScripts Events
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
● An HTML web page has finished loading
● An HTML input field was changed
● An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements.
Key concepts of the web JavaScript
JavaScripts Events
Key concepts of the web JavaScript
JavaScripts Events
Key concepts of the web JavaScript
JavaScripts Events
A list of common HTML Events
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
JavaScripts Promises
A promise represents a value that is unknown now and that can be known in the future.
● When you request Yassir, the driver makes a promise to pick you up. When you are waiting
for him, the ride is pending.
● When the driver at some point in the future resolves to picks you up, the ride is fulfilled.
● If not the ride is rejected.
As developers, we may want to create a promise to represent an Asynchronous value.
Key concepts of the web JavaScript
Encode URL
Key concepts of the web JavaScript
How to customize Submit Function to get data from Forms To Send them :
Key concepts of the web JavaScript
How to get data from URL
