Tìm hiểu về JavaScript

1Thiết kế web Khoa CNTT-LHU 1 Chương VI: JavaScript
Giới thiệu ngôn ngữ Script
Nhập môn JavaScript
Cú pháp và quy ước
Biến, dữ liệu và các lệnh
Hàm, lớp ñối tượng, sự kiện
Các ñối tượng thông dụng Thiết kế web Khoa CNTT-LHU 2 Giới thiệu ngôn ngữ Script
Là ngôn ngữ dạng thông dịch
Cho phép Web tương tác với người dùng
Các ngôn ngữ script thông dụng – Javascript (Netscape) – Jscript (Microsoft) – VBScript (Microsoft) – PHP, CGI, 2Thiết kế web Khoa CNTT-LHU 3 Ứng dụng Script
Client-Side – Thực hiện tại Browser (IE, Firefox, Nescape Navigator, Safari, ...) – Thực hiện các tương tác với người dùng, thay ñổi cấu trúc trang web, kiểm tra dữ liệu ñược nhập vào của người dùng, )
Server-Side – Thực hiện tại WebServer (IIS, Apache, Netscape Enterprise Server, .) – Script tại Server-Side cho phép kết nối CSDL, chia sẽ thông tin giữa các người duyệt web, truy cập hệ thống file trên server, Thiết kế web Khoa CNTT-LHU 4 JavaScript
Web ñộng -> Netscape -> Script Language: LiveScript => JavaScript
JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML và dùng thông dịch (interpreter)
JavaScript là ngôn ngữ dựa trên ñối tượng: math, document, windows,
JavaScript không phải là ngôn ngữ hướng ñối tượng như C++, Java,
Thiết kế ñộc lập với hệ ñiều hành 3Thiết kế web Khoa CNTT-LHU 5 Nhập môn JavaScript (1)
Nhúng JavaScript vào file HTML : – Sử dụng các câu lệnh và các hàm trong cặp thẻ ... – Sử dụng các file nguồn JavaScript – Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML – Sử dụng thẻ sự kiện (event handlers) trong một thẻ HTML nào ñó?
ðặt giữa tag và : ñoạn script sẽ thực thi ngay khi trang web ñược mở.
ðặt giữa tag và : ðoạn script trong phần body ñược thực thi khi trang web ñang mở (sau khi thực thi các ñoạn script có trong phần ).
Số lượng ñoạn script không hạn chế. Thiết kế web Khoa CNTT-LHU 6 Nhập môn JavaScript (2)
Sö dông thÎ ... Èn c¸c Script ®èi víi c¸c webbrowser kh«ng support script // INSERT ALL JavaScript HERE <!-- From here the JavaScript code hidden // INSERT ALL JavaScript HERE // This is where the hidden ends --> Ghi chó trong JavaScript gièng trong C++ 4Thiết kế web Khoa CNTT-LHU 7 Nhập môn JavaScript (3)
VÝ dô trang web ®Çu tiªn víi JavaScript New Page 1 document.write("Xin chao ban"); Thiết kế web Khoa CNTT-LHU 8 Nhập môn JavaScript (4)
Sö dông c¸c file nguån JavaScript
Có ph¸p: .... Trong file “general.js” // JavaScript Document function sayhello() { alert('Hello, Chao cac ban lop 04CT1 \nChuc cac ban mot ngay vui ve!'); } Trong file “6_1.htm” <script language="javascript“ src="general.js"> <img src="images/TPHCM17.jpg" border="0" alt="TPHCM"> 5Thiết kế web Khoa CNTT-LHU 9 Nhập môn JavaScript (5)
ThÎ Trang nµy kh«ng sö dông JavaScript. Do ®ã b¹n cÇn sö dông browser Netscape Navigator tõ version 2.0 trë ®i! H·y kÝch chuét vµo ®©y ®Ó load vÒ Netscape míi h¬n NÕu b¹n ®· sö dông Netscape tõ 2.0 trë ®i mµ vÉn ®äc ®−îc dßng nµy h·y bËt Preferences/Advanced/JavaScript lªn Thiết kế web Khoa CNTT-LHU 10 Nhập môn JavaScript (6)
C¸ch dïng ®èi t−îng: –Gäi mét ph−¬ng thøc: ObjectName.MethodName()
HiÓn thÞ mét dßng text dïng ®èi t−îng document –write() vµ writeln() Ouputting Text This text is plain. <!-- HIDE FROM OTHER BROWSERS document.write(“This text is bold."); // STOP HIDING FROM OTHER BROWSERS --> 6Thiết kế web Khoa CNTT-LHU 11 Nhập môn JavaScript (7)
Giao tiÕp víi ng−êi sö dông var name=window.prompt("Hello! What’s your name ?","Lung"); document.write("Hello " + name + " ! I hope you like JavaScript "); Thiết kế web Khoa CNTT-LHU 12 Nhập môn JavaScript (8)
Giao tiÕp víi ng−êi sö dông ðiền tên của bạn vào ñây ñể kiểm tra: function kiemtra(form) { alert("ban da bam nut kiem tra"); document.write("Tên bạn là " + form.UserName.value + ""); } 7Thiết kế web Khoa CNTT-LHU 13 Cú pháp và quy ước
Javascript phân biệt chữ hoa – chữ thường – Ví dụ : Hai biến Java, java là khác nhau
Tất cả các câu lệnh javascript ñều cách nhau bởi dấu “;”
Không phân biệt khoảng trắng, Tab, xuống dòng trong câu lệnh.
Chuổi trong javascript ñược ñặt trong cặp nháy ñơn (‘ ’) hoặc nháy kép (“ ”) – Ví dụ : Thiết kế web Khoa CNTT-LHU 14 Cú pháp và quy ước - Special Characters
Special Characters “\” – \n New line - \r Carriage return – \t Tab - \b : Backspace VD: "one line \n another line"
Escaping Characters – \’ : Dấu nháy ñơn - \” : Dấu nháy kép VD: – var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." document.write(quote) – var home = "c:\\temp" 8Thiết kế web Khoa CNTT-LHU 15 Cú pháp và quy ước
Các loại dấu ngoặc: – { } : ðánh dấu khối lệnh – [ ] : Sử dụng trong cấu trúc Mảng – ( ) : Sử dụng trong hàm, thuộc tính ñối tượng
Tên biến và hàm: – Bắt ñầu bằng Ký tự (A..Z, a..z), _, $ – Không ñược bắt dầu bằng ký số (0..9) – Không có khoảng trắng giữa tên (biến hoặc hàm) – Không ñược ñặt tên trùng từ khóa
VD: – X1, _bien10, $sotien – 0_bien1, bien 2, do, : sai Thiết kế web Khoa CNTT-LHU 16 Danh sách từ khóa 9Thiết kế web Khoa CNTT-LHU 17 BiÕn trong JavaScript (1)
BiÕn vµ ph©n lo¹i biÕn –BiÕn toµn côc –BiÕn côc bé
KiÓu d÷ liÖu: ng«n ng÷ cã tÝnh ®Þnh kiÓu thÊp var fruit='apples'; numfruit=12; // không ñịnh nghĩa var numfruit = numfruit + 20 + " " + fruit; var temp ="There are " + numfruit ; document.write(temp); var ten; // gán giá trị cho biến ten = “tôi là 04ct”; // viết giá trị của biến ra IE document.write(ten); // gán giá trị cho biến ten = 1000; // viết giá trị của biến ra IE document.write(ten); Thiết kế web Khoa CNTT-LHU 18 BiÕn trong JavaScript (2)
KiÓu d÷ liÖu: – kiÓu sè nguyªn: • HÖ c¬ sè 10: b¾t ®Çu b»ng sè # 0: 5356 • HÖ c¬ sè 8: b¾t ®Çu b»ng sè 0: 0453 • HÖ c¬ sè 16: b¾t ®Çu b»ng 0x: 0xF12 – kiÓu dÊu phÈy ®éng: • 9.87 • -0.85E4 • 9.87E14 • .98E-3 – kiÓu logic: true hoÆc false – kiÓu chuçi: “day la mot chuoi” hoac ‘day cung la mot string’ 10 Thiết kế web Khoa CNTT-LHU 19 Các kiểu dữ liệu Thiết kế web Khoa CNTT-LHU 20 Biểu thức trong JavaScript
C¸c biÓu thøc trong JavaScript gÇn gièng víi C++
VÝ dô c¸c biÓu thøc trong JavaScript: a. 7 + 5 b. "7" + "5" c. 7 == 7 d. 7 >= 5 e. 7 <= 7 f. (7 < 5) ? 7 : 5 g. (7 >= 5) && (5 > 5) h. (7 >= 5) || (5 > 5) 11 Thiết kế web Khoa CNTT-LHU 21 Data Type Conversion var answer = 42 Sau ñó có thể gán: answer = "Thanks for all the fish...“
x = "The answer is " + 42 // returns "The answer is 42" y = 42 + " is the answer" // returns "42 is the answer"
"37" - 7 // returns 30 "37" + 7 // returns 377
unassigned variables function f1() { return y - 2; } f1() //Causes runtime error function f2() { return var y - 2; } f2() //returns NaN Thiết kế web Khoa CNTT-LHU 22 Các lệnh trong JavaScript (1)
Bitwise Operators a >>> b Zero-fill right shift a >> b Sign-propagating right shift a << b Left shift ~ a Bitwise NOT a ^ b Bitwise XOR a | b Bitwise OR a & b Bitwise AND Usage Operator 15 & 9 (1111 & 1001 = 1001) 15 | 9 (1111 | 1001 = 1111) 15 ^ 9 (1111 ^ 1001 = 0110) 12 Thiết kế web Khoa CNTT-LHU 23 C¸c lÖnh trong JavaScript (2)
Logical Operators
conditional operator – condition ? val1 : val2 status = (age >= 18) ? "adult" : "minor“
typeof 1. typeof operand 2. typeof (operand) !expr ! expr1 || expr2 || expr1 && expr2 && Usage Operator Thiết kế web Khoa CNTT-LHU 24 C¸c lÖnh trong JavaScript (3)
C¸c lÖnh ®iÒu kiÖn, vßng lÆp – if ... Else – for loop – while loop – Break, continue
C¸c c©u lÖnh thao t¸c trªn ®èi t−îng – for ( in ) document.write("The properties of the Window object are: "); for (var x in window) document.write(" "+ x + ", "); switch (expression){ case label : statement; break; default : statement;} 13 Thiết kế web Khoa CNTT-LHU 25 C¸c lÖnh trong JavaScript (4)
new Có ph¸p objectvar = new object_type ( param1 [,param2]... [,paramN])
With with (object) { // statement } with (document){ write(“This is an example of the things that can be done ”); write(“With the with statment. ”); write(“This can really save some typing”); } Thiết kế web Khoa CNTT-LHU 26 C¸c lÖnh trong JavaScript (5)
VÝ dô phÐp to¸n new: function Nguoi(first_name, last_name, age, gt) { this.first_name=first_name; this.last_name=last_name; this.age=age; this.gt=gt; } Nguoi1= new Nguoi("Thuy", "Dau Bich", "20", "Female"); Nguoi2= new Nguoi("Nang", "Nguyen Duc", "22", "Male"); document.write ("1. "+Nguoi1.last_name+" " + Nguoi1.first_name + "" ); document.write("2. "+Nguoi2.last_name +" "+ Nguoi2.first_name + ""); 14 Thiết kế web Khoa CNTT-LHU 27 C¸c lÖnh trong JavaScript (6)
C¸c hµm cã s½n – eval: retvar=eval (bÊt kú biÓu thøc hîp lÖ trong Java) var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); – parseInt(string, c¬ sè) – parseFloat(string) var x1="12"; var x3; x3=parseInt(x1,4); //x3=? x3=parseInt(x1,6); // x3=? Thiết kế web Khoa CNTT-LHU 28 C¸c lÖnh trong JavaScript (7)
M¶ng (Array) – myArray = new InitArray (10) • myArray[1] = "NghÖ An" • myArray[2] = "Lµo" function InitArray(numElements) { this.length = numElements; for (var x=1; x<=numElements; x++) { this[x]=0 } return this; } 15 Thiết kế web Khoa CNTT-LHU 29 Javascript - Hàm
Cú pháp khai báo: function Tên_hàm(thamso1, thamso2,..) { // Nội dung hàm }
Hàm trả về giá trị: function Tên_hàm(thamso1, thamso2,..) { // Nội dung hàm return (value); } Thiết kế web Khoa CNTT-LHU 30 Ví dụ hàm
ðịnh nghĩa hàm: function Sum(x, y) { tong = x + y; return tong; }
Gọi hàm: var x = Sum(30, 40); 16 Thiết kế web Khoa CNTT-LHU 31 Lớp ñối tượng
Khai Khai báo lớp: function Tên_lớp() { //Khai Khai báo biến thành viên this.bien1 = value1; this.bien2 = value2; }
ðịnh nghĩa hàm thành viên của lớp: Tên_Lớp.prototype.Tên_phươngthức = function() { //return value; } Thiết kế web Khoa CNTT-LHU 32 Ví dụ lớp 17 Thiết kế web Khoa CNTT-LHU 33 Kế thừa lớp ñối tượng Thiết kế web Khoa CNTT-LHU 34 Kế thừa lớp ñối tượng 18 Thiết kế web Khoa CNTT-LHU 35 Sù kiÖn - Event (1)
Event handler : – – function kiemtra() { alert("ban da bam nut kiem tra"); } Ðiền tên của bạn vào ñây: Thiết kế web Khoa CNTT-LHU 36 Sù kiÖn - Event (2)
C¸c sù kiÖn th−êng x¶y ra: khi ng−êi dïng ®ãng mét trangonUnLoad khi ng−êi dïng ®−a ra mét form.onSubmit khi ng−êi sö dông lùa chän mét tr−êng nhËp dữ liÖu trªn form. onSelect khi di chuyÓn chuét qua kÕt nèi hay anchor.onMouseOver trang Web ®−îc load.onLoad khi thµnh phÇn cña form ®−îc focus(lµm næi lªn).onFocus khi gi¸ trÞ cña thµnh phÇn ®−îc chän thay ®æionChange khi ng−êi dïng kÝch vµo c¸c thµnh phÇn hay liªn kÕt cña form. onClick input focus bÞ xo¸ tõ thµnh phÇn formonBlur 19 Thiết kế web Khoa CNTT-LHU 37 C¸c ®èi t−îng trong JavaScript
String
Number
Array
Date
Math
navigator
window
Document.
location
History Thiết kế web Khoa CNTT-LHU 38 ðối tượng String
Thuộc tính: – length : chiều dài của chuỗi – constructor : Dùng ñể kiểm tra kiểu của biến – prototype : Bổ sung prototype hàm cho một ñối tượng – Nối kết các chuỗi bằng toán tử “+” var sTenBien = new String(); sTenBien = 256; if(sTenBien.constructor == String) { document.writeln("sTenBien la mot chuoi co chieu dai la:" + sTenBien.length); } else { document.writeln("sTenBien la mot so co gia tri la: " + sTenBien); } 20 Thiết kế web Khoa CNTT-LHU 39 ðối tượng String s1 = "foo" //creates a string literal value s2 = new String("foo") //creates a String object
Sự khác biệt: s1 = "2 + 2" //creates a string literal value s2 = new String("2 + 2")//creates a String object eval(s1) //returns the number 4 eval(s2) //returns the string "2 + 2"
Phương thức – stringObj.anchor(anchorString) – tạo Bookmark – strVariable.link(URL) – string1.concat([string2[, string3[,... [, stringn]]]]) – toLowerCase, toUpperCase var txt="Hello world!“ document.write(txt.length) document.write(txt.toUpperCase()) Thiết kế web Khoa CNTT-LHU 40 ðối tượng String – Các phương thức 21 Thiết kế web Khoa CNTT-LHU 41 Ví dụ các phương thức trong String Thiết kế web Khoa CNTT-LHU 42 Ví dụ các phương thức trong String 22 Thiết kế web Khoa CNTT-LHU 43 Javascript – Number
Kiểu dữ liệu số nguyên, số thực
Bắt ñầu bằng ký số “0” : Số nguyên hệ bát phân
Bắt ñầu bằng “0x” : Số nguyên hệ thập lục phân VD : Cho biết giá trị thập phân tương ứng của các number sau : – 125 = ? – 010 = ? 014 = ? 028 = ? – 0xFF = ? 0x3.12 = ? Thiết kế web Khoa CNTT-LHU 44 Number – Phương thức
toExponential numObj.toExponential([fractionDigits])
toFixed numObj.toFixed([fractionDigits])
toPrecision numObj.toPrecision ([precision])
toString objectname.toString([radix]) radix : [2; 8; 10; 16] – Ví dụ: dùng các hàm với số 123.4267782 23 Thiết kế web Khoa CNTT-LHU 45 ðối tượng array
arrayObjectName = new Array(element0, element1, ..., elementN) arrayObjectName = new Array(arrayLength)
emp[0] = "Ryan Dias" emp[1] = "Graham Browne" emp[2] = "David Greene“
myArray = new Array("Hello", myVar, 3.14159)
Two-Dimensional Arrays a = new Array(4) for (i=0; i < 4; i++) { a[i] = new Array(4) for (j=0; j < 4; j++) { a[i][j] = "["+i+","+j+"]" } } Thiết kế web Khoa CNTT-LHU 46 Một số phương thức mảng
Join –Ghép các phần tử thành 1 chuỗi.
Pop – Lấy phần tử cuối
Push – Thêm 1 (hoặc nhiều phần tử) vào cuối mảng
Reverse - ðổi phần tử ñầu – cuối
Shift – Xóa phần tử ñầu khỏi mảng
Sort – Sắp xếp các phần tử trong mảng
Concat – nối mảng
toString – chuyển mảng sang dạng String 24 Thiết kế web Khoa CNTT-LHU 47 Ví dụ mảng Thiết kế web Khoa CNTT-LHU 48 Mảng ña chiều
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]);
JavaScript hỗ trợ ñến 60 chiều 25 Thiết kế web Khoa CNTT-LHU 49 ðối tượng Date dateObjectName = new Date([parameters])
Các constructor – var dateObj = new Date() – var dateObj = new Date(dateVal) – var dateObj = new Date(year, month, date[,hours[,minutes[,seconds[,ms]]]]) – var dateObj = new Date(dateString) Ví dụ: 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) today = new Date(). Thiết kế web Khoa CNTT-LHU 50 Các phương thức của Date
getDate(), getDay(), getMonth(), getYear(),
getTime(), getHours(), getMinutes(), getSeconds()
setDate, setFullYear, setHours, setMinutes, setMonth, setSeconds, setTime, setYear,
toDateString, toString
Tham khảo trang web pt/diaries/15/2.html 26 Thiết kế web Khoa CNTT-LHU 51 ðối tượng Math
Sử dụng ñối tượng Math cho các hàm toán học
Math.abs(number)
Math.cos(number), Math.acos(number)
Math.tan(number), Math.atan(number)
Math.ceil(number)
Math.floor(number)
Math.max([number1[, number2[. . . [, numberN]]]])
Math.random( )
Math.round(number )
Math.sqrt(number ) , Thiết kế web Khoa CNTT-LHU 52 Window object
Tồn tại khi mở 1 tài liệu HTML
Sử dụng ñể truy cập thông tin window
ðiều khiển các sự kiện xảy ra trong window
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 27 Thiết kế web Khoa CNTT-LHU 53 Window methods
alert() – window.alert("How are you doing?");
prompt() – window.prompt("Please provide your name","optional text");
confirm() – window.confirm("Are you sure you want to do this?");
blur() - Move This Window to Back
focus() - Bring Main Window to Front
open() – window.open("URL", "window name", "attributes"); – newWin=window.open("","","width=300,height=250"); Thiết kế web Khoa CNTT-LHU 54 Window methods
moveBy(): di chuyển cả window ñi – window.moveBy(xDistance,yDistance); <input type="Button" value="Move Window" onclick="window.moveBy(50,50);">
moveTo(): Di chuyển ñến vị trí so với góc màn hình (0,0) – window.moveTo(xDistance,yDistance);
resizeBy() – window.resizeBy(xSize,ySize);
resizeTo() – window.resizeTo(xWidth,yLength); 28 Thiết kế web Khoa CNTT-LHU 55 Window Object Event Handlers <body onLoad="alert('This page has finished loading!)" window.onload=functionName; <body onUnload="alert('You're leaving so soon?)"
onResize
onError
onBlur
onFocus C¸c ch−¬ng tr×nh xö lý sù kiÖn onLoad - XuÊt hiÖn khi cöa sæ kÕt thóc viÖc t¶i. onUnLoad - XuÊt hiÖn khi cöa sæ ®−îc lo¹i bá. Thiết kế web Khoa CNTT-LHU 56 Document object
Document Object biểu diễn cho tài liệu HTML
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
Properties – aLinkColor – bgColor – Body – fgColor – linkColor – Location – Title – URL – vlinkColor
Methods – clear – close – open – write – writeln 29 Thiết kế web Khoa CNTT-LHU 57 History Object
History Object cung cấp danh sách các URL ñã ñược duyệt bởi người dùng
Methods – Back – Forward – go
History.go(-1) -- history.back()
History.go(+1) – history.forward() Thiết kế web Khoa CNTT-LHU 58 Location Object
Chứa thông tin về URL hiện tại
Properties – Hostname – href,
Methods – Reload – 30 Thiết kế web Khoa CNTT-LHU 59 HTML Objects
Mỗi form trong 1 document sẽ tạo ra 1 ñối tượng form
1 document có thể có nhiều form, ñược lưu trong 1 forms array (bắt ñầu từ form[0])
Truy cập ñến form – document.forms[0] – document.formName
Truy cập ñến các thành phần của form – document.forms[0].item[0].value – document.formName.InputName.value Thiết kế web Khoa CNTT-LHU 60