WebCourse - Bài 4: Các ngôn ngữ Script

t ứng 
dụng 
q Truy cập hệ thống file trên server,...
q ...
37
Script tại Web Server
n Quá trình thực hiện ứng dụng Server-Side 
gồm 2 giai đoạn:
q Tạo trang Web có chứa cả Srcipt Client-Side và 
Server-Side
q Khi client browser yêu cầu thực hiện, server (run-
time engine) sẽ thực hiện các lệnh server-side 
scipts và trả trang Web HTML về browser
8
Nhúng JavaScript vào trang Web
some statements
some statements
9
Nhúng VBScript vào trang Web
some statements 
some statements 
410
JAVASCRIPT
11
Nội dung
n Biến, kiểu dữ liệu
q Số, mảng, chuỗi, đối tượng
n Các cú pháp:
q Gán, điều kiện, lặp
q Hàm, đối tượng hàm
n Sử dụng các đối tượng trong HTML
q document, form, frame, window…
q Xử lý các sự kiện của các đối tượng giao diện
q Xử lý sự kiện timer
n Sử dụng JavaScript trong kiểm tra dữ liệu Form
n Sử dụng JavaScript trong xử lý hiệu ứng
12
Biến số
n Cách đặt tên biến
q A..Z,a..z,0..9,_ : phân biệt HOA, thường
n Khai báo biến
q Dùng từ khóa var (var count=10,amount;)
q Thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên
n Phạm vi sử dụng biến
q Toàn cục, cục bộ (trong hàm)
513
Kiểu dữ liệu
n Kiểu số : số nguyên, thực
n Boolean - True or False
n Chuỗi - “Hello World”
n object
n array
n null
n undefined – lúc khai báo nhưng chưa sử dụng
14
Đổi kiểu dữ liệu
n Biến số tự đổi kiểu dữ liệu khi giá trị thay đổi
n Ví dụ, var x = 10
Sau đó ta có thể đổi x:
x = “I change your value?”
n Có thể cộng hai biến khác kiểu dữ liệu
“12” + 34.5 à “1234.5”
n Hàm parseInt(), parseFloat(): đổi chuỗi sang số
15
Các phép toán
n Phép gán (=)
q Có thể gán bất kỳ giá trị nào cho 1 biến
n Phép toán 1 ngôi (++,--)
n Phép toán +=, -=, *=,/=, %=,…
n Phép so sánh
q ==, !=, , =
q &&, ||, !
n Biểu thức điều kiện: status = (age >= 18) ? "adult" : "minor"
616
Mảng - Array
n Dùng để lưu các biến dùng chung tên
n Chỉ số bắt đầu từ 0
n Không có kiểu dữ liệu rõ ràng
n Được tích hợp trong đối tượng kiểu Array (sử 
dụng một số các method: pop, push,...)
17
Hàm trong JavaScript
n Khai báo chung
function funcName(argument1,argument2,etc)
{ statements; }
n Giá trị trả về của hàm
return value;
Or
return ( value ) ;
n Đối tượng this
18
Hàm trong JavaScript
function add(x,y)
{
results=x+y;
return results;
}
Gọi hàm : sum = add(3,4);
719
Các lệnh trong JavaScript
20
Các quy tắc chung
n Khối lệnh được bao trong dấu { }
n Mỗi lệnh kết thúc bởi dấu ;
n Các lệnh là một trong các dạng
q Điều kiện
q Lặp
q Thao tác đối tượng
n Đặt chú thích
q // chú thích 1 dòng 
q /* chú thích nhiều dòng*/
21
Lệnh điều khiển
n Có 2 loại:
q if . . . else
if (condition) { statements; }
else { statements2; }
q switch (expression){
case label : 
statement;
break;
default : statement;}
822
Lệnh lặp
n For / Do . . . While
n While
n Break and Continue
n For - - in
n With
23
Lệnh lặp
n for (initial-statement; condition; increment) 
{ statements; }
n do 
{ statements;} 
while (condition)
n while (condition) 
{ statements;
24
Lệnh lặp
n Duyệt lần lượt các phần tử của một mảng
for (variable in object) 
{ statements; }
n Sử dụng điều khiển vòng lặp
q break 
q Continue
n with (object) { statements; }: tương tự with trong VB
925
Một số đối tượng
n Đối tượng String
n Đối tượng Array
n Đối tượng Date, Math
n Đối tượng Window
n Đối tượng Frame
n Đối tượng Form
26
Đối tượng String
var string="hello“
var stringlength=string.length //stringlength=5 
n Thuộc tính
q length
n Phương thức
q stringObj.anchor(anchorString) – tạo Bookmark
q strVariable.link(URL)
q strObj.charAt(index), strObj.charCodeAt(index)
q string1.concat([string2[, string3[,... [, stringn]]]])
q strObj.indexOf(subString[, startIndex])
27
Tạo biến array
n arrayObjectName = new Array([element0, 
element1, ..., elementN])
n emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene"
10
28
Sử dụng mảng
n Truy cập phần tử
q Xác định qua tên của phần tử.
VD: emp [“Ryan Dias”]
q Xác định qua chỉ số phần tử.
VD: emp [0].
29
Một số phương thức mảng
n Join –Ghép các phần tử thành 1 chuỗi. 
n Pop – Lấy phần tử cuối
n Push – Thêm 1 (hoặc nhiều phần tử) vào cuối 
mảng
n Reverse - Đổi phần tử đầu – cuối
n Shift – Xóa phần tử đầu khỏi mảng
30
Mảng đa chiều
n Ví dụ về mảng 2 chiều
MyArray = new Array(5,5);
MyArray[0, 0] = "Ryan Dias";
MyArray[0, 1] = 1;
MyArray[1, 0] = "Mike Donne";
MyArray[1, 1] = 2;
document.write ("The name is " + MyArray[3, 0]);
document.write(" and the code is " + MyArray[3, 1]);
n JavaScript hỗ trợ đến 60 chiều
11
31
Đối tượng Date
var my_date=new Date("October 12, 1988 13:14:00") 
var my_date=new Date("October 12, 1988") 
var my_date=new Date(88,09,12,13,14,00) 
var my_date=new Date(88,09,12) 
n getDate(), getDay(), getMonth(), getYear(),…
n getTime(),…
n Tham khảo trang web HOCASP
32
Đối tượng Math
n Sử dụng đối tượng Math cho các hàm toán học
n Math.abs(number)
n Math.cos(number), Math.acos(number)
n Math.tan(number), Math.atan(number)
n Math.ceil(number)
n Math.floor(number)
n Math.max([number1[, number2[. . . [, numberN]]]])
n Math.random( )
n Math.round(number )
n Math.sqrt(number ) ,…
33
Các đối tượng khác 
Browser Objects
Script Objects
HTML Elements
12
34
Browser Objects
n Là các Object do 
browser cung cấp để 
truy cập đến một số 
chức năng của browser
n IE Browser Objects
Screen
Event
Frames
History
Location
Navigator
Window Object
Document Object
35
Window object (1)
n Tồn tại khi mở 1 tài liệu HTML
n Sử dụng để truy cập thông tin window
n Điều khiển các sự kiện xảy ra trong window
n Nếu tài liệu định nghĩa nhiều frame, browser 
tạo 1 window object cha và các window 
object con cho từng frame
36
Window Object (2)
n Properties
q Document
q Event
q History
q Location
q Name
q Navigator
q Screen
q status
n Methods
q Alert
q Blur
q Close
q Focus
q Navigate
q Open
13
37
Document object (1)
n Document Object biểu diễn cho tài liệu HTML
n Dùng để lấy thông tin về tài liệu, các thành 
phần HTML và xử lý sự kiện
38
Document Object (2)
n Properties
q aLinkColor
q bgColor
q Body
q fgColor
q linkColor
q Location
q Title
q URL
q vlinkColor
n Methods
q clear
q close
q open
q write
q writeln
39
History Object
n History Object cung cấp danh sách các URL 
đã được duyệt bởi người dùng
n Methods
q Back
q Forward
q go
14
40
Location Object
n Chứa thông tin về URL hiện tại
n Properties
q Hostname
q href, …
n Methods
q Reload
q …
41
HTML Objects
n Mỗi form trong 1 document sẽ tạo ra 1 đối 
tượng form
n 1 document có thể có nhiều form, được lưu 
trong 1 forms array (bắt đầu từ form[0])
n Truy cập đến form
q document.forms[0]
q document.formName
n Truy cập đến các thành phần của form
q document.forms[0].item[0].value
q document.formName.InputName.value
42
Xử lý sự kiện
15
43
Các sự kiện thông dụng
n Có trong hầu hết các đối 
tượng
q onClick 
q onFocus
q onChange 
q onBlur
q onMouseOver
q onMouseOut
q OnLoad
q onSubmit
q onMouseDown
q onMouseUp
q onResize
44
Xử lý sự kiện cho các tag HTML
<INPUT TYPE="button" NAME="docode"
onclick="DoOnClick();">
<INPUT TYPE="button" NAME="Button1" 
VALUE="Open 
Sesame!”onClick="window.open('mydoc.html','new
Win')" 
n Lưu ý về dấu “ “, ‘ ‘
45
Xử lý sự kiện bằng function
n Example
function greeting() {
alert("Welcome to my world");
} 
16
46
Xử lý sự kiện bằng thuộc tính
n Gán tên hàm xử lý cho 1 object event
object.eventhandler = function;
function greeting() {
alert("Welcome to my world"); }
window.onload = greeting;
47
onClick event
n 
function compute(form) {
form.result.value = eval(form.expr.value)
<INPUT TYPE="button" VALUE="Calculate" 
ONCLICK="compute(this.form)">
48
onChange event
n The onChange event occurs whenever a form element 
changes. 
function checkNum(num) {
alert ("Thank you"); }
17
49
onFocus and onBlur
n Xảy ra khi focus và lost focus một thành phần
BODY BGCOLOR="lavender">
<INPUT type = text name = text1
onblur="(document.bgColor='aqua')"
onfocus="(document.bgColor='dimgray')">
50
onMouseOver and onMouseOut
function showLink(num){
if (num==1) {document.forms[0].elements[0].value= 
"You have selected Aptech"; }
} 
<a href="#"
onMouseOver="showLink(1)"document.bgcolor= “
green">Aptech
51
VBSCRIPT
18
52
Nội dung
n Biến, kiểu dữ liệu
n Cấu trúc điều khiển
n Hàm, thủ tục
n Xử lý sự kiện trong trang Web
53
Biến, kiểu dữ liệu
n Khai báo biến
q Dim x, y ,z
q Dim a(10) ‘khai báo 1 mảng 1 chiều có 10 phần 
tử
q Dim b(5,10) ‘khai báo mảng 2 chiều
q Redim a(20) ‘khai báo lại mảng a, tăng thêm 10 
phần tử (vẫn giữ lại giá trị 10 phần tử đầu)
n Kiểu dữ liệu
q Khi khai báo, biến chỉ có 1 kiểu là variant
q Các kiểu dữ liệu con (number, string, boolean, 
object,…) sẽ được gán cho biến khi sử dụng
54
Cấu trúc điều kiện
If Then 
If Then
....
Else
...
End If
Select Case
Case
....
Case
.....
Case Else
......
End Select
19
55
Cấu trúc lặp
Do While
....
Loop
Do
....
Loop While
While 
...............
WEnd
56
Cấu trúc lặp
For = To 
...............
Next
For = To Step
...............
Next
For Each in 
...
Next
57
Cấu trúc lặp
dim names(3)
names(0) = "Tove"
names(1) = "Jani"
names(2) = "Hege"
for each x in names
document.write(x & "")
next
20
58
Hàm , thủ tục
n Function (<danh sách các tham 
số>)
...............
End Function
n Sub (<danh sách các tham 
số>) 
.... 
End Sub
59
Hàm , thủ tục
n Gọi hàm
name = findname(agr1,…)
n Gọi thủ tục
Call MyProc(arg1,arg2,…)
MyProc arg1,arg2 
60
Xử lý sự kiện
n Xử lý sự kiện tương tự như JavaScript
n Đặt tên hàm có dạng : 
_
21
61
Xử lý sự kiện
<!--
Sub vbsBtn_OnClick
window.alert("VBScript Event Handler")
End Sub
-->
62
Bài tập thực hành
n Tham khảo trang Web HOCASP
n Tham khảo các ví dụ được cung cấp
n Tìm hiểu và viết lại từng ví dụ