The websites you often

visit, rely on JavaScript

to make their content
come alive
JS ?
What JavaScript can do:

• Modify the HTML and CSS

• respond to events

• make animations

•…
JS
Some good code editors:

• Sublime Text

• Notepad++

• Visual studio code

JS
Variables provide a way of labeling data with a descriptive name

JS
To name a variable:

• Start with a letter, an underscore or a dollar sign

• After that, use as many letters, numeric digits,

underscores or dollar signs as you like

• Avoid built-in keywords: var, function …

JS
Functions enable you to write code that can be reused over and over again

JS
Conditional Statements:

the ability to test a variable against a value and act in

one way if the condition is met by the variable or
another way if not.

JS
if statement:

if(condition){
execute these statements;
}

JS
if/else statement:

if(condition){
do something;
}
else{
do something else;
}

JS
Conditional operators:

if(expression operator expression){

do something;
}
else{
do something else;
}

JS
Operator True if

the first expression evaluates to something that is equal to

== the second expression.

the first expression evaluates to something that is greater

>= than or equal to the second expression

> the first expression evaluates to something that is greater

than the second expression
Operator True if

the first expression evaluates to something that is not equal

!= to the second expression

the first expression and the second expression both evaluate

&& to true

|| either the first expression or the second expression evaluate

to true
Chaining if statements together:

if(condition){
....
} else if(condition) {
….
} else if(condition) {
….
} else if(condition) {
….
} else {
….
} JS
Switch Statement:

switch (/*variable*/ ){

case 1:
/*execute these statements*/; break;
case 2:
/*execute these statements*/; break;
default:
/*execute these statements*/;
}
JS
Loops cycle through a section of code as long as some condition is met

• for loops

• while loops

• do…while loops

JS
Syntax of for loop:

for (initializationStatement; testExpression; updateStatement)

{
// code
}

JS
Timers:

A block of JavaScript code is generally executed synchronously.

JS
setTimeout:

setTimeout(function, delayInMilliseconds)

JS
setInterval:

setInterval(function, delayInMilliseconds)

JS
You Browser Is Busy:

Your browser is busy doing

different things
requestAnimationFrame:

requestAnimationFrame(someFunction)

JS
Variable Scope:

defines the part of the program where a particular variable is

accessible.

JS
Global Scope:

Global variables hold their value throughout the entire life-time of

your program.

JS
Local Scope:

Variables declared inside a function will not work when accessed

from outside of the function.

JS
Where to put JavaScript :

You can write your JavaScript code in a separate file.

you can still have lines of JavaScript code while using an

external JavaScript file

JS
Commenting your code:

If you can’t tell what you’re code is doing, then it’s USELESS !!

JS
Comments help you understand what the code is doing

JS
Best Practices For Commenting:

• Always comment your code as you’re writing it

• Comment clearly

• Don’t over-comment

JS
Booleans( true or false), numbers, strings are called types.

JS
JavaScript is hiding something !!

JS
 Types

String Null

Number Undefined

Boolean Object
Types can be either primitives or they can be complex.

JS
Did you say Object ?!

JS
 Predefined Objects

String Number

Boolean Array

Date Math
Finding characters:

You can look for a character or characters inside a string using

indexOf, lastIndexOf and match methods.

JS
Finding characters:

The match method matches a string against special text strings

known as regular expressions

JS
Splitting a string:

You can also split a string apart using the split method.

JS
Arrays:

An array stores a sequence of values that are all of the same type.

JS
Putting Objects Under the Microscope:

TIME TO OPEN THE BOX !!

JS
Creating an Object:

var car = {};

Our car object is connected to the main Object type

through the __proto__ property.

JS
Immediately Invoked Function Expression:

IIFE is a JavaScript function that runs as soon as it is defined.

JS
IIFE are used:

• To avoid polluting the global scope

• In closures

JS
Document Object Model:

DOM is a hierarchical structure followed by the browser to make

sense of all the HTML, CSS and JavaScript in a web page.

JS
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<div>
<p>Some text <a>and a link</a></p>
</div>
</body>
</html>
The window object represents the browser window

JS
The document object represents your web page

JS
Selecting elements in the DOM:

var element = document.querySelector("selector");

var elements = document.querySelectorAll("selector");

JS
Styling Content:

#parent {
width: 100px; <div id="parent"></div>
height: 100px;
padding: 10px;
border: 2px solid black;
}

JS
You can use JavaScript to style your elements !!

JS
Styling approaches:

To style an element using JavaScript, you can set a CSS property

directly on the element or manipulate class values.

JS
classList API:

classList API provides methods and properties to manipulate class

values of DOM elements

JS
Creating and inserting elements:

1. Create the element

2. Assign attributes to it

3. Insert it

JS
Events are actions that occur when the user or the browser
manipulates a page. For example: clicking a button, pressing a key …

JS
 Event Triggered when

keydown Pressing a key on the keyboard

keyup Releasing a key on the keyboard

keypress a key that produces a character value is pressed down

 Event Triggered when

click Clicking an element

dblclick Double clicking an element

mouseover Moving the cursor into the element

 Event Triggered when

mouseout Moving the cursor out of the element

mousemove Moving the cursor over the element

mousedown Pressing the mouse button over an element

 Event Triggered when

mouseup Releasing the mouse button over an element

focus An element receives focus

blur An element loses focus

Event Bubbling and Capturing:

Capturing is executed before triggering an event

Bubbling is executed after an event has been triggered

JS
The Event Object:

the Event object gives you information about the currently

triggered event.

JS
Retrieve pressed keys:

• keyup event

• keydown event

• keypress event

JS
Forms:

Working with forms is something you’re going to do a lot in

JavaScript.

JS
CONGRATULATIONS !!
JS

Thanks!
You have a question ? Let’s discuss it below.

What do you think about this course? I would love to hear your feedback.

JS