GDG On Campus NBNSCOE Web Development Workshop Day 2 : JavaScript and DOM

WEB DEVELOPMENT WORKSHOP -
DAY 2
JAVASCRIPT TUTORIAL
& DOM MANIPULATION
- Ved Ganapur
- Srushti Vijapure

Todays Flow :
Why learn Javascript?
DOM and its manipulation. Practical Implementaion of JS.
Javascript Fundamentals
What is Javascript?

What is Javascript?
JS is a programming language.
We use it to give instructions to the computer.

Our 1st JS code:
console.log is used to log (print) a message to the console.
console.log(“Welcome to the workshop”);

Variables in JS
Variables are containers for data.
ag
e
price Name

Variable Rules
● Variable names are case sensitive; “a” & “A” is different.
● Only letters, digits, underscore( _ ) and $ is allowed. (not
even space)
● Only a letter, underscore( _ ) or $ should be 1st character.
● Reserved words cannot be variable names.

let, const, var
1. var : Variable can be re-declared & updated. A global scope
variable.
2. let : Variable cannot be re-declared but can be updated. A
block scope variable.
3. const : Variable cannot be re-declared or updated. A block
scope variable.

Comments in JS
// This is a single line comment
/* This is a multi line comment,
ending with a */

Operators in JS
Used to perform some operations on data.
Arithmetic Operators : +, -, *, /
● Modulus
● Exponentiation
● Increment
● Decrement

Comparison Operators
● Equal to ==
● Not equal to !=
● >, >=, <, <=
● Equal to and type ===
● Not equal to and type !==

Conditional Statements
1) if statement - to implement some condition on code

Ternary Operators
● condition ? true output : false output
age > 18 ? “adult” : “not adult”;

Looping in JS
Loops are used to execute a piece of
code again & again

for loop:
syntax : for (initialization; condition; afterthought)
statement
Example :
for (let i = 1; i >= 5; i++) {
console.log(“Welcome to the
workshop”);
}

while loop :
syntax : while (condition) {
// do some work
}
Example :

do-while loop :
syntax : do {
// do some work
} while (condition);
Example :

for-of loop :
syntax : for (let val of strVar) {
// do some work
}
Example :

Strings in JS
String is a sequence of characters used to represent text
● Create a string: let str = “Ved Ganapur”;
● String length: str.length
● String indices: str[0],str[1],str[2]

Template Literals
A way to have embedded expressions in strings.
String Interpolation: To create strings by doing substitution of
placeholders.
`string text ${expression} string text`

String Methods in JS
These are built in functions to manipulate a string.
● str.toUpperCase( )
● str.toLowerCase( )
● str.trim( ) //removes whitespaces
● str.slice(start, end?) // returns part of string
● str1.concat( str2 ) // joins str2 with str1
● str.replace( searchVal, newVal )
● str.charAt( idx )

Functions in JS
Block of code that performs a specific task, can be invoked
whenever needed.
Definition:function functionName( ) {
//do some work
}
Function Call: functionName();
Example: function functionName( param1, param2 ...) {
//do some work
}

Arrow functions
Compact way of writing a function.
const functionName = ( param1, param2 ...) => {
//do some work
}

Some more Array methods:
MAP: Creates a new array with the results of some operation. The value of its
callback returns are used to form a new array.
Definition: arr.map( callbackFnx( value, index, array ))
let newArr = arr.map( (val) => {
return val * 2;
} )

Filter: Creates a new array of elements that give true for a condition/filter.
Example: all even elements
let newArr = arr.filter( (val) => {
return val % 2 === 0;
} )

Reduce: Performs some operations & reduces the array to a single value. It returns
that single value.

From Programming Basics to Dynamic Websites
Why Javascript is used in web
development ?
JavaScript is used in web development because it adds interactivity, dynamic behavior, and
functionality to websites.

Introduction to DOM
Document Object Model

How to Access DOM Elements
Selecting Elements :
1) getElementById :
Used to select an element by its unique ID
Fast and specific for unique IDs.
2) querySelector :
A flexible method to select elements using CSS selectors
Flexible for classes, tags, and attributes.

Modifying Elements :
1)updating content : innerText/textContent
2)modifying css of elements : element.style.property

Simplifying Login: Toggling
Password Visibility

Event Handling :
An event is any interaction or action on a web page (e.g., clicking, typing, or scrolling).
JavaScript allows you to respond to events to create interactive experiences.
● addEventListener
This is the most common and preferred method to add an event to an element.
○ Syntax: element.addEventListener('event', function)
● removeEventListener
Used to remove an event listener that was previously added using addEventListener.
○ Syntax: element.removeEventListener('event', function)
Types-
● Mouse Events
● Key Events
● From Events
● Window Events

Mouse Events -
Mouse events are triggered by the user's mouse actions such as clicking, hovering, or moving the
mouse over an element.
Common Mouse Events:
1. click
Triggered when the user clicks on an element.
○ Example: Clicking a button to submit a form.
2. dblclick
Triggered when the user double-clicks on an element.
○ Example: Double-clicking on a word to select it.
3. mouseover
Triggered when the mouse pointer enters an element.
○ Example: Highlighting a button when the mouse hovers over it.
4. mouseout
Triggered when the mouse pointer leaves an element.
○ Example: Removing the highlight effect when the mouse leaves the button.
5. mousemove
Triggered when the mouse pointer moves over an element.

Form Events -
Form events are triggered when actions are performed on form elements like inputs, selects, or the
form itself.
Common Form Events:
1. submit
Triggered when the user submits a form.
○ Example: Submitting a contact form.
2. focus
Triggered when an input element gains focus.
Example: When the user clicks into a text field to type.
3. blur
Triggered when an input element loses focus.
○ Example: When the user clicks outside the text field after typing.
4. input
Triggered when the value of an input element changes.
○ Example: When typing into a text field.
5. change
Triggered when the value of an input element changes and the element loses focus.
○ Example: Changing the value in a dropdown list.

Keyboard Events -
Keyboard events are triggered by actions like pressing or releasing keys on the keyboard.
Common Keyboard Events:
1. keydown
Triggered when a key is pressed down.
○ Example: When the user presses a key while typing in a text field.
2. keypress
Triggered when a key is pressed and produces a character value. (Note: This event is
deprecated in some cases)
○ Example: Pressing the "Enter" key to submit a form.
3. keyup
Triggered when a key is released.
○ Example: When the user releases the "Shift" key.

Window Events-
Window events are triggered by actions related to the window itself, such as resizing or scrolling.
Common Window Events:
1. resize
Triggered when the window is resized.
○ Example: When a user resizes the browser window.
2. scroll
Triggered when the user scrolls the page.
○ Example: Scrolling down a webpage.
3. load
Triggered when the entire page (including images, scripts, etc.) is loaded.
○ Example: When the page has finished loading all resources.
4. beforeunload
Triggered before the page is unloaded (e.g., when the user is about to leave the page).
○ Example: Asking users if they are sure they want to leave a page with unsaved data.
5. unload
Triggered when the page is unloaded (e.g., when the user navigates away from the page).

QUIZ TIME !!!!!!!!
8875 6847 use this code to join the quiz at menti.com
https://www.menti.com/alnjehm367ps(participation link)

Great work! 🙌🏼
https://github.com/Mayureshsherala/Web-Development-Workshop-
GDG

GDG On Campus NBNSCOE Web Development Workshop Day 2 : JavaScript and DOM

More Related Content

Similar to GDG On Campus NBNSCOE Web Development Workshop Day 2 : JavaScript and DOM

Recently uploaded

GDG On Campus NBNSCOE Web Development Workshop Day 2 : JavaScript and DOM