LAB 1: JAVASCRIPT
NHẬP MÔN JAVASCRIPT
A – LÝ THUYẾT
I – GIỚI THIỆU VỀ JAVASCRIPT
1 – Javascript là gì
Javascript là một
ngôn ngữ lập trình nhẹ, được thiết kế để tạo ra các tương tác vào các trang
HTML, tạo nên các hiệu ứng và ứng dụng mượt mà cho web.
2 – Javascript dùng để làm
gì
Trong khuôn khổ bài học này, chúng ta sẽ
nghiên cứu các ứng dụng cơ bản nhất của Javascript đó là.
Tạo các hiệu ứng
mượt mà cho trang web
Tạo các tương tác
giữa người dùng và website
Thay đổi nội dung
văn bản HTML
II – LÀM VIỆC VỚI JAVASCRIPT TRONG MÔI TRƯỜNG HTML
1 – Nhúng mã Script vào
văn bản HTML
Để nhúng mã Script
vào một văn bản HTML, việc đầu tiên đó là chúng ta phải tạo ra một vùng làm
việc với Javascript ngay tại nơi mà chúng ta muốn nhúng mã Script với cú pháp
như sau:
2 – Xuất nội dung ra trình
duyệt bằng Javascript
Để xuất nội dung ra
trình duyệt chúng ta đưa vào trong vùng làm việc với Javascript đoạn mã sau.
Cũng chính là cú pháp xuất nội dung bất kỳ ra trình duyệt
3 – Đưa một file
Javascript từ bên ngoài vào văn bản HTML hiện hành
Để có thể lấy nội dung từ một file Javascript bên ngoài
đưa vào một văn bản HTML hiên hành chúng ta có 2 bước làm như sau:
- Đầu tiên phải tạo một file
Javascript riêng biệt bên ngoài với tên tuy ý và phần mở rộng bắt buộc
phải là .js. Ví dụ script.js với nội dung như sau:
- Tiếp theo tại văn bản HTML hiện
hành, nếu muốn nội dung trong file script.js xuất hiện ở đâu thì cần triệu
gọi file script.js ở đó như sau:
III – GIAO TIẾP VỚI NGƯỜI SỬ DỤNG
1 – Hộp thoại alert
Hộp thoại này cung
cấp cho người dùng một hộp thoại với nội dung thông báo kèm một button OK. Khi đó file sẽ chờ cho đến khi
người sử dụng nhấn vào nút OK rồi mới tiếp tục thực hiện.
Thông thường, cách thức alert() được sử dụng trong các trường hợp như:
- Thông tin đa và form không hợp lệ
- Kết quả sau khi tính toán không
hợp lệ
- Khi dịch vụ cha sẵn sàng để truy
nhập dữ liệu
- …
Mã Code:
Hình ảnh hiển thị tương
ứng:
2 – Hộp thoại prompt
prompt() tạo ra một hộp hội thoại với một dòng thông báo do bạn đưa vào, nhưng ngoài ra nó còn cung cấp một trường để nhập dữ liệu vào. Người sử dụng có thể nhập vào trường đó rồi kích vào OK. Khi đó, ta có thể xử lý dữ liệu do người sử dụng vừa đa vào.
Mã Code:
Hình ảnh hiển thị tương
ứng:
Để có thể hiển thị được giá trị mà
chúng ta điền vào trường textbox ở hộp thoại prompt ra trình duyệt, chúng ta
phải kết hợp hộp thoại prompt với cách thức xuất nội dung ra trình duyệt ở phần
trước như sau:
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
Bài 1:
Khởi tạo một văn
bản HTML mới và hiển thị nội dung sau bằng Javascript kết hợp với CSS: “Loanha Đào Tạo Trực Tuyến Lập Trình – Thiết Kế - Đồ Họa Website”. Dòng chữ
này phải được in đậm và có mầu đỏ, có size là 12px nằm ngay trung tâm văn bản
HTML. Xem file bài giải bai_tap_1.html để việc thiết kế được chính xác hơn
Bài 2:
Khởi tạo một văn bản HTML và sử dụng Javascript để thực hiện ý tưởng như file bài giải bai_tap_2.html
II – BÀI TẬP VỀ NHÀ
Bài 3:
Khởi tạo một văn bản HTML và sử dụng Javascript để thực hiện ý tưởng như file bài giải bai_tap_3.html
Đáp án
Bài 1:
<html>
<head><title>Bai 11 -->Bai_tap_1.html</title>
<style language="javascript">
p{
font-family: arial;
font-size: 16px;
font-weight: bold;
color: red;
text-align: center;
text-transform: capitalize;
}
</style>
</head>
<body>
<script type="text/javascript">
document.write("<p>Loanha Đào Tạo Trực Tuyến Lập Trình – Thiết Kế - Đồ Họa Website</p>");
</script>
</body>
</html>
Bài 2:
<html>
<head><title>Bai 11 -->Bai_tap_2.html</title>
<style language="javascript">
</style>
</head>
<body>
<script type="text/javascript">
alert("Chào mừng bạn đã tham gia khóa học Thiết kế Website Tĩnh!");
alert("Bạn vui lòng không phát tán rộng rãi các tài liệu học tập được cung cấp");
alert("Để có thể bắt đầu tham gia học tập Online, bạn vui lòng cung cấp một số thông tin");
document.write(prompt("Bạn vui lòng nhập Họ và Tên đầy đủ xuống trường phía dưới đây"));
</script>
</body>
</html>
Bài 3:
<html>
<head><title>Bai 11 -->Bai_tap_3.html</title>
<style language="javascript">
p{
font-weight: bold;
font-family: arial;
font-size: 12px;
}
a{
font-weight: normal;
}
</style>
</head>
<body>
<p>Email đăng nhập hệ thống của bạn là:
<a href="#">
<script type="text/javascript">
document.write(prompt("Bạn vui lòng cung cấp Email dùng để đăng nhập hệ thống!"));
</script>
</a>
</p>
</body>
</html>
>>Xem bài trước: Bài 13 - Cắt giao diện web bằng photoshop phần 2
>>Xem bài tiếp theo: Bài 15 Biến và các kiểu dữ liệu trong javascript
No comments:
Post a Comment