JAVASCRIPT (JS)

ThS. Nguyễn Hữu Trung

0908.6171.08
trungnh@hcmute.edu.vn
Khoa Công Nghệ Thông Tin
 Javascript là gì?
Javascript là một ngôn ngữ lập trình kịch bản được
thực thi ở Client nhầm giúp trang web có khả năng
tương tác và xử lý thông tin.
 Thêm JS vào trang HTML
• Có 03 cách viết code javascript trong HTML:
• Viết trong thẻ <script type=“text/javascript”>……</script>
• Viết trong file .js riêng lẻ rồi chèn link vào html <script type=“text/javascript”
src=“đường dẫn file .js”>……</script>
• Viết trong 01 thuộc tính sự kiện
 Một số OUTPUT
• console.log(“nội dung”): in thông báo ra màn hình console
• alert(“nọi dung”): hiển thị nội dung ra một hộp thông báo
• document.write(“nội dung”): them nội dung vào vị trí câu lệnh được gọi

<script type="text/javascript">
alert("Chào bạn");
console.log("hello");
document.write("Bạn là ai");
</script>
 Các khái niệm cơ bản
• Câu lệnh kết thúc bằng dấu ;
• Khối lệnh được đặt trong cặp dấu {}
• Biến là những thành phần dung để lưu trữ những giá trị dữ liệu mà ta có thể thay
đổi giá trị trong quá trình thực thi biến.
• Sử dụng từ khóa var để khai báo biến: var tên_biến; hoặc var tên_biến=giá trị;
• Tên biến phải duy nhất trong vùng hoạt động của nó, tên biến được phân biệt khi viết hoa và
viết thường
• Tên biến bắt đầu chữ cái, dấu gạch dưới _
• Ghi chú code:
• // : ghi chú theo dòng
• /*….*/: ghi chú nhiều dòng

<script type="text/javascript">
var xh = "Chào bạn"; //cách tạo biến
alert(x);

</script>
 Kiểu của biến
• Biến trong JS có thể nhận vào 04 kiểu dữ liệu cơ bản: số, chuỗi,
Boolean và object
• Ví dụ:
• var a=5;
• var b = “hello”;
• var c = ‘hello’;
• Các phép toán cơ bản: =, +, -, *, /, %, ++, --, +=,-=,*=,/=,%=, <,
>,<=,>=,==,!=,!===, &&, ||
 Cấu trúc điều khiển
• if (biểu thức so sánh) câu lệnh;
• if (biểu thức so sánh) câu lệnh; else câu lệnh;
<script type="text/javascript">
var a = 6, b = 7; //cách tạo biến
if (a > b) alert(a);

if (a > b) {
a = a + b;
alert(a);
}
if (a < b) {
a = a + b;
alert(a);
} else {
a = a - b;
alert(a);
}
</script>
• Cú pháp for:
Cấu trúc for và while
• for (câu lệnh 1;biểu thức so sánh;câu lệnh 2){
// các lệnh bị lặp
}
• Cú pháp while: <script type="text/javascript">
• do { var a; //cách tạo biến
// các lệnh bị lặp var s = 0;
} while (biểu thức so sánh) for (a = 1; a <= 10; a++) {
• while(biểu thức so sánh){ s += a;
// các lệnh bị lặp };
} alert(s);
<script type="text/javascript"> </script>
var a=1; //cách tạo biến
var s = 0; Sử dụng break; để ngắt ngang vòng
while (a <= 10) { lặp, continue; để bỏ qua các lệnh
s += a; còn lại và lặp lại tiếp vòng kế.
a++;
};
alert(s);
</script>
 Cấu trúc switch
• Cú pháp 1: <script type="text/javascript">
• switch (biến){ var a=1; //cách tạo biến
case giastri1: {câu lệnh 1; break;} switch (a) {
case giastri1: {câu lệnh 1; break;} case 1: { alert(a);
default:{câu lệnh; break;} break; }
• Cú pháp 2: default: { a++; alert(a);
• switch (biến){ break;}
case giastri1: }
case giastri1: {câu lệnh 1; break;} </script>
default:{câu lệnh; break;}
• Cú pháp 3:
• switch (biến){
case giastri1: {câu lệnh 1; }
case giastri1: {câu lệnh 1; break;}
default:{câu lệnh; break;}
 Hàm (function)
• Khai báo hàm <script type="text/javascript">
function tinhtoan() {
• function tên_hàm(){ var a = 1; //cách tạo biến
//các lệnh của hàm switch (a) {
case 1: { a = a *
} 2;alert(a); break; }
• function default: { a++;
tên_hàm(tham số alert(a); break; }
1,tham số 2,…){ }
};
//các lệnh của hàm </script>
}

• Sử dụng hàm onclick="tinhtoan()"

• tên_hàm();
• tên_hàm(tham số);
 Xử lý lỗi và điều khiển lỗi
• try {
//vị trí code bình thường mà ta đoán là có khả năng lỗi
} catch (e) {
//xử lý lỗi
} finally {
//code ở đây sẽ luôn được chạy cho dù có lỗi hay không
}
• throw “thông báo lỗi”
 Mảng trong JS
• Array được sử dụng khi bạn có nhu cầu lưu trữ nhiều giá trị trên cùng
01 biến.
• Truy xuất các giá trị của biến Array thông qua thứ tự. Thứ tự bắt đầu
từ 0.
<script type="text/javascript">
var bike = ["pcx", "lead", "sh"];
var a = ["hello", 4, 5, "tạm biệt"];
//hoặc sử dụng đối tượng Array()
var b = new Array();
b[0] = "pcx";
b[1] = "lead";
//hết Array
var gtri = bike[1];
alert(gtri);

</script>
 Biến Local và Global
• Biến cục bộ: được khai báo trong 01 hàm hoặc 01 phương thức và chỉ
sử dụng trong hàm và phương thức đó.
• Biến toàn cục: khai báo bên ngoài tất cả các hàm và phương thức và
tồn tại xuyên suốt quá trình tồn tại của chương trình.

<script type="text/javascript">
var bike = ["pcx", "lead", "sh"];//biến toàn cục
function tinhtoan(a, b) {
a = a + b; //biến cục bộ
alert(a);
}
tinhtoan(2,3);
</script>
 Các phương thức chuỗi
• var str, str1;
• str.length
• str.indexOf(str1): thứ tự của chuỗi str1 đầu tiên tìm thấy trong chuỗi
gốc str
• str.lastIndexOf(str1):thứ tự của chuỗi str1 cuối cùng tìm thấy trong
chuỗi gốc str
• str.substr(start,length) : cắt chuỗi con trong str từ vị trí start lấy length
ký tự.
• str.substring(start,end) : cắt chuỗi con trong str từ vị trí start tới vị trí
trước end
• …..
 Các phương thức dữ liệu số
• .toString(): Đổi kiểu dữ liệu số thành chuỗi
• .toFixed(n): Làm tròn kết quả, lấy n số sau dấu thập phân, n>=0
• .toPrecision(n): Đổi thành kiểu chuỗi.
• Number(true): trả về số (s: có thể là chuỗi số hoặc giá trị true/false)
• parseInt(Str): chuyển dữ liệu chuỗi thành kiểu số nguyên (int)
• parseFloat (Str): chuyển dữ liệu chuỗi thành kiểu số thực.
 Đối tượng Math
• Các thuộc tính của Math:
• Math.PI : số PI trong toán
• Math.SQRT2: căn bậc 2 của 2
• Math.SQRT1_2: căn bậc 2 của ½
• Math.LN2 : Logarit tự nhiên của 2
• Math.LN10: Logarit tự nhiên của 10
• Math.LOG2E : Logarit cơ số 2 của E
• Math.LOG2E: Logarit cơ số 10 của E
• Math.sin(x)
• Math.cos(x)
• Math.abs(x)
• Math.tan(x)
• Math.asin(x)
• Math.acos(x)
• …..
 Các phương thức dữ liệu thời gian
• Khai báo dữ liệu thời gian: var d = new Date()
• .getDate(): lấy ngày của tháng
• .getDay(): lấy thứ trong tuần (0-6)
• .getFullYear(): lấy năm
• .getMonth(): lấy tháng (0-11)
• .getHours(), .getMinutes(), .getSeconds(), .getMiliseconds()…
• .setDate(n): đổi lại ngày trong tháng,…
 DOM (Document Object Model)
• DOM là mô hình quản lý đối tượng thẻ HTML theo cấu trúc cây dựa
trên mối quan hệ cha – con giữa các thẻ HTML và nội dung thẻ HTML
• DOM cụ thể hóa chi tiết từng đối tượng HTML cùng nội dung và thuộc
tính của nó thành những Object giúp cho JS có thể dễ dàng thực hiện
các thao tác tác động đến nội dung, thành phần cũng như thuộc tính
của từng Object cụ thể trong DOM
• 05 nội dung DOM:
• JS DOM Selector : xác định một hoặc nhiều object trong DOM
• JS DOM Content: thao tác với nội dung của object trong DOM
• JS DOM Attributes: thao tác với thuộc tính của object trong DOM
• JS DOM Css: thao tác với style của object trong DOM
• JS DOM form value: thao tác với dữ liệu của object trong DOM về FORM
 JS DOM SELECTOR
• Trước khi bạn muốn làm gì với đối tượng HTML cụ thể thì bạn cần xác
định được đối tượng đó. Và dưới đây là một vài phương thức cơ bản
làm việc đó:
• var obj = document.getElementById (“id của thẻ HTML”); : lấy được 01 object
• var obj1 = document.getElementByTagName (“p”); : lấy được 01 mảng objects
• var obj1 = document.getElementByClassName (“class-value”); : : lấy được 01
mảng objects
• var obj1 = document.querySelector (“CSS selector”); : : lấy được 01 object
• var obj1 = document.querySelectorAll (“CSS Selector”); : : lấy được 01 mảng
objects
<div id="div1"> //dùng id để lấy đối tượng thao tác
<p id=p1 var obj =
class="pa">Hello</p> document.getElementById("div1");
</div> //lấy nội dung của obj
<script var c = obj.innerHTML;
type="text/javascript" //xuất kết quả
src="js.js"></script> alert(c);
 JS DOM CONTENT
• Khi bạn đã có được đối tượng cần thao tác, bạn có thể tiến hành thay
đổi hoặc đọc nội dung HTML của đối tượng đó:
• var html_c= obj.innerHTML; : innerHTML sẽ trả về nội dung HTML bên trong
cặp thẻ của đối tượng
• Ví dụ: đối tượng là thẻ <b>Hello</b> thì sẽ lấy được “Hello”
• var html_c = obj.outerHTML; : outerHTML sẽ trả về nội dung HTML bên trong
và bao gồm thẻ HTML của đối tượng
• Ví dụ: đối tượng là thẻ <b>Hello</b> thì sẽ lấy được “<b>Hello</b>”
• Cập nhật nội dung mới:
• Var obj = document.querySelector(“#p2.pa”);
• obj.innerHTML=“nội dung mới”
• obj.outerHTML=“<p>nội dung mới</p>”
//dùng id và class để lấy đối tượng thao tác
var obj = document.querySelector("#p1.pa");
//ghi nội dung mới của obj
obj.innerHTML="Xin chào";
//xuất kết quả
alert(c);
 JS DOM ATTRIBUTE
• Thay đổi hoặc đọc thuộc tính HTML của đối tượng đó:
• var html_a= obj.getAttribute(“tên thuộc tính”); sẽ trả về giá
trị của thuộc tính “tên thuộc tính” của đối tượng
• Ví dụ: nếu obj là <p class=“value-of-class”>Hello</p> và
gọi obj.getAttribute(“class”) thì sẽ nhận được “value-of-
class”
• Cập nhật nội dung mới:
• var obj = document.getElementById(“p1”); (vói p1: là Id )
• obj.setAttribute(“tên thuộc tính”,”giá trị mới”);
//dùng id để lấy thuộc tính đối tượng thao
tác
var obj = document.getElementById("p1");
//ghi tên class mới của obj
obj.setAttribute(“class”,”pa2”);
 JS DOM VALUE
• Thao tác với các dữ liệu của các thẻ HTML về FORM:
• var my_value= obj.value; obj phải là thẻ input, select hoặc
bất kỳ thể nào có thuojc tính value.
• Ví dụ: nếu obj là <p class=“value-of-class”>Hello</p> và
gọi obj.getAttribute(“class”) thì sẽ nhận được “value-of-
class”
• Cập nhật nội dung mới:
• var obj = document.getElementById(“p1”); (vói p1: là Id )
• obj.value=“giá trị mới”;
function Tinh() {
var a = parseInt(document.getElementById("soA").value);
var b = parseInt(document.getElementById("soB").value);
alert(a);
alert(b);
}
 Lập trình hướng đối tượng trong JS
• OOP(Object-Oriented function TenDinhNghiaObject(pa1,
Programming): gọi là lập trình pa2) {
hướng đối tượng, là một mô hình về this.Pro1 = pa1;
lập trình mà trong đó chúng ta tạo this.Pro2 = pa2;
ra những đối tượng (object), (ví dụ this.Me1 = function () {
như: nhân viên của 01 công ty là đối //code của Method 1
tượng), mỗi đối tượng có những }
đặc điểm (property) và khả năng this.Me2 = function () {
khác nhau( gọi là Method), các đối return 100;
tượng cấp cao sẽ được quyền quản }
lý và ra lệnh cho những đối tượng }
thuộc quyền quản lý của nó. var obj1 = new
• Trong JS, các biến có đi kèm TenDinhNghiaObject("giá trị 1",
property hoặc method gọi chung là 15);
biến kiểu object. var pro_1 = obj1.Pro1; //giá trị 1
var pro_2 = obj1.Pro2; //15
• Định nghĩa object: là mô tả về obj1.Me1();
Object, các property và method mà var ab = obj1.Me2(); //100
object đó có alert(ab)
 Lập trình hướng đối tượng trong JS
• Ví dụ:
function PhepTinh(Na, Nb) {
this.A = Na;
this.B = Nb;
this.CongAB = function () { return this.A + this.B;}
this.TruAB = function () { return this.A - this.B;}
this.NhanAB = function () { return this.A * this.B;}
this.ChiaAB = function () { return this.A / this.B;}
this.ChiaBA = function () { return this.B / this.A;}
}
var ob = new PhepTinh(5, 6);
var kq = ob.CongAB();
alert(kq);
 Lập trình hướng đối tượng trong JS
• Ví dụ:

function SinhVien(masv, name, age, classe) {

this.masv1 = masv;
this.name1 = name;
this.age1 = age;
this.classe1 = classe;
this.HoTen = function () {
return this.masv1 + ', ' + this.name1 + ', ' + this.age1 +
', ' + this.classe1;
}
}

var nguyenhuutrung = new SinhVien("1781313", "Nguyễn Hữu Trung", 39,

"KHMT2017B");
alert(nguyenhuutrung.HoTen());
 Event trong JS
• Sự kiện (Event) là những thứ sẽ xảy ra trên HTML khi tài liệu được tải xong. Ví
dụ khi click chuột, khi đóng trình duyệt, gõ phím,…
• Khi JS được tích hợp vào HTML thì JS sẽ bắt được các sự kiện đó và điều
khiển chúng theo ý muôn của người lập trình. Giúp HTML sinh động hơn, tương
tác nhiều hơn với người dùng.
• Các hoạt động của event:
1. Đầu tiên là Event Listener: làm nhiệm vụ quan sát và bắt lấy sự kiện.
2. Tiếp theo là Event Fire: lúc này Event Listener nhìn thấy sự kiện
3. Tiếp theo là Event Handler: chạy khi sự kiện xảy ra.
• Các bước sử dụng event:
• Khai báo Event Handler: là function sẽ khởi chạy khi Event Fire.
• Khai báo Event Listener để lắng nghe sự kiện và liên kết Event Listener với Event Handler.
• Ví dụ: có những cách khai báo Event Handler
• <element TenEvent=“HandlerFunction()” />
• Obj.TenEvent = HandlerFunction;
• Obj.TenEvent = function(){ }
 Event trong JS
• Một số Event hay dung:
• onclick : người dùng nhấp chuột trái lên đối tượng
• ondblclick : người dùng nhấp đúp chuột trái lên đối tượng
• onmousedown : người dùng mới đè chuột
• onmouseup : người dùng nhả chuột
• onmouseover : người dùng rê chuột trái lên đối tượng
• onmouseout: người dùng rời khỏi đối tượng
• onkeypress: người dùng gõ bàn phím
• onkeydown: người đè 01 phím xuống chưa buông phím
• onkeyup: người dùng buông 01 phím
• onchange: giá trị của đối tượng vừa bị thay đổi
• onload: dung cho thẻ body, để nhận dạng trang HTML đã tải xong

<div onclick="Tinh()">Tính
toán</div>
 JSON trong JS
• Nhu cầu trao đổi dữ liệu giữa các nền tảng và công nghệ khác nhau
ngày càng lớn. XML trở nên cồng kềnh và làm nặng dữ liệu bởi cấu
trúc thẻ của nó. JSON ra đời nhầm giải quyết vấn đề.
• JSON là viết tắt của Javascript Object Notation, là bộ qui tắc về cách
trình bày và mo tả dữ liệu trong một chuỗi lớn thống nhất được gọi là
chuỗi JSON.
• Chuỗi JSON được bắt đầu bằng ký tự { và kết thúc bởi ký tự }
• Từng cặp thuộc tính – giá trị thuộc tính được xem là 01 dữ liệu và
được trình bày: “tên thuộc tính” : “giá trị thuộc tính”. Các dữ liệu cách
nhau bởi ký tự “,”
• Giá trị của JSON: chuỗi, số, mảng, một JSON khác.
{
var JSON_1 ='{"name":"Nguyễn Hữu
"Name": "Nguyễn Hữu Trung",
Trung","age2":39}';
"Age":40,
var JSON_obj = JSON.parse(JSON_1);
“data”:[10,{“name”:”Nguyễn Văn
JSON_obj.name = "Nguyễn Hữu Vĩnh Hoàng"
A”,”Age”:35},”Hello”],
var str = JSON.stringify(JSON_obj);
}
 Jquery AJAX
• AJAX (Asynchronous JavaScript and XML): là công nghệ sử dụng kết
hợp các yếu tố sau:
• XMLHttpRequest: được tích hợp sẵn trong trình duyệt nhằm mục đích gửi yêu
cầu (request) và nhận dữ liệu (response) từ server một cách thầm lặng.
• Javascript và HTML DOM: hiển thị dữ liệu hoặc xử lý dữ liệu nhận từ server
thông qua AJAX
• AJAX Request gửi Request lên server bằng URL, nhưng quá trình này
diễn ra ngầm không ảnh hưởng gì tới nội dung đang xem, khi nhận
được Response từ server (dạng text), Ajax sẽ cho phép chúng ta sử
dụng Javascript để xử lý kết quả này và tác động lên HTML DOM làm
thay đổi lập tức một số bộ phận thông tin trên giao diện.
• Jquery Ajax là Jquery cung cấp một số phương thức để thực hiện các
chức năng Ajax.
• Hàm $.ajax() sử dụng thực hiện các request HTTP bất đồng bộ.
$.ajax(url[,option]) hoặc $.ajax([option])
 Jquery AJAX
• Jquery Ajax có 03 phương thức cơ bản: load(), Post(), Get().
• Phương thức load(): lấy dữ liệu từ server và trả về cho phần tử được
chọn
• Cú pháp: $(selector).load(URL,data,callback);
• Với URL: đường dẫn muốn lấy dữ liệu, Data: cặp key/value gửi đi cùng yêu
cầu, callback: tên làm sẽ thực thi sau khi phương thức load hoàn thành.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo.txt");
});
});
</script>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
 Jquery AJAX
• Phương thức Post(): đẩy và lấy dữ liệu từ server bằng
phương thức HTTP POST REQUEST
• Cú pháp: $
(selector).post(URL,data,function(data,status,xhr),dataType);
• Với URL: url: required , đường dẫn đến file cần lấy thông tin
• data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ
gửi lên server
• function(data, status , xhr): là function sẽ xử lý khi thực hiện thành
công với các parameters. Với:
• data : bao gồm các dữ liệu trả về từ request
• status : gồm trạng thái request (“success” , “notmodified” , “error” ,
“timeout” , or “parsererror”)
• xhr : gồm các đối tượng XMLHttpRequest
• dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )
 Jquery AJAX
• Ví dụ: phương thức post()
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.post("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function (data, status) {
alert("Data: " + data + "nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
 Jquery AJAX
• Phương thức Get(): đẩy và lấy dữ liệu từ server bằng
phương thức HTTP Get
• Cú pháp: $
(selector).post(URL,data,function(data,status,xhr),dataType);
• Với URL: url: required , đường dẫn đến file cần lấy thông tin
• data: không bắt buộc ,là một đối tượng object gồm các key : value sẽ
gửi lên server
• function(data, status , xhr): là function sẽ xử lý khi thực hiện thành
công với các parameters. Với:
• data : bao gồm các dữ liệu trả về từ request
• status : gồm trạng thái request (“success” , “notmodified” , “error” ,
“timeout” , or “parsererror”)
• xhr : gồm các đối tượng XMLHttpRequest
• dataType: là dạng dữ liệu trả về. (text, json, script, xml,html,jsonp )
 Jquery AJAX
• Ví dụ: phương thức get()
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.get("demo_test_post.asp",
{
name: "Donald Duck",
city: "Duckburg"
},
function (data, status) {
alert("Data: " + data + "nStatus: " + status);
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
 Jquery AJAX
• Ví dụ: phương thức ajax()

$.ajax({
url: '/Home/DangNhap',
type: 'POST',
async: true,
data: form_data_login,
success: function (msg_login) {
alert(msg);
}
});