NGÔN NGỮ JAVASCRIPT

Chia sẻ: Cao Thi Thao | Ngày: | Loại File: DOC | Số trang:61

Thêm vào BST

Báo xấu

785
lượt xem 402
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Yêu cầu: Nắm được các kiểu dữ liệu trong Javascript. Nắm được các toán tử trong Javascript. Quản lý các sự kiện. Nắm được các đối tượng của Javascript : window, document. Thực hành làm các ví dụ giải các bài toán với Javascript. Giới thiệu về ngôn ngữ Javascript: JavaScript là ngôn ngữ kịch bản dùng để tạo các client-side scripts và server-side scripts. JavaScript làm cho việc tạo các trang Web động và tương tác dễ dàng hơn....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: NGÔN NGỮ JAVASCRIPT

NGÔN NGỮ JAVASCRIPT 1
8. CÁC HÀM CÓ SẴN..........................................................................................................17 9. MẢNG (ARRAY).............................................................................................................. 19 10. SỰ KIỆN..........................................................................................................................21 2
Yêu cầu:  Nắm được các kiểu dữ liệu trong Javascript  Nắm được các toán tử trong Javascript  Quản lý các sự kiện  Nắm được các đối tượng của Javascript : window, document  Thực hành làm các ví dụ giải các bài toán với Javascript 1. Giới thiệu về ngôn ngữ Javascript  JavaScript là ngôn ngữ kịch bản dùng để tạo các client-side scripts và server-side scripts.  JavaScript làm cho việc tạo các trang Web động và tương tác dễ dàng hơn  JavaScript là một ngôn ngữ kịch bản được hãng Sun Microsystems và Netscape phát triển.  JavaScript được phát triển từ Livescript. Của Netscape  Các ứng dụng client chạy trên một trình duyệt như Netscape Navigator hoặc Internet Explorer.  JavaScript có thể tăng cường tính động và tính tương tác của các trang web. – Cung cấp sự tương tác người dùng – Thay đổi nội dung động – Xác nhận tính hợp lệ của dữ liệu 2. Chèn JavaScript vào trang HTML Bạn có thể nhúng JavaScript vào một file HTML theo một trong các cách sau đây:  Sử dụng thẻ SCRIPT:  Sử dụng một file JavaScript ở ngoài  Sử dụng các biểu thức JavaScript trong các giá trị thuộc tính của thẻ  Sử dụng trong các trình điều khiển sự kiện 3
Ví dụ: confirm ("Are you Sure?"); alert("OK"); document.write(" Thank You !"); 3. Biến và phân loại biến Tên biến trong JavaScript phải bắt đầu bằng chữ hay dấu gạch dưới. Các chữ số không được sử dụng để mở đầu tên một biến nhưng có thể sử dụng sau ký tự đầu tiên. Phạm vi của biến có thể là một trong hai kiểu sau: • Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng dụng. được khai báo như sau : x = 0; • Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình mà nó khai báo. Biến cục bộ được khai báo trong một hàm với từ khoá var như sau: var x = 0; Biến toàn cục có thể sử dụng từ khoá var, tuy nhiên điều này không thực sự cần thiết. 4. Các kiểu dữ liệu trong Javascript  JavaScript có một tập các kiểu dữ liệu. – Số (number) – Giá trị logic (boolean) – Chuỗi (String) – Giá trị rỗng Null  Trong JavaScript, hai biến khác kiểu có thể kết hợp với nhau. ví dụ: A = “ Day la mot so .” + 5 sẽ có kết quả là một chuỗi với giá trị là "Day la mot so . 5" var A = "12" + 7.5; document.write(A); 4
Các kiểu dữ liệu nguyên thủy  Integer – là các hệ thống số thập phân, thập lục phân và nhị phân.  Floating- point(số thực) – Các số thập phân có phần thập phân sử dụng “e” or “”E”và theo sau là các số nguyên.  String – là một chuỗi rỗng hay chuỗi ký tự được đặt trong cặp ngoặc đơn hoặc ngoặc kép  Boolean–Kiểu này có hai giá trị: True or False.  null - Kiểu null chỉ có một giá trị: null. Null hàm ý không có dữ liệu. 5. Các toán tử (operator) Toán tử được sử dụng để thực hiện một phép toán nào đó trên dữ liệu. Một toán tử có thể trả lại một giá trị kiểu số, kiểu chuỗi hay ki ểu logic. Các toán tử trong JavaScript có thể được nhóm thành các loại sau đây: gán, so sánh, số học, chuỗi, logic và logic bitwise. a) Phép gán Toán tử gán là dấu bằng (=) nhằm thực hiện việc gán giá trị của toán hạng bên phải cho toán hạng bên trái. Bên cạnh đó JavaScript còn h ỗ trợ m ột số kiểu toán tử gán rút gọn. Kiểu gán thông thường Kiểu gán rút gọn x=x+y x+=y x=x-y x-=y x=x*y x*=y x=x/y x/=y x=x%y x%=y b) Các phép toán số học Cộng (+), trừ (-), nhân (*), chia (/) var1% var2 Toán tử phần dư, trả lại phần dư khi chia var1 cho var2 - Toán tử phủ định, có giá trị phủ định toán hạng var++ Toán tử này tăng var lên 1 (có thể biểu diễn là + 5
+var) var-- Toán tử này giảm var đi 1 (có thể biểu diễn là --var) c) Các phép so sánh = = (bằng); != (khác); > ; >= ; < ; 2 trở thành 4 (số nhị phân 10000 trở thành số nhị phân 100) >>> Toán tử dịch phải có chèn 0. Dịch chuyển toán hạng trái sang phải một số lượng bit bằng toán hạng phải. Bit dấu được dịch chuyển từ trái (giống >>). Những bit được dịch sang ph ải b ị xoá đi. Ví dụ: -8>>>2 trở thành 1073741822 (bởi các bit dấu đã trở 6
thành một phần của số). Tất nhiên với số dương kết quả của toán tử >> và >>> là giống nhau. Có một số toán tử dịch chuyển bitwise rút gọn: Kiểu bitwise thông Kiểu bitwise rút gọn thường x = x y x - >> y x = x >>> y x >>> = y x=x&y x&=y x=x^y x^=y x=x|y x|=y var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is " + y); alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); 6. Các lệnh có cấu trúc a) Rẽ nhánh theo điều kiện với if ... else Cú pháp if ... else dùng trong trường hợp muốn rẽ nhánh theo điều kiện. Cú pháp này tương đương với nếu x thì làm y, còn nếu không thì làm z. Các câu lệnh if ... else có thể lồng trong nhau. Cú pháp: if (biểu_thức_1) { khối lệnh được thực hiện nếu biểu thức 1 đúng; } else if (biểu_thức_2) 7
{ khối lệnh được thực hiện nếu biểu thức 2 đúng; } else { khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng; } Ví dụ: var x = prompt("Nhập vào giá trị của x:"); x = parseFloat(x); if (!isNaN(x)) { if (x > 0) { alert("x > 0"); } else if (x == 0) { alert("x = 0"); } else { alert("x < 0"); } } else { alert("giá trị bạn nhập không phải là một số"); } b) Toán tử điều kiện Toán từ điều kiện còn được biết đến với tên gọi toán tử tam phân. Cú pháp của toán tử này như sau: điều_kiện ? biểu_thức_đúng : biểu_thức_sai; 8
Toán tử này sẽ trả lại giá trị là kết quả của biểu_thức_đúng nếu điều_kiện có giá trị bool bằng true, ngược lại nó sẽ trả lại giá trị bằng biểu_thức_sai. Ví dụ: var a=9; var b=5; a>b?document.write(a):document.write(b); c) Lệnh switch Cú pháp switch cũng là cú pháp điều kiện như if ... else hay toán tử tam phân. Tuy nhiên, cú pháp switch thường được dùng khi chỉ cần so sánh bằng với số lượng kết quả cần kiểm tra lớn. Cách sử dụng cú pháp switch: switch (biểu_thức_điều_kiện) { case kết_quả_1: khối lệnh cần thực hiện nếu biểu_thức_điều_kiện bằng kết_quả_1; break; case kết_quả_2: khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_2; break; default: khối lệnh cần thực hiện nếu biểu_thức_điều_kiện cho ra một kết quả khác; } Sau mỗi khối lệnh trong một mục kiểm tra kết quả (trừ mục default), lập trình viên cần phải thêm vào break. Ví dụ: 9
Thử một chút a=prompt("Nhap a"); a=parseFloat(a); switch (a) { case 1: document.write("a=1"); brack; case 2: document.write("a=2"); brack; default: document.write("a>2"); } d) Vòng lặp while Vòng lặp while có mục đích lặp đi lặp lại một khối lệnh nhất định cho đến khi biểu thức điều kiện trả về false. Khi dùng vòng lặp while phải chú ý tạo lối thoát cho vòng lặp (làm cho biểu thức điều kiện có giá trị false), nếu không đoạn mã nguồn sẽ rơi vào vòng lặp vô hạn, là một lỗi lập trình. Vòng lặp while thường được dùng khi lập trình viên không biết chính xác cần lặp bao nhiêu lần. Cú pháp của vòng lặp while như sau: while (biểu_thức_điều_kiện) { khối lệnh cần thực hiện nếu biểu_thức_điều_kiện trả về true; } e) Vòng lặp do ... while Về cơ bản, vòng lặp do ... while gần như giống hệt như vòng lặp while. Tuy nhiên, trong trường hợp biểu thức điều kiện trả về false ngay từ đầu, khối lệnh trong vòng lặp while sẽ không bao giờ được thực hiện, trong khi đó, vòng lặp do ... while luôn đảm bảo khối lệnh trong vòng lặp được thực hiện ít nhất một lần. Ví dụ: 10
while (0 > 1) { alert("while"); // Câu lệnh này sẽ không bao giờ được thực hiện } do { alert("do ... while"); // Bạn sẽ nhận được thông báo do ... while một lần duy nhất } while (0 > 1); Cú pháp của vòng lặp do ... while như sau: do { khối lệnh; } while (biểu_thức_điều_kiện); f. Vòng lặp for Vòng lặp for thường được sử dụng khi cần lặp một khối lệnh mà lập trình viên biết trước sẽ cần lặp bao nhiêu lần. Cú pháp của vòng lặp for như sau: for (biểu_thức_khởi_tạo; biểu_thức_điều_kiện; biểu_thức_thay_đổi_giá_trị) { Khối lệnh cần lặp; } Khi bắt đầu vòng lặp for, lập trình viên cần khởi tạo một biến nhất định bằng biểu_thức_khởi_tạo để dùng trong biểu_thức_điều_kiện, nếu biểu_thức_điều_kiện trả về true, khối lệnh cần lặp sẽ được thực hiện, sau khi thực hiện xong khối lệnh cần lặp, biểu_thức_thay_đổi_giá_trị sẽ được thực hiện, tiếp theo, biểu_thức_điều_kiện sẽ lại được kiểm tra, cứ như vậy cho đến khi biểu_thức_điều_kiện trả về false, khi đó vòng lặp sẽ kết thúc. Ví dụ: For loop Example 11
for (x=1; x
Ví dụ sau tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new Ví dụ: New Example function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoàn", "Đỗ Văn", "24", "Male"); document.write ("1. "+person1.last_name+" " + person1.first_name + "" ); document.write("2. "+person2.last_name +" "+ person2.first_name + ""); document.write("3. "+ person3.last_name +" "+ person3.first_name + ""); document.write("4. "+ person4.last_name +" "+ person4.first_name+""); j. THIS Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng được gọi thường là đối tượng hiện thời trong phương thức hoặc trong hàm. Cú pháp this [.property] Có thể xem ví dụ của lệnh new. 13
k. WITH Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng. Cú pháp with (object) { // statement } Ví dụ: Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối t ượng ng ầm đ ịnh là document và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document With Example with (document){ write(“This is an exemple of the things that can be done ”); write(“With the with statment. ”); write(“This can really save some typing”); } 7. CÁC HÀM (FUNCTIONS) JavaScript cũg cho phép sử dụng các hàm. Mặc dù không nh ất thi ết phải có, song các hàm có thể có một hay nhiều tham số truy ền vào và một giá trị trả về. Bởi vì JavaScript là ngôn ngữ có tính định ki ểu th ấp nên không cần định nghĩa kiểu tham số và giá trị trả về của hàm. Hàm có thể là thuộc tính của một đối tượng, trong trường hợp này nó được xem như là phương thức của đối tượng đó. Lệnh function được sử dụng để tạo ra hàm trong JavaScript. Cú pháp function fnName([param1],[param2],...,[paramN]) 14
{ //function statement } Ví dụ: Ví dụ sau minh hoạ cách thức tạo ra và sử dụng hàm nh ư là thành viên của một đối tượng. Hàm printStats được tạo ra là phương thức của đối tượng person Function Example function person(first_name, last_name, age, sex) { this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; this.printStats=printStats; } function printStats() { with (document) { write (" Name :" + this.last_name + " " + this.first_name + "" ); write("Age :"+this.age+""); write("Sex :"+this.sex+""); } } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoan", "Do Van", "23", "Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); 15
16
8. CÁC HÀM CÓ SẴN JavaScript có một số hàm có sẵn, gắn trực tiếp vào chính ngôn ng ữ và không nằm trong một đối tượng nào: • eval • parseInt • parseFloat a. EVAL Hàm này được sử dụng để đánh giá các biểu thức hay lệnh. Bi ểu th ức, l ệnh hay các đối tượng của thuộc tính đều có thể được đánh giá. Đặc biệt hết sức hữu ích khi đánh giá các biểu thức do người dùng đưa vào (ng ược l ại có th ể đánh giá trực tiếp). Cú pháp: returnval=eval (bất kỳ biểu thức hay lệnh hợp lệ trong Java) Ví dụ: Eval Example var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); b. PARSEINT Hàm này chuyển một chuỗi số thành số nguyên với cơ số là tham số th ứ hai (tham số này không bắt buộc). Hàm này thường được sử dụng để chuyển các số nguyên sang cơ số 10 và đảm bảo rằng các dữ liệu đưọc nhập dưới dạng ký tự được chuyển thành số trước khi tính toán. Trong trường hợp dữ liệu vào không hợp lệ, hàm parseInt sẽ đọc và chuy ển d ạng chuỗi đ ến v ị trí nó tìm thấy ký tự không phải là số. Ngoài ra hàm này còn cắt dấu ph ẩy động. Cú pháp parseInt (string, [, radix]) Ví dụ: 17
perseInt Exemple document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + ""); document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + ""); c. PARSEFLOAT Hàm này giống hàm parseInt nhưng nó chuyển chuỗi thành số biểu diễn dưới dạng dấu phẩy động. Cú pháp parseFloat (string) Ví dụ: Ví dụ sau minh hoạ cách thức xử lý của parseFloat với các kiểu chuỗi khác nhau. Hình 5.8 minh họa kết quả perseFload Exemple document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat"); document.write("137= " + parseFloat("137") + ""); document.write("137abc= " + parseFloat("137abc") + ""); document.write("abc137= " + parseFloat("abc137") + ""); document.write("1abc37= " + parseFloat("1abc37") + ""); 18
9. MẢNG (ARRAY) Mặc dù JavaScript không hỗ trợ cấu trúc dữ liệu mảng nhưng Netscape tạo ra phương thức cho phép bạn tự tạo ra các hàm khởi tạo mảng như sau: function InitArray(NumElements){ this.length = numElements; for (var x=1; x
20