›
›

Bài giảng Lập trình Web - Bài 5: Javascript

Download
12/30/2016  
CHƯƠNG VIII  
JAVASCRIPT  
12/30/2016  
JAVASCRIPT  
1
Nội dung  
Giới thiệu về Javascript  
Biến và dữ liệu  
Toán tử và biểu thức  
Các lệnh trong Javascript  
Hàm trong Javascript  
Cấu trúc điều khiển  
12/30/2016  
JAVASCRIPT  
2
1
12/30/2016  
Giới thiệu  
Javascript ra đời với tên gọi LiveScript, sau đó Nescape  
đổi tên thành Javascript.  
Javascript là một ngôn ngữ kịch bản (script) để viết kịch  
bản cho phía client.  
12/30/2016  
JAVASCRIPT  
3
Giới thiệu  
Cấu trúc của đọan Javascript:  
<Script language=”JavaScript”  
type=“text/javascript”>  
Các lệnh Javascript;  
…
</script>  
12/30/2016  
JAVASCRIPT  
4
2
12/30/2016  
Giới thiệu  
Cách sử dụng và khai báo:  
Chèn trực tiếp đọan code Javascript vào tập tin  
HTML  
Viết một tập tin Javascript riêng sau đó kết nối với  
trang web  
12/30/2016  
JAVASCRIPT  
5
Giới thiệu  
Chèn trực tiếp đọan code Javascript vào tập tin HTML:  
<HTML>  
<HEAD>  
<script language="javascript”  
type=“text/javascript”>  
document.write(“What is your name? ”);  
…
</script>  
</HEAD>  
<BODY>  
Nội dung của trang  
</BODY>  
</HTML>  
12/30/2016  
JAVASCRIPT  
6
3
12/30/2016  
Giới thiệu  
Chú ý:  
Có thể chèn đoạn code <script> </script> vào bất  
kỳ vị trí nào trong trang HTML.  
Có thể đặt trong phần <head></head> hoặc  
trong <body> </body> tuy nhiên ta nên đặt trong  
cặp tag <head> để dễ kiểm sóat mã lệnh và cũng  
dễ sửa đổi chương trình.  
12/30/2016  
JAVASCRIPT  
7
Giới thiệu  
Viết một tập tin Javascript riêng sau đó kết nối với trang  
web:  
Bước 1: Soạn thảo file Javascript có phần ở rộng .js  
Bước 2: Nhúng file .js và trang html:  
<script SRC=”fileJavascript.js”  
language="javascript”  
type=“text/javascript”>  
</script>  
12/30/2016  
JAVASCRIPT  
8
4
12/30/2016  
Giới thiệu  
Môi trường viết JAVASCRIPT  
Frontpage  
Notepad  
Visual InterDev  
Dreamweaver  
12/30/2016  
JAVASCRIPT  
9
BIẾN VÀ DỮ LIỆU  
Biến:  
Khái niệm: lưu thông tin giá trị, không xác định kiểu  
dữ liệu.  
Khai báo:  
Ví dụ:  
var tên_biến;  
var x;  
var a, b=100;  
var name=“KHOA CNTT”;  
b= “Đại Học Công Nghiệp”;  
12/30/2016  
JAVASCRIPT  
10  
5
12/30/2016  
BIẾN VÀ DỮ LIỆU  
Quy tắc đặt tên biến:  
Tên biến gồm các chữ cái và số, không dùng các ký tự  
đặc biệt như: ( , [ , { , # , & …. )  
Tên biến phải bắt đầu bằng ký tự hoặc ký tự  
Không chứa khoảng trắng, tên biến phải gợi nhớ  
Không trùng với từ khoá của JavaScript  
12/30/2016  
JAVASCRIPT  
11  
BIẾN VÀ DỮ LIỆU  
Có 2 xuất biến:  
document.write(tên_biến);  
document.getElementById(“ID”).innerHTML=biến;  
Ví dụ:  
var a=“100”;  
var ten=“Minh”;  
document.write(a);  
document.getElementById(“tt”).innerHTML=ten;  
12/30/2016  
JAVASCRIPT  
12  
6
12/30/2016  
BIẾN VÀ DỮ LIỆU  
Dữ liệu:  
Kiểu số: số thập phân, số nguyên  
Kiểu chuỗi: một biến kiểu chuỗi đặt trong cặp dấu  
nháy đôi (“ ”) hoặc đơn (‘ ’)  
Ví dụ:  
var s1, s2, s3 ;  
s1=15;  
s2=’Hello World’ ;  
12/30/2016  
JAVASCRIPT  
13  
BIẾN VÀ DỮ LIỆU  
Kiểu Boolean: Là dữ liệu chỉ có 2 giá trị False  
hoặc True  
Ví dụ:  
var flag;  
flag=true;  
Kiểu Null: biến không gán cho giá trị  
12/30/2016  
JAVASCRIPT  
14  
7
12/30/2016  
Toán tử số học  
Toán Tử  
Chức Năng  
Ví dụ  
Kết quả  
+
Cộng  
x=2; x+2  
x=2; 5-x  
4
3
-
*
Trừ  
Nhân  
x=4; x*5  
15/5; 5/2  
5%2; 10%2  
x=5; x++  
x=5; x--  
20  
3; 2.5  
1; 0  
x=6  
x=4  
/
Chia  
%
++  
--  
Lấy phần dư  
Tăng giá trị lên 1  
Giảm giá trị xuống 1  
12/30/2016  
JAVASCRIPT  
15  
Toán tử gán  
Tóan Tử  
Ví dụ  
x = y  
Tương đương  
=
+=  
-=  
x= y  
x += y  
x -= y  
x *= y  
x /= y  
x%=y  
x = x+y  
x = x-y  
x = x*y  
x= x/y  
*=  
/=  
%=  
x = x%y  
12/30/2016  
JAVASCRIPT  
16  
8
12/30/2016  
Toán tử so sánh  
Tóan Tử  
= =  
!=  
Chức Năng  
Ví dụ  
5==8 returns false  
5!=8 returns true  
5>8 returns false  
5<8 returns true  
5>=8 returns false  
5<=8 returns true  
bằng  
Không bằng  
lớn hơn  
>
nhỏ hơn  
<
lớn hợn hoặc bằng  
nhỏ hơn hoặc bằng  
JAVASCRIPT  
>=  
<=  
12/30/2016  
17  
Toán tử so sánh  
Tóan Tử Chức Năng  
Ví dụ  
x =6; y =3 ;  
(x < 10 && y > 1) returns true  
&&  
và  
hoặc  
not  
x = 6 ; y =3  
(x==5 || y==5) returns false  
||  
!
x=6; y =3;  
!(x==y) returns true  
12/30/2016  
JAVASCRIPT  
18  
9
12/30/2016  
Toán tử nối chuỗi  
+ : Là phép toán nối hai chuỗi với nhau  
Ví dụ:  
<html>  
<script>  
var txt1=”Chào bạn ”;  
var ten=“Mai";  
document.write('<h2>'+txt1+ten+'</h2>');  
</script>  
</html>  
12/30/2016  
JAVASCRIPT  
19  
Một số ký tự đặc biệt:  
\n ( new line)  
\t (tab)  
\b (BackSpace)  
\& (dấu &)  
\”(“)  
12/30/2016  
JAVASCRIPT  
20  
10  
12/30/2016  
Các lệnh trong Javascript  
Statement (câu lệnh):  
Statement được kết thúc bằng dấu chấm phẩy(;)  
ví dụ:  
document.write(“Hello”);  
Block (Khối lệnh):  
Block là tập hợp nhiều statements được bao bọc bởi  
cặp dấu { … }  
12/30/2016  
JAVASCRIPT  
21  
Các lệnh trong Javascript  
Comment (Lời chú thích):  
JavaScript hỗ trợ 2 loại comment:  
Chú thích trên một dòng: dùng cặp dấu //  
Chú thích trên nhiều dòng: dùng cặp dấu /*…*/  
document.write(“Welcome to  
JavaScript”);  
//câu lệnh xuất dữ liệu  
12/30/2016  
JAVASCRIPT  
22  
11  
12/30/2016  
Các câu lệnh cơ bản  
Xuất dữ liệu ra trang Web:  
Cách 1:  
document.write(value) ;  
document.writeln(value);//xuống dòng  
Trong đó value:  
Dữ liệu chuỗi: luôn đặt “ ”  
Biến: không có dấu “ ”  
Chuỗi và biến : dùng toán tử “+” nối biến và chuỗi  
Cách 2: Id.innerHTML=“Giá trị”;  
12/30/2016  
JAVASCRIPT  
23  
Các câu lệnh cơ bản  
Ví dụ:  
doument.write(“Chúc mừng năm mới” );  
doument.write(“String ” + variable );  
noidung.innerHTML= “Chúc mừng năm mới”  
Chú ý:  
Xuất tag HTML thì cặp tag đó cũng phải đặt trong cặp dấu  
“ ”  
document.write(“<table>”);  
document.write(“<tr>”);  
12/30/2016  
JAVASCRIPT  
24  
12  
12/30/2016  
<BODY>  
<Script Language=”JavaScript”>  
document.write ("<H1>Hello<H1>");  
document.write ("<font color=red>World</font>");  
</Script>  
</BODY>  
<BODY>  
<Script Language=”JavaScript”>  
document.writeln ("<b>Hello</b>");  
document.writeln (“<b>World</b>");  
</Script>  
</BODY>  
12/30/2016  
JAVASCRIPT  
25  
HÀM TRONG JAVASCRIPT  
Hàm là một đọan chương trình có thể được sử dụng  
nhiều lần trong một chương trình để thực hiện một tác  
vụ nào đó.  
Xây dựng hàm:  
12/30/2016  
JAVASCRIPT  
26  
13  
12/30/2016  
HÀM TRONG JAVASCRIPT  
Cách gọi hàm  
Hàm sẽ không thực hiện cho đến khi nó được gọi.  
Tên_hàm(đối số);  
Tên_hàm();  
12/30/2016  
JAVASCRIPT  
27  
HÀM TRONG JAVASCRIPT  
Đối với hàm không có giá trị trả về :  
Tên_hàm(đối số);  
Ví dụ: xuat(SV);  
Đối với hàm có giá trị trả về :  
Tên_biến= Tên_hàm(đối số);  
Ví dụ: kq= TinhDT(chieudai,chieurong);  
12/30/2016  
JAVASCRIPT  
28  
14  
12/30/2016  
HÀM TRONG JAVASCRIPT  
function Display(user , pwd)  
{
document.write(“UserName cua ban  
la:” + user) ;  
document.write(“Password cua ban  
la:” + pwd) ;  
[return] ;  
}
Lời gọi hàm:  
Display(txt1,txt2);  
12/30/2016  
JAVASCRIPT  
29  
HÀM TRONG JAVASCRIPT  
function total(a,b)  
{
var c=0;  
c=a+b;  
return c;  
}
Lời gọi hàm:  
kq=total(s1,s2);  
12/30/2016  
JAVASCRIPT  
30  
15  
12/30/2016  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
alert(): dùng hiển thị một 1 message chứa 1 button OK  
Cú pháp:  
alert(“nội dung Message”);  
12/30/2016  
JAVASCRIPT  
31  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
prompt(): Dùng để nhập dữ liệu từ trường text box của  
message. Hàm trả về giá trị chuỗi mà người sử dụng nhập  
vào  
Cú pháp:  
Tên_biến= prompt(“message”,giá trị);  
12/30/2016  
JAVASCRIPT  
32  
16  
12/30/2016  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
12/30/2016  
JAVASCRIPT  
33  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
confirm(): Hiển thị một thông báo có hai chọn lựa OK  
và Cancel. Hàm trả về giá trị là true khi người nhấn OK  
và false khi nhấn Cancel  
Cú pháp:  
Tên_biến=confirm(“Chuỗi Message”);  
12/30/2016  
JAVASCRIPT  
34  
17  
12/30/2016  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
12/30/2016  
JAVASCRIPT  
35  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
eval(chuỗi số):trả về giá trị số của một chuỗi số  
isNaN(str):  
True nếu str là chuỗi  
False nếu str là chuỗi số.  
12/30/2016  
JAVASCRIPT  
36  
18  
12/30/2016  
CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT  
Ví dụ:  
var a=prompt(“nhap so thu 1”, 100); “100”;  
a=eval(a);100  
var ten=prompt(“Nhap ten ban”, “Minh”);  
var flag=isNaN(ten); true  
var soluong=prompt(“Nhap so luong”);  
var flag=isNaN(soluong);false  
12/30/2016  
JAVASCRIPT  
37  
CẤU TRÚC ĐIỀU KIỂN  
12/30/2016  
JAVASCRIPT  
38  
19  
12/30/2016  
Nội dung  
If … Else  
Switch … case  
For  
Do …while  
While…  
12/30/2016  
JAVASCRIPT  
39  
Ví dụ: Viết chương trình nhập 3 cạnh của tam giác sau đó xuất ra màn  
hình đó là tam giác gì?  
<Body>  
<script language=“JavaScript” type=“text/javascript”>  
a=eval(prompt(“Nhap canh a”));  
b=eval(prompt(“Nhap canh b”));  
c=eval(prompt(“Nhap canh c”));  
if(a= =b && b= = c && c= = a)  
Tam giac đều ;  
else  
if(a= =b || b= = c || c= = a)  
Tam giac cân  
else  
Tam giác thuong  
</script>  
</Body>  
12/30/2016  
JAVASCRIPT  
40  
20  
Tải về để xem bản đầy đủ
pdf 22 trang baolam 22781 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Bài 5: Javascript", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_lap_trinh_web_bai_5_javascript.pdf