Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

js programing question

Uploaded by

Joclyn
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

js programing question

Uploaded by

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

Here’s a well-structured and enhanced version of your content with formatting

improvements and a more polished tone:

---

## **JavaScript Basics**

Let’s dive into the foundational concepts of JavaScript with clear explanations and
examples to get you started.

---

### **1. How to Run JavaScript**


You can run JavaScript in two primary ways:
- **Browser Console**: Open DevTools (right-click > Inspect > Console tab).
- **HTML File**: Embed JavaScript using the `<script>` tag.

#### Example of an HTML file with JavaScript:


```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Basics</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
console.log("Welcome to JavaScript!");
</script>
</body>
</html>
```

---

### **2. Variables**


Variables store data. Use `let`, `const`, or `var` (though `var` is generally
avoided in modern JS).

#### Example:
```javascript
let name = "John"; // Variable that can be changed
const age = 30; // Constant, cannot be changed
var isStudent = true; // Old way, works but not recommended

console.log(name, age, isStudent);


```

---

### **3. Data Types**


JavaScript supports several data types:
- **String**: `"Hello"`
- **Number**: `42`
- **Boolean**: `true` or `false`
- **Null**: Explicitly nothing
- **Undefined**: Variable not yet assigned a value
- **Object**: Collection of key-value pairs
- **Array**: Ordered list of items

#### Example:
```javascript
let message = "Hello, World!"; // String
let score = 99; // Number
let isActive = false; // Boolean
let nothingHere = null; // Null
let notAssigned; // Undefined
let user = { name: "Alice", age: 25 }; // Object
let colors = ["red", "green", "blue"]; // Array

console.log(message, score, isActive, nothingHere, notAssigned, user, colors);


```

---

### **4. Operators**


Operators perform actions on values.

#### Example:
```javascript
// Arithmetic
let sum = 5 + 3; // Addition
let product = 5 * 3; // Multiplication

// Comparison
console.log(10 > 5); // true
console.log(10 === "10"); // false (strict equality)

// Logical
console.log(true && false); // false
console.log(true || false); // true

// Assignment
let x = 10;
x += 5; // Same as x = x + 5
console.log(x); // 15
```

---

### **5. Conditional Statements**


Use conditions to make decisions in your code.

#### Example:
```javascript
let age = 18;

if (age >= 18) {


console.log("You are an adult.");
} else {
console.log("You are a minor.");
}
```

---
### **6. Loops**
Loops allow you to repeat tasks.

#### Example:
```javascript
// For Loop
for (let i = 0; i < 5; i++) {
console.log("Count:", i);
}

// While Loop
let count = 0;
while (count < 3) {
console.log("While Count:", count);
count++;
}
```

---

### **7. Functions**


Functions are reusable blocks of code.

#### Example:
```javascript
function greet(name) {
return `Hello, ${name}!`;
}

console.log(greet("John")); // Outputs: Hello, John!


```

---

### **8. DOM Manipulation**


Use JavaScript to dynamically modify webpage content.

#### Example:
```html
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Old Title</h1>
<button onclick="changeTitle()">Change Title</button>

<script>
function changeTitle() {
document.getElementById("title").textContent = "New Title!";
}
</script>
</body>
</html>
```

---

## **Next Steps**
1. Practice creating small scripts to solidify the basics.
2. Build simple interactive webpages (e.g., a counter or to-do list).
3. Explore modern JavaScript features such as:
- **Arrow Functions**
- **Template Literals**
- **Modules**

---

## **Practice Challenges**
Here’s a list of programming exercises, categorized by difficulty, to reinforce
your JavaScript skills:

### **Beginner**
1. **Basic Syntax and Variables**:
- Swap two numbers without using a third variable.
- Calculate the area of a rectangle given its dimensions.
2. **Control Flow**:
- Check if a number is even or odd.
- Find the largest of three numbers.
3. **Loops**:
- Print numbers from 1 to 100. Replace multiples of 3 with "Fizz", multiples of
5 with "Buzz", and both with "FizzBuzz".
- Generate the Fibonacci sequence up to `n` terms.
4. **Strings**:
- Reverse a string without built-in methods.
- Count vowels in a string.
5. **Arrays**:
- Find the maximum and minimum values in an array.
- Remove duplicates from an array.

### **Intermediate**
1. **Functions**:
- Write a function to check if a string is a palindrome.
- Create a function to calculate the factorial of a number using recursion.
2. **Objects**:
- Create an object representing a student and add a method to calculate their
average grade.
- Merge two objects, handling conflicting keys.
3. **Higher-Order Functions**:
- Use `map()` to square all numbers in an array.
- Use `filter()` to find numbers greater than 50 in an array.
4. **DOM Manipulation**:
- Build a counter app with buttons for increment, decrement, and reset.
- Create a to-do list with add, mark complete, and delete functionalities.
5. **Asynchronous Programming**:
- Fetch data from an API (e.g.,
[JSONPlaceholder](https://jsonplaceholder.typicode.com/)) and log the response.
- Implement a countdown timer using `setTimeout`.

### **Advanced**
1. **Closures**:
- Create a function that tracks how many times it has been called.
- Write a curried function that adds numbers one at a time.
2. **Promises & Async/Await**:
- Fetch data from multiple APIs simultaneously using `Promise.all`.
- Simulate an API call with a delay using `setTimeout` and `Promise`.
3. **Data Structures**:
- Implement a stack or queue using arrays.
- Sort an array of objects by a specific property.
4. **Advanced DOM**:
- Build a dynamic table from a JSON array.
- Create a fully functional calculator UI.

---

Would you like me to provide solutions or expand on a specific topic? 😊

You might also like