Chuyên đề Học JavaScript - lập trình JavaScript cơ bản xoay quanh những kiến thức JavaScript cơ bản được biên soạn chi tiết, giải thích rõ ràng và các bài thực hành kèm theo, nhằm giúp bạn có cách học JavaScript hiệu quả nhất.
Học JavaScript - lập trình JavaScript cơ bản
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó đứng thứ 3 trên bảng xếp hạng các ngôn ngữ phổ biến nhất thế giới (sau Python và Java), và cũng là một trong số 3 ngôn ngữ chính của lập trình web mà bất cứ lập trình viên nào về mảng web cũng cần phải nắm vững.
Nhằm đáp ứng nhu cầu học lập trình JavaScript cho người mới bắt đầu ở mọi lứa tuổi, cũng như mang những kiến thức lập trình chắt lọc từ Nhật Bản về Việt Nam mà chuyên đề Học JavaScript - lập trình JavaScript cơ bản đã được ra đời.
Chuyên đề là một phần của Lập trình căn bản - học lập trình theo phong cách Nhật Bản - website hướng dẫn học lập trình cho người mới bắt đầu. Nội dung trang web là kinh nghiệm học lập trình tại Nhật Bản của Kiyoshi - một cựu du học sinh hiện đang phát triển sự nghiệp tại Tokyo-Nhật Bản.
Các bài viết được cập nhật liên tục, vì vậy hãy lưu bookmark trên trình duyệt để sau này khỏi mất công tìm kiếm nhé. Nếu có vấn đề thắc mắc hay đặt câu hỏi về tự học lập trình Javascript cơ bản - lập trình Javascript cho người mới bắt đầu thì hãy liên hệ Kiyoshi để được hướng dẫn thêm.
Kiến thức cơ bản về JavaScript
- Làm thế nào để học tốt JavaScript
- Comment trong JavaScript
- Xuống dòng trong JavaScript
- Thụt lề trong JavaScript
Chuỗi trong JavaScript
- Khai báo chuỗi trong JavaScript
- Độ dài chuỗi trong JavaScriptNew!
- Surrogate pair characters trong JavaScriptNew!
- Tách chuỗi trong JavaScript (split)New!
- Tách số trong chuỗi JavaScriptNew!
- Cắt chuỗi trong JavaScript (slice)New!
- Cắt chuỗi trong JavaScript (substring)New!
- Đảo ngược chuỗi trong JavaScriptNew!
- Xóa ký tự trong chuỗi JavaScriptNew!
- Xoá khoảng trắng trong chuỗi JavasSript (trim, trimStart, trimEnd)New!
- Nối chuỗi trong JavaScript (concat, toán tử cộng)New!
- Thêm ký tự vào chuỗi trong JavaScript (padStart,padEnd)New!
- Chèn ký tự vào chuỗi trong JavaScriptNew!
- Tìm ký tự trong chuỗi JavaScript (indexOf, lastIndexOf)New!
- Thay thế ký tự trong chuỗi JavaScript (replace)New!
- Lấy ký tự trong chuỗi JavaScript (charAt)New!
- Lấy mã UTF-16 của ký tự trong chuỗi JavaScript (charCodeAt)New!
- Lấy điểm mã Unicode của ký tự trong chuỗi JavaScript (codePointAt)New!
- Chuyển chữ hoa thành chữ thường và ngược lại trong JavaScript (toLowerCase, toUpperCase)New!
- Chuyển chuỗi thành mảng trong javascriptNew!
- Kiểm tra ký tự có tồn tại trong chuỗi JavaScript hay không (includes,indexOf,regex)New!
- Kiểm tra chuỗi trong JavaScript có bắt đầu hoặc kết thúc bằng ký tự chỉ định hay không (startsWith, endsWith)New!
- Đếm số lần xuất hiện của ký tự trong chuỗi JavaScript với 3 cách cơ bảnNew!
Khai báo chuỗi
Cắt tách chuỗi
Xoá chuỗi
Thêm chèn nối
Tìm kiếm và thay thế
Ký tự và mã ký tự trong chuỗi
Chuyển kiểu
Kiểm tra
Đếm số lượng
Số trong JavaScript
- Các loại số trong JavaScriptNew!
- Chuyển số thành chuỗi trong JavaScript (toString)New!
- Chuyển chuỗi thành số nguyên trong JavaScript (Number.parseInt)New!
- Chuyển chuỗi thành số thực trong JavaScript (Number.parseFloat)New!
- Chuyển số thành chuỗi theo định dạng số thập phân trong JavaScript(toFixed)New!
- Chuyển số thành chuỗi theo định dạng ngôn ngữ(toLocaleString)New!
- Chuyển số thành chuỗi theo định dạng số có nghĩa trong JavaScript(toPrecision)New!
- Chuyển số thành chuỗi theo định dạng hàm mũ trong JavaScript (toExponential)New!
- Kiểm tra số âm số dương trong JavaScriptNew!
- Kiểm tra số chẵn lẻ trong JavaScriptNew!
- Kiểm tra số chính phương trong JavaScriptNew!
- Kiểm tra số đối xứng trong JavaScriptNew!
- Kiểm tra số hoàn hảo trong JavaScriptNew!
- Kiểm tra số nguyên trong JavaScriptNew!
- Kiểm tra số nguyên tố trong JavaScriptNew!
- Kiểm tra số hữu tỉ trong JavaScript (Number.isFinite)New!
- Kiểm tra số có phải là NaN trong JavaScript (Number.isNaN)New!
- Tìm số đảo ngược trong JavaScriptNew!
- Số pi trong JavaScriptNew!
- Lấy số nguyên và lấy số dư trong JavaScriptNew!
- Lấy 2 số sau dấu phẩy trong JavaScriptNew!
Khái niệm
Ép kiểu
Kiểm tra
Tìm số
Số pi và số mũ
Thao tác
Mảng trong JavaScript
- Mảng trong JavaScript là gì?New!
- Tạo mảng trong JavascriptNew!
- Đếm số phần tử trong mảng JavaScript (length)New!
- Độ dài mảng trong JavaScript(length)New!
- Index trong Javascript và cách truy cập phần tử trong mảng javascriptNew!
- Duyệt mảng trong JavaScriptNew!
- forEach trong JavaScript và cách lấy phần tử trong mảng theo thứ tựNew!
- Thêm phần tử vào mảng trong JavaScript (unshift, push, index)New!
- Gộp mảng trong JavaScriptNew!
- Phương thức concat() trong JavaScriptNew!
- Thay thế phần tử trong mảng JavaScript (index, splice)New!
- Xóa phần tử trong mảng JavaScript(shift, pop, splice)New!
- Cắt mảng trong JavaScript (slice)New!
- Tách mảng âm dương trong JavaScriptNew!
- Tách mảng chẵn lẻ trong JavaScriptNew!
- Chuyển mảng thành chuỗi trong javascriptNew!
- Kiểm tra có phải mảng trong JavaScript(isArray)New!
- Đảo ngược mảng trong JavaScriptNew!
- Sắp xếp phần tử trong mảng JavaScript (sort)New!
- Tìm phần tử trong mảng JavaScript (indexOf,lastIndexOf)New!
- Tìm kiếm theo điều kiện trong mảng JavaScript (findIndex, find, some, every)New!
- Tìm số lớn nhất và nhỏ nhất trong mảng JavaScriptNew!
- Tìm phần tử cuối cùng trong mảng JavaScriptNew!
- Lấy phần tử trong mảng JavaScriptNew!
- Đếm số lần xuất hiện phần tử trong mảng JavaScriptNew!
- Tìm số lớn nhất trong mảng JavaScriptNew!
- Tìm số nhỏ nhất trong mảng JavaScriptNew!
- Tìm phần tử xuất hiện nhiều nhất trong mảng JavaScriptNew!
- Tìm số chính phương trong mảng JavaScriptNew!
- Tìm số nguyên tố trong mảng JavaScriptNew!
- Kiểm tra phần tử có trong mảng JavaScript (includes,indexOf,lastIndexOf)New!
- Kiểm tra và lấy phần tử trùng trong mảng JavaScriptNew!
- Xóa phần tử trùng trong mảng JavaScriptNew!
- So sánh mảng trong JavaScriptNew!
- Mảng 2 chiều trong JavaScriptNew!
- Duyệt mảng 2 chiều trong JavaScriptNew!
- Array map trong JavaScriptNew!
- Array filter trong JavaScriptNew!
- Array reduce trong JavaScriptNew!
- Tính tổng các phần tử trong mảng JavaScriptNew!
Khai báo
Nhập xuất mảng
Thêm chèn nối
Cắt tách xoá
Ép kiểu
Sắp xếp mảng
Tìm kiếm
Trùng nhau
So sánh
Mảng 2 chiều
map filter reduce
Khác
Vòng lặp trong JavaScript
- For trong JavaScript và vòng lặp với số lần cụ thểNew!
- While trong JavaScript và vòng lặp không giới hạn số lầnNew!
- Break trong JavaScript và cách thoát khỏi vòng lặpNew!
- Continue trong JavaScript và cách bỏ qua vòng lặpNew!
- Vòng lặp vô hạn trong JavaScriptNew!
- for...in trong JavaScript và cách lấy thuộc tính từ đối tượngNew!
- for...of trong JavaScript và cách lấy giá trị từ đối tượngNew!
- do...while trong JavaScript và vòng lặp có ít nhất 1 lần chạyNew!
- for lồng (for trong for) trong JavaScriptNew!
Toán tử trong JavaScript
- Toán tử số học trong JavaScript
- Toán tử tăng và giảm trong JavaScript
- Toán tử gán trong JavaScript
- Toán tử đơn thức trong JavaScript
- Toán tử 3 ngôi (toán tử điều kiện) trong JavaScript
- Toán tử logic trong JavaScript và giá trị true false
- Toán tử so sánh trong JavaScript (P1: Toán tử quan hệ)
- Toán tử so sánh trong JavaScript (P2: So sánh bằng)
- typeof trong JavaScript và cách kiểm tra kiểu dữ liệu
- Toán tử thao tác bit trong JavaScript
Hàm trong JavaScript
- Hàm trong JavaScript là gìNew!
- Function trong JavaScript với cách tạo và gọi hàmNew!
- Truyền tham số vào hàm trong JavaScriptNew!
- Mutable, Immutable Objects và sự biến đổi của giá trị trong hàm JavaScriptNew!
- Return trong JavaScript và cách trả giá trị từ hàmNew!
- Function object trong JavaScriptNew!
- Hàm ẩn danh (Anonymous Function) và loại hàm chỉ sử dụng một lần trong JavaScriptNew!
- Arrow function - hàm mũi tên trong JavaScriptNew!
- Arguments trong javascript và lấy các giá trị truyền vào hàmNew!
- Hàm đệ quy (recursive function) trong JavaScript và cách gọi một hàm bên trong chính nóNew!
- Callback trong JavaScript và cách gọi một hàm bên trong hàm khácNew!
Object trong JavaScript
- Object trong JavaScript là gìNew!
- Khai báo Object trong JavaScriptNew!
- Xử lý object trong javascriptNew!
- hasOwnProperty trong Javascript và cách kiểm tra thuộc tính có trong objectNew!
- Truy cập và lấy thuộc tính của object trong javascriptNew!
- Chuyển object sang Array trong Javascript(Object.keys, Object.values, Object.entries)New!
- Chuyển Array sang Object trong JavaScript(Object.fromEntries)New!
- Duyệt object trong javascriptNew!
- Copy Object trong JavaScriptNew!
- Gán thuộc tính vào Object JavaScriptNew!
- Object.assign trong javascript và cách gộp objectNew!
- Object.freeze trong JavaScript và cách đóng băng objectNew!
- So sánh object trong JavaScript(JASON.stringify)New!
Date Object trong JavaScript
- Khai báo date trong JavaScriptNew!
- Cộng trừ ngày tháng trong JavaScriptNew!
- Tính số ngày trong JavaScriptNew!
- So sánh ngày tháng năm trong javascriptNew!
- Tách ngày tháng năm trong javascriptNew!
- Lấy ngày tháng năm trong JavaScriptNew!
- Lấy ngày tháng năm hiện tại trong JavaScriptNew!
- Chuyển date thành String trong JavaScriptNew!
- Chuyển date thành String trong JavaScript theo giờ địa phươngNew!
DOM trong JavaScript
- DOM là gì trong JavaScript
- Sự khác biệt giữa DOM, Node và Element trong JavaScript
- childNodes trong JavaScript và cách lấy các Node con
- parentNode trong JavaScript và cách lấy Node cha
- firstChild trong JavaScript và cách lấy Node con đầu tiên
- lastChild trong JavaScript và cách lấy Node con cuối cùng
- previousSibling trong JavaScript và cách lấy Node anh em liền kề phía trước
- nextSibling trong JavaScript và cách lấy Node anh em liền kề phía sau
- getElementById trong JavaScript và cách lấy element theo thuộc tính id
- getElementsByClassName trong JavaScript và cách lấy element theo thuộc tính class
- getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname
- getElementsByName trong JavaScript và cách lấy element theo thuộc tính name
- CSS selectors trong JavaScript
- querySelector trong JavaScript và cách lấy element theo điều kiện
- querySelectorAll trong JavaScript và cách lấy các element theo điều kiện
- parentElement trong JavaScript và cách lấy các Element cha
- children trong JavaScript và cách lấy các Element con
- firstElementChild trong JavaScript và cách lấy Element con đầu tiên
- lastElementChild trong JavaScript và cách lấy Element con cuối cùng
- nextElementSibling trong JavaScript và cách lấy Element anh em liền kề phía sau
- previousElementSibling trong JavaScript và cách lấy Element anh em liền kề phía trước
- nodeType trong JavaScript và cách lấy kiểu Node
- nodeValue trong JavaScript và cách lấy hoặc thiết lập giá trị của Node
- nodeName trong JavaScript và cách lấy tên Node
- textContent trong JavaScript và cách lấy hoặc thiết lập giá trị text của Node
- InnerText trong JavaScript và cách lấy hoặc thiết lập giá trị text hiển thị của Element
- outerHTML trong JavaScript và cách lấy hoặc thay thế toàn bộ lệnh HTML của Element
- innerHTML trong JavaScript và cách lấy hoặc thiết lập câu lệnh HTML chứa trong một Element
- setAttribute trong JavaScript và cách thiết lập giá trị thuộc tính của Element
- getAttribute trong JavaScript và cách lấy giá trị thuộc tính của Element
- attributes trong JavaScript và cách lấy danh sách thuộc tính của Element
- getAttributeNames trong JavaScript và cách lấy danh sách tên thuộc tính của Element
- removeAttribute trong JavaScript và cách xoá thuộc tính của Element
- Thay đổi CSS bằng JavaScript
- getComputedStyle trong JavaScript và cách lấy CSS của Element
- Tạo Node mới trong JavaScript
- Thêm Node con vào Node chỉ định trong JavaScript
- Thêm Node anh em trong JavaScript
- Thay thế Node trong JavaScript
- Xoá Node trong JavaScript
- currentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lý
- insertAdjacentHTML trong JavaScript và cách chèn mã HTML vào vị trí chỉ định
- DocumentFragment trong JavaScript và cách thêm đồng thời nhiều Node
Khái niệm
Lấy Node từ DOM
Lấy Element từ DOM
Lấy và thiết lập thông tin Node
Tạo Node
Sự kiện trong JavaScript
- Sự kiện click trong JavaScript
- Sự kiện dblclick trong JavaScript
- Sự kiện mousemove trong JavaScript
- Sự kiện mousedown và mouseup trong JavaScript
- Sự kiện mouseenter và mouseleave trong JavaScript
- Sự kiện mouseover và mouseout trong JavaScript
- Sự khác biệt giữa mouseenter và mouseover, mouseleave và mouseout
- Sự kiện scroll trong JavaScript (khi cuộn chuột)
- MouseEvent trong JavaScript và cách xử lý thông tin từ sự kiện chuột
- Sự kiện change trong JavaScript (khi thay đổi form hoặc menu lựa chọn)
- Sự kiện input trong JavaScript (khi nhập liệu form hoặc thay đổi menu lựa chọn)
- Sự kiện copy, cut và paste trong JavaScript
- Sự kiện keyup và keydown trong JavaScript (khi nhấn và nhả phím)
- Sự kiện keypress trong JavaScript (khi nhấn và nhả phím không phải phím bổ trợ)
- KeyboardEvent trong JavaScript và cách xử lý thông tin từ sự kiện bàn phím
- Sự kiện load trong JavaScript (khi trang HTML được load xong)
- Sự kiện beforeunload trong JavaScript (trước khi chuyển trang)
- Sự kiện resize trong JavaScript (khi đổi kích thước window)
- stopPropagation, stopImmediatePropagation trong JavaScript và cách ngăn lan toả sự kiện
- preventDefault trong JavaScript và cách dừng xử lý mặc định
- DispatchEvent trong JavaScript và cách tạo và kích hoạt sự kiện mới
Sự kiện chuột trong JavaScript
Sự kiện bàn phím trong JavaScript
Sự kiện window trong JavaScript
Tạo mới, kích hoạt và dừng sự kiện
JavaScript và Brower
- Hiển thị một hộp thoại trong JavaScript (window.alert,window.prompt,window.confirm)New!
- Mở tab hoặc cửa sổ mới trong JavaScript (window.open)New!
- Đóng tab hoặc cửa sổ trong JavaScript (window.close)New!
- Lấy kích thước màn hình bằng JavaScript (innerWidth, outerWidth, clientWidth, clientHeight)New!
- Lấy URL của trang web hiện tại bằng JavaScript (location.href)New!
- setInterval trong JavaScript và cách hẹn giờ chạy xử lý nhiều lần New!
- setTimeout trong JavaScript và cách hẹn giờ chạy xử lý một lầnNew!
- Tải lại trang bằng JavaScript (location.reload)New!
- Thay đổi kích thước màn hình bằng JavaScript (window.resizeTo,window.resizeBy)New!
- Thao tác với Cookie trong JavaScript (document.cookie)New!
- Thiết lập thuộc tính Cookie trong JavaScriptNew!
Form trong JavaScript
- Lấy dữ liệu trong textarea JavaScriptNew!
- Lấy dữ liệu trong textbox JavaScriptNew!
- Lấy giá trị checkbox bằng JavaScriptNew!
- Lấy giá trị radio bằng JavaScriptNew!
- Lấy giá trị của thẻ select trong JavaScript New!
- Lấy giá trị thanh trượt slider bằng JavaScriptNew!
- Lấy giá trị bảng chọn màu color picker bằng JavaScriptNew!
- Upload file bằng JavaScriptNew!
To be continued…
Các bài hướng dẫn Học javascript - lập trình javascript cơ bản sẽ liên tục được Kiyoshi update. Hãy bắt đầu với ngôn ngữ lập trình web đầu tiên của bạn!
