Học Javascript cấp tốc trong vòng 30 phút dành cho người mới bắt đầu hay lập trình viên muốn học thêm nâng cao.

học javascript trong 30 phút

I. Học Javascript để ứng dụng vào đâu?
   - Ứng dụng JAVASCRIP rất là lớn trong thế giới lập trình, dùng để viết ứng dụng di động, ứng dụng web, ứng dụng phần mềm về kinh tế...
    * Có thể viết phần mềm bán hàng, quản lý thu chi trên web.
II. Dùng phần mềm để soạn thảo code Javascript ? 
   - Có nhiều phần mềm soạn thảo code JS như Notepad,Notepad++, Visual Studio Code
  * Nếu để nghiên cứu bạn nên dùng Notepad++

III. Ví dụ game con chim bay bằng JAVASCRIPT
  Click để xem game  https://nhatthanh.net/userFiles/file/game_01.html

 
IV. Một số kiến thức CƠ BẢN nhất về JAVASCRIPT (LẬP TRÌNH CƠ BẢN)
Những kiến thức mình đúc kết lại sau đây có thể đi học đại học mất 4 năm đó nhé

Các mục cần nghiên cứu JAVASCRIPT


1. Biến trong javascript.
2. Kiểu biến trong Javascript
3 Cách xuất giá trị của biến ra màn hình
4. Phép toán trong javascript
5. Phép toán so sánh javascript
6. Hàm trong Javascript
7. Mảng trong Javascript
8.Kiểu ĐỐI TƯỢNG trong Javascript
 



1. Biến trong javascript
    * Cú pháp:
         var x ;
         x = 10;
    * Vừa khai báo vừa gán giá trị     
        
var y = 10;
        var z = x+y;    
        
var hoten="Tran Van A";
        * Chú ý biến kiểu chữ phải để trong dấu " hay '
   
* Máy tính sẽ làm gì khi mình khai báo biến và gán giá trị ?

   
 * Đặt tên biến cần chú ý:
       var ho ten="Tran A";  // sẽ báo lỗi, tên biến phải dính liền nhau, không chứa dấu cách.
       var ho_ten="Tran A";  // chạy ok
       var hoten="Tran A";  // chạy ok
       var HoTen="Tran A";  // chạy ok
       var hoten= Tran Van A; // lỗi vì chữ phải để trong dấu "

       var ho+ten= Tran Van A; // lỗi vì chứa ký tự đặc biệt"

  *  Làm ví dụ tính lãi lỗ bán hàng bằng javascript

<script>
     var doanhthu= 1000000;
     var giavon= 800000;
  
  alert("LAI BAN HANG");
     alert(
doanhthu-giavon);
</script>

* Biến là gì ? lưu giá trị nào đó để xử lý, tính toán trong một phần mềm.
(Giải thích trên gốc độ kinh doanh cho các bạn dễ hiểu)



* Biến để ứng dụng vào việc gì ?

<script>
     var doanhthu= 1000000; // sau này sẽ lấy giá trị từ CSDL
     var giavon= 800000;
// sau này sẽ lấy giá trị từ CSDL
     alert("LAI BAN HANG");
     alert(
doanhthu-giavon);
</script>



* Sau năm 2015 thì JAVASCRIPT bổ sung thêm cách đặt biến
let tenbien;
const tenbien;
<script>
let so=10;
const heso=5;
</script>


Về cơ bản thì let và var giống nhau, nhưng let là cải tiến giúp chương trình quản lý bộ nhớ và quyền truy cập biến tốt hơn
* Ở bài này các bạn nên hiểu cơ bản vậy, bài sau mình sẽ giải thích rõ khác nhau như thế nào !

Đối với const thì các bạn xem ví dụ sau:
Ví dụ code vba sau sẽ bị lỗi:
<script>
const heso=5;
heso=8; // dòng này sẽ bị lỗi, nếu đối var hay let thì chạy bình thường
</script>

Khi nào cần dùng const ? Khi mà ta biết biến đó sẽ không cần thay đổi giá trị trong chương trình.
<script>
    
const  doanhthu= 1000000;
    
const   giavon= 800000;
  
  alert("LAI BAN HANG");
     alert(
doanhthu-giavon);
</script>
Theo các bạn doanhthu và giavon đặt const được không ?
Mời bạn xem video để có được câu trả lời !

Tới đây bạn nào mới nghiên cứu lập trình thì thấy hơi rối, hãy xem tiếp ví dụ

<script>
     const doanhthu= 1000000;
     const giavon= 800000;     
     const hangtralai=30000;
     doanhthu = doanhthu-hangtralai;    //dòng này sẽ bị lỗ vì const sẽ ko thay đổi được giá trị
     alert("LAI BAN HANG");
     alert(doanhthu-giavon);
</script>

// F12 ở trình duyệt sẽ báo lỗi Uncaught TypeError: invalid assignment to const 'doanhthu'

Để hết lỗi thì đổi      var doanhthu= 1000000; hay   let doanhthu= 1000000;

--> Khi làm phần mềm ta phải xác định được biến đó có thay đổi hay là thay đổi, nếu đặt đúng thì phần mềm chạy nhanh hơn vì ít tốn bộ nhớ.

Video phần 1 học javascript


2. Kiểu biến trong Javascript
- Kiểu chữ
- Kiểu số
- Kiểu Booleans (True / False)
- Kiểu mảng
- Kiểu đối tượng

 * Tại sao cần quan tâm khai đến kiểu biến ?
   Để javascript tính toán đúng, xử lý dữ liệu, tìm kiếm nhanh và chính xác.
   Mình ví dụ trong cuộc sống, mình phải xác định được giới tính là nam hay nữ, thì cha mẹ mới chọn vợ hay chọn chồng đúng, nếu không xác định được thì rất phức tạp.
<script>
     let so1
= 7;
     let so2= "2";
  
  alert(so1+so2);
</script>
//Kết quả 72


 * Chỉ cần quan tâm 2 kiểu chính là số và chữ.
Đối với các ngôn ngữ khác như C#, C++ ... thì khi khai báo biến phải quy định kiểu
Ví dụ trong C#:
String C;
Int So;

* Nhưng trong JAVASCRIPT thì đơn giản hơn, không cần phải khai báo mà giá trị kiểu nào trước thì nhận kiểu đó
Ví dụ:
  <script>
let a=10; //kieu so nguyen
let b=10.02; //kieu so thap phan
let c="TRAN VAN A"; //kiểu chữ thêm dấu " 2 bên
</script>


  <script>
let a=10;
let b=2;
let c=a+b; //biến c là kiểu số, và kết quả in ra là 10
alert(c);
</script>

 <script>
let a="10";
let b="20";
let c=a+b;
alert(
c);//biến c là kiểu chữ
</script>

Kết quả sẽ là 1020 vì kiểu của biến a và b là kiểu chữ. nên máy tính nó nối giá trị lại với nhau nếu 2 biến đó là kiểu chữ


<script>
let a="10";
let b=20;
alert(a+b); //kết quả là 1020
</script>

** Để tình toán 2 số thì kiểu biến phải là kiểu số.


<script>
let a=10;
let b=20;
let c="30";
alert(a+b+c);
</script>

** Kết quả sẽ là 3030 vì kiểu của biến a và b là kiểu số nên nó cộng lại thành 30 và nối với biến c là kiểu chữ


<script>
let a="10";
let b=20;
let c=30;
alert(a+b+c); //kết quả 102030
</script>


//
<script>
let a="10";
let b=20;
let c=30;
alert(a+ (b+c) ); //kết quả 1050
</script>

** Ví dụ lấy kiểu biến của 1 biến javascript
<script>
let a;
alert(typeof a);
</script>

* Kiểu Booleans (True / False) là kiểu trả về đúng hoặc sai

  Nói 1 câu:  1 lớn hơn 2 :  sai(false)  
  Nói 1 cầu  2 lớn hơn 1:   đúng (true)

Ví dụ 1
<script>
let a=1;
let b=2;
let c=a>b; // biến c có kiểu biến là Booleans
alert(
c); // trả về false
</script>

Ví dụ 2
<script>
let a=1;
let b=2;
let c=a<b;
; // biến c có kiểu biến là Booleans
alert(c); // trả về true
</script>

Ví dụ 3
<script>
let a=1;
let b=2;
let c;
c=a<b;
alert(
c); // trả về true
</script>

 // biến c lúc đầu có kiểu là Undefined , sau khi qua dòng lệnh  c=a<b thì có kiểu biến là Booleans
* Chổ này rất quan trọng bạn phải hiểu nha.

Ví dụ 4

<script>
let c=true;
let d=false;
alert(c);
alert(d);
</script>


* Kiểu mảng và kiểu đối tượng mình nói phần sau (rất quan trọng trong lập trình vì làm phần mềm phải dùng đến 2 kiểu này)




3 Cách xuất giá trị của biến ra màn hình
document.write(.....).
Ví dụ:
<script>
document.write(5 + 6);
</script>
<script>
var hoten="Tran Van A";
document.write(hoten);
</script>

window.alert(....).
console.log(....). ' ít dùng, chủ yếu để kiểm chứng lại giá trị biến
innerHTML (phần tiếp theo sẽ hướng dẫn)

Cách in ra kết hợp chữ mô tả với biến
<script>
var A=10;
var B=50;
document.write("So A la: "+A);
document.write ("<br>");
document.write("So A la: "+B);
</script>
** document.write ("<br>"); để xuống hàng

   
4. Phép toán trong javascript
+ cộng
- trừ
* nhân
/ chia
% lấy số dư
++ tăng 1
-- giảm 1

 <script>
var A=15;
var B=10;
document.write("Tong A + B: "+ (A+B) );
document.write ("<br>");
document.write("Tong A - B: "+ (A-B) );
document.write ("<br>");
document.write("Tong A * B: "+ (A*B) );
document.write ("<br>");
document.write("Tong A / B: "+ (A/B) );
document.write ("<br>");
document.write("Tong A % B: "+ (A%B) );
document.write ("<br>");
document.write("Tong A ++: "+ (A++) );
document.write ("<br>");
document.write("Tong A --: "+ (A--) );
</script>

 

5. Phép toán so sánh javascript

 ==   so sánh bằng
!=   so sánh khác
>   lớn hơn
<   nhỏ hơn
>= lớn hơn hoặc bằng
<=  nhỏ hơn hoặc bằng

Ví dụ:
<script>
document.write("1=1 " +  (1==1));
document.write("<br>");
document.write("6=1 " +  (6==1));
document.write("<br>");
document.write("2!=1 " +  (2!=1));
document.write("<br>");
document.write("1!=1 " +  (1!=1));
document.write("<br>");
document.write("3>1 " +  (3>1));
document.write("<br>");
document.write("4>10 " +  (4>10));
document.write("<br>");
</script>

 

6. Hàm trong Javascript

- Hàm thực thi
<script>
function ThongBaoLoi()
{
    alert("PHAN MEM BI LOI..");
}
ThongBaoLoi(); // gọi lần 1
ThongBaoLoi(); // gọi lần 2
</script>


- Hàm có dùng tham số truyền vào

<script>
function ThongBao(cauthongbao)
{
    alert(cauthongbao);
}
ThongBao("Xin chao"); // gọi lần 1
ThongBao("Toi la NT SOFTWARE"); // gọi lần 2
</script>
 


- Hàm có kết quả trả vể
<script>
function Tong(a,b)
{
    return a+b;
}
Tong(10,30); // sẽ không thấy kết quả vì trả về giá trị
alert( Tong(40,70) );
</script>


  Cú pháp:

function TenHam(a,b)
{
    return a+b;
}

 

 

7. Mảng trong Javascript

Ví dụ 1:
<script>
const xeoto_1 ="
43-123";
const xeoto_2 ="43-723";
const xeoto_3 ="43-523";
alert(
xeoto_1 );
alert(xeoto_2 );
alert(xeoto_2 );
</script>

Ví dụ 2:
<script>
const xeoto = ["43-123", "43-723", "43-523"];
alert(xeoto);
alert(xeoto[0]);
alert(xeoto[1]);
alert(xeoto[2]);
//alert(xeoto[3]); // sẽ ra undefined vì không truy cập được giá trị
</script>


Tại sạo lại dùng mảng (array) mà không dùng khai báo biến riêng như ví dụ 1

Giúp cho máy tính truy cập giá trị biến nhanh hơn.


----
Mời xem video

Ví dụ
lấy biển số xe ngẫu nhiên khi đi làm biến số xe ở công an
<script>
const xeoto = ["43-123", "43-723", "43-523","43-923","43-623"];
const ngaunhien= Math.floor(Math.random() * 4) + 1;
alert(xeoto[ngaunhien]);
</script>



 


8.Kiểu ĐỐI TƯỢNG trong Javascript

 Làm ví dụ so sánh giữa không dùng đối tượng và có dùng.
Ví dụ 1:
<script>
// Create an object:
const oto = {bienso:"123456", model:"500", mau:"trang"};
alert( oto.bienso );
alert( oto.mau );
</script>


//đặt câu hỏi ko dùng biến độc lập mà lại dùng object

Ví dụ 2:
<script>
// Create an object:
const bienso="123456";
const model="500";
const trang="123456";
alert( bienso );
alert( mau );
</script>

* Thời xa xưa thì chưa có biến đối tượng thì người ta viết như ví dụ 2, sau này lập trình phát triển hệ thống lập trình nâng cấp lên hướng đối tượng, người lập trình viên đã viết theo cách 1, nó phải có 1 LÝ DO HỢP LÝ nào đó thì người ta mới chuyển sang viết theo hướng đối tượng (ví dụ 1)
* Lúc mình mới đi học lập thấy thầy cô dạy kiểu đối tượng này thì thấy họ rãnh, sao ko làm cách như ví dụ 2 cho dễ.
* Nhưng sau này vào nghề mình mới nhận ra là kiểu biến đối tượng giúp:
* Giúp truy cập giá trị biến nhanh hơn
* Quản lý code dễ hơn




Cảm ơn đã xem, đã có 1,428 lượt xem.
Thông báo:

Học lập trình khác
Tag tìm kiếm:

hoc javascript cap toc trong vong 60 phut

Thông tin liên hệ

Zalo 0935 999617

Zalo 0972 13 14 19