Bài 2: Sử dụng JavaScript

bởiDXOan -
0
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>
<HEAD>
<TITLE>Example 2.4</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write('<IMG SRC="welcome.gif">');
document.write("<BR><H1>WELCOME TO NETSCAPE 2.1</H1>");
-->
</SCRIPT>
</BODY>
</HTML>

5. Sử dụng phương pháp writeln() với thẻ PRE
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript">
<!--
document.writeln("One,");
document.writeln("Two,");
document.write("Three");
document.write("...");
-->
</SCRIPT>
</PRE>
</BODY>
</HTML>

6. Các kí tự đặc biệt trong chuỗi
\n : New line (xuống dòng và đưa con trỏ về đầu dòng đó)
\t : Tab
\r : Carriage return (đưa con trỏ về đầu dòng hiện tại)
\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>
<HEAD>
<TITLE>Example 2.5</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
alert("Welcome to Netscape Navigator 21");
document.write('<IMG SRC="welcome.gif">');
-->
</SCRIPT>
</BODY>
</HTML>

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">
<!--
document.write("Your favorite color is:");
document.writeln(prompt("enter your favorite color:","Blue"));
-->
</SCRIPT>
</BODY>
</HTML>

Ví dụ 2: 
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write('<IMG SRC="welcome.gif">');
document.write("<H1>Greeting ,");
document.writeln(prompt("enter your name:","name"));
document.write("Welcome to netscape navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>

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">
<!--
document.write('<IMG SRC="welcome.gif">');
document.write("<H1>Greeting ," + prompt("enter your name:","name") + "Welcome to netscape navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>

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.

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.
Ví dụ 1: dùng từ khóa var để khai báo biến 
<HTML>
<HEAD>
<TITLE>Example 3.1</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!--
var name=prompt("enter your name:","name");
-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write('<IMG SRC="Welcome.gif">');
document.write("<H1>Greeting ," + name + " Welcome to netscape navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>

Ví du 2: tạo lại một giá trị mới cho biến 
<HTML>
<HEAD>
<TITLE>Example 3.2</TITLE>
<SCRIPT LANGUAGE="Javascript">
var name=prompt("enter your name:","name");
alert ("greeting " + name + " , ");
name=prompt("enter your friend's name:","friend's name");
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write('<IMG SRC="Welcome.gif">');
document.write("<H1>Greeting ," + name + " Welcome to netscape navigator 2.01 </H1>");
-->
</SCRIPT>
</BODY>
</HTML>

11. Làm việc với biến và biểu thức
• Thiết lập biểu thức
Cú pháp: <biến> <toán tử> <biểu thức>
*Toán tử:
= Thiết lập giá trị bên phải cho bên trái
Ví dụ: x=5
+= Cộng trái và phải, sau đó gán kết quả cho bên trái phép toán
Ví dụ: cho x=10,y=5
x+=y => x=15
-= Trừ bên trái cho bên phải, gán kết quả lại cho bên trái
x-=y => x=5
*= Nhân bên trái cho bên phải,gán kết quả cho bên trái
x*=y => x=50
/= Chia bên trái cho phải, gán kết quả lại cho bên trái
x/=y => x=2
%= Chia bên trái cho bên phải và lấy số dư gán lại cho bên trái
x%=y => x=0

*Các toán tử khác:
Ví dụ:
x+=15+3
=> x=18
8+5
32.5 * 72.3
12 % 5
Dấu ++ và dấu -- và dấu -
Ví dụ:
x=5;
y=++x; (=> y=6 vì x tăng lên 6)
z=x++; (=> z=6 vì sau đó x gán cho z)
sau đó x tăng 1 => x=7
Do đó ta có kết quả cuối cùng là:
x=7;y=6;z=6;
Ví dụ: x=5;
x=-x => x=-5

• Phép toán Logic
&& : và
|| : hoặc
! : not
Ví dụ:
x=5 ,y=2 ,c=3
(x>y) && (x>c)
false && anything is always false
(x>y) || (c<x) => true
!x

• Toán tử so sánh trong JavaScript
==
!=
>
<
>=
<=
Ví dụ:
1==1 => true
3<1 =>false
5 >=4 =>true
"the" != "he" => true
4=="4" =>true

• Toán tử điều kiện
Cú pháp:
(điều kiện ) ? giá trị 1 : giá trị 2
Nếu điều kiện đúng thì trả về giá trị 1
Nếu điều kiện sai thì trả về giá trị 2
Ví dụ: (day="Saturday") ? "Weekend" : "Not Saturday"

• Toán tử chuỗi
" Welcome to " + " Netscape Navigator"
Ví dụ:
Var welcome="Welcome to"
Welcome += " Netscape Navigator"
→ welcome= "Welcome to Netsacpe Navigator"

Ví dụ : Sử dụng toán tử điều kiện để kiểm tra ngỏ vào 
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG SRC="correct.gif">';
var incorrect='<IMG SRC="incorect.gif">';
var response=prompt(question,"0");
var output = (response==answer) ?
correct:incorrect;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>

12. Cấu trúc điều kiện if – else
if điều kiện
lệnh ;
if điều kiện {
Mã JavaScript
}
Ví dụ: 
if (day=="Saturday") {
document.writeln("It's the weekend");
alert("It's the weekend");
}

Ví dụ: 
If (day=="Saturday") {
document.writeln("It's the weekend");
}
If (day!="Saturday") {
document.writeln("It's not Saturday");
}

Sử dụng cấu trúc else – if cho ví dụ ở trên
If (day=="Saturday") {
document.writeln("It's the weekend");
}
else {
document.writeln("It's not Saturday");
}

Cấu trúc kết hợp :
if điều kiện 1 {
Các lệnh JavaScript
}
  if điều kiện 2 {
   Các lệnh JavaScript
  } else {
          các lệnh khác
         }
Các lệnh JavaScript
} else {
        Các lệnh khác
}
Ví dụ 1: Sử dụng phương pháp confirm() với phát biểu if 
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG SRC="correct.gif">';
var incorrect='<IMG SRC="incorect.gif">';
var response=prompt(question,"0");
if (response != answer) {
  if (confirm("Wrong ! press OK for a second change"))
response=prompt(question,"0");
}
var output = (response ==answer ) ? correct:incorrect ;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>

Ví dụ 2: Sử dụng phương pháp confirm() với phát biểu if - else
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG SRC="correct.gif">';
var incorrect='<IMG SRC="incorect.gif">';
var response=prompt(question,"0");
if (response != answer) {
 if (confirm("Wrong ! press OK for a second change"))
     response=prompt(question,"0");
}else {
     if (confirm("Correct ! press OK for a second question"))
        {
         question="What is 10*10";
         answer=100;
response=prompt(question,"0");
        }
}
var output = (response ==answer ) ? correct:incorrect ;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!--
document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>

Tags

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

You may like these posts

Post a Comment

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Previous Post Next Post

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !