BÀI 01
Căn bản về Javascript
Bạn nào đã biết Javascript có thể bỏ qua phần này
BẮT ĐẦU
Học javascript dễ như ăn cháo
Javascript là gì
JavaScript là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động.�Một vài người hâm mộ Javascript và tìm cách để chạy nó trên Server. Từ đó NodeJS và khái niệm Full-stack-developer ra đời.
“
“
Vạn sự khởi đầu nan
Gian nan đừng có nản
Chương trình học Javascript
Gồm 6 phần
Nắm bắt các khái niệm cơ bản như Biến, mảng (array), đối tượng, toán tử
Giới thiệu về Javascript
Các lệnh dùng chuyển hướng xử lý có điều kiện
Rẽ nhánh , vòng lập
Nhóm các đoạn code cùng chức năng lại để dễ quản lý
Hàm, lớp
Cài đặt các đoạn code dùng phản hồi các thao tác người dùng trên web
Sự kiện (Event)
Xử lý các đối tượng phức tạp trên web
DOM / Json/ Form
Các thư viện hỗ trợ javascript
JQuery/Ajax
01
02
03
04
05
06
Chuẩn bị hệ thống
Insert the title of your subtitle Here
Do phần này chủ yếu thực hiện ở trên Front-End (Web) nên bạn cần một Web Server nhỏ gọn để hỗ trợ
Coachfi xin giới thiệu các bạn ứng dụng MiniWeb chỉ 113Kb dùng thực hành Javascript.
Để download bạn truy cập vào URL sau, rồi ấn Download:�https://sourceforge.net/projects/miniweb/
Đặt tên file/folder �Phải nhớ
1. Tên file/folder nên dùng tiếng anh, chữ thường, không khoảng trắng.��2. Tên chỉ có thể là chữ, số và 2 ký tự đặc biệt là “–” và “_”. Các ký tự khác không nên dùng vì có thể gây lỗi.�
3. Các file HTML thì có phần đuôi là “.html”, các file javascript thì phần đuôi là “.js”
Các nguyên tắc
Giới thiệu về Javascript
Các kiểu lưu trữ dữ liệu trong bộ nhớ của javascript
Các kiểu dữ liệu cơ bản
Biến và Hằng
Các toán tử
01
02
03
Hello World
Đặt tên file là coachfi01-01.html
Bài đầu tiên
In ra câu “Hello Worrld “
<html>
<head>
<title></title>
<script language="javascript">
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>
Easy to change colors, photos and Text.
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Bài tập nhỏ: Thay dòng Hello World thành Hello Your-name. Trong đó Your-name là tên của bạn
Quy tắc đặt tên JS�Phải nhớ
1. Tên biến/mảng/đối tượng/function: đặt tên tiếng Anh rõ nghĩa. Chữ cái đầu tiên viết thường, còn lại chữ cái đầu các chữ tiếp theo viết Hoa��var numOfCar;�var fullName = “Nguyễn Văn A”��2. Các biến đếm trong vòng lập có thể đặt đơn giản là i,j,k�
3. Tên lớp : Viết hoa những chữ cái đầu�var UserManager = require(“usermanager”);
Các nguyên tắc
Các kiểu dữ liệu cơ bản
string�number�boolean�object�undefined�array�json
1. string: các dữ liệu thuộc kiểu string (hay còn được gọi là "chuỗi") là một tập hợp gồm các ký tự, chúng được viết bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.�var a = "Tài liệu học HTML";
var b = 'Lập Trình Web';
��2. number: (hay còn được gọi là "số") là một tập hợp của các con số (0 - 9) không chứa dấu khoảng trắng và có thể chứa dấu trừ (-) nằm ở đầu để đại diện cho số âm.�var num1 = 22;
var num2 = -1993;��3. boolean: các dữ liệu thuộc kiểu boolean chỉ có thể nhận một trong hai giá trị, đó là: true(đúng) hoặc false(sai)�var a = true;
var b = false;
var c = 6 > 2;
var d = 6 > 10;
string�number�boolean�object�undefined�array
4. object: các dữ liệu thuộc kiểu object (hay còn được gọi là "đối tượng") là một tập hợp gồm những cái tên và mỗi cái tên sẽ chứa đựng một giá trị dữ liệu.
Kiểu object cũng hay được gọi là JSon do sự nỗi tiếng của nó
var student= {
name:"Nhân",
gender:"Nam",
year:1993
}
Để truy xuất phần tử trong Object, là dùng object[“Tên phần từ”] hoặc object.tên phần-tử. VD�student[“name”] => “Nhân” hoặc student.name�Câu hỏi: student[“gender”] là gì ? student.address là gì ?��5. undefined: khi một biến được khai báo mà không gán giá trị thì biến đó sẽ có giá trị là undefined và kiểu dữ liệu cũng là undefined.�var myName; //biến myName sẽ có giá trị là undefined và kiểu dữ liệu là undefined�myName = "Nguyễn Thành Nhân"; //biến myName có kiểu dữ liệu là string
myName = undefined; //biến myName có kiểu dữ liệu là undefined
�6. array: còn được gọi là mảng, nó là một trường hợp đặc biệt của đối tượng.Thật ra, mảng có kiểu dữ liệu là object.
- Mảng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị đồng thời, mỗi giá trị được gọi là một phần tử mảng.�var mobile = ["HTC","Nokia","SamSung"];��Để truy xuất phần từ trong Array, là dùng Tên-Array[Số-thứ-tự]. VD�mobile[0] => “HTC” //Số thứ tự trong JS bắt đầu từ 0�Câu hỏi: mobile[2] là gì ? mobile[3] là gì ?��Chú ý: Như đã nói trên, Array cũng là một kiểu Object đặc biệt. Nên ta thấy cách dùng . . . ná ná nhau
Biến và Hằng
Biến là gì�Hằng là gì
1. Biến : nơi lưu trữ giá trị của JS dùng trong coding. Giá trị của một Biến có thể thay đổi nhiều lần�- Cú pháp: để tạo 1 biến ta dùng từ khóa var hoặc let
var num = 10;
Num = 12;
let word = “Hello world !”;
word = “Hello Coachfi!”;��2. Hằng: nơi lưu trữ giá trị của JS dùng trong coding. Giá trị của một Hằng không có thể thay đổi trong suốt thời gian sống của nó. Để tạo một hằng ta dùng const��const num = 100;��javascript là ngôn ngữ lập trình rất cơ động trọng quản lý biến, một biết có thể kiểu Number có thể được chuyển sang kiểu Chữ, Đối tượng . . . |��Tuy nhiên, cá nhân mình không khuyến khích việc đó vì sẽ làm rối code.
Toán tử trong Javascript
Toán tử là các phép toán trong Javascript, các toán tử chỉ hoạt động trong các biến. Bạn không dùng toán tử cho mảng hay object được.
Bài đầu tiên
Easy to change colors, photos and Text.
asy to change colors, photos and Text.
Easy to change colors, photos and Text.
Your Text Here
Your Text Here
<SCRIPT LANGUAGE="JavaScript">
var x = 10;
document.write ("The value of x = " + x);
document.write ("The value of x + x = " + (x + x));
document.write ("The value of x - x = " + (x - x));
document.write ("The value of x * x = " + (x * x));
document.write ("The value of x / 3 = " + (x / 3));
document.write ("The value of x % 3 = " + (x % 3));
document.write ("The value of --x = " + (--x));
document.write ("The value of ++x = " + (++x));
document.write ("The value of -x = " + (-x));
</SCRIPT>
Các kiểu dữ liệu cơ bản
Đặt tên file là coachfi01-02.html
Bài thứ hai
Các kiểu dữ liệu cơ bản
<script language="javascript">
�var a = "Tài liệu học HTML";
var b = 'Lập Trình Web';�var num1 = 22;
var num2 = -1993;�var a = true;
var b = false;
var c = 6 > 2;
var d = 6 > 10;
alert(a);
</script>
Easy to change colors, photos and Text.
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Bài tập nhỏ: In các kiểu dữ liệu kiểu object/undifined và array ra
Debug
Làm thế nào biết code bạn viết chạy thế nào, mơ hồ quá. Đây là suy nghĩ của những người mới học lập trình và cả một số người ít kinh nghiệm.�Để giúp bạn sáng tỏ câu hỏi trên, có một công cụ gọi là Debug (từ chuyên ngành). Debug là một dạng công cụ giúp bạn soi vào bên trong code, giúp bạn thấy được code của bạn sẽ chạt như thế nào. Các giá trị được tạo, thay đổi ra sau.��Để debug Javascript, bạn chỉ cần chạy trang web có đoạn javascript đó, ấn F12
Bài đầu tiên
Easy to change colors, photos and Text.
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Easy to change colors, photos and Text.
Your Text Here
Rẽ nhánh , vòng lặp
Các lệnh điều khiển – phân luồng xử lý
If . . .else
switch
01
02
Câu lệnh if . . .else
Trong khi viết một chương trình, có thể có một tình huống khi bạn cần theo một trong một tập hợp các lưạ chọn cho trước. Trong trường hợp này, bạn cần sử dụng lệnh điều kiện mà cho phép chương trình của bạn điều khiển luồng chính xác và thực hiện các hành động đúng.
JavaScript hỗ trợ các lệnh điều kiện được sử dụng để thực hiện các hành động khác nhau trên cơ sở các điều kiện khác nhau. Dưới đây chúng tôi sẽ giải thích lệnh if…else.
Chú ý: sau if và else chỉ có một câu lệnh Nếu bạn muốn chạy nhiều câu lệnh thì phải gom nó vào 1 khối.��Khối lệnh là các câu lệnh nằm trong dấy { và }
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
alert(“Đã đủ 18 tuổi”);
} else {
let str = “Chưa đủ 18 tuổi”;
alert(str);
}
</script>
<script type="text/javascript">
<!--
var age = 20;
if( age < 16 ){
alert(“Đã đủ 16 tuổi”);
} else if( age < 18 ) {
let str = “Chưa đủ 18 tuổi”;
alert(str);
} else {
let str = “Trên 18 tuổi”;
alert(str);
}
</script>
Bài tập nhỏ: chạy debug từng dòng để xem hoạt động if . . . else nó thế nào
Câu lệnh switch
<script type="text/javascript">
<!--
var tag = “B”;
if( tag == “A” ){
alert(“Khách hàng lạnh”);
} else if( tag == “B” ){
alert(“Khách hàng vãng lai”);
} else if( tag == “C” ){
alert(“Khách hàng thân thiết”);
} else if( tag == “D” ){
alert(“Khách hàng BẠC”);
} else if( tag == “E” ){
alert(“Khách hàng VÀNG”);
}
</script>
Bài tập nhỏ: Xóa lệnh [break] đi và chạy lại, xem điều gì xảy ra. Tìm kiểu ý nghĩa lệnh [break]
Bạn có thể sử dụng nhiều lệnh if...else…if như trong phần trước để thực hiện nhiều lựa chọn. Tuy nhiên nếu quá nhiều nhánh sẽ gây rối code.
Thay vào đó, bạn có thể sử dụng một lệnh switch để xử lý chính xác tình huống này, và nó thực sự hiệu quả hơn so với việc lặp đi lặp lại các lệnh if…else if.
<script type="text/javascript">
<!--
var tag = “B”;
switch (tag) {
case “A” :
alert(“Khách hàng lạnh”);
break;
case “B” :
alert(“Khách hàng vãng lai”);
break;
case “C” :
alert(“Khách hàng thân thiết”);
break;
case “D” :� alert(“Khách hàng BẠC”);
break;� default :� alert(“Khách hàng VÀNG”);
break;
}
</script>
Vòng lặp for
Vòng lặp 'for' là mẫu vòng lặp gọn nhất. Nó bao gồm 3 phần quan trọng:
- Phần khởi tạo vòng lặp – initialization, nơi chúng ta khởi tạo phép tính tới một giá trị bắt đầu. Lệnh khởi tạo được thực thi trước khi vòng lặp bắt đầu.
- Phần kiểm tra lệnh – test statement mà sẽ kiểm tra nếu một điều kiện đã cho là true hoặc không. Nếu điều kiện là true, thì khi đó code đã cho bên trong vòng lặp sẽ được thực thi, nếu không thì điều khiển sẽ thoát ra khỏi vòng lặp.
- Phần lệnh lặp lại – iteration statement, nơi bạn có thể tăng hoặc giảm phép tính của bạn.
Bạn có thể đặt cả 3 phần trong một dòng đơn phân biệt nhau bởi dấu chấm phẩy.
<script type="text/javascript">
var count;
document.write("Starting Loop" + "<br />");
for(count = 0; count < 10; count++){
document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
</script>
Cú pháp:
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}�
Có thể lồng 2 vòng foe vào nhau :�for(let i = 0; i < 10; i++) {
for(let j = i; j < 10; j++) {� document.write( count + “ “);
}� document.write( count + “ <br>“);
}
Bài tập nhỏ: �1. In các số chẳng trong khoảng từ 1 -> 10. Gợi ý: �- Phép toán [Số] % 2 => trả về 0 nếu là số chẳng�- phép toán % là chia lấy phần nguyên (ai không biết học lại SGK cấp 2)
2. Chạy debug VD 2 vòng for lồng nhau
Vòng lặp For . . . in
Vòng lặp for...in được sử dụng để lặp qua các thuộc tính của một đối tượng/Array. Nếu chưa quen với việc dùng đối tượng, bạn có thể không cảm thấy thoải mái với vòng lặp này. Nhưng một khi bạn hiểu cách các đối tượng vận hành trong JavaScript, bạn sẽ thấy vòng lặp này rất hữu ích.
<script type="text/javascript">
var navigator= {
“A” : “Số A”;
“B” : “Số C”;
“C” : “Số B”;
};
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator) {
document.write(aProperty);
document.write("<br />");
}
document.write ("Exiting from the loop!");
</script>
Cú pháp:
for (variablename in object){
statement or block to execute
}
Bài tập nhỏ: In các các phần tử trong đối tượng sau, dùng For . . . In . . .
var student= {
name:"Nhân",
gender:"Nam",
year:1993
}
Vòng lặp while
Dùng lập đi lập lại một khối lệnh chừng nào vẫn thỏa điều kiện.�Thường dùng khi không biết khi nào vòng lặp kết thúc, do điều kiện kết thúc có thể thay đổi bên trong vòng lập
<script type="text/javascript">
var count = 0;
while(count < 10){
document.write("Current Count : " + count );
count++;
}
document.write("Loop stopped!");
</script>
Cú pháp:
while(condition){
Statement
}
Bài tập nhỏ: In các số lẻ trong khoảng từ 1 -> 10.�Gợi ý: �- Phép toán [Số] % 2 => trả về 0 nếu là số chẳng�- phép toán % là chia lấy phần nguyên (ai không biết học lại SGK cấp 2)
Hàm - Lớp
Hàm - Function
Lớp - class
Xử lý bất đồng bộ và đồng bộ
01
02
03
Hàm - Function
Một hàm là một nhóm code có thể tái sử dụng mà có thể được gọi bất cứ đâu trong chương trình của bạn. Điều này giúp bạn không cần thiết phải viết cùng một code lại nhiều lần. Nó giúp các nhà lập trình viết các modular code. Các hàm cho phép một nhà lập trình phân chia một chương trình lớn thành các hàm nhỏ và dễ quản lý.
<script type="text/javascript">
function print1To10() {
var count = 0;
while(count < 10){
document.write("Current Count : " + count );
count++;
}
document.write("Loop stopped!");
}
print1To10();
</script>��Bài tập nhỏ: hãy thử bỏ dòng [print1To10();] (ở khúc cuối) rồi chạy lại xem? Giải thích
Cú pháp:
function functionname(parameter-list) {
statements;
}
Bài tập nhỏ:
1. Viết hàm in ra dòng “Hello Function”
2. Viết hàm in các số lẻ trong khoảng từ 1 -> 10.
<script type="text/javascript">
function print1To10() {
var count = 0;
while(count < 10){
document.write("Current Count : " + count );
count++;
}
document.write("Loop stopped!");
}
callPrint() {
print1To10();
}
callPrint();
</script>�
Javascript cung cấp nhiều function có sẳn, có thể tham khảo tại: � https://vietjack.com/javascript/cac_ham_co_san_trong_javascript.jsp
Lớp - Class
Các app ngày nay càng ngày càng phức tạp và khó quản lý, do đó người ta hay nhóm những đoạn code phục vụ một mục đích lại và gọi nó là Class (lớp). �Theo chuẩn javascript ES6, các khai báo và dùng class tương tự các ngôn ngữ cấp cao khác. Nên khá dễ dùng.
<script type="text/javascript">
class ConCho {
call() {
document.write("Gau gau");
}
happy() {
document.write("Vẩy đuôi");
}
smell() {
document.write("Đánh hơi");
}
} � var conCho = new ConCho();� conCho.call();
</script>�
Cú pháp:
�class ClassName {� functionNameA() {
……..
}� functionNameB() {
……..
}� static functionNameC() {
……..
}
}
�Để dùng class, ta phải tạo đối tượng từ class đó :�
className = new ClassName();�className.functionNameA();
Bài tập nhỏ: hãy thử viết class ConMeo (con mèo)
Xử lý bất đồng bộ
Bất đồng bộ: Ví dụ bạn cần một tập dữ liệu để ở văn phòng khác, bạn nhờ cô thư ký đi lấy. Khi đó xuất hiện 2 luồng công việc mà người code phải quản lý �1. Việc chính: trong khi cô ấy đi lấy bạn làm việc những khác, khi đã xong hết bạn mới quay lại nhận tài liệu từ cô thư ký đó.�2. Việc phụ: điều khiển cô thư ký đi lấy tài liệu�Rắc rối ở chỗ, nếu cô thư ký nhờ anh quản lý phòng tài liệu tìm giúp, rồi cô ấy lại làm việc khác rồi mới quay lại hỏi anh quản lý phòng có chưa, anh quản lý phòng lại nhờ anh văn thư . . . . Cái này người ta gọi là callback hell (địa ngục bất đồng bộ). �Javascript là ngôn ngữ xử lý Bất Đồng Bộ, vì lúc đầu nó được viết để chạy trên Broswer. Và phải đảm bao sau có hoạt động liên tục, không bị dừng. Do đó mọi tiến trình xử lý liên quan đến xuất-nhập dữ liệu JS sẽ chuyển qua xử lý sau bằng cách nhờ “cô thư ký”. Để tránh dừng chương trình khi thời gian lấy tài liệu quá lâu.
�=> Do đặc điểm khó hiểu nên hương trình này mình sẽ bỏ qua, các bạn có hứng tự nghiên cứu
Anh Giám Đốc nhờ Cô thư ký, rồi Cô thư ký lại nhờ anh trường phòng. Cứ mỗi lần qua 1 tầng “nhờ” lại tạo ra 1 chu trình giống nhau
Xử lý đồng bộ
Cũng ví dụ trên bạn cần một tập dữ liệu để ở văn phòng khác, bạn nhờ cô thư ký đi lấy. Nhưng lần này bạn sẽ dừng công việc lại đợi cô thư ký lấy xong tài liệu mới làm tiếp.
Nếu cô thư ký nhờ anh Trường phòng văn thư, cô sẽ phải dừng mọi việc làm đợi anh ta lấy xong tài liệu mới làm tiếp.��Đây là cách xử lý tuần tự, làm xong việc này mới làm việc khác, cách tiếp cận này giúp code “bình thường” hơn. Do Nodejs là ngôn ngữ phía server, nên hầu hết thao tác điều yêu cầu tính tuần tự.
Từ phiên bản Javascript ES6 trở đi có hỗ trợ từ khóa async/await để xử lý Đồng Bộ các tác vụ.
Code Javascript chuyên nghiệp
Điểm khác biệt giữa người code lâu năm và người mới vào code là “Họ code nhiều mà không mệt”. Nếu bạn mới bắt đầu code, viết 100 dòng code đã thấy oải nhưng dân chuyên nghiệp họ có thể viết gần 1000 dòng/ngày.
Nếu muốn code khỏe, cũng giống thể thao, bạn cần code nhiều vào.
“
“
Vạn sự khởi đầu nan
Bài tập thực hành
Gian nan đừng có nản
* *
* * *
* * * *
Gợi ý: dùng 2 vòng For lồng nhau, vòng thứ nhất chạy để biết đang ở hàng 01, vòng thứ 2 chạy để in ngôi sao. (xem bài for lồng)
Trung bình với người mới học lập trình có thể mất nửa ngày để giải một bài tập ở trên. Và khi làm xong, phần thưởng không phải kiến thức mà là sự tự tin.