Scribd
Upload
2 views15 pages

JavaScript Basics

Uploaded by

waleedmukhtar844
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views15 pages

JavaScript Basics

Uploaded by

waleedmukhtar844
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

JavaScript Basics:

Variables, Functions, and


Events
🔹 Introduction to Core Concepts in JavaScript
🔹 With Practical Examples
What is JavaScript?

•JavaScript is a high-level, interpreted scripting language.


•It runs in the browser and makes web pages interactive.
•Key uses:
•Dynamic content (change HTML/CSS).
•Handle events (clicks, input, etc.).
•Communicate with servers (AJAX, APIs).
What is a Variable?

•variable stores data (like numbers, text, objects).


•Variables can be changed (mutable).
Declaring Variables (ES6+)

Example
javascript
let name = "John";
const age = 30;
var country = "USA";
Variables in JavaScript

Keyword Description

var Old way, function-scoped. Avoid using.

let Block-scoped (recommended).

Block-scoped, constant value (cannot be re-


const
assigned).
Data Types in JavaScript

• Primary Data Types


• String → "Hello"
• Number → 42, 3.14
• Boolean → true, false
• Undefined → Variable declared but no value

• Null → Intentional empty value


• Object → { key: value }
• Array → [1, 2, 3]
Functions in JavaScript

 What is a Function?
 Reusable block of code performing a specific task.
 Helps organize code into smaller, manageable pieces.
 Functions can accept parameters and return values.
Types of Functions

Type Example

Function Declaration function greet() {}

Function Expression const greet = function() {}

Arrow Function (ES6) const greet = () => {}


Function Example

 function greet(name) {
 return `Hello, ${name}!`;
}

 console.log(greet("Alice")); // Hello, Alice!


Arrow Function Example

const square = (x) => x * x;


console.log(square(5)); // 25
Events in JavaScript

 What are Events?


 Events are user actions, like:
 Clicks
 Key presses
 Page loads
 JavaScript listens for events and runs code in response.
Event Listeners

 Adding an Event Listener


 document.getElementById('btn').addEventListener('click',
function() {
 alert('Button Clicked!');
 });
 Example HTML
 <button id="btn">Click Me</button>
Common Events

Event Description

click User clicks on an element

mouseover Mouse enters an element

keydown Key is pressed

submit Form is submitted


Combined Example (Variables, Functions &
Events)

 HTML
<button id="welcomeBtn">Greet</button>
 JavaScript
let userName = "Student";

function greetUser() {
alert(`Welcome, ${userName}!`);
}

document.getElementById('welcomeBtn').addEventListener('click', greetUser);
Summary

 ✅ Variables store data (let, const, var).


✅ Functions organize reusable logic.
✅ Events trigger actions based on user interactions.

You might also like