1. Cơ bản
1.1. Khai báo biến
1.1.1. EX: var name_var
1.2. 3 hàm cơ bản
1.2.1. alert(): thông báo 1 popup
1.2.2. confirm(): thông báo một pop và người dùng chọn Y/N return T/F
1.2.3. prompt(): thông báo một pop và người dùng input
1.3. Các toán tử (tương tự java)
1.3.1. gán
1.3.2. toán học
1.3.3. quan hệ
1.3.4. luận lý
1.4. Câu lệnh if else, switch case
1.4.1. tương tự các ngôn ngữ khác
1.5. Function
1.5.1. cú pháp: function namefunc(var1, var2,...){//do something}
1.5.2. hàm có thể return hoặc không
1.6. Biến toàn cục, cục bộ
1.6.1. ở mức cơ bản tạm hiểu như trong các nn bt
1.7. setTimeOut()
1.7.1. gần giống thread trong java
1.7.2. cú phap: setTimeOut(funciont, time)
1.7.3. chỉ sử dụng một lần
1.7.4. sử dụng clearTimeOut() để dừng
1.7.5. để chạy mãi mãi sử dụng hàm" setInterval và cũng có hàm clearInterval để xóa
2. Datatype
2.1. String
2.1.1. Tương tự trong java
2.1.1.1. Ép kiểu sang string: string.toString().
2.1.2. Method
2.1.2.1. Tìm kiếm chuỗi con
2.1.2.1.1. Trả về kết quả là vị trí xuất hiện đầu tiên của chuối: indexOf()
2.1.2.1.2. Trả về kết quả vị trí xuất hiện cuối cùng của chuỗi: lastIndexOf()
2.1.2.1.3. search() tương tự như hàm indexOf()
2.1.2.2. Cắt chuỗi con
2.1.2.2.1. slice(start, end) tương tự substring bên java
2.1.2.2.2. substring(start, end) tương tự slice nhưng không nhận index âm
2.1.2.2.3. substr(start, length): cắt từ vị trí start và lấy length ký tự
2.1.2.3. Tìm kiếm và thay thế
2.1.2.3.1. replace(str_find, str_replace)
2.1.2.4. Chuyển thành chữ hoa và chữ thường
2.1.2.4.1. toUpperCase()
2.1.2.4.2. toLowerCase()
2.1.2.5. Nối thêm chuỗi
2.1.2.5.1. Thông thường sử dụng toán tử + ngoài ra bạn cũng có thể sử dụng hàm concat
2.1.2.6. Chuyển chuỗi thành mảng
2.1.2.6.1. Sử dụng split() tương tự như bên java
2.2. Array
2.2.1. Khai báo mảng
2.2.1.1. var name_array = new Array();
2.2.1.2. var name_array = new Array(1,2,3);
2.2.1.3. var name_array = [];
2.2.1.4. var name_array = [1,2,3];
2.2.2. Method
2.2.2.1. array.valueOf()
2.2.2.1.1. Nó sẽ nối các phần tử với nhau vào một chuỗi cách nhau bởi dấu phẩy
2.2.2.2. array.push()
2.2.2.2.1. Thêm một phần tử vào cuối mảng.
2.2.2.3. array.pop()
2.2.2.3.1. Xóa đi phần tử cuối cùng trong mảng
2.2.2.4. array.shift()
2.2.2.4.1. Xóa phần tử đầu tiên của mảng, sau đó dồn các phần tử phía sau xuống một bậc
2.2.2.5. array.unshift()
2.2.2.5.1. Thêm một phần tử vào vị trí đầu tiên của mảng, đồng thời đẩy các phẩn từ phía sau lên một bậc.
2.2.2.6. array.splice(position_add, num_element_remove, value1, value2, ...).
2.2.2.6.1. position_add là vị trí sẽ thêm (vị trí đầu tiên là 0)
2.2.2.6.2. num_element_remove là số phần tử sẽ xóa (bắt đầu từ position_add)
2.2.2.6.3. value1, value2, .. là danh sách các phần tử sẽ được thêm vào sau khi tại vị trí position_add
2.2.2.7. array.sort()
2.2.2.7.1. Sắp xếp các phần tử trong mảng theo thứ tự chữ cái alpha
2.2.2.8. array.reverse()
2.2.2.8.1. Đảo ngược các phẩn tử lại.
2.2.2.9. array.concat()
2.2.2.9.1. Nối hai mảng với nhau và trả về một mảng gồm tổng số phần tử của hai mảng đó.
2.2.2.10. array.slice(start, end)
2.2.2.10.1. Lấy một số phần tử con trong mảng
2.2.2.10.2. Phải cộng thêm 1 ở end thì mới lấy đúng phần tử mong muốn
2.3. Number
2.3.1. Chia thành dấu chấm động và không có dấu chấm động
2.3.2. Chuyển từ kiểu number sang kiểu string sử dụng number.toString(type)
2.3.3. Số Infinity
2.3.3.1. Là một kiểu dữ liệu Number và khi một biến có giá trị là Infinity
2.3.4. NaN
2.3.4.1. Nếu thực hiện một phép toán nhưng vi phạm quy tắc tính toán thì kết quả sẽ trả về giá trị gọi là NaN
2.3.5. Method
2.3.5.1. Number()
2.3.5.1.1. Dùng để chuyển đổi một biến hoặc một giá trị nào đấy sang number
2.3.5.1.2. Nếu không thể chuyển sang thì sẽ trở thành NaN
2.3.5.2. parseInt()
2.3.5.2.1. Nếu như chuỗi muốn chuyển sang có số ở đầu thì nó sẽ lấy phần số ở đầu. Trường hợp này chuyển bằng Number() sẽ ra NaN
2.3.5.3. parseFloat()
2.3.5.3.1. tương tự như parseInt()
2.3.5.4. toString()
2.3.5.4.1. Chuyển kiểu Number sang kiểu String
2.3.5.5. toFixed(n)
2.3.5.5.1. Chuyển một số sang một số có n số lẻ ở sau nó và có làm tròn.
2.3.5.6. toPrecision(n)
2.3.5.6.1. Chuyển một số thành số có chiều dài là n
2.3.5.7. valueOf()
2.3.5.7.1. Lấy giá trị của một biến hoặc một giá trị khác
2.4. Date
2.4.1. Khởi tạo đối tượng date
2.4.1.1. var timeObj = new Date();
2.4.2. Format Date
2.4.2.1. ISO
2.4.2.1.1. Định dạng chuẩn của ISO 8601 là (YYYY-MM-DD) hoặc (YYYY-MM) hoặc (YYYY).
2.4.2.2. Long
2.4.2.2.1. var LONG_1 = new Date("Mar 25 2015");
2.4.2.3. Short
2.4.2.3.1. Định dạng Short được lưu trữ dưới dạng MM/DD/YYYY hoặc YYYY/MM/DD hoặc MM-DD-YYYY hoặc YYYY-MM-DD/
2.4.2.4. Đầy đủ
2.4.2.4.1. var d = new Date("Wed Mar 25 2015 09:56:24 GMT+0100 (W. Europe Standard Time)");
2.4.3. Method
2.4.3.1. setDate()
2.4.3.1.1. thiết lập ngày (1 - 31)
2.4.3.2. setFullYear()
2.4.3.2.1. thiết lập năm đầy đủ (YYYY)
2.4.3.3. setYear()
2.4.3.3.1. thiết lậpnăm 2 số cuối (YY)
2.4.3.4. setHours()
2.4.3.4.1. thiết lập số giờ (0 - 23)
2.4.3.5. setMiliSeconds()
2.4.3.5.1. thiết lập số mili giây (0 - 999)
2.4.3.6. setMinutes()
2.4.3.6.1. thiết lập số phút (0 - 59)
2.4.3.7. setMonth()
2.4.3.7.1. thiết lập tháng (0 - 11)
2.4.3.8. setSeconds()
2.4.3.8.1. thiết lập số giây (0 - 59)
2.4.3.9. setTime()
2.4.3.9.1. thiết lập thời gian đã được convert sang dạng miliseconds.
2.5. Typeof
2.5.1. Dùng để kiểm tra một biến nào đó (hoặc một giá trị nào đó) có kiểu dữ liệu là gì
3. BOM
3.1. Định nghĩa
3.1.1. Browser Object Model, hay còn gọi là các đối tượng liên quan đến trình duyệt browser.
3.1.2. Window
3.1.3. Screen
3.1.4. Location
3.1.5. History
3.1.6. Navigator
3.1.7. Popup
3.1.8. Timing
3.1.9. Cookies
3.2. Window
3.2.1. Kích thước của trình duyệt
3.2.1.1. var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
3.2.1.2. var height = window.innerHeight || ocument.documentElement.clientHeight || document.body.clientHeight;
3.2.2. Mở một cửa sổ lên
3.2.2.1. window.open(url, name, options)
3.2.2.1.1. url : là đường dẫn website bạn muốn mở
3.2.2.1.2. name: là tên bạn đặt cho cửa sổ này
3.2.2.1.3. options: là một chuỗi các thông số được cách nhau bởi dấu phẩy,
3.2.3. Đóng một cửa sổ
3.2.3.1. windowObj.close()
3.2.4. Di chuyển cửa sổ
3.2.4.1. windowObj.moveTo(top, left)
3.2.4.1.1. top: là số pixels so với lề trên
3.2.4.1.2. left: là số pixels so với lề trái
3.2.5. Resize cửa sổ
3.2.5.1. windowObj.resizeTo(width, height)
3.3. Location
3.3.1. Tải lại trang web
3.3.1.1. window.location.reload(url)
3.3.2. Ghi đè trang web
3.3.2.1. window.location.replace(urr)
3.3.2.1.1. replace() thì trình duyệt sẽ KHÔNG đưa vào lịch sử.
3.3.2.1.2. location.href thì trình duyệt sẽ CÓ đưa vào lịch sử
3.3.3. Load một trang mới
3.3.3.1. window.location.assign(url)
3.3.4. Các attribute của Location
3.3.4.1. hash: thiết lập hoặc lấy phần sau dấu # của URL
3.3.4.2. host: thiết lập hoặc lấy hostname và port number của URL
3.3.4.3. hostname: thiết lập hoặc lấy hostname
3.3.4.4. href: thiết lập hoặc lấy URL
3.3.4.5. origin: trả về protocal, hostname và port number của URL
3.3.4.6. pathname: thiết lập hoặc lấy path name của URL
3.3.4.7. port: thiết lập hoặc lấy port của URL
3.3.4.8. search: lấy phần query string của URL
3.4. History
3.4.1. Đếm tổng số trang đã lưu trong history là
3.4.1.1. var totalPage = window.history.length;
3.4.2. Đi tới một trang nào đó trong history
3.4.2.1. history.back() : trở lại trang trước
3.4.2.2. history.forward() : đi tới trang kế tiếp
3.4.2.3. history.go(number): đi tới một trang:
3.4.2.3.1. nếu number âm thì tính từ trang hiện tại trừ đi number
3.4.2.3.2. nếu number dương thì tính từ trang hiện tại cộng với number
3.5. Cookie
3.5.1. Định nghĩa
3.5.1.1. Là một đối tượng không thể thiếu trong các trình duyệt vì hầu hết các website đều có sử dụng cookie để lưu trữ dữ liệu.
3.5.2. Tạo cookie
3.5.2.1. name=value
3.5.2.1.1. document.cookie = 'website=freetuts.net';
3.5.2.1.2. document.cookie = '[email protected]';
3.5.3. Lấy giá trị của cookie
3.5.3.1. var giatri = document.cookie;
3.5.4. Đổi giá trị cho cookie
3.5.4.1. document.cookie = "domain=freetuts.net";
3.5.5. Xóa cookie
3.5.5.1. Không có hàm xóa mà phải sử dụng từ khóa expires để thiết lập thời gian sống cho cookie
3.6. Navigator
3.6.1. Định nghĩa
3.6.1.1. Dùng để kiểm tra các thông tin về người dùng như trình duyệt đang sử dụng, hệ điều hành đang sử dụng, có bật cookie hay không
3.6.2. navigator.cookieEnabled navigator.appName và navigator.appCodeName navigator.product navigator.appVersion và navigator.userAgent navigator.platform navigator.language
3.7. Screen
3.7.1. screen.width screen.height screen.availWidth screen.availHeight screen.colorDepth screen.pixelDepth
3.7.2. Định nghĩa
3.7.2.1. Là đối tượng chứa thông tin về màn hình của trình duyệt người dùng.
4. Vòng Lặp
4.1. For
4.2. While do, ...
4.3. Break continue
5. Events
5.1. Định nghĩa: là những hành động tác động lên đối tượng HTML
5.2. Thêm event
5.2.1. Cú pháp: elementObject.eventName = function(){ // do something };
5.2.2. Lấy cho nhiều thẻ HTML: var elementObjs = document.getElementsByTagName('element');
5.2.2.1. Sau đó: elementObjs[i].eventName = function() { // Do simething };
5.3. Return Ttrue/ False
5.3.1. Ví dụ như để validate input
5.4. Event Onload
5.4.1. Những event nằm trong onload sẽ chạy sau cùng khi mà js đã biên dịch một lần
5.5. addEventListener()
5.5.1. Cú pháp: elementObject.addEventListener('eventName', function(e){ // do something });
5.5.1.1. eventName là tên của sự kiện bỏ chữ on, ví dục "click", "change",
5.5.2. removeEventLisner()
5.5.2.1. sử dụng để xóa event
6. DOM
6.1. Định nghĩa
6.1.1. Document Object Model, dịch tạm ra là mô hình các đối tượng trong tài liệu HTML.
6.1.2. Để thấy rõ hơn
6.2. DOM Element
6.2.1. Lấy bởi Id
6.2.1.1. var element = document.getElementById('website');
6.2.2. Tên thẻ HTML
6.2.2.1. var element = document.getElementsByTagName('tagname');
6.2.3. Tên class
6.2.3.1. var element = document.getElementsByClassName('input');
6.2.4. Cú pháp selector CSS
6.2.4.1. var element = document.querySelectorAll("div input.website");
6.3. DOM HTML
6.3.1. Nội dung bên trong thẻ HTML
6.3.1.1. ocument.getElementById("content").innerHTML
6.3.2. Thuộc tính thẻ HTML
6.3.2.1. document.getElementById("element").attributeName
6.4. DOM CSS
6.4.1. Thay đổi CSS bằng JS
6.4.1.1. document.getElementById("object").style.cssName
6.5. DOM Nodes
6.5.1. Khi truy vấn tới một đối tượng HTML thì kết quả trả về sẽ là một object,, và object đó là DOME Nodes
6.5.2. Tạo node không liên quan đến HTML
6.5.2.1. var p = document.createElement("p");
6.5.2.2. p.innerHTML = "Học DOM Nodes tại freetuts.net"
6.5.2.3. document.getElementsByTagName('body')[0].appendChild(p);
6.5.3. document.createTextNode()
6.5.3.1. Là một node đặc biệt, không phải thẻ HTML thông thường mà là một chuỗi String, thường dùng để thay thế gán
6.5.3.2. node.innerHTML
6.5.4. Các method
6.5.4.1. Dùng để bổ sung vào cuối cùng của đối tượng một thẻ HTML nào đó
6.5.4.1.1. appendChild()
6.5.4.2. Dùng để thêm một node vào đằng trước một node con nào đó.
6.5.4.2.1. insertBefore(node_insert, node_child)
6.5.4.3. Dùng để xóa một node con ra khỏi node hiện tại
6.5.4.3.1. removeChild()
6.5.4.4. Dùng để thay thế một node con nào đó bằng một node khác mới hoàn toàn
6.5.4.4.1. replaceChild()
6.6. Đối tượng this
6.6.1. Ở phần này chỉ đề cập đên this tương tự như trong class của java
7. Objects
7.1. Định nghĩa
7.1.1. Là một khái niệm trừu tượng thể hiện cho một đối tượng cụ thể và nó có sẵn một số đối tượng như Date, Number
7.2. Khởi tạo đối tượng
7.2.1. new Object()
7.2.2. Từ khóa {}
7.3. Bao gồm thuộc tính và phương thức tương tự như Java
7.4. Prototypes
7.4.1. Thêm thuộc tính
7.4.1.1. bject.prototype.thuoc_tinh = "giá trị mặc định";
7.4.2. Thêm phương thức
7.4.2.1. Object.prototype.phuong_thuc = function(){
8. Bổ sung
8.1. Hoisting
8.1.1. Liên quan đến việc trong Javascript bạn có thể sử dụng một biến mà không cần phải định nghĩa trước.
8.1.2. Chỉ tồn tại khi bạn khai báo biến chứ không tồn tại khi gán giá trị ban đầu cho biến
8.2. Use Strict
8.2.1. Là chế độ nghiêm ngặt trong java
8.2.1.1. Phải khai báo trước khi sử dụng
8.2.1.2. Không chấp nhận delete biến
8.2.1.3. Không được định nghĩa thuộc tính nghĩa 2 lần
8.2.1.4. Không được khai báo tham số trùng
8.2.1.5. Không được sử dụng literals và escape với kiểu number.
8.2.1.6. Không thể khai báo tên của biến trùng với key
8.3. Regular Expression
8.3.1. Tương tự bên java
8.4. HTML5 Local Storage
8.4.1. Có công dụng tương tự như cookie, có nghĩa là nó sẽ lưu trữ thông tin trên browser
8.4.2. window.localStorage: Lưu trữ dữ liệu vô thời hạn, dữ liệu sẽ được lưu trữ cho tới khi người dùng clear history.
8.4.3. window.sessionStorage: Lưu trữ dữ liệu cho mội phiên làm việc, có nghĩa dữ liệu sẽ bị mất khi bạn tắt browser.