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

js programing question

Uploaded by

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

js programing question

Uploaded by

Joclyn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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