Posts

Tạo ứng dụng Web đầu tiên với Java Spring Boot và JavaScript

Kiến trúc ứng dụng Fullstack với Spring Boot và JavaScript Giới thiệu Trong bài viết này, chúng ta sẽ xây dựng một Todo List Application hoàn chỉnh với: Backend: Java Spring Boot (REST API) Frontend: HTML + CSS + JavaScript (Vanilla) Database: H2 (in-memory database) Bước 1: Tạo Spring Boot Project Spring Boot - Framework Java mạnh mẽ nhất ...

So sánh Java và JavaScript

Java vs JavaScript - Hai ngôn ngữ khác biệt hoàn toàn Giới thiệu Nhiều người mới học lập trình thường nhầm lẫn giữa Java và JavaScript vì tên gọi tương tự. Tuy nhiên, đây là hai ngôn ngữ hoàn toàn khác nhau về mục đích, cú pháp và ứng dụng. Thực tế: JavaScript được đặt tên như vậy vì Java đang rất hot vào thời điểm đó (1995), với mục đích marketing. Hai ngôn ngữ không có mối liên hệ trực tiếp nào! ...

ES6 và những tính năng mới trong JavaScript

Những tính năng nổi bật của ES6 ES6 (ECMAScript 2015) là gì? ES6 hay ECMAScript 2015 là phiên bản JavaScript có nhiều cải tiến lớn, mang lại cú pháp hiện đại và mạnh mẽ hơn. Đây là bước ngoặt quan trọng trong lịch sử phát triển JavaScript. Các tính năng quan trọng của ES6+ 1. Let và Const 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 // var - function scope, có hoisting var x = 10; if (true) { var x = 20; // Cùng biến x } console.log(x); // 20 // let - block scope let y = 10; if (true) { let y = 20; // Biến y khác console.log(y); // 20 } console.log(y); // 10 // const - block scope, không thể gán lại const PI = 3.14159; // PI = 3.14; // Error! const person = { name: "Dương" }; person.name = "Xuân Dương"; // OK // person = {}; // Error! 2. Arrow Functions 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 // Function truyền thống function add(a, b) { return a + b; } // Arrow function const add = (a, b) => a + b; // Nhiều dòng code const calculate = (a, b) => { let result = a + b; return result * 2; }; // Một parameter - không cần () const square = x => x * x; // Không parameter const greet = () => console.log("Hello!"); // Arrow function không có 'this' riêng const person = { name: "Dương", hobbies: ["coding", "reading"], // Method truyền thống printHobbies1: function() { this.hobbies.forEach(function(hobby) { // 'this' ở đây là undefined // console.log(this.name + " likes " + hobby); // Error }); }, // Arrow function giữ nguyên 'this' printHobbies2: function() { this.hobbies.forEach(hobby => { console.log(this.name + " likes " + hobby); // OK }); } }; 3. Template Literals 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 const name = "Xuân Dương"; const age = 21; const university = "HUTECH"; // Old way const message1 = "Tôi là " + name + ", " + age + " tuổi, học tại " + university; // Template literal const message2 = `Tôi là ${name}, ${age} tuổi, học tại ${university}`; // Multi-line const html = ` <div class="card"> <h2>${name}</h2> <p>Tuổi: ${age}</p> <p>Trường: ${university}</p> </div> `; // Expression trong template const price = 100000; const discount = 0.2; console.log(`Giá sau giảm: ${price * (1 - discount)} VNĐ`); // Gọi function const getGreeting = () => "Xin chào"; console.log(`${getGreeting()}, ${name}!`); 4. Destructuring 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 // Array Destructuring const numbers = [1, 2, 3, 4, 5]; const [first, second] = numbers; // first = 1, second = 2 const [a, , c] = numbers; // a = 1, c = 3 (skip 2) const [x, y, ...rest] = numbers; // x = 1, y = 2, rest = [3, 4, 5] // Default values const [p = 0, q = 0] = [10]; // p = 10, q = 0 // Swap variables let m = 1, n = 2; [m, n] = [n, m]; // m = 2, n = 1 // Object Destructuring const person = { name: "Xuân Dương", age: 21, university: "HUTECH", skills: ["Java", "JavaScript"] }; const { name, age } = person; console.log(name); // "Xuân Dương" // Rename variables const { name: fullName, age: years } = person; console.log(fullName); // "Xuân Dương" // Default values const { country = "Vietnam" } = person; console.log(country); // "Vietnam" // Nested destructuring const student = { name: "Dương", scores: { math: 9, english: 8 } }; const { scores: { math, english } } = student; // Function parameters function introduce({ name, age, university }) { console.log(`${name}, ${age} tuổi, ${university}`); } introduce(person); 5. Spread Operator (…) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // Array spread const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] // Copy array const original = [1, 2, 3]; const copy = [...original]; // Function arguments const numbers = [5, 2, 8, 1, 9]; console.log(Math.max(...numbers)); // 9 // Object spread (ES2018) const person = { name: "Dương", age: 21 }; const student = { ...person, university: "HUTECH" }; // { name: "Dương", age: 21, university: "HUTECH" } // Merge objects const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const merged = { ...obj1, ...obj2 }; // Override properties const updated = { ...person, age: 22 }; 6. Rest Parameters 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // Old way function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } // Rest parameters function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } console.log(sum(1, 2, 3, 4, 5)); // 15 // Combine with normal parameters function introduce(greeting, ...names) { console.log(greeting + ", " + names.join(" và ")); } introduce("Xin chào", "Dương", "An", "Bình"); 7. Default Parameters 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // Old way function greet(name) { name = name || "Khách"; console.log("Xin chào, " + name); } // Default parameters function greet(name = "Khách", age = 0) { console.log(`Xin chào ${name}, ${age} tuổi`); } greet(); // Xin chào Khách, 0 tuổi greet("Dương"); // Xin chào Dương, 0 tuổi greet("Dương", 21); // Xin chào Dương, 21 tuổi // Expression as default function createUser(name, id = Date.now()) { return { name, id }; } 8. Enhanced Object Literals 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const name = "Xuân Dương"; const age = 21; // Old way const person1 = { name: name, age: age, greet: function() { console.log("Hello"); } }; // Enhanced object literal const person2 = { name, // Shorthand property age, greet() { // Method shorthand console.log("Hello"); }, [`skill_${1}`]: "Java", // Computed property names [`skill_${2}`]: "JavaScript" }; 9. Classes 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 class Person { constructor(name, age) { this.name = name; this.age = age; } // Method greet() { console.log(`Xin chào, tôi là ${this.name}`); } // Static method static create(name, age) { return new Person(name, age); } // Getter get info() { return `${this.name}, ${this.age} tuổi`; } // Setter set birthday(year) { this.age = new Date().getFullYear() - year; } } // Inheritance class Student extends Person { constructor(name, age, university) { super(name, age); // Call parent constructor this.university = university; } // Override method greet() { super.greet(); // Call parent method console.log(`Tôi học tại ${this.university}`); } study() { console.log(`${this.name} đang học`); } } // Sử dụng const student = new Student("Dương", 21, "HUTECH"); student.greet(); student.study(); 10. Promises Promise States - Pending, Fulfilled, Rejected ...

DOM trong JavaScript là gì?

Cấu trúc cây DOM - Mô hình đối tượng tài liệu DOM là gì? DOM (Document Object Model) là một giao diện lập trình cho phép JavaScript truy cập và thay đổi nội dung, cấu trúc và style của trang web. DOM biểu diễn HTML document dưới dạng cây (tree) các nodes. Cấu trúc DOM Tree 1 2 3 4 5 6 7 8 9 10 11 12 13 Document └── html ├── head │ ├── title │ └── meta └── body ├── header │ ├── h1 │ └── nav ├── main │ ├── section │ └── article └── footer Selecting Elements (Chọn phần tử) 💡 Mẹo chọn Element querySelector/querySelectorAll được khuyến nghị vì: ...

Giới thiệu JavaScript và cú pháp cơ bản

JavaScript là gì? JavaScript (JS) là ngôn ngữ lập trình thông dịch, cao cấp, được sử dụng chủ yếu để tạo tương tác trên website. JavaScript là một trong ba ngôn ngữ cốt lõi của Web Development: HTML: Cấu trúc (Structure) CSS: Trình bày (Presentation) JavaScript: Hành vi (Behavior) Đặc điểm của JavaScript HTML, CSS và JavaScript - Ba trụ cột của Web ...

Xử lý ngoại lệ trong Java

Hệ thống phân cấp Exception trong Java Exception là gì? Exception (ngoại lệ) là một sự kiện bất thường xảy ra trong quá trình thực thi chương trình, làm gián đoạn luồng chạy bình thường. Java cung cấp cơ chế mạnh mẽ để xử lý các tình huống này. Phân loại Exception trong Java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Throwable ├── Error (Lỗi hệ thống, không nên catch) │ ├── OutOfMemoryError │ ├── StackOverflowError │ └── VirtualMachineError │ └── Exception (Có thể xử lý được) ├── RuntimeException (Unchecked Exception) │ ├── NullPointerException │ ├── ArrayIndexOutOfBoundsException │ ├── ArithmeticException │ └── IllegalArgumentException │ └── IOException, SQLException... (Checked Exception) 1. Checked Exception Được kiểm tra tại thời điểm biên dịch Bắt buộc phải xử lý (try-catch hoặc throws) Ví dụ: IOException, SQLException, FileNotFoundException 2. Unchecked Exception (Runtime Exception) Không được kiểm tra tại compile time Không bắt buộc phải xử lý Ví dụ: NullPointerException, ArithmeticException 3. Error Lỗi nghiêm trọng của hệ thống Không nên xử lý Ví dụ: OutOfMemoryError, StackOverflowError Cú pháp xử lý Exception 1. Try-Catch cơ bản 1 2 3 4 5 6 7 8 9 10 11 12 13 public class ExceptionDemo { public static void main(String[] args) { try { int result = 10 / 0; // ArithmeticException System.out.println("Kết quả: " + result); } catch (ArithmeticException e) { System.out.println("Lỗi: Không thể chia cho 0!"); System.out.println("Chi tiết: " + e.getMessage()); } System.out.println("Chương trình tiếp tục chạy..."); } } 2. Multiple Catch Blocks 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 public class MultiCatchDemo { public static void main(String[] args) { try { String str = null; System.out.println(str.length()); // NullPointerException int[] arr = new int[5]; arr[10] = 50; // ArrayIndexOutOfBoundsException } catch (NullPointerException e) { System.out.println("Lỗi: Biến null!"); } catch (ArrayIndexOutOfBoundsException e) { System.out.println("Lỗi: Vượt quá kích thước mảng!"); } catch (Exception e) { System.out.println("Lỗi khác: " + e.getMessage()); } } } 3. Multi-Catch (Java 7+) 1 2 3 4 5 6 try { // Code có thể gây lỗi } catch (IOException | SQLException e) { System.out.println("Lỗi IO hoặc SQL: " + e.getMessage()); e.printStackTrace(); } 4. Try-Catch-Finally 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import java.io.*; public class FinallyDemo { public static void readFile(String filename) { BufferedReader reader = null; try { reader = new BufferedReader(new FileReader(filename)); String line = reader.readLine(); System.out.println("Nội dung: " + line); } catch (FileNotFoundException e) { System.out.println("Không tìm thấy file: " + filename); } catch (IOException e) { System.out.println("Lỗi đọc file: " + e.getMessage()); } finally { // Finally luôn được thực thi, dù có lỗi hay không try { if (reader != null) { reader.close(); System.out.println("Đã đóng file"); } } catch (IOException e) { System.out.println("Lỗi khi đóng file"); } } } } 5. Try-with-Resources (Java 7+) Tự động đóng resource, không cần finally: ...

Lập trình hướng đối tượng trong Java

4 Trụ cột của lập trình hướng đối tượng Lập trình hướng đối tượng (OOP) là gì? Object-Oriented Programming (OOP) là một phương pháp lập trình dựa trên khái niệm “đối tượng” (objects), chứa dữ liệu (attributes) và hành vi (methods). Java là ngôn ngữ OOP thuần túy, mọi thứ đều xoay quanh các class và object. 4 Trụ cột của OOP 1. Encapsulation (Đóng gói) Đóng gói - Che giấu dữ liệu và chỉ cung cấp interface ...

Hướng dẫn cài đặt môi trường Java & VSCode

Visual Studio Code với Java Extension Pack Giới thiệu Để bắt đầu lập trình Java, bạn cần cài đặt JDK (Java Development Kit) và một IDE/Editor. Trong bài viết này, tôi sẽ hướng dẫn sử dụng Visual Studio Code - một editor miễn phí, nhẹ và mạnh mẽ. Bước 1: Cài đặt JDK Java Development Kit (JDK) ...

Giới thiệu về ngôn ngữ Java

Java là gì? Java là một ngôn ngữ lập trình hướng đối tượng (Object-Oriented Programming - OOP) được phát triển bởi Sun Microsystems vào năm 1995, hiện thuộc sở hữu của Oracle Corporation. Java được thiết kế với triết lý “Write Once, Run Anywhere” (WORA) - viết một lần, chạy mọi nơi. Đặc điểm nổi bật của Java Kiến trúc Java: JDK, JRE, JVM ...