JAVASCRIPT

1, Mở đầu về Javascript

Javascript là ngôn ngữ thứ hai mình muốn giời thiệu với các bạn vừa mới bước chân vào con đường wapmaster, rất nhiều các cao thủ thiết kế wap,web sử dụng ngôn ngữ này và khiến trang của họ trỡ nên sống động, có thể nói javascript đã trỡ thành một ngôn ngữ không thể không nhắc tới khi nói tới lĩnh vực thiết kế website.

Sau đây là một số thông tin mà mình sưu tầm để chúng ta còn đi ba hoa JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web,nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js(sau này mình gọi tắt javascript là js luôn cho nó ngắn) là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với ECMA-262 bản 3. ECMAScript là phiên bản chuẩn hóa của JavaScript.

2, Cú pháp JS

Javascript thường được hèn vào một trang web, nếu không muốn nói là sinh ra chỉ để chèn vào trang web. Ta có tể chèn Javascript vào html rất đơn giản với cái thẻ script, sau đó chèn code javascript vào bên trong nội dung thẻ script.

Mã nguồn:[Chọn]

<script>document.write("Hello World!");</script>

kết quả:

Hello World!

Điều đặt biệt là js có thể xuất ra html.Đây dĩ nhiên là điều không thể thiếu để lập trình web với một ngôn ngữ lập trình!

Mã nguồn:[Chọn]

<script>document.write("<b>Hello, what's your name!?</b>");document.write("<b>My name:</b> <input type=\"text\" />");</script>

bạn hãy thử xem nhé

Câu hỏi đặt ra là:tại sao lại không viết mọi thứ một cách bình thường! hay bạn thắc mắc về bất cứ điều gì!

Câu trả lời sẽ nằm ở các phần sau!

Bây giờ chú ý tới mặt cú pháp!bạn để ý trước, mỗi lần mình viết document.write()thì đó là một câu lệnh, mỗi câu lệnh:

Mã nguồn:[Chọn]

Câu lệnh là đơn vị cơ bản của một ngôn ngữ lập trình. Trong trường hợp đặc biệt, nó có thể cũng trở thành một đơn vị thao tác của máy tính điện tử hay còn gọi là một chỉ thị.Vì mức độ phức tạp, việc dùng các chỉ thị để trực tiếp điều khiển máy tính sẽ rất ít thông dụng. Thay vào đó, người ta ghép một số tổ hợp của các chỉ thị để cho máy thi hành đươc một động tác lớn hơn goi là câu lệnh. Như vậy mỗi câu lệnh bao gồm một hay một số mệnh lệnh máy tính được sắp xếp theo trình tự xác định và nhằm mụch đích ra lệnh cho CPU tiến hành một thao tác cố định có ý nghĩa.Tùy theo ngôn ngữ lập trình, các câu lệnh sẽ có cấu trúc khác nhau và có trật tự sắp xếp nhất định. Trật tự này thường không đổi và được gọi là cú pháp (syntax).Câu lệnh có thể hiểu như là mệnhđề cơ bản có thể được cấu trúc thông qua việc xử dụng các từ khóa (đã được định nghĩa từ trước bởi ngôn ngữ lập trình) hoặc là có thể tạo bởi các chỉ thị từ các cấu trúc ngữ pháp hay cú pháp đã được định nghiã sẵn. Các câu lệnh của một chương trình dùng để chỉ thị cho máy tính biết làm gì, xử lý như thế nàovới các dữ liệu và từ đó tiến hànhcác phép tính toán hay biến đổi dữ liệu để đạt được kết quả.

Và kết thúc mỗi câu lệnh, ta phải kết thúc với dấu;

*Chèn javascript vào HTML

Các ví dụ ở trên đả nêu ra cách chèn javascript vào HTML bình thường với cặp thẻ <script>

Nếu bạn có một đoạn javascript, và muốn dùng nó cho nhiều trang web, bạn không cần phải viết lại. Save nội dung javascript (không có hai thẻ <script> nhé) lại với một file có phần mở rộng là.js (giống như với html là .html thôi)

Đặt thêm thuộc tính src vào thẻ script mở:

VD:

Mã nguồn:[Chọn]

<script></script>

Bên trong thẻ script không cần chứa bất cứ gì nhưng nội dung của file chứa javascript đả được thêm vào trang html.

Sau này khi các bạn có đã có thể viết những hàm cho riêng mình, đặt biệt là với những hàm dài, công dụng trên nhiều site, cách làm này rất hữu ích.

3, Các kiểu giá trị JS - P1

Javascript thuộc loại ngôn ngữ mà kiểu của biến được đoán, một số ngôn ngữ cần được khái báo trước kiểu biến như pascal chẵn hạn!

Một số kiểu giá trị:

Boolean

Boolean là gái trị logic có hai giá trị là TRUE hoặc FALSE.(TRUSE có nghĩa là đúng, FALSE là sai)

Số

là loại giá trị dùng đễ tính toán đó, đừng nói bạn không biết số là gì nha! Số thì có số động, số nguyên......

Chuỗi

Chuỗi là các kí tự bảng chữ cái + kí tự đặc biệt + số, nói chung là bất kì cái gì mà ta viết ra trên bàng phím được, thì là chuỗi!

Phân biệt kiểu chuỗi và số ta gán biến a và b với các giá trị như sau:

a=1;

b="1";

a sẽ mang gái trị số, còn b mang giá trị chuỗi ==> đặt bên trong dấu nháy là chuỗi!

4, Các kiểu giá trị JS - P2

Các bạn đã làm quen với hai khái niệm đầu tiên là hàm và biến, ở đây nếu bạn đã từng học qua bất kì một ngôn ngữ lập trình nào thì mọi việc sẽ được đơn giản hoá, nhưng còn với những người không chuyên như tụi mình, mọi việc sẽ hơi rắc rối phải dành riêng một bài để nói cho rõ!

Ví dụ mình có đoạn code các bạn tự làm thử xem nhá mình đang nghèo thời gian và phải hoàn thiện wap đã

1

Mã nguồn:[Chọn]

<script>alert("aaaaaaaaaaaaaaaaaa");</script>

-Với đoạn code tương tự nhưng:

2

Mã nguồn:[Chọn]

<script>thongbao="aaaaaaaaaaaaaaaaaa";alert(thongbao);</script>

-và đoạn code thứ hai:

3

Mã nguồn:[Chọn]

<script>thongbao="aaaaaaaaaaaaaaaaaa";alert("thongbao");</script>

-Cũng một loạt ví dụ tương tự nhưng với nội dung là một con số:

4

Mã nguồn:[Chọn]

<script>alert("1111111111");</script>

-và:

5

Mã nguồn:[Chọn]

<script>alert(1111111111);</script>

-Bây giờ ta gán cho một biến giá trị 11111111111

6

Mã nguồn:[Chọn]

<script>thongbao=1111111111;alert(thongbao);</script>

-và:

7

Mã nguồn:[Chọn]

<script>thongbao="1111111111";alert(thongbao);</script>

-Chắc các bạn cũng nhận ra, sự đặc biệt mình muốn nhấn mạnh chính là các dấu ("), từ trong phép gán giá trị tới nội dung hàm.Ờ ví dụ2,3chúng ta nhận ra ngay sự khác biệt! giữ hai kết qua aaaaaaaaaa và thongbao, thật sự là như thế này:thongbao="aaaaaaaaaaaaa";dòng này có nghĩa là gán giá trị là chuỗi aaaaaaaaa cho biến thongbao.

alert(thongbao); lệnh alert sẽ lấy giá trị mà biến thongbao mang và in ra, trong lúc này thongbao có giá trị là aaaaaaaaa. Nhưng với dòng lệnh:alert("thongbao");dòng này có nghĩa là in ra chuỗi thongbao.

Như vậy, ta thấy được rằng giá trị chuỗi sẽ được đặt trong cặp dấu "

Còn với các ví dụ 4,5,6,7 các bạn biết tại sao kết quả lúc nào cũng là những con số một tuy rõ ràng là có sự khác biệt giữa các dùng các dấu "Thật ra là vì :alert("1111111111");các con số một ở đây hiễu là chuỗi dạng số.

alert(1111111111);còn đây là con số 1111111111.Kí tự chữ cái lúc nào cũng là chuỗi, trừ phi là tên riêng của cái gì đó, số mà đặt bên trong dấu ngoặc kép thì trở thành chuỗi.Để dùng giá trị của biến thì biến không được đặt trong dấu ngoặc kép giống như ở ví dụ 3, ý của người lập trình là hàm này sẽ in ra giá trị của biến thongbao, nhưng lại nhầm khiến giá trị in ra là chuỗi thongbao.Đây cũng là lí do mà tên biến bắt buộc phải bắt đầu với kí tự chữ cái, thử nghĩ xem, một anh chàng quyết định đặt tên biến là 123 và giá trị của nó là 456 rắc rối sẽ nảy sinh ra ở đây!

Còn đây là ví dụ cuối cùng của bài này:

8

Mã nguồn:[Chọn]

<script>a=2001;alert("Anh yêu em từ năm anh"+a);</script>

-Hoặc là với ví dụ này

9

Mã nguồn:[Chọn]

<script>b="Anh yêu em từ năm anh ";a=15;alert(b+(a+1)+"tuôi");</script>

Làm ơn đừng chú ý tới cái dấu cộng, chỉ hãy hiểu là dấu + dùng để nối hai thứ đó lại.

Ví dụ này vừa thể hiện rỏ mối quan hệ giữa biến, chuỗi và số, tất nhiên là tại sao cần dùng tới biến. ví như ví dụ 8, bạn nói bạn yêu một cô từ năm 2001, lỡ vài năm sau chia tay, bạn muốn dùng lại trang web này tặng cho một cô khác, lúc này bạn thấy mọi việc đơn giản là đỗi năm quen biết lại, nhưng hãy đặt trường hợp cả chương trình không chỉ có một dòng có năm 2001 thì để sữa lại mọi chuyện sẽ đơn giàn hơn nhiều nếu ta dùng tới biến.Còn ở ví dụ 9, các cặp dấu () cũng thể hiện thứ tự ưu tiên cho các bước thực hiện như trong môn toán, mình chỉ viết ví dụ này cho các bạn hiểu thêm.

5, JS Phép toán - câu lệnh gán

Câu lệnh gán:

Lệnh gán là 1 trong những lệnh cơ bản nhất của ngôn ngữ lập trình, trong javascript có dạng:

<tên biến>=<biểu thức>;

nếu gán biến cho gái trị chuỗi:<tên biến>="<biểu thức>";

cần có thêm cặp dấu nháy.

Các bạn sẽ tìm hiểu sâu hơn cách dặt tên biến ở bài cách đặt tên biến

1.Toán tử số học(+[cộng], -[trừ],*[nhân], /[chia] , %[chia lấy dư],

++[tự tăng 1], --[tự giàm 1])

+ : Phép cộng.(khỏi giả thích)

- : Phép trừ.(khỏi giả thích)

* : Phép nhân.(khỏi giả thích)

/: Phép chia.(khỏi giả thích)

% : Phép chia lấy phần dư.

VD: 5/3 được 1 dư 2 thì5%3=2, ++: Phép tăng một đơn vị.

VD:

1++=2;

5++=6

--: Phép giảm một đơn vị.

VD:

1--=0;

9--=8

2.Toán tử so sánh

== : So sánh bằng.

> : So sánh lớn hơn.

< : Nhỏ hơn.

>= : So sánh lớn hơn hoặc bằng.

<= : Nhỏ hơn hoặc bằng.

!= : So sánh khác

Chú ý: chỉ có <= (bé hơn hoặc bằng) chứ không có =<(bằng hoặc bé hơn, cũng như thế đối với >=, không có chuyện =>)

3.Toán tử logic

&& (and): Giá trị đúng khi cả hai cùng đúng.

VD:nếu(anh yêu em)và(em yêu anh)thì cưới ngay.

ta chỉ cưới ngay khi hai điều kiện trong ngoặc cùng đúng.

|| (or) : Giá trị đúng nếu mộttrong 2 đều đúng.

VD:nếu(em đau khổ)hoặc(anh đau khổ)thìchia tay!

Chỉ cần một trong hai điều kiện đúng là chia tay

Đối với chuỗi

Toán tử+tượng trưng cho việc nối hai chuỗi lại.

VD:

a="I am";

b="Nguyen";

c=a+b;

thì c có giá trị là chuỗi "I am Nguyen"

6, JS Cách đặt tên biến

Trước tiên, dành cho các bạn mới bước chân vào lĩnh vực lập trình:

Biến là đại lượng được đặt tên, dùng để lưu giữ giá trị và giá trị có thể thay đổi trong quá trình thực hiện chương trình.

SGK 11/12

Quả thật khái niệm được coi là cơ bản này khá là mơ hồ cho những người mới bắt đầu như chúng ta,nhưng các bạn sẽ từ từ hiểu ỏ mọi vấn đề khi tiếp tục đi sâu vào!

Một ví dụ đời thường:

Bạn có một bao thuốc lá, bạn lấy cây viết đặt tên nó là a, bạn nhét 10,000 VND vào bao thuốc lá, thì lúc này bao thuốc là có giá trị là 10,000 VND (tất nhiên là không tính tiền cái bao) rồi một hồi sau, bạn lấy 10,000 ra, bỏ vào tờ 5,000 thì nó có gái trị 5,000....hay là x,y,z trong một bài toán, ta cho x=5, y=6, z=x+y thì Z=11

Còn trong lập trình javascript

Biến lại chia làm 2 loại, biến toàn cục và biến cục bộ, đây là hai khái niệm mà nói thiệt, hơi khó là phân biệt ngay lúc này, các chiệu khó từ từ rồi ta sẽ quay lại, bây giờ chúng ta chỉ nhận biết sơ qua!

Biến toàn cục:ta khai báo biến toàn cục rất đơn giản, ví dụ ta đặt tên biến là a và giá trị =1.

Mã nguồn:[Chọn]

a=1;

Biến toàn cục có giá trị trong toàn bộ văn bản biến cục bộ:ta cần thêm từ khoá var vào trước.

Mã nguồn:[Chọn]

var a=1;

biến cục bộ tất nhiên khác với biến toàn cục là nó chỉ có hiệu lực trong cục bộ, tất nhiên cục bộ ấy là cái gì thì ta sẽ tìm hiều sau ha!

Quy tắc đặt tên biến

Có 3 quy tắc:

*.Ký tự bắt đầu phải là một chữ cái, còn các ký tự tiếp theo có thể là chữ số, gạch dưới, chữ cái. Ngoài mấy thứ kể trên ra, bạn không nên thêm bết cứ thứ gì khác vào tên biến!

*.Không được có khoản trắng

*.Các biến phân biệt chữ hoa chữ thừơng, vì thế ANH sẽ khác với Anh cũng như anh, để tránh rắc rối, ta nên dùng chữ thường cho tất cả tên biến và dùng dấu_ để phân cách thay cho khoảng trắng.

7, Function - hàm JS

Hàm..à..ờ, hàm không có gì là xa lạ với các bạn, trong các ví dụ của mình ở bài đầu tiên cũng có dùng một hàm, đó là hàm alert.

Nói đơn giản :

Hàm là thứ mà khi ta gọi (gọi có nghĩa là viết ra và cho dòng lệnh chạy) thì nó sẽ thực hiện một số thao tác nhất định.

Hàm thường có dạng:

functionname()bên trong dấu ngoặc () đôi khi chả có gì, đôi khi là một con số hoặc trong trường hợp hàm alert thì là một chuổi, từ từ ta sẽ giải thích thêm!

Ví dụ khi ta dùng hàm alert ("thông báo cái gì đó") thì công việc của nó sẽ là: mở ra cái khung, cái khung có cái viền, cài viền màu ..., nền màu...., trong nền có dòng chữ thông báo cái gì đó.

Hàm alert là một trong những hàm dựng sẵn trong javascript, có rất nhiều các hàm như thế, các bài sau sẽ nói rõ hơn về từng hàm. bạn cũng có thể viết một hàm cho riêng mình.

Nói thêm về cách tự viết hàm:

Mình sẽ không nói về các viết mà sẽ nói cho bạn một

ví dụ:

Bạn làm một trang web cho người yêu, bạn muốn ít nhất 10 lần sự kiện A suất hiện, Sự kiện A bao gồm:

Viết ra dòng chữ anh yêu em

Chuyễn dòng chữ thành màu đỏ chuyễn dòng chữ thành màu xanh viết ra dòng chữ em yêu anh không thì tuỳ.

8, JS Thủ tục vào ra đơn giản

Trước tiêng ta cũng phải biết một, hai cách để nhận dữ liệu và xuất dữ liệu ra màn hình để còn biết đường làm ví dụ!

hai thủ tục mà mình dùng để nah65p và xuất dự liệu là hàm Prompt và hàmalert.

Ví dụ như ta làm một cái máy tính, tính bình thương của một số nào đó, thì tất nhiên phải có một chỗ nào đó co người dùng điền số vào.

hàm Prompt yêu cầu người dùng nhập vào một số thông tin nào đó và sau khi người dùng nhập và nhấn OK, hàm sẽ gán những gì người dùng nhập vào cho một biến.

VD:

Mã nguồn:[Chọn]

a=prompt("Đây là đối số thứ nhất","Giá trị mặc định");b=a*a;alert("Bình phương của "+a+"="+b);Xem ví dụTa phân tí cha=prompt("Số thứ nhất","");ở đây ta thấy a được gán giá trị là hàm prompt, trong hàm prompt yêu cầu hai đối số(đối số chẳng qua là cái gì hàm yêu cầu, hai đối số phân cách nhau bở dấu phẩy)

đối số thứ nhất là thông báo sẽ hiễn thị trong ô prompt, thường là câu hỏi, hay yêu cầu nhập gái trị, đối số thứ hai là giá trị mặc định bên trong trường tông tin, nếu không muốn có bất kì giá trị nào bên trong đây, ta đặt ngay sao dấu phầy cặp dấu nháy.

Hàm alert thì quá quen thuộc chắc không cần nói nữa!

9, Javascript Event

Bạn còn nhớ bài Event của HTML không, chính là nó đó!

Các bạn nên xem qua trước khi đi vào. Khó mà hiểu được bài này nếu các bạn không xem qua nó!

Event dịch ra nghĩa Tiếng Việt chắc là Sự kiện.ví dụ như sự kiện on click có nghĩa là khi click chuột. Khi click chuột sẽ có một cái gì đó hiện ra.Trong javascript, giả sử bạn có một đoạn code như thế này( đã chèn vào file html nhé):

Mã nguồn:[Chọn]

alert("lần thứ nhất");

alert("lần thứ hai");

alert("lần thứ ba");

Viết ra như thế thì sẽ lần lượt hiện ra ba bảng không báo, nhưng nếu bạn muốn tuỳ theo hành động của người dùng, scrpit sẻ chạy thì phải dùng tới event, dĩ hiên tính tương tác của website phụ thuộc vào vấn đề này! một điều chú ý:

bạn còn nhớ trong các quy tắc XHTML, ta gái trị của các sự kiện phải đặt trong cặp dấu ", nếu đoạn script cũng có chứa dấu nháy kép, mọi thứ sẽ bị nhầm lẫn,ta cần đổi dấu nháy kép của scrpit thành dấu nháy đơn.

VD:

Mã nguồn:[Chọn]

<a>Click</a>

Vấn đề này nói tới đây thì đã rõ.

10, Các hàm JS sẽ dùng trong các ví dụ

·

alert(): Mở một hộp thông báo với nội dung đặt bên trong dấu ngoặc kép

Xem ví dụ

·

prompt(): Mở một hộp thoại cho phép người sử dụng hông tin vào

Xem ví dụ

·

document.write(): in ra màn hình với nội dung đặt bên trong dấu ngoặc kép

Write Comment

11, Một số hàm JS khác

* parseInt("chuỗi"): biến chuỗi thành số nguyên

* parseFloat("chuỗi"): biến chuỗi thành số thực

* Number(<đối tượng>): chuyển đổi một "đối tượng" sang dạng số. Nếu thất bại trả về NaN (not a number)

* isNaN(<giá trị>): kiểm tra giá trị. Nếu không phải số trả về true,ngược lại nếu là số trả về false

* eval("chuỗi"): biến chuỗi thành biểu thức tính toán được, hoặc biến chuỗi thành lệnh thi hành được như là mã lệnh của JS.

* Math.PI : hằng số PI = 3.14

* Math.sqrt(a) : căn bậc 2 của a.

* Math.pow(x,y) : tính xy

* Math.random() : tạo số ngẫu nhiên >0 và <1sưu tầm.

12, JS Comment - chú thích

Với những đoạn mã dai, chắc hãn sẽ rất khó nhớ ngay cả ý nghĩ của bạn sao nhiều thánh. Cái mà bạn cần lúc viết code là một vài dòng chú thích. Chú thích sẽ không có ý nghĩa lập trình, mỗi lần bắt gặp chú thích javascript sẽ bỏ qua nó.Chú thích bắt đầu với // Ở đầu một hàng bạn hãy viết hai dấu này, và tất cả những gì nằm cùng hàng với hai dấu này sẽ được xem là chú thích.

VD:

Mã nguồn:[Chọn]

<script>

//Dòng chú thích aalert("Code javascript");

//dòng chú thích balert("Code javascript");

</script>

Nhiều chú thích cùng lúc

Khi mà bạn có một chú tích quá dài và việc viết trên cùng một hàng trỡ nên quá khó khăn, hãy dùng hai kí tự /* để bắt đầu những dòng chú thích, và đánh dấu kết thúc bằng hai kí tự */ VD:

Mã nguồn:[Chọn]

/*

Những dòng chú thích không nhất thiết rằng phải nằm cùng hàng

*/

alert("Code javascript");

13, Js câu lệnh IF

Đọc bài này các bạn cần xem lại:các kiểu giá trị,Phép toán, câu lệnh gán.

Trong cuộc sống, có nhiều việc ta chỉ làm khi thoả mản một số điều kiện cụ thể.

Ví dụ:

Một ông bố hứa với con trai:

_Nếu con đỗ đại học thì bố sẽ thưởng cho con một chiếc xe.

Chừng nào mà điều kiện con đỗ đại học thì ông bố mới lo tới chuyện thưởng cho con một chiếc xe. Tới một ngày kia, ông bố lại nói với cậu con trai.

_Nếu con đỗ đại học thì bố sẽ thưởng cho con một chiếc xe, nếu không thì đi nghĩa vụ quân sự.

Ở câu nói thứ nhất của ông bố, không nói rõ thi rớt thì có chuyện gì, còn ở câu thứ ai có nói rõ.

Trong lập trình tuy hình thức từng ngôn ngữ hơi khác nhau nhưng cũng có hai dạng cơ bản của câu điều kiện, ta chỉ bàn tới câu lệnh này trong phạm vi javascript

if-then

if(<điều kiện>)

{

câu lệnh 1;

câu lệnh 2;

................

}

Nếu chỉ có một câu lệnh sau vế điều kiện thì ta không cần cặp dấu ngoặc {}, nhưng luôn có hiện diện của cặp dấu {} là một thói quan tốt, giúp tránh nhầm lẫn!

if-then-else

if-then

if(<điều kiện>)

{

//các câu lệnh sẽ thực hiện nếu điều kiện thoả mản

câu lệnh 1;

câu lệnh 2;

................

}else{

//các câu lệnh thực hiện khi điều kiện không thoả mản

câu lệnh 1;

câu lệnh 2;

................

}

Cách xác định đúng hay sai

Ví dụ ta có đoạn script:

Mã nguồn:[Chọn]

a=3;

b=5;

if(a<b)

{

alert("Đúng");

}else{

alert("Sai");

}

Trường hợp này thì kết quả sẽ là bản thông báo với nội dung

Đúng

Nhưng hãy xét thêm trường hợp:

Mã nguồn:[Chọn]

a=3;

b=5;

if(a<b==false)

{

alert("Đúng");

}else{

alert("Sai");

}

Thì kết quả sẽ là một hộp thông báo với nội dung là Sai??????

Vì:bản thân biểu thứ c a<b với a=3 và b=5 mang giá trị đúng(true) mà đúng(true)==sai(flase) thì tất nhiên là sai.

Sử dụng toán tử or(||) ,and(&&)

Bây giờ chúng ta sẽ viết một đoạn scrpit trong đó nếu người ta nhập vào một ky' tự số, chương trình sẻ thông báo là người dùng đã nhập một giá trị số, còn bất kì ký tự nào khác nó sẽ báo lỗi!

Mã nguồn:[Chọn]

<script>

//promt để nhập dữ liệu gán cho biến c

c=prompt("Nhập một ký tự số từ 0--->9:","");

//vì một con số 1 chữ sẽ có giá trị từ 0-->9

if((c>=0)&&(c<=9))

{

alert("Bạn vừa nhập vào một giá trị số");

}else{

alert("Bạn đã nhập sai yêu cầu");

}

</script>

Xem ví dũ

Tự bản thân toán tử<=hay>=đã là một toán tử hoặc.

14, JS - ELSE...IF

ELSE IF cũng tương tự như IF, nhưng thật ra là một câu lệnh if ngay sau vế else.tại sao lại dùng tới ư, xem ví dụ nhé:

Nếu điểm Trung Bình năng của con từ 9 trở lên thì quà của con sẽ là một chiếc Novol, từ 7 tới dưới 9 là một chiếc Martin, còn mà dưới 7 là có chuyện đó!.để thể hiện thông điệp đó trong javascript:

Mã nguồn:[Chọn]

diem=prompt("Điểm của bạn","");

if(diem>=9)

{

alert("Được một chiếc Novol");

}else if(diem>=7)

{

alert("Được một chiếc Martin");

}else

{

alert("Tiêu rồi");

}

bạn thấy cấu trúc else if xuất hiện ở phần giữa chương trình không hãy xem thử ví dụ với điểm của bạn từ 9 trở lên, để thấy được khác biệt, ta xem ví dụ này:

Mã nguồn:[Chọn]

diem=prompt("Điểm của bạn","");

if(diem>=9)

{

alert("Được một chiếc Novol");

}

if(diem>=7)

{

alert("Được một chiếc Martin");

}else

{

alert("Tiêu rồi");

}

Ta thay cấu trúc else if với một câu if, điều gì sẽ sảy ra khi ta nhập một điểm từ 9 trở lên. Vân, nó sẽ hiện ra tới hai hộp thông báo, một chiếc Novol và một chiếc Martin, lời nhỉ.

Sở dĩ là vì ở đoạn con dùng cấu trúc else if có nghĩ là khi trường hợp điểm từ 9 trở lên đã thoả mản lần if đầu tiên, lần else if chỉ diễn ra khi lần if đầu tiên không thoả mản, nói một cách khác, đó là 2 vế của 1 câu lệnh.

Còn ở đoạn code thứ hai, đó là hai câu lệnh riêng biệt, nếu điểm từ chính trở lên, thoả điều kiện cho câu lệnh 1, thì tất nhiên cũng lớn hơn 7 và thoả luôn điều kiện câu lệnh 2.

Nếu bạn không dùng tới cấu trúc else if mà muốn dùng toàn câu if thì ta phải thêm điều kện vào câu lệnh, ví như với đoạn code 2, ta cần thêm vào điều kiện như thế này:

Mã nguồn:[Chọn]

diem=prompt("Điểm của bạn","");

if(diem>=9){

alert("Được một chiếc Novol");

}

if((diem>=7)&&(diem<9))

{

alert("Được một chiếc Martin");

}

if(diem<7)

{

alert("Tiêu rồi");

}

Nhưng quả thật sẽ rất khó khăn nếu có nhiều mức thưởng nhỉ!

Cấu trúc else if này rất thuận lợi để bạn giải quyết những vấn đề với nhiều điều kiện và nhiều hành động.

15, Các vòng lặp js

Bạn muốn bày tỏ tình yêu với người ấy, và muốn cho người ấy biết bạn yêu người ấy đến nức nào, và ý tưởng của bạn sẽ là mộttrang web với hàng ngàn dòng chữ :I LOVE YOU

Có hai cách để làm chuyện này:

_Đầu tiên bạn hãy viết ra một câu:I LOVE YOU, sau đó copy & past bằng tổ hợp phím Ctrl + V cho nó lẹ, được cở 5,6 dòng, tô đen hết lại past tiếp, được cỡ một ganf, tô den rồi past cho nó nhiều, chả mấy chốc cũng sẽ được một ngàn dòng.

_Cách thứ hai là làm mọi thứ với khoảng 5 dòng với javascript, quăng luôn đoạn code để mọi người xem rồi ta cùng đi vào tìm hiểu sau:

Mã nguồn:[Chọn]

<script>

var i=0;

while(i<1001)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><br />");

i=i+1;

}

</script>

Không tính hai thẻ đóng và mở của tag <script> thì ta có 6 dòng, đoạn js này dài 6 dòng nhưng sẽ in ra được 1000 câu anh yêu em với định dạng như trên, bắt đầu phân tích nào:

dòng var i=0; khai báo biến đếm (vì nó là để đếm xem bao nhiêu lần rồi nên gọi là biến đếm thôi) i và gán cho nó giá trị =0;

dòng while(i<1001) dòng này là linh hồn của cả đoạn, chữ while trong tiếng anh có nghĩa là trong khi, còn với cú pháp javascript trên thì dịch cả câu là :

khi điều kiện còn đúng thì làm đi, làm lại cái trong cặp dấu ngoặc móc, với câu lệnh trên của chúng ta thì điều kiện là i<1001.

Hàm document.write

có vài điểm hơi lạ, các bạn chắc hẵn còn nhớ là để tránh sự nhần lẫn giữa các dấu nháy, nếu bạn muốn thêm vào trong hàm các phần tử html với các gái trị bao quanh dấu nháy thì phải thay các dấu nháy đôi bằng dấu nháy đơn,nhưng tại sao mình lại dùng được các dấu náy kép được, dĩ nhiên các bạn sẽ đoán được là nhờ các dấu

gay phía trước các dấu nháy kép, đây là một số lưu ý để sao này các bạn chắc hẵn sẽ cần dùng tới.

Dòngi=i+1;

đây là dòng tăng giá trị của i lên, phải có dòng này thì tới một lúc nào đó vòng lặp mới ngưng chứ!

Một dạng vòng lặp khác là vòng lặp for.

Bạn hãy xem ví dụ với cùng chức năng với đoạn code trên:

Mã nguồn:[Chọn]

for(i=0;i<1001;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

tất cả vòng lặp for đều như thế này:

for(phần khởi tạo;phần điều kiện;tăng hay giảm giá trị)

Phần khởi tạo:bạn khái báo biến đếm và gán giá trị ban đầu cho nó luôn.

Phần điều kiện:bạn đặt ra điều kiện.

Phần tăng/giảm gái trị:đây là điềm khác biệt nhất với vòng lặp while, trong khi vòng lặp while thì cần một câu lệnh để tăng/giảm giá trị cho biến đếm, thì bản chất vòng lặp for đã có sẵn điều này.

Mình trong ví dụ trên, điều kiện mình đã đặt theo kiểu toán tự rút gọn ( ++ có nghĩa là tự tăng lên 1, bạn nên xem lại bài toán tử)

Chú ý:mọi con đường đều về La Mã, ở các ví dụ trên mình chỉ cho tăng biến đếm lên, trong khi vẫn có thể làm như thế với các giảm biến đếm xuống, chỉ cần linh hoạt một chút:

Mã nguồn:[Chọn]

for(i=1001;i>1;i--)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

hãy linh hoạt và vận dụng thích hợp cho mục đích của bạn, đó là việc mà chỉ con người mới làm được!

16, Break - dùng vòng lặp js

Thử đặt ra trường hợp ta có một chương trình học toán cho trẻ, loại học bảng cửu chương ấy (ví dụ bảng cửu chương 2), chương trình như thế này:

_Mỗi lần chương trình sẽ in ra màn hình câu: 2x1=?

_Một prompt sẽ xuất hiện, yêu cầu trẻ nhập số vào.

_Nếu đúng thì chương trình tiếp tục vè sẽ kết thúc cho tới khi tớ 2x10.

_Nếu sai thì chương trình sẽ dừng, và bảo trẻ nên học lại bài.

Giải pháp:

_Chạy một vòng lặp từ một tới 10,dùng cấu trúc if để xác định đúng sai.

Nhưng làm sao ta có thể dừng vòng lặp lại khi kết quả sai.

_Lệnh break sẽ là giải pháp, nó sẽ bẻ gãy vòng lặp ngay khi chương trình phát hiện nó.

Mã nguồn:[Chọn]

<script>for(i=1;i<11;i++)

{

a=prompt("2 lần "+i+" là?","")if(a==(i*2))

{

alert("Đúng rồi 2 lần "+i+" là "+a);

}else{

alert("Sai rồi, em nên học lại bài cho kĩ nhé")

break;

}

}

</script>

17, Mảng trong Javascript

Nếu bạn đã từng học qua bất cứ ngôn ngữ lập trình nào, thì chắc hẵn sẽ không xa lạ gì với mãng!

Còn nếu bạn là người mới vào nghề như mình, thì đây là một khái niệm mới, cũng khá khó đấy!

Mảng gồm có hai loại, mảng một chiều và mảng nhiều chiều, trong mãng nhiều chiều thông dụng nhất ta dùng tới mảng hai chiều, vì thế bài này chỉ nói về mảng một chiều và mảng hai chiều.

mảng một chiều là dãy hữu hạn các phần tử cùng kiểu. Mảng được đặt tên và mỗi pần tử có một chỉ số. Để mô tả mảng một chiều cần xác định kiểu của phần tử và cách đánh số các phần tử của nó.

Nhớ lại ví dụ về biến mà mình mô tả với bao thuốc lá ớ, bây ta ví dụ trường hợp ta có 10 bao thuốc là và bạn quyết định đặt tên cho chúng là

bao1,bao2,....,bao8,bao9,bao10, với mục đích là mỗi bao chứa một cái gì đó, tới khi nào cần cái gì thì lấy ra mà dùng.

Còn mảng, mảng chính là cả cây thuốc lá!, đơn giản chỉ là một cây thuốc là, bên trong có những bao thuốc lá! giải thích cho dài dòng,mảng 1 chiều đơn thuần là một tập hợp các biến, và các biến có thứ tự thay vì tên! tạo một mảng:

Ví dụ tạo một mảng đơn giản

Mã nguồn:[Chọn]

mang=Array("a","b","c");

alert(mang[0]);

Thử in ra phần tử thứ nhất của mảng (kết quả sẽ là a)

Đây cũng là một cách để khai báo mảng, các phần tử của mảng được đặt trong dấu nháy kép và chúng được ngăn cách nhau giữa dấu (,)

Còn đây là cách thứ hai, khá dễ nhìn!

Bạn hãy khai báo mảng, không cần khai báo nội dung bên trong:

Mã nguồn:[Chọn]

mang=Array();

sau đó, khai báo từng phần tử bằng cách này:

Mã nguồn:[Chọn]

mang[0]="a";

mang[1]="b";

mang[2]="c";

mang[3]="d";

Chú ý: Trong javascript phần tử đầu tiên của mảng có thứ tự là 0.

Một số hàm làm việc với mảng:<tên mảng>.length: Xác định số phần tử của mảng

18, Tại sao cần dùng mảng?

Tại sao lại dùng đến mảng

Câu trả lời: mảng là cách tuyệt vời để quản lí dữ liêu. Người ta xây dựng khá nhiều các hàm để làm việc với mảng

Xét bài toán:Tính tổng số tiền thu được trong tuần, tính và in ra màn hình số ngày có thu nhập cao hơn trung bình, thấy ngay nếu dùng biến đơn giản, ta cần tới 7 biến để lưu trử thu nhập của mỗi ngày, một biến b để lưu trử số ngày có thu nhập cao hơn TB, biến b lưu trữ giá trị Tb để so sánh.

Để người ta nhập vào 7 biến này bằng prompt.Sau đó tính trung bình.

Cho một dãy 7 câu lệnh if nếu ngày nào có thu nhập cao hơn TB thì biến b tăng lên một đơn vị.

Mã nguồn:[Chọn]

var a=0;

var b=0;

t1=prompt("Thu nhập ngày thứ nhất","");

t2=prompt("Thu nhập ngày thứ 2","");

t3=prompt("Thu nhập ngày thứ 3","");

t4=prompt("Thu nhập ngày thứ 4","");

t5=prompt("Thu nhập ngày thứ 5","");

t6=prompt("Thu nhập ngày thứ 6","");

t7=prompt("Thu nhập ngày thứ 7","");

b=(eval(t1)+eval(t2)+eval(t3)+eval(t4)+eval(t5)+eval(t6)+eval(t7))/7;alert(b);

if(t1>b)

{

a=a+1

}

if(t2>b)

{

a=a+1

}

if(t3>b)

{

a=a+1

}

if(t4>b)

{

a=a+1

}

if(t5>b)

{

a=a+1

}

if(t6>b)

{

a=a+1

}

if(t7>b)

{

a=a+1

}

alert("Số ngày có thu nhập cao hơn Trung bình tuần là "+a);

Phù,7 ngày đã xong, vậy thì bửa sau hết tháng, tính cả tháng! Cắn lưỡi quá

Mảng sẽ giúp ta rút ngắn quá trình trên,nhưng tất nhiên là không phải chỉ dùng riêng mình nó.

Xem lại một chút bài vòng lặp, ta có thể dùng vòng lặp để lướt qua cả mảng, gán giá trị cho cả mảng.

Nói chung là khá lẹ!

_ Hướng đi là cho vòng lạp duyệt qua mãng, vừa duyệt vừa gán giá trị

Mã nguồn:[Chọn]

<script>

//Khai báo mang là phần tử mảngmang=Array();

//Số ngày yêu cầu, giả sử là 30

songay=5;

//biến tổng lưu giữ giá trị tong so tien thu

đuoctong=0;

//biến tb lưu giữ giá trị trung bìnhtb=0;

//biến num lưu gữ số ngày có thu nhập cao

hơnnum=0;

//bắt đầu vòng lặp

for(i=0;i<songay;i++)

{

mang[i]=prompt("Thu nhập của ngày "+(i+1),"");

//mỗi lần vòng lặp chạy, biến tổng được tăng

lêntong=

eval(tong)+eval(mang[i]);

}

tb=tong/songay;for(i=0;i<mang.length;i++) {

if(mang[i]>tb)

{

num=num+1;

}

}

alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình"+tb+" là "+num);

</script>

Ví dụ trên hơi rắc rối nhưng nếu xem xét kĩ, việc một mảng duy nhất thay thế công dụng của 7 biến quả là lời nhỉ.

19, Làm việc với mảng

Trước tiên mình tạo một mảng và nó sẽ được dùng trong suốt bài này:

Mã nguồn:[Chọn]

mang=Array();

mang[0]="anh";

mang[1]="yêu";

mang[2]="em";

Các thuộc tính và Method để làm việc với đối tượng đều có dạng:

<tên đối tượng>.xxx

Trong đó xxx chính là các thuộc tính và Method (nhớ là có dấu chấm ha)

-length Trả về số phần tử của mảng>

-join tạo một chuổi từ một mảng, các phần tử chuỗi sẽ các nhau kí tự bên trong cặp ()

Mã nguồn:[Chọn]

mang.join("_")

-reverse Trả lại một mảng với thứ tự các phần tử bị đảo ngược

Mã nguồn:[Chọn]

mang.reverse()

-sort Trả lại mảng mà các phần tử được sắp xếp theo bảng chữ cái

-concat Nối nhiều phần tử vào một mảng

Mã nguồn:[Chọn]

mang.concat("nhiều","lắm")

-pop trả lại phần tử cuối cùng và xoá nó ra khỏi mảng

-splice chia nhỏ mảng ra, hàm này nhận vào 2 đối số, đối số thứ nhất là vị trí của phần tử bắt đâu, đối số thứ hai là vị trí kết thúc.

Mã nguồn:[Chọn]

mang.splice(1,2)

Các bạn tự thử nha vì diễn tả javascript trên host này rất khó.

20, JS Mảng 2 chiều

Một khi đả hiểu được mảng một chiều, thì sẽ rất đơn giản đê hiểu về mảng hai chiều.Mảng hai chiều thật chất chỉ là một mảng, mà mỗi phần tử lại chúa một mảng khác.

Ví dụ thực tế có thể là cái bàn cờ hay hệ trục toạ độ.

Khai báo cũng khá đơn giản

mang2c=Array(Array(1,2,3),Array("a","b","c"))

Có thể khái báo một cách đơn giản hơn bằng cách:

Mã nguồn:[Chọn]

<script>

var mang1=Array(1,2,3);

var mang2=Array("a","b","c")

var mang2c=Array(mang1,mang2);

//chạy và xem thử kết quả nhé

alert(mang2c[0][0]);

</script>

Duyệt qua mảng 2 chiều với hai vòng lặp

Ta sùng hai vòng lặp để duyệt qua mãng, vòng lặp thứ nhất chứa vòng lặp thứ hai, khi vòng phần tử thứ nhất của mảng lớn (chính là mang1 trong ví dụ) thì vòng lặp thứ hai sẽ duyệt hết các phần tử trong mang1, tiếp theo vòng lặp lớn sẽ chuyễn tới phần tử thứ 2, vòng lặp nhỏ.......

21, Mảng dựng sẵn

Khi trình duyệt đọc một trang HTML, nó tự động tạo ra các mảng, các mảng đó chính là các HTML Element, và ta có thể dùng chúng như một cách tham chiếu tới đối tượng ta muốn.

Ví dụ như ta có một loạt các hình ảnh trong trang với các tag image, trình duyệt sẽ tạo ra một mảng để lưu trử các image này. Để tham chiếu tới một iamge nào đó ta:

document.images[<thứ tự ảnh>]

Trình duyệt đọc code theo thứ tự từ trên xuống dưới, từ trái qua phải, nó phát hiện cái náo trước thì thứ tự nhỏ nhất.

VD:

ta có đoạn code của trang html như sau:

Mã nguồn:[Chọn]

<html>

<head>

<title>wapcry.net- Trang ví dụ</title>

</head>

<body>

<form>

<input />

<input />

</form>

<form>

<input />

<input />

</form>

</body>

</html>

Ờ đây, ngoài cách tham chiếu tới bất cứ phần tử nào trong form, để đặt giá trị chẵn hạn, ví dụ nhưlà text_03chẳng hạn. ta có thể viết một đoạn code bình thường như sau:

Mã nguồn:[Chọn]

<script>

document.form_02.text_03.value="Một cách tham chiếu";

</script>

Hay theo những thông tin mới về những mảng dựng sẵn

Mã nguồn:[Chọn]

<script>

// đoạn này dịch là: tìm trong văn bản, form thứ hai, phần tử thứ nhất của form, đặt giá trị

document.forms[1].elements[0].value="Một cách tham chiếu";

</script>

Chú ý:nếu các bạn có ý định chạy hai đạon javascript kia trên đoạn mã html mình lấy ra ví dụ, các bạn cần đặt đoạn javascript bên dưới cả hai form, điều này là vì trình duyệt đọc code theo thứ tự từ trên xuống dưới, từ trái qua phải khi nó bắt gặp đoạn js, nó sẽ chạy mã khi, trong khi đó nó chưa tìm thấy những đối tượng mà js sẽ làm việc!Đây chỉ là một vài trong số rất nhiều mảng dựng sẵn, và thật ra các bài hướng dẫn javascript của wapcry.net cũng chỉ mới nói tới những gì mà mình nghĩ là gần gủi và cần thiết nhất đối với các bạn.Một câu hỏi trong lúc mà mình học javascript là làm sao biết những mảng nào được dựng sẵn, làm sao biết những đối tượng nào có những thuộc tính nào. Để giải thích cho điều đó ta hãy tìm câu hỏi với google và từ kháo HTML DOM. Bảo đảm với một chút vốn tiếng Anh, bạn sẽ giải đáp được hết những thắc mắc trên. và tất nhiên, nếu có khả năng, mình sẽ tìm, tổng hợp lại các tải liệu đó và dịch ra tiếng Việt để phục vụ cho những người Việt Nam ham học hỏi.

22, Tự soạn thảo các hàm

Một số hàm quen thuộc với các bạn cho tới lúc này chính là các hàm alert,prompt, các hàm này là những hàm đã có sẵn trong javascript, và bạn cũng có thể tự soạn thảo cho mình một hàm.

Hàm - function các bạn tự viết giống như là một dạng viết tắt, qua nhiều ví dụ, ví dụ viết ra hàng ngàn câu I Love You, qua công cụ là các ngôn ngữ lập trình ta đã rút ngắn mọi việc chỉ còn vài hàng, nhưng sẽ không hay nếu bạn lặp đi lặp lại nhiều lần dù chỉ một đoạn code đó trên trang web.

Xét ví dụ

Bạn hãy chắc chắn biết cách viết ra 1000 dòng I Love You với vòng lặp while. Lần này bạn muốn tô điểm thêm cho trang web bằng cách, nói một nghìn lần I Love You, sau đó là một bức ảnh trái tim, rồi lại nói 1000 lần I Love You, lại ảnh trái tim, 1000 lần I Love You, một đoá hoa,.......

Nói chung là phải vài lần 100 lần cách nhau, và nói cách riêng :)) là ta phải lặp đi lặp lại đoạn code

Mã nguồn:[Chọn]

for(i=0;i<1001;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

Ở nhiều phần của site, điều này sẽ làm cho ta khó hiệu chỉnh, giả như khi tình yêu bớt mặn nồng, bạn muốn giàm số lần nói anh yêu em xống còn 500, vậy là phải moi cho bằng hết ra mà sửa.

Và nói mọi thứ cho dài dòng thì câu hàm là một giải pháp chắc các bạn cũng đoán ra

hàm - function cú pháp khai báo có dạng như thế này:

Mã nguồn:[Chọn]

function <tên hàm>()

{

//Nội dung các câu lệnh sẽ nàm trong hai dấu ngoặc nhọn này

}

Ví dụ mình muốn tạo hàm say_Iloveyou (quy tắc đặt tên hàm giống như quy tắc đặt tên biến) với công dụng là viết ra 1000 câu I Love You thì code sẽ là:

Mã nguồn:[Chọn]

function say_Iloveyou()

{

for(i=0;i<1001;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

}

Và để chạy hàm này, bạn hãy đặt dòng:

Mã nguồn:[Chọn]

say_Iloveyou();

ở bất cứ đâu các bạn muốn in ra 1000 câu tình cảm đó. và khi muốn sửa lại chỉ còn 500 hay 5 câu gì đó, thì bạn chỉ việc sửa lại code bên trong function.

Ham của chúng ta giống như các hàm khác, sẽ rất hữa dụng khi chúng ta kết hợp với các sự kiện.

Hàm say_Iloveyou () không giống những hàm mà ta đả biết như là alert hay prompt, nó không hề nhận vào một tham số nào trong cặp dấu ngoặc ().

Trong bài sau ta sẽ tìm hiểu thêm vấn đề này.

23, Hàm và các tham số

Giống như hàm alert với việc nhận vào một tham số đặt bên trong cặp ấu (), ta có thể dễ đàng và linh hoạt thay đổi nội dung xuất hiện bên trong hộp thoại.

Quay lại ví dụ về hàm viết 1000 câu I Love You. Hãy đặt ra trường hợp tương tự như ở ví dụ trước, bạn muốn in ra nhiều dòng chữ I Love You, nhưng số lượng không đều nhau (ví dụ: lần đầu bạn in 100 câu, lần hai in 390 câu, lần 3 in 5 câu chẵn hạn). Dĩ nhiên đoạn code củ của bạn:

Mã nguồn:[Chọn]

function say_Iloveyou()

{

for(i=0;i<1001;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

}

sẽ không thể nào tuỳ chỉnh như ý muốn của bạn và công việc của chúng ta sẽ không còn tối ưu nữa.Thật may, có một cách để cho các hàm của bạn linh động hơn với việc dùng những tham số. Hãy nhìn vào ví dụ:

Mã nguồn:[Chọn]

function say_Iloveyou(num)

{

for(i=0;i<num;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><BR />");

}

}

Hãy chú ý dòng đầu tiên, cái bạn cần nhìn là từ đặt trong cặp dấu (), từ đó là một biến lưu giữ giá trị mà bạn cần dùng trong hàm.Sau đó hãy để mắt nhìn qua dòng bắt đầu vòng lặp (hàng thứ3), bạn có nhận thấy điều gì khác với đoạn code củ của chúng ta chứ. D(ó chính là thay vì con số 1001 mình thay bằng từ num là từ nằm trong cặp dấu ngoặc kép trên phần khai báo tên hàm. Điều đó có nghĩa là gì!?

Mã nguồn:[Chọn]

for(i=0;i<1001;i++)

Nếu bạn đã xem qua kĩ phần vòng lặp, bạn sẽ hiểu ý nghĩa của cả phần này , ta hãy chú ý tới đoạn in đậm nhé: for(i=0;i<1001;i++), phần in đậm chính là phần điều kiện (như ta đã biết) điều kiện ở đâu là i<1001, khi mình thay giá trự 1001 vào bằng biến num, thì điều kiện sẽ là cho tới khi nào còn bé hơn num

Và như vậy, khi gọi hàm ta có thể tuỳ chỉnh có bao nhiêu câu xuất hiện với một con số đặt trong dấu ngoac, tương ứng với biến num.

Copy hết ví dụ này, xem kĩ, rồi chạy thử nhé!

Mã nguồn:[Chọn]

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8">

<title>Javascript Funtion</title>

</head>

<body>

<script>

function say_Iloveyou(num)

{

for(i=0;i<num;i++)

{

document.write(" <b><font color=\"#FF00FF\">I LOVE YOU</font></b><br />");

}

}

</script>

Nói 9 lần I Love You<br />

<script>

say_Iloveyou(9);

</script>

Nói 99 lần I Love You<br />

<script>

say_Iloveyou(99);

</script>

Nói 999 lần I Love You<br />

<script>

say_Iloveyou(999);

</script>

</body>

</html>

Đưa nhiều tham số vào hàm

Giống như hàm prompt nhận vào tới hai tham số, ta tất nhiên có thể đưa vào thêm các tham số trong hàm để hàm trở nên linh động hơn.

Tất cả hàm trên của chúng ta đều in ra câu I Love You, với định dãng in dậm và màu hồng, ta có thể thêm tham số vào để thay đổi định dạng và màu chữa, hoặc là thay đổi luôn cả câu chữ. Mọi việc cần làm là đặt tham số đúng chỗ.

Sau đây là ví dụ thay đỗi luôn cả nội dung câu:

Mã nguồn:[Chọn]

<script>

function say_Iloveyou(num,cau)

{

for(i=0;i<num;i++)

{

document.write(cau);

}

}

</script>

Chỉ cần thêm một tham số cau vào, tham số này cụng lưu trữ một giá trị mà bạn cần làm việc, nếu mình muốn in ra bảy lần câu"Anh ghét em" chẳng hạn, thì mình sẽ gọi hàm như thế này:

Mã nguồn:[Chọn]

say_Iloveyou(7,"anh ghét em <br />");

Chú ý là nếu giá trị gán vào cho tham số là chuỗi thì nó cần đặt trong cặp dấu nháy ""

Trên đây chỉ là những hàm đơn giản nhất, với những code đơn giản nhất, chỉ với những kiến thức thông thường như thế này thôi, nhưng với bộ óc con người, chúng ta sẽ phát triễn nó lên một tầm cao mới.

24, Biến toàn cục và biến cục bộ

Vấn đề của hai loại biến toàn cục và cục bộ mình đã trình bày ngay từ đầu! Nhưng chỉ giải thích sơ qua là khác nhau ở cái tên và không đi sâu thêm, bởi muốn hiểu vấn đề này, chúng ta cần phải đi qua phần hàm - function để có thể hiểu rỏ nhất.

Nhắc lại chút:

Biến cục bộ( ngay từ từ cục bộ củng cho biết nó chỉ hoạt động ở một bộ phận nhất định) Biến cục bộ khi khai báo bắt đầu với từ kháo var

Biến toàn cục đương nhiên khác với biến toàn cục ở chỗ nó có giá trị ở toạn bộ phận.Biến toàn cục khi khai báo không có từ khoá var.

Trong các ví dụ ít khi nào mình dùng tới từ khoá var, bởi vì đơn giản mình muốn các ví dụ đơn giản nhất có thể, dĩ nhiên, các ví dụ đó cũng không hề bị ảnh hưởng bởi việc dùng loại biến nào.

Xét lại ví dụ của loạt bài mảng nói về công dụng: Tính tổng số tiền thu được trong tuần, tính và in ra màn hình số ngày có thu nhập cao hơn trung bình.

Đoạn code của chúng ta đây:

Mã nguồn:[Chọn]

<script>

//Khai báo mang là phần tử mảng

mang=Array();

//Số ngày yêu cầu, giả sử là 30

songay=5;

//biến tổng lưu giữ giá trị tong so tien thu đuoc

tong=0;

//biến tb lưu giữ giá trị trung bình

tb=0;

//biến num lưu gữ số ngày có thu nhập cao hơn

num=0;

//bắt đầu vòng lặp

for(i=0;i<songay;i++)

{

mang[i]=prompt("Thu nhập của ngày "+(i+1),"");

//mỗi lần vòng lặp chạy, biến tổng được tăng lên

tong=eval(tong)+eval(mang[i]);

}

tb=tong/songay;for(i=0;i<mang.length;i++)

{

if(mang[i]>tb)

{

num=num+1;

}

}

alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình"+tb+" là "+num);

</script>

Đó là đoạn code củ, bây giờ mình đã biết về hàm, điều đầu tiên mình nghĩ tới là tuỳ biến để đoạn code không chỉ làm việc cho 7 ngày mà có thể là 1 tháng hay 2 tuần tuỳ ý! code lúc này là:

Mã nguồn:[Chọn]

<script>

function tinhtoan(numngay)

{

//Khai báo mang là phần tử mảng

mang=Array();

//Số ngày yêu cầu, lúc này được gán với giá trị numngay là tham số duy nhất của hàm

tintoansongay=numngay;

//biến tổng lưu giữ giá trị tong so tien thu đuoc

tong=0;

//biến tb lưu giữ giá trị trung bình

tb=0;

//biến num lưu gữ số ngày có thu nhập cao hơn

num=0;

//bắt đầu vòng lặp

for(i=0;i<songay;i++)

{

mang[i]=prompt("Thu nhập của ngày "+(i+1),"");

//mỗi lần vòng lặp chạy, biến tổng được tăng lên

tong=eval(tong)+eval(mang[i]);

}

tb=tong/songay;

for(i=0;

i<mang.length;i++)

{

if(mang[i]>tb)

{

num=num+1;

}

}

alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình"+tb+" là "+num);

}

</script>

Bây giờ bạn hãy bắt đầu gọi hàm này ở bất cứ đâu trên trang web. Nhưng hãy thêm một số dòng bên dưới như mình đây:

Mã nguồn:[Chọn]

<script>

// Ở đây mình gọi hàm để tính toán trong 9 ngàytinhtoan(9);

// Đưa ra số ngày đã tính toánalert("Số ngày tính toán: "+num);

// thông báo riêng tổng thu nhập alert("tổng thu nhập: "+tong);

// và mức thu nhận trung bình alert("thu nhập trung bình: "+tb);

</script>

Sau khi bạn nhập đầy đủ thông tin, cả thảy sẽ có 4 hộp thông báo, 1 vốn dĩ của hàm, 1 Đưa ra số ngày đã tính toán, 1 thông báo riêng tổng thu nhập, 1 mức thu nhận trung bình.

Nhưng mọi vệc thường hay chuyễn hướng với từ nhưng.....Ta thay đổi một số dòng ở các đoạn khai báo function, cụ thể là thêm từ kháo var vào trước dòng khai báo hai biến,tong và tb

Mã nguồn:[Chọn]

//Khai báo mang là phần tử mảng

mang=Array();

//Số ngày yêu cầu, giả sử là 30

songay=numngay;

//biến tổng lưu giữ giá trị tong so tien thu đuoc

var tong=0;

//biến tb lưu giữ giá trị trung bình

var tb=0;

//biến num lưu gữ số ngày có thu nhập cao hơn

num=0;

Rồi hãy gọi hàm và thêm một số dòng như trường hợp trên, mọi thứ sẽ không như bình thường nữa. Đầu tên là một hộp thông báo của hàm, thứ hai là hộp thông báo

Đưa ra số ngày đã tính toán, còn hai hộp thông báo kia sẽ "vắn bóng"

Đơn giãn vì khi khai báo từ kháo var trước hai biến tong và tb, lúc này chúng trở thành hai biến cục bộ, và như đã nó, biến cục bộ chỉ có gái trị trong một bộ phận(cụ thể trường hợp này chính là hàm tintoan), khi ta gọi hai biến này ngoài cấu trúc hàm, javascript sẽ cho rằng những hàm này chưa tồn tại, chưa được khai báo( vốn dĩ ta đã khai báo trong hàm) và lỗi sẽ sảy ra khiến hai hợp thoại không thể xuất hiện.Lại nhấn mạnh một lần nữa, tuỳ theo mục đích của trương trình, chính lập trình viên sẽ quyết định xem dùng những gì cho thích hợp nhất với chương trình. Và đó là một yếu tố không thể thiếu, yếu tố con người!

25, Javascript function return - Giá trị trả về

Bạn có nhớ những hàm tính toán không, giống như Math.sqrt() nên trong bài

Một số hàm hay dùng trong JavaScript

Bản thân các hàm này mang luôn một giá trị. Có nghĩa là ta có thể lấy ngay:5 + Math.sqrt(4)

//bằng mấy nhỉ

Các hàm từ trước tới giờ ta viết chỉ mới thực hiện hành động mà ta muốn, chứ chưa hề mang giá trị nào.

Để có thể gán cho hàm một giá trị ta dùng lệnh return.

Xét hàm đơn giản tính tồng và đưa ra màn hình hai số.

Mã nguồn:[Chọn]

<script>

function tinhtong(a,b)

{

alert(a+b)

}

</script>

Dùng return cho hàm này:

Mã nguồn:[Chọn]

function tinhtong(a,b)

{

var kq=a+b;

return kq;

}

</script>

Lúc này nếu bạn gọi hàm này một cách bình thường thì sẽ chả có gì sảy ra, nhưng hãy thử:

Mã nguồn:[Chọn]

alert(tinhtong(2,3));

Hoặc:

Mã nguồn:[Chọn]

alert(tinhtong(2,3)+tinhtong(3,7));

Bạn sẽ thấy lúc này của hàm đã được gán giá trị.

Ngoài ra ta cũng có thể gán cho nó những giá trị boolean, và dùng hàm làm điều kiện.

Xét đoạn code so sánh ba số người dùng nhập vào, nếu cả ba số bằng nhau thì thông báo"Đúng" ngược lại "Sai".

Đầu tiên sẽ là đoạn không dùng tới funtion

Mã nguồn:[Chọn]

<script>

a=prompt("Số a","");

b=prompt("Số b","");

c=prompt("Số c","");

if((a==b)&&(a==c)&&(c==b))

{

alert("Đúng");

}else{

alert("Sai");

}

</script>

Cũng công dụng tương tự, mình viết một chương trình dùng tới funtion:

Mã nguồn:[Chọn]

function vd2()

{

a=prompt("Số a","");

b=prompt("Số b","");

c=prompt("Số c","");

if((a==b)&&(a==c)&&(c==b))

{

return true;

}else{

return false;

}

}

Rồi ở bất kì đâu trên trương trình, bạn dùng một cấu trúc if:

Mã nguồn:[Chọn]

if(vd2())

{

alert("Đúng");

}else{

alert("Sai");

}

Lúc này hàm vd2() đã tính toán và gán cho chính nó một giá trị hoặc true hoặc false và có thể dùng làm điều kiện.

Thực tế việc return giá trị của một hàm về được ứng dụng rất nhiều, một trong số đó sẽ được nêu ra ở loạt bài về làm việc với form.

26, Nói về các dấu chấm

Bắt đầu từ bài sau, các bạn sẽ làm việc với những html forms, cái mà nắm vị trí chủ đạo trong việc tương tác với người dùng.

Bạn sẽ thấy có rất nhiều dấu chấm trong khi ta làm việc, những dấu chấm này không xa lạ, ví dụ như:

document.write() //viết ra màn hình cái gì đó

array.sort() //Sắp xếp các phần tử trong mảng

Đó là cách mà ta tham chiếu đến cái gì đó và làm những cái gì đó, nếu bạn đã xem qua toàn bộ các bài viết html thì chác bạn sẽ nhớ cái mình gọi là tính lồng ghép, phần tử này chứa trong phần tử kia, và các phần tử chứa trong đối tượng document và đối tượng lớn nhất chính là window.

Các dấu chấm trong một dòng js sẽ phân tách các đối tượng, khi javascript bắt gặp một chuỗi các đối tượng được ngăn cách bởi các dấu chấm, nó sẽ đi dần xuống dối tượng cuối cùng trong chuỗi đó.

Mọi việc sẽ dần già rỏ ra khi các bạn xem các bài sau!

27, JS làm việc với FORM

Để học qua phần này, các bạn bắt buộc phải tìm hiểu html form qua các bài viết ở phần html

Bấy nhiêu đó cũng vừa đủ để chúng ta đi vào làm việc với javascript nhưng trước tiên, bạn cần đặt tên cho biểu mẫu để javascript biết bạn muốn nó làm việc với cái nào.

Biểu mẫu đơn giản sau đấy sẽ nhắc luôn cho ác bạn cách đặt tên:

Mã nguồn:[Chọn]

<form>

<input />

<input />

<input />

</form>

Hãy đặt tên các thành phần trong form sao cho nó giúp bạn dễ liên tưởng đến nó, ví như bạn muốn người dùng điền tên vào một trường text, thì trường đó nên có tên là name chẳng hạn!

Thêm một số lưu ý nữa là các bạn hãy xem kĩ những phần có nói về thuộc tính value.

28, Nhận + thiết lập thông tin

Sét đoạn html này:

Mã nguồn:[Chọn]

<form>

Tên:<input /><br />

Email:<input /><br />

Con cái 

Có/Chưa:<input /><br />

Giới tính:<select>

<option>Nử</option>

<option>Nam</option>

</select><br />Con đầu lòng của bạn 

5 tuổi

<input />

10 tuổi<input />

15 tuổi<input /><br />

Ghi chú:<textarea>Ghi chú của bạn</textarea>

<input />

</form>

Xem trên browser thì sẽ giống thế này:

Top of Form

Tên:

Email:

Con cái Có/Chưa:

Giới tính:   Nử Nam

Con đầu lòng của bạn 5 tuổi  10 tuổi 15 tuổi

Ghi chú: 

Bottom of Form

Ví dụ này có các trường biểu mẩu phổ biến nhất bao gồm text,select, radio và textarea.

Khi gửi form đi, dữ liệu sẽ được chuyễn tới một trang có tên là new.html(action="new.html"). trang này là trang chứa javascript xử lý thông tin.

Dĩ nhiên bạn có thể đặt code javascript ngay tại trang bạn viết mã html, nhưng nếu muốn làm thế, để code javascript hoạt động đúng cách mong muốn, bạn nên viết một hàm, và kích hoạt nó khi form được gửi khi nhấn nút submit Để làm việc với js nư đã nói trước, các bạn cần đặt tên cho chúng bằng thuộc tính name và cái js lưu ý đến thứ 2 chính là value.

Đối với các trường biểu như text thuộc tính value không nhất thiết có mặt trong các thẻ vì giá trị của nó sẽ được thêm vào khi người dùng nhập thông tin vào. 

Trường hợp bạn đặt mặc định giá trị sẽ xuất hiện trên trường thì bạn có thể thêm vào thuộc tính value, giá trị của trường sẽ là chuỗi cuối cùng trước khi người dùng gửi biểu mẩu.(người dùng vẫn có thể thay đổi)

Nếu bạn muốn lưu một giá trị nào đó mà không muốn người dùng biết và dửa đổi, hãy dùng trường hidden kèm theo thuộc tính value

Đối với phần tử select,name được luu trữ trong tag mở select,và value được lưu giữ trong tag mở option.

Checkbox thuộc tính value cần có sẵn, checkbox sẽ được dùng trong trường hợp câu trả lời chỉ có hai loại kết quả hay là một dạng đánh dấu.

Ví như bạn hỏi người đó có con chưa, nếu checkbox được họn, gái trị của check box sẽ được gửi đi. Khi bạn bắt đầu làm việc, bạn sẽ thấy giá trị "co" như trên ví dụ của chúng ta sẽ cho biết là người dùng đả chọn, hay là bạn có một danh sách các mặt hàng, bạn muốn biết người dùng có thích những mặt hàng đó hay không, một loạt các checkbox với tên mặt hàng sẽ rất hiệu quả.

Radio cái này dùng khi bạn có một câu hỏi, nhiều đáp án và người dùng chỉ được chọn 1 trong nhiều. tất cả các nút radio trong cùng một nhóm (các đáp án dành cho cùng 1 câu hòi chằng hạn) phải có cùng tên, và tất nhiên là khác giá trị.

textarea value của textarea không nằm trong tag mở của nó,mà nằm giữa hai cặp thẻ. Bạn vẫn tham chiếu tới nó và thuộc tính value của nó như mọi phần tử form khác, nhưng nếu muốn đặt sẵn giá trị thì điều bạn cần làm là đặt giá trị đó vào giữa hai cặp thẻ đóng và mở của nó.

Bắt đầu nhào vô làm việc!

Các bạn đã đọc qua bài giả thích về các dấu chấm chưa!? Nếu chưa thì hãy nhín một chút thời gian và đọc qua ha.

Trích dẫn

Các dấu chấm trong một dòng js sẽ phân tách các đối tượng, khi javascript bắt gặp một chuỗi các đối tượng được ngăn cách bởi các dấu chấm, nó sẽ đi dần xuống dối tượng cuối cùng trong chuỗi đó.

Uhm, và đối tượng lớn nhất chính là window, tất cả văn bản html sẽ chứa trong đối tượng document.

Để thám chiếu tới bất cứ một phần tử nào của form, ta điều cần làm như thế này:

window.document.<tên form>.<tên đối tượng>

trong trường hợp này, giả sử mình tham chiếu tới trường text"name"(trường yêu cầu người dùng điền tên) thì code sẽ là:

Mã nguồn:[Chọn]

window.document.the_form.name

và để lấy giá trị của nó (giá trị của thuộc tính value)

Mã nguồn:[Chọn]

window.document.the_form.name.value

Để thiết lập giá trị ta làm bằng cách:

Mã nguồn:[Chọn]

window.document.the_form.name.value="giá trị bạn muốn thiết lập";

Một ví dụ tĩnh lượt và đơn giản

Hảy điền tên bạn vào và nhấn nút.

Mã nguồn:[Chọn]

<script>function guestname()

{

alert(document.the_form.name.value);

}

</script>

<form>

Tên: <input />

<br />

<input/>

</form>

Kết quả:

Top of Form

Tên:  

Bottom of Form

Nhưng người ta thường dùng cách này hơn:

Mã nguồn:[Chọn]

<form>

Tên: <input />

<br />

<input />

</form>

Thay vì kích hoạt scpirt với thuộc tính onclick đặt ở nút submit, người ta kích hoạt hàm với sự kiện onsubmit trên tag mở form.Tại sao ư!? Xem tiếp bài sau nhé.

29, Kiểm tra Text ,password ,textarea

Nói chung các cái gì mà gõ lọc cọc chữ hay cái gì vào ta đều có thểm cùng làm một cách:

if(document.<tên form>.<tên phần tử>.value=="")

Mã nguồn:[Chọn]

<script>

function guestname()

{

/*Trong điều kiện, mình dùng cặp dấu ""để biểu hiện giá trị rỗng, một cách khác là dùng từ null, nhưng dùng làm chi cho nó dài dòng

*/if(document.the_form.name.value=="")

{

/*Nếu mà"document.the_form.name.value"tức là trường text name có giá trị

rỗng có nghĩa là nó chưa được điền bất cứ gì

Hàm sẽ được gán giá trị false*/

alert("Chưa điền");

return false;

//Thông báo thêm là hãy điền tên vào trường text namealert("Bạn chưa điền thông tin vào nơi yêu cầu, điền lại ha bạn!");

}else{

alert(document.the_form.name.value);

}

}

</script>

<form>

Tên: <textarea>

</textarea><br />

<input />

</form>

Khá là đơn giản nhỉ!?

30, Kiểm tra Select Element

Phần tử select của biều mẩu không giống như các phần tử trước, bởi rằng nó có sẵn những giá trị, và cùng một lúc, người ta có thể chọn nhiều gái trị.

Ta vẫn có thể kiểm tra xem giá trị của select có bằng rỗng hay không, và sau đó vẫn là các bước quen thuộc.

Nhưng javascript còn cho ta một cách nữa để kiến mọi thứ trở nên linh động hơn. Bạn có thể biết người dùng đã chọn lựa chọn thứ mấy với selectedIndex

VD:

Mã nguồn:[Chọn]

<script>

function vd()

{

if(document.aa.bb.value!="")

{

alert(document.aa.bb.selectedIndex);

}

}

</script>

<form>

<select multiple>

<option>Lựa chọn 1</option>

<option>Lựa chọn 2</option>

<option>Lựa chọn 3</option>

</select>

<input />

</form> 

Kết quả:

Top of Form

    Lựa chọn 1 Lựa chọn 2 Lựa chọn 3  

Bottom of Form

Nếu người dùng lựa chọn phần tử đầu tiên (Lựa chọn 1) thì kết quả là 0, phần tử thứ 2 (Lựa chọn2) kết quả là một,....Còn nếu không chọn thì kết quả trả vể là số âm (-1) thì có nghĩa là chả có cái nào được chọn! Ta có thể dùng cách này để xác định xem select có được chọn hay chưa.

31, Kiểm tra các nút Radio

Các nút radio là trường mà khó làm ăn với nhất.

Thử với một form như thế này:

Mã nguồn:[Chọn]

<form>

<input />

<input />

<input />

<input />

</form>

Top of Form

Bottom of Form

Sẽ chả có cái gì sảy ra khi ta thay đổi các chọn lựa (sự kiện onclick đáng lẻ phải kích hoạt một cái gì đó) bởi vì các nút chọn lựa có cùng tên, khác giá trị, khó lòng mà cho javascript biết bạn muốn nói tới nút nào trong 4 nút.

Cách gải quyết vấn đề này cũng không quá phức tạp. Bản chất của các nhóm nút chọn lựa là một mảng, với tên mảng là tên chung của nhóm nút, nút đầu tiên có vị trí là 0,...

Nếu muốn lấy giá trị của từng nút, ta có thể làm như thế này:

document.<tên form>.<tên nút>[<vị trí>].value

VD:

document.ff.aa[0].value

Còn nếu muốn xem nút đó có được check chưa, thì ta phải dùng thuộc tính checkedif(document.<tên form>.<tên nút>[<vị trí>].checked==true)

Và để xem nhóm nút có được check chưa, tốt nhất là dùng một vòng lặp, chạy qua cái mảng này, kiểm tra từng cái.

Đây là code function để các bạn dành riêng kiểm tra các nút radio

Mã nguồn:[Chọn]

//Biến check ban đầu mang giá trị no, nếu có 1 phần tử nào của nhóm nút được chỏn, giá trị sẽ là yes

var

//Bắt đầu vòng lặp chạy từ đầu tới cuối mảng radio

for(i=0;i<document.ff.aa.length;i++)

{

// Nếu phát hiện một phần tử nào đã được chọn, check sẽ = yes

if(document.ff.aa[i].checked==true)

{

check="yes"

}

}

if(check=="yes")

{

alert("Đã chọn");

return true;

}else{

alert("Chưa chọn");

return false;

}

32, Xử lý chuỗi

Đương nhiên đây là bước sau khi chúng ta nhận được thông tin từ from.

Ở các trường form như select,checkpx,radio hầu như ta đã chọn cho chúng một vlaue có định, chỉ còn lại textare,text,passwordđó là những trường bạn muốn người ta nhập ít nhất là 1 ký tự hay đa phần là một chuỗi.

Ta chưa thể xử lý các biểu mẩu một cách tối đa khi chưa hiểu rỏ cách làm việc với chuỗi, dĩ nhiên, không phải lúc nào cũng như các ví dụ ở bài form, mọi thứ chỉ là xem xem "rỗng hay đặc".

Suyên suốt toàn bộ ví dụ, ta dùng một chuỗi duy nhất:

Mã nguồn:[Chọn]

var;

Tất cả mọi Method làm việc với string đều khá wen thuộc<tên chuỗi>.method

*Length

Hàm này trả về độ dài chuỗi

VD:

Mã nguồn:[Chọn]

document.write(chuoi.length)KQ:39Split

Hàm này biến chuỗi thành mảng, hàm này nhận vào một tham số, đó là ký tự hoặc nhóm ký tự phân tách các phần tử trong chuỗi.

VD:

Mã nguồn:[Chọn]

mang=chuoi.split(" ");

Trong ví dụ này mình dùng ký tự hoảng trắng để phân tách các phần tử. Và giờ ta có một mảng bao g6m2 các phần tử:anh,yêu,em,nhiều,lắm,em,có,biết,không!?

*Search

hàm này dùng để tìm kiếm sử xuất hiện của chuỗi 2 trong chuỗi đầu tiên, nếu không tìm thấy giá trị trả về sẽ =-1, nếu tìm thấy kết quả trả về sẽ là vị trí tìm thấy.

VD:

Mã nguồn:[Chọn]

<script>var;

var chuoi2="yêu";

var kq=chuoi.search(chuoi2);

document.write(kq);

Kết quả sẽ là 4

Mã nguồn:[Chọn]

var;

var chuoi2="Yêu";

var kq=chuoi.search(chuoi2);

document.write(kq);

Nhưng chỉ thay lại từ yêu bằng từ Yêu, kết quả sẽ là -1

*Replace

hàm này nhận vào 2 tham số, tham số thứ nhất là nhòm ký tự cần thay thế của chuỗi 1, tham sốthứ hai là nhóm ký tự dùng để thay thế.

Mã nguồn:[Chọn]

var;

var chuoi2="ghét";

var kq=chuoi.replace("yêu",chuoi2);

document.write(kq);

Kết quả trên màn hình sẽ là: anh ghét em nhiều lắm em có biết không!?

*substring

lấy ra một chuổi con từ chuỗi đầu tiên. Hàm này nhận vào hai tham số, tham số đầu tiên là vị trí bắt đầu trích ra, tham số thứ hai là vị trí của ký tự đứng sau kiy1 tự cuối cùng muốn trích.

Chú ý rằng ký tự đầu tiên trong chuỗi có vị trí là 0.

VD:

muốn rút từ yêu ra ta làm

Mã nguồn:[Chọn]

var;

document.write(chuoi.substring(4,7));

*toUpperCase

Chuyễn các ký tự của chuỗi thành các ký tự INtoLowerCase Ngược lại với toUpperCase Trên đây chỉ là một số phương pháp thường dùng, tuỳ theo trường hợp mà các bạn hãy ứng dụng cho đúng. Ví dụ nếu là form điền địac chỉ email mà thiếu vắn ký tự @ và dấu (.) là một điều cần xem xét lại.

33, Mở cửa sổ mới

Mình muốn nói làm việc với các cửa sổ ở đây là nói tới của sổ trình duyệt.

Javascript cho ta khá nhiều cách để làm việc với nó: chẳng hạn như canh chỉnh kích thước, vị trí... hoặc đơn giản là mở một cửa sổ mới.

Bài này chủ yếu đề cập tới cách mở và làm việc với cửa sổ.Muốn làm việc với cửa sổ thì tất nhiên cần tham chiếu tới window. Để mở một cửa sổ mới ta:

window.open("<đương dẫn>","<tên cửa sổ mới>");

VD:

Mã nguồn:[Chọn]

<a>XEM</a>

XEM

Tuy nhiên nếu bạn đã đọc qua bài về đường dẫn của html, thì tất nhiên bạn cũng đã biết cách mở một cửa sổ mới mà không cần javascript.

Và nếu chỉ mở một cửa sổ mới thôi, thì cần quái gì dùng tới mấy cái script này, câu trả lời như đả nêu ở trên, ta còn làm được nhiều việc khác.

VD:

ta có thể canh kích thước của ô cửa sổ mới mở ra bằng cách:

Mã nguồn:[Chọn]

<a>XEM</a>

XEM

width=600,height=400

hai con số trên cho ta cách thức để chỉnh chiều rộng và cao của cửa sổ. Bài sau chúng ta sẽ làm thêm một số việc nữa với mấy cái cửa sổ này!

34, Đóng cửa sổ

Đóng cửa sổ

Sau khi mở, bạn sẽ có lúc muốn đóng! Mọi việc quá đơn giản, rê chuột tới góc trên của cửa sổ, click vào cái dấu X to tướng màu đỏ.

Hoặc là dùng lệnh close của javascript

Giá mà mọi việc, mọi suy nghĩ đểu đơn giản như thế bạn sẽ không cần dùng tới các kỉ năng lập trình, tới một ngày nào đó, bạn sẽ đặt ra tình huống rắc rối và cương quyết muốn làm như sau:

Bạn có một form, với nhiều check, bạn muốn khi người ta chọn vào checkbox nào, một cửa sổ nhỏ sẽ nhảy ra giải thích, nói thêm...... và dĩ nhiên, khi người ta hối hận vì đã chọn nút đó và bỏ chọn, cửa sổ nhỏ sẻ close.Chắc bạn củng đả tìm ra hướng gải quyết:

1: mỗi checkbox đều có thuộc tính onclick kích hoạt 1 hàm

2: hàm sẽ kiểm tra, nếu checkbox được check thì sẽ mở ra cửa sổ tương ứng, nếu là uncheck(đã check rồi muốn bỏ thì vẫn phải click vào mà) thì tắt cái cửa sổ mới mở.

Cho tới giờ chắc để viết hàm như thế thì bạn cũng không quá tốn sức, chỉ cần kiể ta thuộc tính checked của checkbox thế là xong. mọi việc là ở câu lệnh close.

VD: Bạn ở 1 cửa sổ mới có tên là new_window

Mã nguồn:[Chọn]

window.open('http://yenhung.xtgem.com','new_window');

Để đóng nó, ta có hai trường hợp

_Bạn đóng nó từ cửa sổ ban đầu:

window_name.close();

trong trường hợp của chúng ta:

Mã nguồn:[Chọn]

new_window.close();

_Bạn đóng nó từ chính nó:

Chỉ đơn giản:

Mã nguồn:[Chọn]

window.close();

Nó ở đây có nghĩa là cửa sổ chứa javascript đang làm việc, nó coi nó là window, xem một cửa sổ nào đó khác là một cái gì đó khác.

bạn hãy thử mở một cửa sổ mới và đóng cửa sổ củ từ cửa sổ mới xem.

35, Di chuyễn cửa sổ

Bạn mở một cửa sổ ra, ngoài định kích thước, đóng...bạn cũng có thể quyết định xem nó sẽ xuất hiện ở chỗ nào trên màn hình, cũng như từ từ duy chuyễn nó.

Mã nguồn:[Chọn]

window.open("http://yenhung.xtgem.com","new_win","width=300,height=400");

new_win.moveTo(50,50);

Với đoạn code trên, công việc được miêu tả như sau:

1 Mở của sổ mới có địa chỉ:http://yenhung.xtgem.com, tên: new_win, chiều rộng 300, cao 4002

Di chuyễn new_win tới điểm cách lề trái màn hình 50, lề trên 50*move

To chuyễn cửa sổ tới một địa điểm cố định trên màn hình moveBy()

Với moveBy() bạn sẽ di chuyễn cửa sổ tới một vị trí so với vị trí hiện tại của nó.

VD:

Mã nguồn:[Chọn]

new_win.moveBy(50,50);

Kết hợp hàm trên với hàm hẹn giờ(để giảm tốc độ mọi thứ xuống) bạn có thể kiến một cửa sổ di chuyễn trong màn hình.

******

Ở đây ta hãy dùng một phương pháp như thế này:hàm tự gọi hàm và nội dung hàm là duy chuyễn cửa số chứa nó

Mã nguồn:[Chọn]

<script>function move()

{

window.moveBy(50,50)setTimeout('move();

',1000);

}

move();

</script>

Đặt đoạn code này trong trang chứa cửa sổ được mở ra, ở đây mình đạt tên cho file này là new_win.htm

36, Địa chỉ cửa sổ

Địa chỉ ở đây muốn nói tới trang web cửa sổ đang duyệt.

Bạn có thể chuyễn hướng cửa sổ với javascript.

Mã nguồn:[Chọn]

<script>

window.location="http://yenhung.xtgem.com";

</script>

Đương nhiên bạn sẽ thấy rất dư thừa bởi vì có thể dễ dàng chuyễn hướng website với html. Nhưng đó chỉ à nếu ta không biết linh hoạt, bạn có thể tạp một trò chơi, tuỳ theo người dùng trả lời để chuyễn hướng họ. Hay là một ứng dụng hữu ít hơn đó là chuyễn hướng người dùng theo từng điều kiện thích hợp đối với bạn!

37, Javascript và Frame

Frame cũng là một trong những cách thiết kế web html rất hay, và tất nhiên với javascript ta sẽ làm được rất nhiểu điều thú vị với frame.bạn nên xem lại các bài về frame ở phần html trước khi đi vào loạt bài này

Nếu bạn còn nhớ về bài mảng dựng sẵn của mỗi trình duyệt, bài này cũng sẽ rất có ít.

Các Frame cũng được dựng sẵn mảng, và bản thân các frame cũng chính là một đối tượng window.

Lưu ý là ta nên đặt tên và id cho các tag để dể bề làm việc!

frameset với các frame

Trang chứa framest hơi khó mà làm việc với javscript, nếu bạn đọc kĩ thì ở đó không có sự hiện diện của tag body, điều này cũng có nghĩa là hơi khó mà kích hoạt các hàm js, cách dễ dàng hơn là chèn code js vào những trang con.

Và đương nhiên là hơi khó để code từ frame này, có hiệu lực trên frame kia. Ta chú ý đến vấn đề tham chiếu.Lúc này, frames chứa trong một window lớn hơn, đó chính là parent. Nếu muốn tham chiếu tới nội dung parent(tất nhiên lúc này chỉ có các tag frameset và frame) ta tham chiếu vào ngay document. VD nếu ta có một<frameset>( frameset đã chia trang thành hai tahnh2 phần ngang với chiều ca0 = nhau= 50%)Và ta muốn thay đổi kích thước đó:

parent.document.getElementById('frameset1').rows='95%,*';

ta tam chiếu tới chính frameser và thuộc tính rows của nó và đặt lại giá trị.Lấy giá trị của thuộc tính thuộc một phần tử ở frame khác.

Chỉ hơi khác một chút ở phần tham chiếu. sau khi khi báo parentta không đi tiếp đến document mà là thên của frame, và sau đó là phần tử chứa trong frame đó.

38, Ví dụ về frame và js

Đây là một trang frame có sẵn một số code javascript, các bạn hãy vào xem và view source để thấy sự khác biệt mình muốn nói tới.

hãy chú ý tới mothod location. cái này rất là thú vị khi có frame làm việc chung.

http://hocvui.net/javascript/frames.htm

mình đã dùng thêm một số code javascript mà chưa hề đề cập tới ở các bải hướng dẫn, mình không nói tới, nhưng các bạn hãy thử tự tìm hểu xem!

39, SetTimeout - Định giờ cho sự kiện

bạn có thể dễ dàng định trước thời gian để kích hoạt một hàm, ví dụ như để thông báo cho người dùng khi họ đã vừa làm một việc gì đó trong khoảng thời gian bao nhiêu giây. Ta thực hiện điều này với

setTimeoutsetTimeout

nhận vào hai tham số, tham số thứ nhất chính là câu lệnh javascript sẽ thực hiện, tham số thứ hai là khoảng thời gian chờ.bạn chú ý, tham số thứ nhất chính là câu lệnh javascript cần được đặt trong một cặp dấu nháy, và nếu ngay trong câu lệnh cũng có một dấu nháy, mọi chuyễn sẽ rất rắc rối. Để hạn chế điều đó, ta hãy viết javascript dưới dãng hàm.

VD:

Để làm xuất hiện một hộp thông báo sau 3 giây kể từ khi kích hoạt:

Mã nguồn:[Chọn]

<script>

function trungian()

{

alert("Bạn vừa click vào đây 3 giây trước");

}

function run()

{

setTimeout("trungian();

",3000);

}

</script>

40, ClearTimeout - Ngưng hẹn giờ

Giả sử rằng ta có một chương trình làm toán, người làm bài chỉ có thời gian là 5 giây để trả lời câu hỏi, quá thời gian 5 giây, nếu người chơi chưa trả lời được, hoặc là trả lời sai sẽ hiện ra bảng thông báo chứa kết quả. CÒn nếu trong thời gian 5 giây, người chơi kịp trả lời và trả lời chính xác, một thông báo chúc mừng xuất hiện.

Hướng gải quyết của chúng ta sẽ là:

1 Viết một hàm kiểm tra đáp án, kích hoạt khi người dùng nhấn submit

2 Trong lúc đó cũng viết một hàm hẹn giờ với setTimeout.

3 Phải làm như thế nào để dừng bước 2 khi người trả lời đúng.

Bước 1 và 2 mình tin các bạn sẽ dễ dàng làm được, mọi việc ta cần là ở bước 3, mọi người hãy xem ví dụ:

Mã nguồn:[Chọn]

<script>

//hàm bắt đầu làm toán

function batdau()

{

alert("Kết quả của biểu thức: 3+5=?");

dapan=8;

/*bắt đầu tính thời gian, trong trường hợp này tagan một biến cho setTimeout để dễ hao tác hơn

*/hengio=setTimeout("sai();",5000);

}

//hàm thông báo khi sai

function sai()

{

alert("Đáp án đúng là "+dapan);

}

//hàm kiểm tra

function check()

{

if(document.the_form.kq.value==dapan)

{

alert("Chúc mừng bạn đã trả lời đúng");

//Xoá bỏ hẹn giờ với

clearTimeoutclearTimeout(hengio);

}else{

sai();

clearTimeout(hengio);

}

}

</script>

Hàm bắt đầu sẽ in ra câu hỏi, sau đó bắt đầu hẹn giờ, hết tời gian, setTimeout sẽ gọi hàm sai() thông báo đáp án.

Hàm check sẽ được gọi khi gửi thông tin, nếu đáp án đúng thì gửi câu chúc mừng, sai thì gọi hàm sai, cả hai hành động đều dùng thêm một hàm clearTimeout để tắt stTimeout.

Để làm việc với clearTimeout ta cần gán setTimeout với một giá trị bài sau sẽ hướng dẫn cách để chúng ta làm một đồng hồ bấm giờ với clearTimeout và setTimeout.

41, Tạo một đồng hồ bấm giờ

Nếu ta muốn làm một đồng hồ bấm gờ, khi bấm chạt thì bắt đầu đếm, khi bấm ngưng thì ngừng lại thì làm thế nào nhỉ. Dĩ nhiên là cần tới setTimeout và clearTimeout vì đang nằm trong loạt bài về chúng mà.

Cụ thể thì làm thế nào nhỉ, đồng hồ bấn giờ cứ mỗi giây tăng lên 1, vậy thì có nghĩ là phải gọi một hàm setTimeout thực hiện một hàm tăng lên 1, sau đó là phải làm sau cho hàm setTimeout chạy liên tục cứ sau mỗi 1 giây.Trong đầu bạn chắc hẵn sẽ hiện ra ý tưởng về một vòng lặp, đó cũng là nhưng gì mình nghĩ tới đầu tiên.

Đáng buồn thay:

Mã nguồn:[Chọn]

<script>

function thongbao()

{

alert("Thêm 3 giây nữa đả trôi qua");

}

i=0;

while(i<10)

{

setTimeout("thongbao();",3000);

i=i+1;

}

</script>

Mình viết đoạn code này với suy nghĩ, cứ mỗi lần các c\vòng lặp chạy, nó sẽ gọi hàm setTimeout, đợi 3 giây rồi chạy tiếp. Mọi thứ tan vỡ khi mình chạy thử, sau khi đợi 3 giây thì cả 10 hộp cảnh báo hiện ra, câu trả lời là vì:

Vòng lặp chỉ gọi hàm setTimeout chứ không đợi nó, đối với tốc dộ kinh hồn của vòng lặp, 10 lần sẽ trôi qua ngay như cùng một lúc, và bạn chỉ vừa tắt hộp cảnh báo thứ nhất thì 9 hộp kia đã xuất hiện. Không thể nào giảm tốc độ của một vòng lặp được!

Vậy hãy thử nhìn vào hướng khác, nhìn rộng và xa ra, châu Mỷ chẵn hạn :)) OAo, một hàm tự gọi lại chính nó trong một khoảng thời gian. Đó là cách giải quyết:

Mã nguồn:[Chọn]

function thongbao()

{

alert("Thêm 3 giây nữa đả trôi qua");

setTimeout("thongbao();",3000);

}

Lần đầu tiên thì hơi bị trục trặc, xuất hiện ngay bảng thông báo nếu bạn chạy hàm, nhưng nhữnglần su thì trơn tru, đúng kết hoạch.

Ta có thể sửa lỗi này bằng cách dùng một lần hàm setTimeout bên ngoài hàm, ngoài hàm này, sau lần đầu tiên hàm setTimeour đó sẽ ngưng hoạt động, và hàm bắt đầu gọi hàm setTimeout của riêng nó.và đây là đồng hồ bấm giờ của chúng ta:

Mã nguồn:[Chọn]

<script>

function baogio()

{

num=document.the_form.kq.value;

num=eval(num)+1;

document.the_form.kq.value=num;

hengio=setTimeout("baogio();",1000);

}

</script>

<form>

<input />

<br />

<input />

<input />

</form>

Hãy thử chạy code nhé!

42, Date, Time

Javascript có khả năng lấy ra ngày giờ từ hệ thống của bạn và đem nó lên màn hình.

Đầu tiên bạn cần khai báo một đối tượng kiểu thời gian:

Mã nguồn:[Chọn]

noe=new Date();

Và dùng nó với một số Method theo kiểu : now.method, một số method

gateDate(): ngày dưới dạng số.

24

getDay(): Ngày trong tuần dưới dạng số với 0 là Chủ nhật, 1 là thứ hai...

0

getHours(): Giờ trong ngày với dãng số nguyên, 0 -->23

9

getMinutes(): phút 0-->59

33

getMonth(): Tháng dưới dạng số 0 là tháng 1, 1 là tháng 2....

6

getSeconds():Số giây, 0-->59

getTime(): giờ hiện tại tính theo mili giây

1311471201328

getYear(): Năm, nhưng mà cái này rắc rối lắm, hiễn thị khác nhau trên từng loại trình duyệt

111

Hãy thử xem những lúc khác nhau và trên những trình duyệt khác nhau, các bạn sẽ thấy!

43, JavaScript getElementById

getElementById

đơn giản là một cách thay thế cách tham chiếu tới đối tượng một cách bình thường:

VD:

Để tham chiếu tới giá trị của trường text có tên name, bên trong form the_form:

Mã nguồn:[Chọn]

<form>

<input />

</form>

ta dùng code:

Mã nguồn:[Chọn]

document.the_form.name.value

Nhưng nếu ta thêm thuộc tính id vào text name:

Mã nguồn:[Chọn]

<form>

<input />

</form>

ta có thể tham chiếu tới giá trị nó như sau:

Mã nguồn:[Chọn]

document.getElementById("name").value

Với getElementById ta có thể dễ dàng tham chiếu tới mọi đối tượng, các thẻ div, các tag <p>.....chỉ cần thêm thuộc tính id vào để xác định các thẻ ta muốn làm việc.

44, JavaScript innerHTML

innerHTML là phương thức lấy ra cái gì được bọc bởi cặp thẻ nào đó. Đây là một phương thức rất thú vị để làm việc với HTML hoàn toàn dùng javascript(bạn chỉ dùng javascript sinh ra mả html)

Ví dụ ta có :

Mã nguồn:[Chọn]

<div>

<b>

<i>Xem dòng text mẫu</i>

</b>

</div>

<script>

document.write("Lần thứ hai vẫn thế vì chỉ bỏ cặp thẻ div"+document.getElementById("1").innerHTML+"<br />");

document.write("nhưng lần sau thì chỉ còn in nghiêng"+document.getElementById("2").innerHTML+"<br />");

</script>

Kết quả của đoạn mã trên:

Xem dòng text mẫu Lần thứ hai vẫn thế vì chỉ bỏ cặp thẻ div

Xem dòng text mẫu nhưng lần sau thì chỉ còn in nghiêng Xem dòng text mẫu

Thay đổi định dạng dùng innerHTML.Đơn giản là ta lấy nó ra, đặt lại nó, rồi lại chèn ngược vào. Đó là tất cả những gì trong function changeText()

Mã nguồn:[Chọn]

<script>

function changeText()

{

var oldHTML = document.getElementById('para').innerHTML;

var newHTML = "<font color=\"#FF0000\">" + oldHTML +"</font>";

document.getElementById('para').innerHTML = newHTML;

}

</script>

<p id='para'>Chào mừng các bạn đến với <b id='boldStuff3'>yenhung.xtgem.com</b>

</p><input type='button' onclick='changeText()' value='Change Text'/>

Chào mừng các bạn đến với yenhung.xtgem.com

Các bạn bấm xem ha!

45, JavaScript Void 0

JavaScript Void 0 là một cách để click một link mà chả đi tới đâu. Bạn đừng nhầm với cách đặt giá trị của thuộc tính, cái này có nghĩa là đi tới một phần nào trong trang. Còn cách mình đang nói tới là click vào mà chả làm gì cả.hãy thử một link như thế này:

Mã nguồn:[Chọn]

<a>Link chả đi tới đâu</a>

Link chả đi tới đâu

Đây là một cách hay để chạy một hàm, kết hợp với thuộc tính onclick, nhưng mọi thứ không chỉ có thế.

*Mình không muốn đis âu vào vấn đề này, bởi vì phần lớn sự hữu dụng mà mình thấy đều đả nằm trên kia, phần dưới này theo mình là nâng cao hơn, tuy cũng ítứng dụng hơn, nhưng kha là hay,chỉ có một ví dụ, các bạn hãy tự tìm hiểu thêm nhé:

Mã nguồn:[Chọn]

<a>Click xem nhé!</a>

Click xem nhé!

46, Vấn đề với trình duyệt

Có một điều rất "cực" các bạn khi thiết kế web dùng các client-script(script chạy trên máy khách) đó là tuỳ theo trình duyệt sẽ có một cách hoạt động khác nhau.

Như chúng ta đã biết sự khác nhau ở các trình duyệt thậm chí xuất hiện ở cả html, các màu và sự khác nhau không chỉ giữa các loại trình duyệt và ở cá phiên bản....

Đối với các script, một số function ở một số trình duyệt khác nhau sẽ có công dụng, cú pháp hơi khác nhau. Hay là cùng để làm một công việc mà tuỳ loại trình duyệt lại có những cú pháp nhất định.

Và thậm chí một số trình duyệt tự phát hành những method chỉ dành riêng cho mình,. Các bạn có nhớ những bài có đề cập tới DOM không, những đối tượng đó cũng thay đổi theo từng trình duyệt.Thật may là không phải mọi thứ đều quá khác xa nhau, chủ yếu là chỉ có anh IE rất(Interbet Explorerer) là hơi khác các anh còn lại, những anh khác thì cũng có cái này cái kia...Để tránh tình trạng lỗi sảy ra giữa các trình duyệt, ta cần hiểu rỏ chúng và các hàm. Xem từng hàm hoạt động như thế nào, từng đối tựơng có sự khác biệt như thế nào ở các trình duyệt.

Chúng có là chuẫn của W3C hay không (Nếu là chuẫn của W3C thì sẽ ít có khác biệt giữa các trình duyệt)

Javascript cho pháp ta phần nào làm được những điều đó bằng cách tìm ra tên và phiên bản của trình duyệt.

Đó là đối tượng

Navigator.

Để xác định tên trình duyệt:

Navigator.appName

Để xác định phiên bản trình duyệt:

Navigator.appVersion

Ví Dụ:

Mã nguồn:[Chọn]

<script>

document.write("Trình duyệt của bạn là: <b>"+navigator.appName+"</b> phiên bản:"+navigator.appVersion);

</script>

Trình duyệt của bạn là: Netscape phiên bản: 5.0 (X11; U; Linux i686; en)

Một cách mình hay dùng cho vấn đề này là dùng một lượt nhiều loại trình duyệt thông dụng như: IE, FF, Opera, Google Chrame, sau đó chạy thử trang web trên tất cảnhững trình duyệt đó.Nếu có lỗi sảy ra do sự khác biệt và không có cách nào thay thế, ta có thể tạo những trang dành riêng cho những trình duyệt, tuỳ theo người dùng sử dụng trình duyệt nào mà ta sẽ chuyễn họ tới(dùng cấu trúc if là đối tương location).

Việc càng khó khăn, ở đó càng bộc lộ sự sáng tạo của con người,đó chính là ưu điểm mà cho tới bây giờ, máy móc không bao giờ bì lại so với chúng ta.

47, Cookies là gì?

Đối với những người mới vào nghề như chúng ta, các khái niệm mới luôn là đều khó hiểu. Đó là lời đầu tiên minh muốn nó, và lời thứ hai là:

cookies không phải là bánh quy đâu ha Cookie là các thông tin lưu trong máy tính thường được dùng để nhận ra người dùng khi viếng thăm một trang web.Khi người dùng truy cập đến một trang web có sử dụng cookie, trang web đó sẽ tự động gửi cookie đến máy tính của người dùng. Những cookie này tự động được tổ chức trong hệ thống máy tính. Khi truy cập đến các trang web sử dụng được cookie đã lưu, Website sẽ đọc thông tin từ cookies đó, để làm gì đó theo yêu cầu của người lập trình.Đa số các trình duyệt hiện tại đều cho phép bạn tuỳ chỉnh việc lưu cookies, hoặc hoàn toàn không cho phép việc sửu dụng cookies bởi một số lý do tế nhị.

Một ví dụ thực tế à khi bạn đăng nhập vào một website, đa phần ở mục đăng nhập của các website đều có chức năng lưu mật khẩu, đó chính là một trong những công dụng của cookies.

Đa số các ngôn ngữ dùng cho lập trình web đều có những công cụ làm việc với cookies, các bài sau sẽ hướng dẫn các bạn ghi và sử dụng cookies bằng javascript.

Bạn hãy tìm thử các file cookies được lưu ở thư mục có đường dẫn( dành cho các ban sử dụng Window):

C:\Documents and Settings

C:\Documents and Settings\Administrator\Cookiesvới Administrator chính là user mà bạn dùng.

Để chắc chắn trình duyệt của bạn cho phép đọc và ghi các cookies, bạn vô phần cài đặt trình duyệt sẽ rỏ ha.

48, Thiết lập Cookie

Tất cả các Cookie đều được lưu giữ trong đối tượng

document.cookie, đều này có nghĩa là nó nằm trong một đối tượng mảng. Và tất cả mọi chuyễn phải mầng chính là "móc"cái ta cần ra khỏi đống lộn xộn ấy!

Nhưng mà đầu tiên hãy đi vào thiết lập cookies cái đã!

Việc thiết lập cookie cung khá đơn giản, mọi việc đơn giản chỉ là:

document.cookie="<tên cookies>=<nội dung>";

Nói thẳng ra là ta nhét một chuỗi mà đằng trước ký tự "=" được xem là tên, và sau đó là nội dung.

Còn một điều nên lưu ý nữa là một domain (tức 1 website) chỉ có thể tạo 20 cookies trên một khách và chắc chắn rằng vào thời bủi này bạn không bao giờ muốn lảng phí thứ gì! Cho nên nếu không cần thiết thì các cookies phải được xoá bỏ.

Thiết lập thời gian tồn tại của cookies

Cookies sẽ chỉ tồn tại cho tới thời điểm mà bạn quy định, ví dụ như bạn quy định cho nó tồn lại tới này 1 tháng 1 chẵn hạn, nhưng lưu ý một điều, thời gian phải theo định dạng GMT và hơi bị nản để làm theo cách này.

Một giải pháp khác chính là cho cookies tồn tại trong một khoảng thời gian tử khi thiết lập.

var exdate=new Date();

exdate.setDate(exdate.getDate()+365);

Với đoạn code trên, biến exdate đã lưu thời điểm trong nó là 365 ngày sau kể từ thời điểm cookies được thiết lập.

Để thiết lập thời gian tồn tại cho cookies, bạn thêm

expire=<ngày hết hạn>

trong chuỗi nội dung của cookies, được phân tách bằng dấu ( ; ).Hảy thử nối tất cả lại và tạo một đoạn code js tạo một cookies, trong đó lưu trữ một chuỗi mà bạn nhập vào

Mã nguồn:[Chọn]

<script>

var exdate=new Date();

var your_name=prompt("What's your name!?","");

exdate.setDate(exdate.getDate()+365);

document.cookie=escape("last_time_visit="+your_name+";

expire="+exdate.setDate(exdate.getDate()+365));

</script>

Hàm escape có tác dụng chuyễn đỗi những khý tự đặc biệt, ví dụ %20 sẽ thay thế cho khoản trắng bài sau chúng ta sẽ đi vào tìm hiểu cách đọc những gì mà ta đã viết.

49, Đọc cookies

Mã nguồn:[Chọn]

function getCookie(c_name)

{

if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=");

if (c_start!=-1)

{

c_start=c_start + c_name.length+1;

c_end=document.cookie.indexOf(";",c_start);

if (c_end==-1) c_end=document.cookie.length;

return unescape(document.cookie.substring(c_start,c_end));

}

}

return "";

}

Ở đây mình có một hàm, hàm này sẽ đọc cookies theo tên, hàm này nhận vào một tham sốc_name chính là tên cookies ta tìm, ta bắt đầu xem xét từng dòng:

if (document.cookie.length>0)

dòng này xác định xem trong đối tượng cookies có lưu thông tin gì không, nếu trong đối tượng cookies có lưu thông tin, ta mới bắt đầu lục cookies của mình

ra.c_start=document.cookie.indexOf(c_name + "=");

Chắc hẳn các bạn còn nhớ bài nói về việc kiểm tra phần tử select của form.

Việc này cũng tương tự như thế, tìm trong chuỗi cookies xem có tên cookies của ta hay không. dòng

if (c_start!=-1)

sẽ xem xét điều kiện trên.

c_start=c_start +

c_name.length+1;

c_end=document.cookie.indexOf

(";",c_start);

if (c_end==-1)

c_end=document.cookie.length;

Ba dòng này xác định vị trí đầu tiên và cuối cùng của cookies, chắc các bạn đã hiểu cách nó tìm chứ!?

return unescape(document.cookie.substring(c_start,c_end));

Dòng này trả giá trị của hàm trở về cookies được

unescape(thực hiện hành động ngược lại với hàm escape ở bài trước)ta có thể in ra và sử dụng cookies với đoạn javascript sau:

Mã nguồn:[Chọn]

<script>

username=getCookie('username');

if (username!=null && username!="")

{

alert('Welcome again '+username+'!');

}else {

username=prompt('Please enteryour name:',"");

if (username!=null && username!="")

{

setCookie('username',username,365);

}

}

</script>

Sau khi đoạn code này chạy, nó sẽ khởi động hàm check cookies,nếu giá trị của cookies trả về khác rỗng thì in ra, ngược lại thì chạy

hàm setCookie để thiết lập cookies. Hàm này mình viết hơi khác với ví dụ trong bài trước để thuận tiện hơn.

Mã nguồn:[Chọn]

function setCookie(c_name,value,expiredays)

{

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "="+escape(value)+((expiredays==null) ? "" :";

expires="+exdate.toGMTString());

}

Tin hẳn các bạn đã đủ mọi điều để hiễu hàm trên, chỉ có lưu ý một chút:

((expiredays==null) ? "" :";

expires="+exdate.toGMTString());

Dòng này là dạng viết tĩnh lược của câu lệnh if gồm có vế bên trong cặp dấu ngoặc( phía trước dấu ?) là điều kiện. Phía sau dấu ?là hai dòng le65ng cho trường hợp đúng và sai, phân cách bởi dấu ( : ).

Mình nhắm vào sự trong sáng của mã, và nói thật, viết mã như trên đối với mình không dễ dàng gì, mình luôn thích dùng câu lệnh if cơ bản, và dùng các dấu ngoặc móc giới hạn các dòng lệnh, viết thế tuy rườm rà, không "chuyên nghiệp" theo một số người, nhưng lại rất dễ nhìn dễ hiểu, đúng theo nghĩa cơ bản

Sở dĩ mình dùng nó trong ví dụ này là vì mình muốn giới thiệu thêm cho các bạn, chứ như lúc mình tự học, nhìn thấy mấy dòng này trong code người ta viết thì cũng phải nhăn mặt tư duy dữ lắm!