Trong các bài trước của khóa Laravel 13, chúng ta đã làm việc chủ yếu với:
PHP
Laravel
Blade
Database
Eloquent
REST API
Laravel Sanctum
Những thành phần này chủ yếu xử lý phía Server.
Nhưng một ứng dụng web hiện đại không chỉ có Server.
Khi người dùng:
bấm nút,
mở Modal,
gửi Form,
tìm kiếm,
lọc dữ liệu,
upload ảnh,
tải dữ liệu không cần reload trang,
cập nhật giao diện ngay lập tức,
thì chúng ta cần đến JavaScript.
Vì vậy, trước khi học Vue, React hoặc các Frontend Framework khác, chúng ta cần nắm được JavaScript hiện đại.
1. JavaScript là gì?
JavaScript là ngôn ngữ lập trình thường được sử dụng để xây dựng các tương tác phía trình duyệt.
Ví dụ một trang Laravel có nút:
<button id="btnHello">
Click me
</button>
JavaScript có thể bắt sự kiện click:
const button = document.querySelector('#btnHello');
button.addEventListener('click', () => {
alert('Hello Laravel!');
});
Khi người dùng click vào nút, JavaScript được thực thi ngay trên trình duyệt.
Có thể hình dung:
WEB APPLICATION
│
┌────────────┴────────────┐
│ │
SERVER BROWSER
│ │
Laravel JavaScript
│ │
PHP/DB HTML/CSS/JS
│ │
└───────────┬─────────────┘
│
HTTP
Laravel xử lý phần Server.
JavaScript xử lý phần tương tác phía Browser.
2. Laravel không thay thế JavaScript
Một hiểu lầm phổ biến của người mới học Laravel là:
"Đã dùng Laravel thì không cần JavaScript."
Điều này không đúng.
Laravel và JavaScript giải quyết những vấn đề khác nhau.
Ví dụ:
Laravel
│
├── Route
├── Controller
├── Model
├── Database
├── Authentication
└── REST API
JavaScript
│
├── Click
├── Form interaction
├── DOM
├── AJAX / Fetch
├── API request
└── Dynamic UI
Một ứng dụng Laravel thực tế thường sử dụng cả hai.
3. Ví dụ Laravel + JavaScript
Giả sử chúng ta có một trang quản lý bài viết.
Laravel trả về:
<button id="deletePost">
Xóa bài viết
</button>
JavaScript có thể xử lý hành động:
const button = document.querySelector('#deletePost');
button.addEventListener('click', () => {
const confirmed = confirm('Bạn có chắc muốn xóa?');
if (confirmed) {
console.log('Delete post');
}
});
Trong ví dụ này:
User
│
│ Click
▼
JavaScript
│
│ xử lý interaction
▼
Laravel API
│
│ xử lý request
▼
Database
Đây là mô hình mà chúng ta sẽ sử dụng rất nhiều trong các bài sau.
4. JavaScript trong Laravel 13 nằm ở đâu?
Trong một project Laravel hiện đại, JavaScript thường nằm trong:
resources/
└── js/
Ví dụ:
resources/
└── js/
├── app.js
└── bootstrap.js
Trong đó:
app.js
là một trong những file JavaScript chính của ứng dụng.
Chúng ta có thể viết JavaScript trực tiếp trong file này.
Ví dụ:
console.log('Laravel + JavaScript');
Sau đó Laravel sử dụng Vite để xử lý asset frontend trong quá trình phát triển và build ứng dụng.
5. Vite là gì?
Trong các project Laravel hiện đại, Vite đóng vai trò là công cụ frontend build/development.
Có thể hình dung:
JavaScript
CSS
Images
│
▼
Vite
│
▼
Browser
Vite hỗ trợ:
Development server
Module JavaScript
Import / Export
CSS processing
Hot Module Replacement
Build production
Ví dụ trong resources/js/app.js:
import './bootstrap';
console.log('Hello Laravel');
Vite sẽ xử lý module JavaScript và cung cấp chúng cho ứng dụng.
6. JavaScript truyền thống và JavaScript hiện đại
JavaScript đã phát triển rất nhiều.
Cách viết cũ có thể như:
var name = 'Laravel';
function hello(name) {
return 'Hello ' + name;
}
JavaScript hiện đại cung cấp nhiều cú pháp tiện lợi hơn:
const name = 'Laravel';
const hello = (name) => {
return `Hello ${name}`;
};
Chúng ta sẽ học những tính năng này trong Bài 02 — ES6+.
Một số tính năng quan trọng:
ES6+
│
├── let / const
├── Arrow Function
├── Template Literal
├── Destructuring
├── Spread Operator
├── Default Parameter
├── Optional Chaining
├── Nullish Coalescing
├── Modules
├── Promise
└── Async / Await
Đây chính là nền tảng cho Vue và React.
7. JavaScript và DOM
DOM (Document Object Model) là mô hình mà trình duyệt sử dụng để biểu diễn HTML của trang web.
Ví dụ:
<h1 id="title">
Laravel 13
</h1>
JavaScript có thể lấy phần tử này:
const title = document.querySelector('#title');
Sau đó thay đổi nội dung:
title.textContent = 'JavaScript';
Kết quả trên trình duyệt:
JavaScript
Chúng ta có thể thay đổi:
Nội dung
Class
Attribute
Style
Element
Form
Event
Ví dụ:
title.classList.add('active');
8. JavaScript xử lý Event
Một ứng dụng web có rất nhiều Event.
Ví dụ:
click
submit
change
input
keydown
keyup
mouseover
load
Ví dụ:
<button id="btn">
Click
</button>
JavaScript:
const button = document.querySelector('#btn');
button.addEventListener('click', () => {
console.log('Button clicked');
});
Mô hình:
User
│
│ click
▼
Browser
│
▼
JavaScript Event
│
▼
Callback Function
Đây là kiến thức rất quan trọng.
Vue và React sau này vẫn làm việc với Event, chỉ khác cách tổ chức và cách chúng ta mô tả giao diện.
9. JavaScript xử lý Form
Ví dụ một Form đăng nhập:
<form id="loginForm">
<input
type="email"
id="email"
>
<input
type="password"
id="password"
>
<button type="submit">
Login
</button>
</form>
JavaScript có thể bắt sự kiện submit:
const form = document.querySelector('#loginForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
console.log('Form submitted');
});
event.preventDefault() ngăn trình duyệt thực hiện hành động mặc định của Form.
Từ đây chúng ta có thể:
Form
│
▼
JavaScript
│
├── Validate
├── Collect data
├── Convert to JSON
└── Send API request
Đây chính là nền tảng cho các Form AJAX/API sau này.
10. JavaScript gọi Laravel API
Đây là phần cực kỳ quan trọng của khóa học.
Laravel có thể cung cấp API:
GET /api/posts
JavaScript có thể gọi API đó bằng fetch():
fetch('/api/posts')
.then(response => response.json())
.then(data => {
console.log(data);
});
Mô hình:
Browser
│
│ fetch()
▼
Laravel API
│
▼
Controller
│
▼
Eloquent
│
▼
Database
Sau đó dữ liệu quay trở lại:
Database
│
▼
Eloquent
│
▼
Laravel API
│
▼
JSON
│
▼
JavaScript
│
▼
HTML
Trong các bài tiếp theo chúng ta sẽ học kỹ hơn về quy trình này.
11. JSON là cầu nối giữa JavaScript và Laravel API
Laravel API thường trả dữ liệu dưới dạng JSON.
Ví dụ:
{
"id": 1,
"title": "Laravel 13",
"status": "published"
}
JavaScript có thể nhận dữ liệu:
fetch('/api/posts/1')
.then(response => response.json())
.then(post => {
console.log(post.title);
});
Kết quả:
Laravel 13
Có thể hình dung:
Laravel
│
│ JSON
▼
JavaScript
JSON trở thành một trong những định dạng dữ liệu quan trọng nhất khi xây dựng ứng dụng Frontend + Backend.
12. Từ JavaScript đến Vue
Sau khi học JavaScript thuần, chúng ta sẽ gặp một vấn đề.
Khi ứng dụng lớn hơn, JavaScript bắt đầu có nhiều phần:
JavaScript
│
├── DOM
├── Event
├── Form
├── API
├── State
├── Modal
├── Search
├── Pagination
└── UI
Nếu tất cả nằm trong một vài file JavaScript lớn, việc quản lý ứng dụng sẽ trở nên khó khăn.
Đây là lúc các Frontend Framework trở nên hữu ích.
Trong khóa học này, chúng ta đi theo hướng:
JavaScript
│
▼
Vue
│
▼
Vue + Laravel API
│
▼
Blog SPA
Sau đó mới mở rộng sang:
React
│
▼
React + Laravel API
và:
Livewire
│
▼
Laravel + Livewire
13. Tại sao phải học JavaScript trước Vue?
Vue không phải là một ngôn ngữ hoàn toàn mới.
Vue được xây dựng trên nền tảng JavaScript.
Ví dụ JavaScript:
const name = 'Laravel';
Vue:
const name = ref('Laravel');
JavaScript:
button.addEventListener('click', () => {
count++;
});
Vue:
const count = ref(0);
function increment() {
count.value++;
}
Nếu chưa hiểu:
biến
function
object
array
event
module
Promise
async/await
thì khi học Vue sẽ rất dễ trở thành học thuộc cú pháp.
Mục tiêu của phần này là tránh điều đó.
14. JavaScript → Vue → React
Một trong những mục tiêu của khóa học là giúp người học nhìn thấy mối quan hệ giữa các công nghệ.
JavaScript
│
┌─────────┴─────────┐
│ │
Vue React
│ │
└─────────┬─────────┘
│
Laravel API
Vue và React có nhiều khái niệm tương đồng:
Component
State
Event
Props
API
Form
Authentication
Nhưng cú pháp và hệ sinh thái khác nhau.
Vì vậy, học JavaScript trước sẽ giúp chúng ta dễ chuyển đổi giữa các Framework hơn.
15. JavaScript và Laravel Blade
Không phải ứng dụng Laravel nào cũng cần Vue hoặc React.
Một ứng dụng có thể sử dụng:
Laravel
│
└── Blade
│
└── JavaScript
Ví dụ:
Admin Dashboard
│
├── Blade
├── Bootstrap
└── JavaScript
Với những tương tác đơn giản, JavaScript thuần có thể đã đủ.
Không nhất thiết phải biến mọi trang thành SPA.
16. Khi nào JavaScript thuần là đủ?
Ví dụ một trang có:
Modal
Dropdown
Confirm Delete
Image Preview
Character Counter
Form Validation
Toggle Menu
Chúng ta hoàn toàn có thể sử dụng JavaScript.
Ví dụ:
const preview = document.querySelector('#preview');
const input = document.querySelector('#image');
input.addEventListener('change', () => {
const file = input.files[0];
if (!file) {
return;
}
preview.src = URL.createObjectURL(file);
});
Không cần Vue.
Không cần React.
Không cần SPA.
17. Khi nào Vue trở nên hữu ích?
Nếu giao diện có nhiều trạng thái và tương tác:
Search
Filter
Pagination
Modal
Form
API
Loading
Error
Authentication
User State
thì việc quản lý bằng JavaScript thuần có thể trở nên phức tạp.
Vue cung cấp cách tổ chức ứng dụng theo Component.
Ví dụ:
Blog
│
├── Navbar
├── SearchBox
├── CategoryFilter
├── PostList
│ └── PostCard
├── Pagination
└── Footer
Mỗi thành phần có thể được tổ chức riêng.
18. Laravel API + Vue
Trong phần 3 của khóa học, chúng ta sẽ kết nối hai phía:
LARAVEL
│
┌───────┴────────┐
│ │
REST API Database
│
│ JSON
▼
VUE
│
├── Components
├── Router
├── Pinia
└── UI
Ví dụ:
Vue
│
│ GET /api/posts
▼
Laravel
│
▼
PostController
│
▼
Post Model
│
▼
MySQL
Kết quả:
{
"data": [
{
"id": 1,
"title": "Laravel 13"
},
{
"id": 2,
"title": "JavaScript"
}
]
}
Vue nhận JSON và hiển thị danh sách.
19. Lộ trình JavaScript trong khóa học
Trong phần này, chúng ta sẽ đi từ cơ bản đến kết nối Laravel API:
Bài 01
JavaScript trong Laravel
│
▼
Bài 02
ES6+
│
▼
Bài 03
Array & Object
│
▼
Bài 04
Module
│
▼
Bài 05
Promise & Async/Await
│
▼
Bài 06
Fetch API
│
▼
Bài 07
JSON & HTTP
│
▼
Bài 08
JavaScript + Laravel REST API
Sau Bài 08, người học sẽ có nền tảng để bắt đầu:
VUE
│
▼
VUE + LARAVEL API
│
▼
BLOG SPA
20. JavaScript hiện đại cần học những gì?
Có thể chia thành 5 nhóm chính.
Nhóm 1 — Syntax
let
const
arrow function
template literal
destructuring
spread
rest
optional chaining
Nhóm 2 — Data
Array
Object
Map
Set
JSON
Nhóm 3 — Module
import
export
Nhóm 4 — Asynchronous JavaScript
Promise
async
await
try / catch
Fetch API
Nhóm 5 — Web API
DOM
Event
Form
Fetch
Storage
URL
File
Đây là những kiến thức chúng ta sẽ sử dụng xuyên suốt phần Frontend.
21. JavaScript không chỉ dành cho Frontend
JavaScript ngày nay không chỉ chạy trong Browser.
Có thể sử dụng JavaScript với:
Browser
│
└── Frontend
Node.js
│
└── Backend
Vue
│
└── Frontend Framework
React
│
└── Frontend Library
Electron
│
└── Desktop Application
React Native
│
└── Mobile Application
Trong khóa học này, chúng ta tập trung vào JavaScript phía Browser để phục vụ:
Laravel
+
JavaScript
+
Vue
+
React
22. Bài tập thực hành
Tạo một file:
resources/js/app.js
Thêm:
console.log('JavaScript is working!');
Sau đó tạo một Blade view:
resources/views/javascript.blade.php
Nội dung:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript + Laravel</title>
@vite(['resources/js/app.js'])
</head>
<body>
<h1 id="title">
Laravel 13
</h1>
<button id="changeTitle">
Change Title
</button>
</body>
</html>
Trong app.js:
const button = document.querySelector('#changeTitle');
button.addEventListener('click', () => {
const title = document.querySelector('#title');
title.textContent = 'JavaScript is working!';
});
Khi click:
Laravel 13
│
│ click
▼
JavaScript
│
▼
DOM
│
▼
JavaScript is working!
23. Kiểm tra kết quả
Mở trang trong trình duyệt.
Ban đầu:
Laravel 13
[ Change Title ]
Sau khi click:
JavaScript is working!
[ Change Title ]
Mở Developer Tools → Console.
Chúng ta cũng sẽ thấy:
JavaScript is working!
Nếu thấy dòng này, JavaScript đã được load thành công.
24. Kiến trúc chúng ta sẽ xây dựng
Sau toàn bộ khóa học, chúng ta sẽ đi từ:
LARAVEL 13
│
┌─────────┴─────────┐
│ │
Blade API
│ │
JavaScript │
│ │
▼ ▼
Vue ◄──────────── Laravel
│
Vue Router
│
Pinia
│
▼
Blog SPA
Sau đó mở rộng:
Laravel API
│
┌────────┼────────┐
│ │ │
Vue React JavaScript
│ │
└────────┘
│
Frontend
Và cuối cùng so sánh với:
Laravel
│
├── Blade
│
├── Livewire
│
├── Vue
│
└── React
Mục tiêu không phải là học thật nhiều Framework.
Mục tiêu là hiểu vai trò của từng công nghệ và biết khi nào chúng ta cần sử dụng chúng.
25. Tổng kết
Trong bài đầu tiên, chúng ta đã xác định vị trí của JavaScript trong hệ sinh thái Laravel.
Laravel
│
├── Server
│
├── Database
│
├── REST API
│
└── Blade
│
▼
JavaScript
│
┌────┴────┐
▼ ▼
Vue React
│
▼
Laravel API
Những kiến thức quan trọng cần nhớ:
Laravel xử lý phần Server.
JavaScript xử lý tương tác phía Browser.
Vite hỗ trợ quá trình phát triển và build frontend.
JavaScript có thể thao tác DOM và xử lý Event.
JavaScript có thể gửi request tới Laravel API.
JSON là định dạng dữ liệu quan trọng giữa Frontend và Backend.
Vue và React đều dựa trên nền tảng JavaScript.
Không phải ứng dụng Laravel nào cũng cần Vue hoặc React.
JavaScript thuần vẫn rất hữu ích trong các ứng dụng Blade.
Học JavaScript trước giúp việc học Vue và React dễ hiểu hơn.
Ở bài tiếp theo, chúng ta sẽ bắt đầu đi vào ES6+ — tập hợp những cú pháp và tính năng JavaScript hiện đại sẽ xuất hiện liên tục trong Vue, React và các ứng dụng Frontend hiện đại.
Bài 02 — ES6+
x1
quay về MỤC LỤC
Không có nhận xét nào:
Đăng nhận xét