Javascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website.
- Video – Giới thiệu về ngôn ngữ lập trình JavaScript
- Hướng dẫn chi tiết
- Các framework và thư viện của javascript
- Phân biệt Java và JavaScript
- Những cách thêm JS vào
- Các plugin Sublime Text
Video – Giới thiệu về ngôn ngữ lập trình JavaScript
Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động cũng có hỗ trợ
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni [trả nợ]" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".
Hướng dẫn chi tiết
Các framework và thư viện của javascript
+ jQuery: Một thư viện rất mạnh về hiểu ứng
+ nodeJS: dùng để lập trình cho server
+ ReactJS, AngularJS, VueJS phát triển cho front-end
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni [trả nợ]" nên dành vài dòng cho QUẢNG CÁO Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".
+ React Native: phát triển ứng dụng cho di động.
Phân biệt Java và JavaScript
+ Lập trình hướng sự kiện [hướng kịch bản] -> chú trọng vào kết quả xử lý -> Javascript, PHP
+ Lập trình hướng thủ tục -> chú trọng vào thuật toán -> xây dựng hàm và gọi hàm -> C/C++
+ Lập trình hướng đối tượng -> đóng gói dữ liệu, kế thừa -> xây dựng class -> Java
Những cách thêm JS vào
- Dùng bên trong thẻ html
- Dùng file ngoài
- Dùng bên trong phía dưới của thẻ body
Các plugin Sublime Text
- AutoFileName
- Javascript Completions hoặc Javascript & nodeJS snipets
Code mẫu: Download
Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Liên hệ
Cùng với HTML và CSS, JavaScript là 1 trong số bộ 3 ngôn ngữ khởi đầu cho bất kỳ ai muốn học lập trình web. Nếu như HTML cho phép chúng ta cấu trúc nội dung của trang web, CSS cho phép chúng ta thiết lập phong cách hiển thị của các nội dung, thì JavaScript ở khía cạnh khác lại cho phép chúng ta viết kịch bản đáp ứng cho các thành phần kiến trúc để tương tác với người dùng.
Hay nói một cách khác, với HTML và CSS thì chúng ta có thể vẽ ra một giao diện người dùng tùy ý trên nền trình duyệt web, còn với JavaScript thì chúng ta có thể lập trình cách hoạt động của giao diện mà chúng ta đã vẽ ra trước đó.
Chúng ta sẽ có một ví dụ nho nhỏ mở đầu ở đây. Giả sử bạn muốn tạo ra một nút nhấn trên trang web của bạn để chào hỏi người dùng. HTML có thể tạo ra nút nhấn. CSS có thể giúp thay đổi phong cách hiển thị của nút nhấn đó. Tuy nhiên cả HTML và CSS đều không thể nói với trình duyệt web Việc cần làm là gì? khi người dùng click chuột vào nút nhấn đó. Đây chính là điểm mà JavaScript xuất
hiện.
doctype html>
Chào hỏi
Click vào đây! :D
#greet {
font-size: 18px;
font-weight: bold;
padding: 18px 27px;
color: White;
background-color: RoyalBlue;
border: none;
cursor: pointer;
}
Đặt một công tắc cảm biến
trên nút nhấn có id `greet`.
Mỗi khi nhận được 1 click chuột
truy vấn thông tin thời gian từ thiết bị
tính toán xem đang là khoảng thời gian nào trong ngày.
Gửi lời chào người dùng
bằng cách cho hiện một bảng thông báo
và lời chào được chọn tương ứng với kết quả tính toán.
Mở xem ví dụ hoạt động
Thực ra thì đó không phải là code JavaScript. Do ngôn ngữ này rất linh hoạt và có nhiều thứ có thể sẽ khiến bạn bị rối khi mới bắt đầu học; nên mình đã viết tạm vài dòng mô tả những nội dung cần triển khai trong code JavaScript bằng tiếng Việt như vậy.
Ở
đây thì bạn chỉ cần lưu ý duy nhất một điểm mới trong code HTML đó là thẻ ở cuối phần được sử dụng để gắn một tệp JavaScript vào văn bản HTML.
Vậy rốt cuộc thì JavaScript có thể làm được những gì trong trình duyệt web?
Chức năng đầu tiên để nói đến thì JavaScript là một ngôn ngữ lập trình và có thể giúp chúng ta nhờ trình duyệt web thực hiện các tác vụ tính toán, tư duy logic, ra quyết định thực hiện các thao tác xử lý trong những tình huống cụ thể.
Chức năng thứ hai, đó là JavaScript có thể giúp chúng ta nói với trình duyệt web thực hiện những thao tác thay đổi nội dung của văn bản HTML đang hiển thị; Và hiển nhiên là cả các phong cách hiển thị được quy định bởi CSS cũng có thể được thay đổi bởi JavaScript.
Chức năng thứ ba, đó là JavaScript còn có thể thực hiện những thao tác người dùng đối với chính phần mềm trình duyệt web. Ví dụ như đóng/mở một cửa sổ trình duyệt, hoặc thay đổi kích thước cửa sổ trình duyệt và di chuyển cửa sổ đó trên màn hình hiển thị của người dùng máy tính. JavaScript cũng có thể gửi yêu cầu truy vấn thêm dữ liệu tới máy chủ web hoặc chuyển hướng người dùng tới địa chỉ web khác.
Ồ... nghe chừng như chúng ta sẽ phải học rất nhiều thứ.
Tuy nhiên bạn đừng lo lắng gì cả. Thực ra chỉ có một phần quan trọng duy nhất, đó là phần đầu tiên: "Học các khái niệm căn bản trong lập trình và làm quen với ngôn ngữ". Một khi bạn đã biết những thứ căn bản thì việc học 2 phần còn lại thực sự sẽ không phải là vấn đề
gì khó khăn đâu. Vì vậy nên chúng ta hãy cứ bắt đầu luôn đi thôi.
Câu lệnh JavaScript đầu tiên
Ok, bây giờ chúng ta sẽ chạy thử câu lệnh JavaScript đầu tiên.
doctype html>
Gặp gỡ JavaScript
Xin chào JavaScript !
console.log[2022];
Ở đây chúng ta sẽ dành quãng thời gian đầu tiên của Series JavaScript để học các khái niệm căn bản trong lập trình. Và vì vậy nên chúng ta sẽ chưa thể chạm vào các công cụ giúp thay đổi nội dung của văn bản HTML. Chúng ta sẽ
cần một nơi nào đó khác để xem kết quả hoạt động của code JavaScript ví dụ; Và câu lệnh phía trên sẽ in bất cứ thứ gì mà chúng ta đặt trong cặp ngoặc đơn [] ra cửa sổ console của trình duyệt web.
Để mở cửa sổ console thì bạn có thể nhấn nút F12 trên bàn phím máy tính hoặc click chuột phải vào bất kỳ đâu trên trang web và chọn Inspect, rồi sau đó chọn thẻ console.
Bây giờ thì hãy cùng nhìn kỹ hơn vào câu lệnh JavaScript đầu tiên của chúng ta. Nó trông khá rõ ràng và dễ hiểu phải không?
console của trình duyệt web rằng - Hãy log [in nhật ký] với nội dung là 2022. Như vậy là chỉ còn 3 chi tiết nhỏ nữa mà chúng ta
cần quan tâm tới ý nghĩa của chúng:Chúng ta có thể kết thúc bài viết đầu tiên về JavaScript với một chút băn khoăn được không?
Viết chú thích trong code JavaScript
Ồ... Mình xin lỗi một chút. Có một việc nho nhỏ nữa mà mình cần nói với bạn. Đó là giống với các ngôn ngữ máy tính khác, JavaScript cho phép chúng ta viết các chú thích trong code. Có 2 cách viết như thế này:
- Mở đầu chú
thích của bạn với 2 dấu gạch nghiêng
//và tất cả những ký tự sau đó cho tới cuối dòng sẽ được trình duyệt web bỏ qua. - Nếu như bạn muốn viết một chú thích có nhiều dòng thì bạn có thể đóng khung nội dung bằng cách sử dụng một cặp
/*và*/như chúng ta vẫn thường làm trong/* CSS */.
[JavaScript] Bài 2 - Kiểu & Biến