Scribd
Upload
1K views

Javascript Lec_I

Uploaded by

Hadiya Mazhar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
1K views

Javascript Lec_I

Uploaded by

Hadiya Mazhar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Week 9: Getting Started with JavaScript (JS)

1. Why Should We Learn JavaScript?


Explanation:
JavaScript is a client-side scripting language used to create interactive and dynamic
web pages. It allows you to manipulate HTML, CSS, and browser behavior.
JavaScript powers modern web applications, animations, and frameworks like
React, Angular, and Vue.
Key Benefits of Learning JavaScript:
 Interactivity: Adds dynamic content to websites (e.g., sliders, animations,
etc.).
 Browser Compatibility: Runs in all modern web browsers.
 Popularity: Used in frameworks (React, Node.js) and supports both frontend
and backend development.

2. Setting Up Your Environment


Explanation:
To start coding in JavaScript, you'll need:
1. A code editor: Visual Studio Code (VS Code) is recommended.
2. A web browser: Google Chrome, Firefox, etc.
3. Browser Console: Press F12 or Ctrl + Shift + I to open DevTools and access the
"Console" tab.
Lab Practice Code:
1. Open the browser console (F12) and type:
2. console.log("Hello, World!");
3. Set up VS Code with an HTML file and embed this JavaScript code:
4. <!DOCTYPE html>
5. <html>
6. <head>
7. <title>My First JS Page</title>
8. </head>
9. <body>
10. <h1>Welcome to JavaScript</h1>
11. <script>
12. console.log("Hello, World! This is my first JS code.");
13. </script>
14. </body>
15. </html>

3. Adding JavaScript to a Web Page


Explanation:
There are 3 ways to add JavaScript to an HTML file:
1. Inline JS: Inside an HTML tag using onclick="alert('Hi!')"
2. Internal JS: Inside the <script> tag within the HTML file.
3. External JS: Using an external .js file linked via <script src="file.js"></script>
Lab Practice Code:
<!DOCTYPE html>
<html>
<head>
<title>Adding JS to a Page</title>
</head>
<body>
<h1>JavaScript Examples</h1>

<!-- Inline JS -->


<button onclick="alert('Inline JS Alert!')">Click Me</button>

<!-- Internal JS -->


<script>
console.log("This is Internal JS");
</script>

<!-- External JS -->


<script src="script.js"></script>
</body>
</html>
Contents of script.js:
console.log("This is from an external JS file.");

Week 10: JavaScript Essentials

1. Variables & Data Types


Explanation:
Variables store data for later use. You can declare variables using let, const, or var.
Data Types:
 Primitive Types: Number, String, Boolean, Null, Undefined, Symbol, BigInt.
 Reference Types: Arrays, Objects, Functions, etc.
Lab Practice Code:
let name = "John"; // String
let age = 25; // Number
let isStudent = true; // Boolean
let x; // Undefined
let y = null; // Null
let bigNumber = 123456789012345678901234567890n; // BigInt

console.log(typeof name); // string


console.log(typeof age); // number
console.log(typeof isStudent); // boolean
console.log(typeof x); // undefined
console.log(typeof y); // object (null is an object due to a JS quirk)
console.log(typeof bigNumber); // bigint

2. Operators in JavaScript
Explanation:
Operators are used to perform operations on variables and values.
 Arithmetic Operators: +, -, *, /, %, ** (power)
 Comparison Operators: ==, ===, !=, !==, >, <, >=, <=
 Logical Operators: &&, ||, !
Lab Practice Code:
let a = 10, b = 20;

console.log(a + b); // 30 (Addition)


console.log(a > b); // false (Comparison)
console.log(a < b && b > 15); // true (Logical AND)
console.log(!(a > b)); // true (NOT operator)

3. Arrays & Array Methods


Explanation:
Arrays store multiple values in one variable. You can access elements by their
index.
Common Methods:
 push(), pop(), shift(), unshift(), map(), filter(), reduce()
Lab Practice Code:
let fruits = ["Apple", "Banana", "Orange"];
fruits.push("Mango"); // Adds Mango
console.log(fruits); // ['Apple', 'Banana', 'Orange', 'Mango']

fruits.pop(); // Removes the last element (Mango)


console.log(fruits); // ['Apple', 'Banana', 'Orange']

let filteredFruits = fruits.filter(fruit => fruit !== "Banana");


console.log(filteredFruits); // ['Apple', 'Orange']

4. Objects in JavaScript
Explanation:
Objects store data in key-value pairs. You can access properties using dot notation
or bracket notation.
Lab Practice Code:
let student = {
name: "Ali",
age: 21,
course: "IT"
};

console.log(student.name); // Dot notation


console.log(student['age']); // Bracket notation

student.course = "Computer Science"; // Modify property


student.grade = "A"; // Add new property
delete student.age; // Delete a property

console.log(student);

Prepared By: Mr. Muhammad Waris Email: [email protected]


Phone: 03477071722

You might also like