BÀI TẬP ÔN JS

Cho mảng :
let arr = [1, 2, 3, 4, 5];

1. Sử dụng foreach để in ra tất cả các phần tử trong mảng :

2. Sử dụng hàm map để tạo ra 1 mảng trong đó mỗi phần tử sẽ nhân đôi lên.
3. Sử dụng filter để tạo ra 1 mảng mới chứa các phần tử là số chẵn từ mảng ban đầu.
4. Sử dụng reduce để tính tổng các phần tử trong mảng.
5. Sử dụng find để tìm số chẵn đầu tiên trong mảng
6. Hãy tạo 1 mảng khác sao chép dữ liệu từ mảng trên
7. Sử dụng spread operator để nối 2 mảng:
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
8. Viết một hàm để in hoa chữ.
9. Viết một hàm để đảo ngược một chuỗi.
10. Viết hàm nối 2 chuỗi sử dụng concat
11. Lấy phần tử có id là "myId" từ trang web
12. Thay đổi nội dung văn bản của phần tử có id là "myId" thành "Hello, World!".
13. Thêm một class mới có tên là "myClass" vào phần tử có id là "myId".
14. Xóa class "myClass" khỏi phần tử có id là "myId".
15. Tạo một phần tử div mới và thêm nó vào cuối body.
16. Xóa phần tử có id là "myId" khỏi trang web.
17. Lấy tất cả các phần tử có class là "myClass" từ trang web.
18. Lấy tất cả các phần tử div từ trang web.
19. Đặt thuộc tính "disabled" cho nút có id là "myButton".
20. Xóa thuộc tính "disabled" khỏi nút có id là "myButton".
21. Tạo một trang web đơn giản với một nút và thêm chức năng để thay đổi màu nền của
trang web khi nhấp vào nút.
22. Tạo một trang web đơn giản với một đoạn văn bản và thêm chức năng để thay đổi màu
sắc của đoạn văn bản khi di chuột qua nó
23. Tạo một trang web đơn giản với một nút và thêm chức năng để hiển thị một hộp thoại
cảnh báo khi nhấp vào nút.
24. Cho mảng : let data = [{name: "John", age: 30}, {name: "Jane", age: 25}]; Hãy show dữ
liệu ra 1 bảng
25. Viết chức năng đăng nhập với 1 mảng user có sẵn :
let users = [
{ username: 'user1', password: 'pass1' },
{ username: 'user2', password: 'pass2' },
{ username: 'user3', password: 'pass3' }
];

26. Hãy chuyển hàm sau sang es6, sử dụng arrow function:
function greet() {
console.log("Hello, world!");
}
27. Hãy chuyển hàm sau sang es6, sử dụng arrow function:
function square(x) {
return x * x;
}
 28. Hãy chuyển hàm sau sang es6, sử dụng arrow function:
function add(a, b) {
return a + b;
}

29. Hãy chuyển hàm sau sang es6, sử dụng arrow function:
function processStrings() {
function getFullName(firstName, lastName) {
return firstName + " " + lastName;
}
console.log(getFullName("John", "Doe"));
}

30. Hãy chuyển hàm sau sang es6, sử dụng arrow function:
function processModulus() {
function modulus(a, b) {
return a % b;
}
console.log(modulus(5, 3));
}
31. Viết tiếp để được hàm callback: tính tổng 2 số và in ra kết quả
const calculateSum = (a, b, callback) => {
//viết tiếp
}

const printSum = sum => {

console.log(`Sum is: ${sum}`);
}

calculateSum(5, 3, printSum);

32. Viết tiếp để được hàm callback: lấy fullname từ firstname và lastname
const createFullName = (firstName, lastName, callback) => {
//viết tiếp
}

const printFullName = fullName => {

console.log(`Full name is: ${fullName}`);
}

createFullName('John', 'Doe', printFullName);

33. Viết tiếp để được hàm callback: nhập vào 1 số , in ra chẵn lẻ

const checkNumber = (callback) => {
//viết tiếp
}

const printEvenOrOdd = number => {

if (number % 2 === 0) {
console.log(`${number} is even.`);
} else {
console.log(`${number} is odd.`);
}
}
checkNumber(printEvenOrOdd);

34. Viết tiếp để được hàm callback: xét số là âm, dương hay 0 của mỗi phần tử mảng
const processNumbers = (numbers, callback) => {
//viết tiếp
}

const printPositiveOrNegative = number => {

if (number > 0) {
console.log(`${number} is positive.`);
} else if (number < 0) {
console.log(`${number} is negative.`);
} else {
console.log(`${number} is zero.`);
}
}

let numbers = [1, -2, 3, -4, 0];

processNumbers(numbers, printPositiveOrNegative);

35. Hãy viết hàm callback để nhập vào 1 chuỗi và in ra chiều dài chuỗi đó.
36. hãy viết hàm callback thực hiện tính tổng dãy số và sau đó check xem tổng đó là chẵn
hay lẻ
37. viết hàm callback thực hiện tính trung bình điểm của mảng điểm, sau đó cho biết kết
quả đậu hay rớt dựa vào so sánh điểm trung bình với 5
38. Hãy giải thích ý nghĩa của Promise dưới đây :
const printHello = new Promise(resolve => {
setTimeout(() => {
resolve("Hello, World!");
}, 2000);
});

printHello.then(console.log);

39. Hãy giải thích ý nghĩa của Promise dưới đây :

const sum = new Promise((resolve, reject) => {
let a = 'a', b = 2;
if (isNaN(a) || isNaN(b)) {
reject(new Error("Invalid input"));
} else {
resolve(a + b);
}
});

sum.then(console.log).catch(console.error);

40. Hãy giải thích ý nghĩa của Promise dưới đây :

const checkConnect = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() < 0.5) {
resolve("Success!");
} else {
reject("Failed!");
}
}, 2000);
});

checkConnect.then(console.log).catch(console.error);

41. Hãy viết hàm fetch thực hiện lấy dữ liệu từ API sau :
https://jsonplaceholder.typicode.com/posts/1
42. Hãy viết hàm fetch lấy dữ liệu từ nhiều API sau :
https://jsonplaceholder.typicode.com/posts/1
https://jsonplaceholder.typicode.com/posts/2
43. Hãy viết hàm fetch thêm dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts
44. Hãy viết hàm fetch xóa dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts
45. Hãy viết hàm fetch sửa dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts
46. Hãy viết hàm Axios thực hiện lấy dữ liệu từ API sau :
https://jsonplaceholder.typicode.com/posts/1
47. Hãy viết hàm Axios lấy dữ liệu từ nhiều API sau :
https://jsonplaceholder.typicode.com/posts/1
https://jsonplaceholder.typicode.com/posts/2
48. Hãy viết hàm Axios thêm dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts
49. Hãy viết hàm Axios xóa dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts/1
50. Hãy viết hàm Axios sửa dữ liệu vào API :
https://jsonplaceholder.typicode.com/posts/1
 ĐÁP ÁN
1. :
let arr = [1, 2, 3, 4, 5];
arr.forEach(num => console.log(num));

2. :
let arr = [1, 2, 3, 4, 5];
let doubled = arr.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
3. :
let arr = [1, 2, 3, 4, 5];
let evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

4. :
let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((total, num) => total + num, 0);
console.log(sum); // 15
5. :
let numbers = [1, 2, 3, 4, 5];
let firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 2
6. :
let arr1 = [1, 2, 3, 4, 5];
let arr2 = [...arr1]; // arr2 is a copy of arr1
console.log(arr2);
7. :
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2]; // arr3 is a concatenation of arr1 and arr2
console.log(arr3); // [1, 2, 3, 4, 5, 6]
8. :
const toUpperCase = (str) => {
return str.toUpperCase();
}

9. :
const reverseString = (str) => {
return str.split('').reverse().join('');
}
10. :
const concatStrings = (str1, str2) => {
return `${str1}${str2}`;
}
11. :
let element = document.getElementById("myId");
12. :
document.getElementById("myId").textContent = "Hello, World!";
13. :
document.getElementById("myId").classList.add("myClass");
14. :
document.getElementById("myId").classList.remove("myClass");
15. :
let newDiv = document.createElement("div");
document.body.appendChild(newDiv);
16. :
let element = document.getElementById("myId");
element.parentNode.removeChild(element);
17. :
let elements = document.getElementsByClassName("myClass");
18. :
let divs = document.getElementsByTagName("div");
19. :
document.getElementById("myButton").disabled = true;
20. :
document.getElementById("myButton").removeAttribute("disabled");
21. :
<button id="myButton">Change background color</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
document.body.style.backgroundColor = "blue";
});
</script>
22. :
<p id="myParagraph">Some text</p>
<script>
document.getElementById("myParagraph").addEventListener("mouseover", function() {
this.style.color = "red";
});
document.getElementById("myParagraph").addEventListener("mouseout", function() {
this.style.color = "black";
});
</script>

23. :
<button id="myButton">Show alert</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Hello, World!");
});
</script>

24. :
let data = [{name: "John", age: 30}, {name: "Jane", age: 25}];

let table = `<table>${data.map(obj => `

<tr>
<td>${obj.name}</td>
<td>${obj.age}</td>
</tr>`
).join('')}</table>`;

document.body.innerHTML = table;

25. :
let users = [
{ username: 'user1', password: 'pass1' },
{ username: 'user2', password: 'pass2' },
{ username: 'user3', password: 'pass3' }
];

function login(username, password) {

let user = users.find(user => user.username === username && user.password === password);

if (user) {
console.log('Đăng nhập thành công');
return true;
}

else {
console.log('Đăng nhập thất bại');
return false;
}
}

login('user1', 'pass1');
login('user1', 'wrongpass');

26. :
const greet = () => console.log("Hello, world!");
27. :
const square = x => x * x;
28. :
const add = (a, b) => a + b;
29. :
const processStrings = () => {
let getFullName = (firstName, lastName) => `${firstName} ${lastName}`;
console.log(getFullName("John", "Doe"));
};
30. :
const processModulus = () => {
let modulus = (a, b) => a % b;
console.log(modulus(5, 3));
};

31. :
const calculateSum = (a, b, callback) => {
let sum = a + b;
callback(sum);
}

const printSum = sum => {

console.log(`Sum is: ${sum}`);
}

calculateSum(5, 3, printSum);

32. :
const createFullName = (firstName, lastName, callback) => {
let fullName = `${firstName} ${lastName}`;
callback(fullName);
}

const printFullName = fullName => {

 console.log(`Full name is: ${fullName}`);
}

createFullName('John', 'Doe', printFullName);

33. :
const checkNumber = (callback) => {
let number = Number(prompt("Enter a number:"));
callback(number);
}

const printEvenOrOdd = number => {

if (number % 2 === 0) {
console.log(`${number} is even.`);
} else {
console.log(`${number} is odd.`);
}
}

checkNumber(printEvenOrOdd);

34. :
const processNumbers = (numbers, callback) => {
for(let number of numbers) {
callback(number);
}
}

const printPositiveOrNegative = number => {

if (number > 0) {
console.log(`${number} is positive.`);
} else if (number < 0) {
console.log(`${number} is negative.`);
} else {
console.log(`${number} is zero.`);
}
}

let numbers = [1, -2, 3, -4, 0];

processNumbers(numbers, printPositiveOrNegative);

35. :
const processString = (str, callback) => {
callback(str.length);
}

const printLength = length => {

console.log(`The length of the string is: ${length}`);
}

let str = 'Hello, world!';

processString(str, printLength);
36. :
const sumAndCheck = (numbers, callback) => {
let sum = numbers.reduce((a, b) => a + b, 0);
callback(sum);
}

const checkEvenOrOdd = sum => {

if (sum % 2 === 0) {
console.log(`Tổng ${sum} là số chẵn`);
} else {
console.log(`Tổng ${sum} là số lẻ`);
}
}

let numbers = [1, 2, 3, 4, 5];

sumAndCheck(numbers, checkEvenOrOdd);

37. :
const calculateAverageAndCheckPass = (scores, callback) => {
let average = scores.reduce((a, b) => a + b, 0) / scores.length;
callback(average);
}

const checkPassOrFail = average => {

if (average >= 5) {
console.log(`Điểm trung bình là ${average}. Kết quả: Đậu`);
} else {
console.log(`Điểm trung bình là ${average}. Kết quả: Rớt`);
}
}

let scores = [6, 7, 5, 8, 6];

calculateAverageAndCheckPass(scores, checkPassOrFail);

38. : ^^
39. : ^^
40. : ^^
41. :
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
42. :
Promise.all([
fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => response.json()),
fetch('https://jsonplaceholder.typicode.com/posts/2').then(response => response.json())
])
43. :
const addPost = fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json());
 addPost.then(console.log).catch(console.error);

44. :
const deletePost = fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
});

deletePost.then(console.log).catch(console.error);

45. :
const updatePost = fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json());

updatePost.then(console.log).catch(console.error);
46. :
const getData = () => {
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => console.log(response.data))
.catch(error => console.error(error));
}
getData();

47. :
axios.all([
axios.get('https://jsonplaceholder.typicode.com/posts/1'),
axios.get('https://jsonplaceholder.typicode.com/posts/2')
])
.then(axios.spread((post1, post2) => {
console.log('Post 1', post1.data);
console.log('Post 2', post2.data);
}))
.catch(error => console.error(error));

48. :
const addData = () => {
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
}
 49. :
const deleteData = () => {
axios.delete('https://jsonplaceholder.typicode.com/posts/1')
.then(response => console.log(response.data))
.catch(error => console.error(error));
}

50. :
const updateData = () => {
axios.put('https://jsonplaceholder.typicode.com/posts/1', {
id: 1,
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => console.log(response.data))
.catch(error => console.error(error));
}