Tutorial

1. JAVASCRIPT
FUNDAMENTALS
Get ready to unlock the full potential of web development with JS

2. TABLE OF CONTENTS
01
Overview
03
Basics
02
Prerequisites
04
Manipulating
HTML and CSS

3. OVERVIEW
01

4. HTML
Foundation of Web development
CSS
Style and layout the content
JavaScript
Dynamic and Interactive Websites
Web
Development

5. ❏ Compatible
❏ Large and Active Community
❏ Versability
❏ Popularity
❏ Client-site scripting
Why JavaScript?

6. PREREQUISITES
02

7. PREREQUISITES FOR JS
IDE
JS Runtime
Node.Js
VsCode

8. BASICS
03

9. ❏ High level language
❏ Interpreted language
❏ Dynamically typed
❏ Object-oriented language
What is JavaScript?

10. DATA TYPES
true, false
Boolean
Integers, floating
point numbers
Number
Characters, texts
String
null
NULL
Undefine
d Symbol
BigInt
BigInt("no”)
Symbol()
Object

11. VARIABLES
let
Mercury is the
closest planet to
the Sun
var const
❏ Can be
reassigned
❏ block-scoped
❏ Can be
reassigned
❏ function-
scoped
❏ Can’t be
reassigned
❏ block-scoped
❖ Variables are used to store data
❖ To declare a variable we use 3 keywords :-

12. Predict the output

13. OPERATORS
&& , || , !
Logical
+ , - , * , / , %
Arithmetic
== , != , === , !== ,
< , > , <= , >=
Comparison
& , | , ^ , ~ , << , >>
Bitwise
? :
Ternary Assignment
= , += , -= , *= , /= ,
%=

14. == operator is known as
equality operator whereas ===
operator is known as strict
equality operator
== compares only values of two
operands whereas === also
compares the datatypes

15. Conditional Statements

16. LOOPS
Same as while loop but
it executes atleast one
times
do… while
Execute a block of code
specific number of times
for loop
Execute a block of code
as long as condition is
true
while loop
Used to iterate over
objects
for…in
for…of
Used to iterate over
elements of array or
strings etc

17. Arrow Function
Function Expression
Function Declaration
FUNCTIONS
Type 1 Type 2 Type 3
❖ Functions can be declared in these ways :-

18. FUNCTIONS

19. Applies a function to
each element of the array
to reduc the array to a
single value
Creates a new array by
filtering out elements
from the array based on
the function
Creates a new array by
applying a function to
each of the original
element
MAP vs FILTER vs REDUCE
map filter reduce

20. MANIPULATING HTML AND CSS
04

21. ❏ Document Object Model
❏ Programming interface
❏ Represents the Web documents
as tree like model
❏ Create, modify and delete
HTML elements
❏ Play with CSS
What is DOM?

23. CONNECTING JAVASCRIPT
External Script
Inline Script
❖ There are 2 ways to include JS in the html code :-

24. Thank You