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: waris.mirza71@gmail.com
Phone: 03477071722
