Scribd
Upload
15 views

JavaScript Basics

The document provides an introduction to JavaScript basics, covering its definition, uses, and the importance of placing the <script> tag in HTML. It explains variable declaration, data types, operators, control flow, functions, objects, targeting HTML elements, and handling events in JavaScript. The content is aimed at helping beginners understand how to use JavaScript for web development effectively.

Uploaded by

Samarth Kendure
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

JavaScript Basics

The document provides an introduction to JavaScript basics, covering its definition, uses, and the importance of placing the <script> tag in HTML. It explains variable declaration, data types, operators, control flow, functions, objects, targeting HTML elements, and handling events in JavaScript. The content is aimed at helping beginners understand how to use JavaScript for web development effectively.

Uploaded by

Samarth Kendure
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

JavaScript

Basics

•Title: Introduction to JavaScript Basics


•Presented by: Pradnyanand G. Jade (TY-IT),
Anshul G. Patil (TY-IT)
What is JavaScript?

• Definition: JavaScript is a programming


language used to make web pages
interactive.

• Where it runs:
• Browser (Client-side)
• Server (Node.js)
• Uses:
• Web interactivity
• Dynamic content
• Form validation
Why JavaScript?
Many of you may wonder why JavaScript is so popular among developers. The simple reason is
that JavaScript saves time!
With JavaScript, you can write both frontend and backend code.

•Frontend: Frameworks like React.js and Angular.js are used to build interactive user
interfaces.

•Backend: Tools like Node.js and Express.js allow you to build server-side applications.
By using the same language for both ends, development becomes faster and more efficient.
Connecting JavaScript to HTML?
HTML Boilerplate
To link JavaScript to your HTML, you use the <script>
tag.

Q) Why place the <script> tag just before the


end of the <body>?
It’s preferred to place the <script> tag just before
the closing </body> tag because:
UI components must be loaded before the script
runs. If JavaScript is placed at the top (in the
<head>), it could execute before the HTML content is
fully loaded, causing errors when trying to
manipulate elements that haven’t been rendered yet.
By placing it at the end, all HTML elements are
loaded, and then the JavaScript can interact with
them without issues.
Variables and Data Types
• Declaring Variables:
Keyword Scope Re-declaration Re-assignment Example
var Function-scoped Allowed Allowed var name = "Alice";
let Block-scoped Not allowed in same scope Allowed let age = 25;
const Block-scoped Not allowed Not allowed const pi = 3.14;

• Data Types:

Data Type Description Example


String Represents a sequence of characters let name = "Alice";
Number Represents numeric values (integers or floats) let age = 25;
Boolean Represents true or false values let isActive = true;
Null Represents an intentional absence of value let person = null;
Undefined Represents an uninitialized variable let user;
Object A collection of key-value pairs let person = { name: "Alice", age: 25 };
Array An ordered list of values let numbers = [1, 2, 3];
Operators
Operator Type Operators Description Example
Perform arithmetic
Arithmetic Operators +, -, *, /, %, ** 5 + 3, 10 * 2, 5 ** 2
operations

Assignment Operators =, +=, -=, *=, /=, %= , **= Assign values to variables x = 5, x += 3

==, ===, !=, !==, >, <, >=, Compare values and
Comparison Operators 5 == 5, x > 3
<= return boolean result
"Hello" + " World", str +=
String Operators +, += Concatenate strings
"!"
Logical Operators &&, ||, ! , !`
Perform bitwise
Bitwise Operators &, | , ^, ~, <<, >>`
operations
Conditional (if-else)
Ternary Operator ?: x > 5 ? "Yes" : "No"
operator
Determine the type of a typeof 42, obj instanceof
Type Operators typeof, instanceof
variable or object Object
Control Flow

1. Conditional Statements: Executes code based on conditions (if-


else).

2. Switch Statement: Handles multiple conditions cleanly.


3. Loops: Repeats code (for, while, do-while, forEach).
4. Break and Continue: Exits or skips loop iterations.
5. Try-Catch: Handles runtime errors.
Functions
•Defining and Calling Functions
•Functions are reusable blocks of code that can take inputs (parameters) and return outputs
(return values).
•Example:

•Parameters and Return Values


•A function can accept values (parameters) and return a result.

•Arrow Functions
•A shorter syntax for functions:
Objects
• Objects are variables too. But objects can contain many values.

•Accessing Object
1.Dot Notation

2.Bracket Notation
Targeting HTML Elements in JavaScript
• In JavaScript, you can target HTML elements using DOM (Document Object Model)
methods. These methods allow you to interact with specific elements in the document, such as
elements with specific IDs, classes, or tags.

Method Description Example

document.getElementById("id") Selects an element by its unique id. document.getElementById("header")

Selects all elements with the specified class.


document.getElementsByClassName("class") document.getElementsByClassName("box")
Returns an HTMLCollection.

Selects all elements with the specified tag


document.getElementsByTagName("tag") document.getElementsByTagName("div")
name. Returns an HTMLCollection.

Selects the first element matching a CSS


document.querySelector("selector") document.querySelector(".main")
selector.

Selects all elements matching a CSS selector.


document.querySelectorAll("selector") document.querySelectorAll("p")
Returns a NodeList.
Events
• JavaScript events are actions or occurrences that happen in the browser, which can be
detected and handled using JavaScript. Examples of events include a user clicking a button,
hovering over an element, or pressing a key.

Event Type Description Example


Mouse Events Triggered by mouse actions click, dblclick, mouseover, mouseout
Keyboard Events Triggered by keyboard actions keydown, keyup, keypress
Form Events Triggered by form actions submit, focus, blur, change
Window Events Related to the browser window load, resize, scroll, unload

Example :
Thank You

You might also like