Hướng dẫn chi tiết lập trình trang web bằng Javascript
1
2
JAVASCRIPT
Bài 1: TỔNG QUAN VỀ JAVASCRIPT.
1. Đặc tính của ngôn ngữ Javascript:
avascript là một ngôn ngữ thông dịch (interpreter), chương trình nguồn của nó được nhúng (embedded)
hoặc tích hợp (integated) vào tập tin HTML chuẩn. Khi file được load trong Browser (có support cho
JavaScript), Browser sẽ thông dịch các Script và thực hiện các công việc xác định. Chương trình nguồn
JavaScript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được
hiển thị. Javascript là một ngôn ngữ có đặc tính:
. • Đơn giản.
. • Động (Dynamic).
. • Hướng đối tượng (Object Oriented).
2. Ngôn ngữ JavaScript:
Một trong những đặc tính quan trọng của ngôn ngữ JavaScript là khả năng tạo và sử dụng các đối tượng
(Object). Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng. Trong JavaScript ,các
Object được nhìn theo 2 khía cạnh:
.a. Các Object đã tồn tại.
.b. Các Object do người lập trình xây dựng.
Trong các Object đã tồn tại được chia thành 2 kiểu:
.a. Các Object của JavaScript (JavaScript Built-in Object).
.b. Các đối tượng được cung cấp bởi môi trường Netscape.
3. Built-in Object trong JavaScript:
JavaScript cung cấp 1 bộ các Built-in Object để cung cấp các thông tin về sự hiện hành của các đối tượng
được load trong trang Web và nội dung của nó.Các đối tượng này bao gồm các phương pháp (Method) làm
việc với các thuộc tính (Properties) của nó.
4. Các đối tượng được cung cấp bởi môi trường Netscape:
Netscape Navigator cung cấp các đối tượng cho phép JavaScript tương tác với file HTML, các đối tượng này
cho phép chúng ta điều khiển việc hiển thị thông tin vàđáp ứng các sự kiện trong môi trường Navigator.Ví dụ
Đối tượng Mô tả
Window Cung cấp các phương pháp và các tính chất cho cửa sổ hiện hành của trình
duyệt,bao gồm các đối tượng cho mỗi frame.
Location Cung cấp các tính chất và phương pháp làm việc với các địa chỉ URL
hiện hành được mở. History Các đối tượng history cung cấp
thông tin về các danh sách cũ và có thể giới hạn sự tương tác
với danh sách.
Document Đây là một đối tượng được sử dụng nhiều nhất .Nó chứa đựng các Đối
tượng,tính chất và các phương pháp làm việc với các thành phần của tài liệu
nhưcác :form,link,anchor,applet.
5. Các đối tượng do người lập trình xây dựng:
a. Định nghĩa thuộc tính của đối tượng: (Object Properties)
Cú pháp : Object-name.Property-name (tên đối tượng.tên đặc tính)
Ví dụ :Một đối tượng airplane có các thuộc tính nhưsau:
Airplane.model Airplane.maxspeed
Airplane.price Airplane.fuel
3
Airplane.seating
b. Thêm các phương pháp cho đối tượng:( Method to Object)
Sau khi đã có các thông tin về airplane ta tiếp tục xây dựng phương pháp để sử dụng thông tin
này.Ví dụ bạn muốn in ra mô tả của airplane hoặc tính toán khoảng cách tối đa của cuộc hành
trình với nhiên liệu đã có:
Airplane.description()
Airplane.distance()
c. Tạo một instance của đối tượng:
Trước khi thao tác với một đối tượng của JavaScript ta phải tạo một instance cho đối tượng đó.
6 . Nhúng JavaScript vào trong tập tin HTML:
Cú pháp:
<SCRIPT LANGUAGE=”JavaScript”>
JavaScript Program
</SCRIPT>
Thuộc tính của thẻ SCRIPT
.+ SRC :Địa chỉ URL chỉ đến tập tin chương trình JavaScript (*.js)
.+ LANGUAGE: Chỉ định ngôn ngữ được sử dụng trong Script và các phiên bản sử dụng (ví dụ như
:JavaScript ,JavaScript .1.2 vv… ,VBScript).
7. Ẩn các Scripts đối với các Browser không cung cấp JavaScript:
<SCRIPT LANGUAGE=”JavaScript”>
<!- - Dòng dấu Script đối với các Browser không cung cấp (support)
JavaScript Program
//Dòng kết thúc việc dấu Script và chú thích - - >
</SCRIPT>
8. Sử dụng tập tin JavaScript bên ngoài :
<SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.hcmuns.edu.vn/scroll.js”>
<!- - Dòng dấu Script đối với các Browser không cung cấp (support)
JavaScript Program
//Dòng kết thúc việc dấu Script và chú thích - - >
</SCRIPT>
9. Thêm chương trình vào tập tin HTML:
<HTML>
<HEAD>
<TITLE>Listing 2.1</TITLE>
</HEAD>
<BODY>
Here is result:
<SCRIPT LANGUAGE="Javascript">
4
<!--
document.writeln("It work<BR>");
-->
</SCRIPT>
</BODY>
</HTML>
Bài 2: SỬDỤNG JAVASCRIPT
1. Cú pháp cơbản của lệnh :
JavaScript xây dựng các hàm,các phát biểu,các toán tử và các biểu thức trên cùng một dòng và
kết thúc bằng ;
Ví dụ: document.writeln("It work<BR>");
2. Các khối lệnh:
Nhiều dòng lệnh có thể được liên kết với nhau vàđược bao bởi { } Ví dụ:
{
document.writeln("Does It work");
document.writeln("It work!");
}
3. Xuất dữ liệu ra cửa sổ trình duyệt:
Dùng 2 phương pháp document.write() và document.writeln()
Ví dụ:
document.write(“Test”);
document.writeln(“Test”);
4. Xuất các thẻ HTML từ JavaScript
Ví dụ 1:
<HTML> <HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
This is text plain <BR>
<B>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write("This is text bold </B>");
- ->
</SCRIPT>
</BODY>
</HTML>
Ví dụ 2:
<HTML> document.write('<IMG
<HEAD> SRC="welcome.gif">');
<TITLE>Example 2.4 </TITLE>
document.write("<BR><H1>WELCOME TO
</HEAD> NETSCAPE 2.1</H1>");
<BODY> - ->
<SCRIPT LANGUAGE="Javascript"> </SCRIPT>
<!- - </BODY>
</HTML>
5
1. 5. Sử dụng phương pháp writeln() với thẻ PRE:
2. 6. Các kí tự đặc biệt trong chuổi:
<HTML>
document.writeln("Two,");
<HEAD>
document.write("Three");
<TITLE>Outputting Text</TITLE>
document.write("...");
</HEAD> - ->
<BODY> </SCRIPT>
<PRE> </PRE>
<SCRIPT LANGUAGE="Javascript"> </BODY>
<!- - </HTML>
document.writeln("One,");
\n : New line \t : Tab \r : carriage return \f : form feed \b: backspace Ví dụ: document.writeln("It work!\n");
7. Làm việc với các dialog boxes
Sử dụng hàm alert() để hiển thị thông báo trong một hộp.
Ví dụ:
<HTML>
alert("Welcome to Netscape Navigator
<HEAD> 21");
<TITLE>Example 2.5 </TITLE> document.write('<IMG
</HEAD> SRC="welcome.gif">');
<BODY> - ->
<SCRIPT LANGUAGE="Javascript"> </SCRIPT>
<!- - </BODY>
8. Tương tác với người sử dụng:
Sử dụng phương pháp promt() để tương tác với người sử dụng.
Ví dụ 1:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
Ví dụ 2:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write('<IMG
SRC="welcome.gif">');
Sử dụng dấu + để cộng 2 chuổi đơn lại: Ví dụ 3:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
6
document.write('<IMG
SRC="welcome.gif">');
9. Các kiểu dữ liệu trong JavaScript:
a. Dữ liệu kiểu số:
+ Số nguyên: ví dụ 720
+ Số Octal: ví dụ :056
+ Số Hexa:ví dụ:0x5F
+ Số thập phân :ví dụ :7.24 , -34.2 ,2E3
b. Dữ liệu kiểu chuổi:
ví dụ: ” Hello”
’245’
“ “
c. Dữ liệu kiểu Boolean:
Kết quả trả về là true hoặc false.
document.write("Your favorite color
is:");
document.writeln(prompt("enter your
favorite color:","Blue"));
- ->
</SCRIPT>
</BODY>
</HTML>
document.write("<H1>Greeting ,");
document.writeln(prompt("enter your
name:","name"));
document.write("Welcome to netscape
navigator 2.01 </H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
document.write("<H1>Greeting ," +
prompt("enter your name:","name") +"
Welcome to netscape navigator 2.01
</H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
d. Dữ liệu kiểu null:
Trả về giá trị rỗng.
e. Dữ liệu kiểu văn bản (giống nhưkiểu chuổi)
10. Tạo biến trong JavaScript:
Var example;
Var example=”Hello”;
Ta có thể dùng document.write(example); để xuất nội dung của biến.
có thể bạn quan tâm
NỘI THẤT : TRANG TRÍ NHÀ Ở BẰNG CÂY CẢNH VÀ HOA (Tiết 1)
2
681
285
Giáo án, bài giảng lớp 6
2
(New)
NỘI THẤT : TRANG TRÍ NHÀ Ở BẰNG CÂY C ẢNH VÀ HOA (Tiết 2)
2
672
294
Giáo án, bài giảng lớp 6
2
(New)
NỘI THẤT : TRANG TRÍ NHÀ Ở BẰNG MỘT SỐ ĐỒ VẬT (Tiết 1)
2
720
307
Giáo án, bài giảng lớp 6
2
(New)
NỘI THẤT : TRANG TRÍ NHÀ Ở BẰNG MỘT SỐ ĐỒ VẬT (Tiết 2)
2
847
311
Giáo án, bài giảng lớp 6
2
(New)
Những điều cần biết về lập trình Javascript
38
650
339
Lập trình
38
(New)
Khả năng tương thích trình duyệt trong JavaScript
3
684
297
Lập trình
3
(New)
Cách kích hoạt JavaScript trong các trình duyệt
2
748
275
Lập trình
2
(New)
Hướng dẫn Giải bài tập Vật lý 10: Các dạng cân bằng. Cân bằng của một...
2
633
285
Giải bài tập các môn
2
(New)
thông tin tài liệu
Tất tần tật những gì cần biết về lập trình trang web bằng Javascript đều gọi gọn trong tài liệu này
Mở rộng để xem thêm
từ khóa liên quan
tài liệu mới trong mục này
tài liệu hot trong mục này
tài liệu giúp tôi
Nếu bạn không tìm thấy tài liệu mình cần có thể gửi yêu cầu ở đây để chúng tôi tìm giúp bạn!
×
