Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài trước Bài tiếp theo

Bài Giảng: Giới Thiệu Về JavaScript và jQuery

1. Giới thiệu về JavaScript

1.1 JavaScript là gì?

JavaScript (JS) là ngôn ngữ lập trình động dành cho web, giúp tăng tương tác và nâng cao trải nghiệm người dùng. JS có thể được dùng để thao tác DOM, xử lý sự kiện, giao tiếp với server, v.v.

1.2 Vai trò của JavaScript trong phát triển web

  • Tăng tương tác (hiển thị popup, thay đổi nội dung trang)
  • Xử lý sự kiện (click, hover, keypress, v.v.)
  • Kiểm tra dữ liệu trước khi gửi lên server
  • Giao tiếp với server qua AJAX

2. Giới thiệu về jQuery

2.1 jQuery là gì?

jQuery là một thư viện JavaScript nhẹ giúp thao tác DOM, xử lý sự kiện, hiệu ứng, AJAX một cách dễ dàng và ngắn gọn hơn so với JavaScript thuần.

2.2 Vai trò của jQuery trong phát triển web

  • Giúp việc viết JavaScript nhanh và dễ dàng hơn
  • Tương thích tốt với nhiều trình duyệt
  • Hỗ trợ hiệu ứng và animation nhanh chóng
  • Gọi AJAX một cách đơn giản

3. Cách nhúng JavaScript và jQuery vào HTML

3.1 Nhúng JavaScript vào HTML

  • Nhúng trực tiếp trong thẻ <script>: 
    <script>
    alert('Xin chào JavaScript!');
    console.log('Đây là một log trong console');
</script>
  • Liên kết tới file JS bên ngoài: 
    <script src="script.js"></script>

3.2 Nhúng jQuery vào HTML

  • Nhúng qua CDN: 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  • Liên kết tới file jQuery tải về: 
    <script src="jquery.js"></script>

4. Biến, Kiểu Dữ Liệu và Toán Tử trong JavaScript

4.1 Biến trong JavaScript

JavaScript hỗ trợ khai báo biến bằng var, let, và const:

var a = 10; // Biến toàn cục hoặc có thể thay đổi
let b = 20; // Biến cục bộ
const c = 30; // Không thể thay đổi giá trị
console.log('Giá trị của a:', a);
console.log('Giá trị của b:', b);
console.log('Giá trị của c:', c);

4.2 Kiểu dữ liệu trong JavaScript

let number = 42; // Number
let text = "Hello World"; // String
let isTrue = true; // Boolean
let arr = [1, 2, 3]; // Array
let obj = {name: "John", age: 25}; // Object
let undef; // Undefined
let empty = null; // Null

console.log("Kiểu dữ liệu number:", number);
console.log("Kiểu dữ liệu string:", text);
console.log("Kiểu dữ liệu boolean:", isTrue);
console.log("Kiểu dữ liệu array:", arr);
console.log("Kiểu dữ liệu object:", obj);
console.log("Kiểu dữ liệu undefined:", undef);
console.log("Kiểu dữ liệu null:", empty);

4.3 Toán tử trong JavaScript

  • Toán tử số học: +, -, *, /, %, **
let x = 10;
let y = 3;
console.log("Tổng:", x + y);
console.log("Hiệu:", x - y);
console.log("Tích:", x * y);
console.log("Chia:", x / y);
console.log("Lũy thừa:", x ** y);
console.log("Chia lấy dư:", x % y);
  • Toán tử so sánh: ==, !=, >, <, >=, <=
console.log(10 == "10"); // true
console.log(10 === "10"); // false
console.log(10 > 5); // true
console.log(10 < 5); // false
  • Toán tử logic: &&, ||, !
console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false

5. Các cú pháp cơ bản

5.1 Các phương thức thao tác DOM trong JavaScript

document.getElementById("myDiv").innerHTML = "Xin chào!";
console.log("Nội dung của myDiv đã thay đổi");

5.2 Các phương thức trong jQuery

$(document).ready(function(){
    $("#myDiv").text("Xin chào jQuery!");
    console.log("jQuery đã thay đổi nội dung của myDiv");
});

6. Kết luận

  • JavaScript là ngôn ngữ quan trọng trong phát triển web.
  • jQuery giúp đơn giản hóa việc viết JavaScript.
  • Cần nắm vững các khái niệm cơ bản trước khi chủ động học sâu hơn về JS và jQuery.

Bài tập: Xây dựng chương trình tính toán bằng JavaScript

1. Yêu cầu:

Viết một chương trình bằng JavaScript để thực hiện các phép tính sau:

  1. Nhập vào hai số nguyên từ bàn phím (sử dụng prompt).
  2. Thực hiện các phép toán:
    • Tổng (+)
    • Hiệu (-)
    • Tích (*)
    • Thương (/) (Kiểm tra không chia cho 0)
    • Lũy thừa (sử dụng **)
    • Chia lấy dư (%)
  3. Hiển thị kết quả bằng console.log() và alert().

Yêu cầu bổ sung:

  • Kiểm tra dữ liệu nhập vào có hợp lệ không (phải là số).
  • Viết chương trình dưới dạng hàm, mỗi phép toán là một hàm riêng.

2. Gợi ý cách làm

// Hàm kiểm tra dữ liệu nhập có phải là số hay không
function isNumber(value) {
    return !isNaN(value) && value !== null && value.trim() !== "";
}
// Lệnh nhập từ bàn phí
let num1 = prompt("Nhập số thứ nhất:");

3. Nộp bài: File html + JS hoặc code trực tiếp trong nội dung trả lời