VNJS.NET
Javascript căn bản
Javascript là gì?
Javascript là một ngôn ngữ lập trình được tạo ra vào năm 1995 bởi Brendan Eich tại Netscape. Mục đích ban đầu để nâng cao khả năng tương tác của trang web với người sử dụng.
Thông thường mã javascript (gọi tắt là js) được nhúng vào trong trang web, và được thực thi bởi trình duyệt. Ngoài ra mã js còn được sử dụng một số nơi khác như trên server (cùng nodejs), trong các kịch bản photoshop, các plugin, extension của trình duyệt, các ứng dụng trên điện thoại, máy tính bảng ....
ví dụ:
<!--DOCTYPE html--> <html> <head> <title>Javascript cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <div id="viet-tel"></div> <script type="text/javascript"> // khai báo khởi tạo hàm function viewSource(element) { // truy cập phần tử viettel trong DOM var viettel = document.getElementById(element); // kiểm tra xem có phần tử viettel có tồn tại hay không // nếu có thì xem bên trong nó có những gì ? if (viettel) { // khởi tạo chuỗi html var html = "<ol>"; // xem bên trong phần tử viettel for (var i in document) { html += "<li><h3>" + i + "</h3></li>"; } html += "</ol>"; // xuất thông tin ra trang web viettel.innerHTML = html; // thay đổi màu chữ; viettel.style.color = "green"; } else { // đưa ra thông báo khi không tìm thấy phần tử viettel alert('viettel không tồn tại nhé'); } } // cài đặt sự kiện khi trang web tải xong document.body.onload = function() { viewSource("viet-tel"); // gọi hàm viewSource; }; </script> </body> </html>
Kết quả : example.html
Ví dụ đơn giản trên trạm tới hầu hết các vấn đề hay gặp khi làm việc cùng Javascript: khai báo biến, viết hàm, gọi hàm, xử lý chuỗi, vòng lặp, rẽ nhánh, cài đặt sự kiện, truy xuất và chỉnh sửa phần tử trong trang web...Cần những gì để bắt đầu?
Trình duyệt để xem kết quả:
Một chương trình soạn thảo, chọn trong danh sách sau:
- Notepad ++ (window)
- Aptana (window | mac | linux)
- Eclipse (window | mac | linux)
- Komodo Edit (window | mac | linux)
- Sublime Text (window | mac | linux)
Sách tham khảo:
- JavaScript: The Definitive Guide Book
Tác giả: David Flanagan - Professional JavaScript for Web Developers
Tác giả: Nicholas C. Zakas
Website hướng dẫn:
Chương trình đầu tiên?
Cài đặt trình duyệt và trình soạn thảo ở trên.
- Tải ví dụ trên : example.zip về máy tính.
- Giải nén ra sẽ được file: example.html.
- Click trực tiếp vào nó để tự mở ra cùng với trình duyệt mặc định.
- Xác nhận trình duyệt được mở và trang web có nhiều dòng chữ màu xanh như thế này có nghĩa chương trình đã chạy thành công!
Chương trình "Hello World"?
- Mở trình soạn thảo.
- Tạo một 1 file mới.
-
Nhập vào đoạn mã sau:
<!--DOCTYPE html--> <html> <head> <script type="text/javascript"> alert('Hello world'); </script> </head> <body> </body> </html> - Lưu file thành hello-world.html theo mã unicode
- Mở file hello-world.html trong trình duyệt, xác nhận có 1 khung hình chữ nhật có chữ "Hello world" và một nút có chữ "OK" hiện ra là chương trình chạy được !
Kết quả : hello-world.html
Đưa mã javascript vào trang web?
-
Cách đơn giản:
Trong trang web tạo thẻ <script> có thuộc tính type="text/javascript" rồi viết mã javascript vào giữa vùng thẻ đóng và thẻ mở như sau:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript"> // mã javascript sẽ được đặt ở đây; document.title = 'vnjs.net'; </script> </head> <body></body> </html> -
Cách thông dụng:
Trong trang web tạo thẻ <script> có thuộc tính src trỏ đến một file javascript có sẵn và có thể thêm thuộc tính type="text/javascript":
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src='http://vnjs.net/js/run_prettify.js' type="text/javascript" ></script> </head> <body></body> </html> Chú ý: Giá trị của thuộc tính src là đường dẫn tương đối hoặc đường dẫn tuyệt đối trỏ đến file javascript.
ở ví dụ trên thuộc tính src có giá trị: http://vnjs.net/js/run_prettify.js là một đường dẫn tuyệt đối.
Trong các file javascript mở rộng sẽ không chứa thẻ <script>, chỉ chứa mã javascript.
-
Cách khác:
Viết trực tiếp vào trong một số thuộc tính (action, href, onblur, onclick, onload ...) trong các thẻ của html
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body onload="alert('onload');"> <a href="javascript:alert('javascript');" >javascript</a> <form action="javascript:alert('javascript');" > <input type="button" onclick="alert(2);" value="2"/> </form> </body> </html>
Toán tử và từ khóa
Một số từ khóa sau được kết hợp với những toán tử khác theo các qui tắc nhất định để tạo nên cấu trúc một chương trình Javascript. Những từ khóa này nên được nhớ kỹ và không sử dụng để đặt tên biến, tên hàm.
- /* */ : tạo ghi chú nhiều dòng
- // : tạo ghi chú một dòng
- + : phép cộng
- - : phép trừ
- * : phép nhân
- / : phép chia
- % : phép lấy đồng dư
- ! : phép toán phủ định
- ++ : cộng thêm 1 cho một số
- -- : trừ bớt 1 cho một số
- = : phép gán (sử dụng rất nhiều)
- += : cộng xong rồi gán ngược lại
- -= : trừ xong rồi gán ngược lại
- *= : nhân xong rồi gán ngược lại
- /= : chia xong rồi gán ngược lại
- &
- |
- ^
- ~
- &=
- |=
- ^=
- ~=
- <<
- >>
- >>>
- == : so sánh bằng nhau
- != : so sánh khác nhau
- === : so sánh bằng tuyệt đối
- !== : so sánh khác nhau tuyệt đối
- > : so sánh lớn hơn
- < : so sánh nhỏ hơn
- >= : so sánh lớn hơn hoặc bằng
- <= : so sánh nhỏ hơn hoặc bằng
- || : phép toán logic hoặc
- && : phép toán logic và
- ! : phép toán logic phủ định
- , : dấu phân cách các biến, giá trị trong mảng, trong đối tượng
- ; : dấu hiệu kết thúc 1 câu lệnh
- { : dấu hiệu bắt đầu một khối lệnh
- } : dấu hiệu kết thúc một khối lệnh
- do
- if
- in
- for
- int
- new
- try
- var
- byte
- case
- char
- else
- enum
- goto
- long
- null
- this
- true
- void
- with
- break
- catch
- class
- const
- false
- final
- float
- short
- super
- throw
- while
- delete
- double
- export
- import
- native
- public
- return
- static
- switch
- throws
- typeof
- boolean
- default
- extends
- finally
- package
- private
- abstract
- continue
- debugger
- function
- volatile
- interface
- protected
- transient
- implements
- instanceof
- synchronized
Viết một câu lệnh và khối lệnh?
-
Câu lệnh là sự kết hợp có qui tắc của từ khóa, toán tử và các ký tự nhằm thông báo cho trình thông dịch (thường là trình duyệt) biết phải làm cái gì đó tại thời điểm này. Kết thúc một câu lệnh thường có dấu ;
Cú pháp:
bảo cho trình duyệt làm cái gì đó ;ví dụ về câu lệnh bảo trang web lượn đi cho nước nó trong:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1> javascript - cơ bản </h1> <script type="text/javascript"> document.body.style.display = "none"; </script> </body> </html> ví dụ về tiếp về câu lệnh phục hồi nhân phẩm cho trang web trước:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1> javascript - cơ bản </h1> <script type="text/javascript"> document.body.style.display = "block"; </script> </body> </html> -
khối lệnh được tạo bởi nhiều câu lệnh gom nhóm lại. Một khối lệnh thường bắt đầu bằng dấu { và kết thúc bởi }
Cú pháp:
{ .. các câu lệnh .. }ví dụ về khối lệnh làm trang web đổi trắng thay đen:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <h1> javascript - cơ bản </h1> <script type="text/javascript"> if (document.body) { // bắt đầu khối lệnh document.body.style.color = "white"; document.body.style.backgroundColor = "black"; } // kết thúc khối lệnh </script> </body> </html>
Tạo chú giải trong javascript?
-
Chú giải cho một dòng (đơn dòng) được bắt đầu bằng 2 dấu // tiếp theo là nội dung
Cú pháp:
// nội dung cần giải thíchví dụ về tạo chú giải một dòng:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // ví dụ về chú giải đơn dòng; // thay đổi tiêu đề trang web; document.title = 'vnjs.net'; </script> </body> </html> -
Chú giải nhiều dòng (đa dòng) được bắt đầu bằng /* và kết thúc bởi */
Có thể dùng ghi chú đa dòng thay cho đơn dòng.Cú pháp:
/* nội dung cần giải thích */ví dụ về tạo chú giải nhiều dòng:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> /* ví dụ về chú giải đa dòng; ... .... ..... ...... dài dòng; */ /* thay đổi tiêu đề trang web */ document.title = 'vnjs.net'; </script> </body> </html>
Chú giải thường dùng cho lập trình viên dễ nắm bắt ý tưởng, cách thức hoạt động của chương trình. Phần chú giải sẽ không được thực thi.
Khai báo biến trong javascript?
Khai báo một biến thường bắt đầu bằng chữ var, tiếp sau là ít nhất 1 khoảng trắng, sau đó là tên của biến. Cuối cùng lại là một số lựa chọn cho việc kết thúc khai báo bằng dấu ; hay gán giá trị đầu tiên hoặc tiếp tục lặp lại quá trình khai báo trên cho biến tiếp theo.
Tên của một biến phải được bắt đầu bằng 1 chữ cái viết HOA hoặc viết thường hay ký tự _, $
Những ký tự tiếp theo của tên biến được trọn trong số sau: một con số, chữ cái thường, chữ cái viết HOA, ký tự _ hay ký tự $.
Tên của biến không được ngẫu nhiên trùng với các từ khóa đã được giới thiệu ở trên (break, const ...)
Tên của biến không nên trùng với tên hàm đã khai báo trước.
Tên của biến phân biệt chữ thường và chữ HOA.
-
Khai báo kiểu 1:
var tên của biến; -
Khai báo kiểu 2:
var tên của biến = giá trị của biến; -
Khai báo kiểu 3:
var tên của biến 1 = giá trị của biến 1, tên biến 2 = giá trị biến 2, ... ;
ví dụ về khai báo biến thuần túy:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // khai báo suông; var bien1; </script> </body> </html>
ví dụ về khai báo biến cùng giá trị đầu tiên:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // giá trị đầu là null; var bien1 = null; // giá trị đầu là 1 giá trị logic; var bien2 = true; // giá trị đầu là 1 chuỗi; var bien3 = 'ba'; // giá trị đầu là 1 số; var bien4 = 4; // giá trị đầu là 1 mảng; var bien5 = [5, 'n']; // giá trị đầu là 1 đối tượng; var Bien6 = { 'mot' : 1, 'hai' : bien2 }; // giá trị đầu là 1 biến khác; var _bien7 = Bien6; // giá trị đầu là 1 hàm; var $bien8 = function() {}; // giá trị đầu vào là 1 kết quả một phép tính; var $_bieN_9 = bien2 + 'ba'; </script> </body> </html>
ví dụ về khai báo nhiều biến cùng một lúc:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // các biến được phân cách bằng dấu , nằm trên cùng 1 dòng var bien1 = null, bien2, bien3; // kết thúc bằng đấu ; // các biến được phân cách bằng dấu , mỗi 1 dòng riêng var bien4 = 4, bien5, bien6 = 6, _bien7 = bien6, $bien8 = function() {}, $_bieN_9 = bien2 + 'ba'; // kết thúc bằng đấu ; </script> </body> </html>
ví dụ về đặt tên biến sai hoặc phạm húy (trình duyệt sẽ báo lỗi):
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // sai vì ký tự đầu tiên là 1 số var 1bien; // sai vì chứa ký tự đặc biệt var bien2@; // sai vì có chứa khoảng trắng var bien 3; // sai vì trùng với từ khóa var catch = 1; </script> </body> </html>
Cấu trúc điều khiển rẽ nhánh
-
Cấu trúc switch:
switch ( giá trị ) { case giá trị 1 : thực thi khối lệnh 1 beak; case giá trị 2 : thực thi khối lệnh 2 beak; default: thực thi khối lệnh khác khi các trường hợp trên không xảy ra }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // hiện thông báo ngày trong tuần switch (new Date().getDay()) { case 1: alert("Hôm nay là thứ hai"); break; case 2: alert("Hôm nay là thứ ba"); break; case 3: alert("Hôm nay là thứ tư"); break; case 4: alert("Hôm nay là thứ năm"); break; case 5: alert("Hôm nay là thứ sáu"); break; case 6: alert("Hôm nay là thứ bẩy"); break; default: alert("Hôm nay là chủ nhật"); } </script> </body> </html> -
Cấu trúc if:
if (điều kiện đúng) { thực thi khối lệnh }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // kiểm tra sự sẵn sàng của trang web if (document.body) { // xem chiều rộng của trang web alert("Trang web rộng:" + document.body.offsetWidth + "px"); } </script> </body> </html> -
Cấu trúc if cùng else:
if (điều kiện đúng) { thực thi khối lệnh } else { thực thi khối lệnh khác }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> var ngauNhien = Math.round(10 * Math.random()); // kiểm tra chẵn lẻ if (ngauNhien % 2) { alert(ngauNhien + " là số lẻ"); } else { alert(ngauNhien + " là số chẵn"); } </script> </body> </html> -
Cấu trúc if cùng else if và else:
if (điều kiện đúng) { thực thi khối lệnh } else if (điều kiện khác đúng) { thực thi khối lệnh } else { thực thi khối lệnh mặc định }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // lấy ngày trong tuần var day = new Date().getDay(); if (day == 6) { alert("Cuối tuần đi chơi"); } else if (day == 0) { alert("Chủ nhật đi lễ"); } else { alert("Ngày thứ đi học"); } </script> </body> </html>
Cấu trúc vòng lặp
-
Vòng lặp for:
for ( khởi tạo giá trị ban đầu; điều kiện đúng; câu lệnh lặp) { thực thi khối lệnh }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // viết ra từ 10 đến 1 for (var i = 10; i; --i) { document.write("<div>" + i + "</div>"); } </script> <div>---</div> <script type="text/javascript"> // viết ra từ 1 đến 10 for (var i = 1; i <= 10; ++i) { document.write("<div>" + i + "</div>"); } </script> <div> vẽ hình tam giác</div> <script type="text/javascript"> for (var i = 1; i <= 10; ++i) { for (var ii = 1; ii <= i; ++ ii) { document.write("*"); } document.write("<br/>"); } </script> </body> </html> -
Vòng lặp while:
while ( điều kiện đúng ) { thực thi khối lệnh }ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> var i = 10; while (i) { document.write(i-- + "<br/>"); } </script> </body> </html> -
Vòng lặp for .. in:
for ( giá trị so sánh in đối tượng tham chiếu) { thực thi khối lệnh }for .. in là chiêu thức ảo diệu nhất trong Javascript. Lĩnh ngộ được nó là có thể tự học được Javascript, thậm chí cả thư viện giống như jQuery, YUI.
ví dụ xem API:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <!-- tải thư viện jQuery --> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> var jqueryAPI = "<h1> Xem API của jQuery </h1>"; var $body = $(document.body); jqueryAPI += "<ol>"; for (var i in $body) { jqueryAPI += "<li>"; jqueryAPI += "<h3>" + i + "</h3>"; jqueryAPI += "<p>" + $body[i].toString().replace(/</g, "<") + "</p>"; jqueryAPI += "</li>"; } jqueryAPI += "</ol>"; document.body.innerHTML = jqueryAPI; </script> </body> </html> Kết quả: view-api.html
-
Vòng lặp do .. while:
do { thực thi khối lệnh } while ( điều kiện đúng )ví dụ:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> var i = 10; do { document.write(i-- + "<br/>"); } while (i) </script> </body> </html>
Viết hàm và gọi hàm
-
Hàm có đầy đủ tên và tham số:
function tên của hàm (tham số 1, tham số 2 ..) { khối lệnh } -
Hàm có tên thiếu tham số:
function tên của hàm () { khối lệnh } -
Hàm thiếu cả tên và tham số:
function () { khối lệnh } -
Hàm thiếu tên nhưng có tham số:
function ( tham số 1, tham số 2 ..) { khối lệnh }
Nếu hàm số được đặt tên, thì tên được đặt theo qui tắc đặt tên biến.
ví dụ về viết hàm:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // hàm mẫu chỉ có tính chất minh họa! function ham1() { } // hàm cộng hai số // nhận 2 tham số là a và b // trả lại kết quả là tổng 2 giá trị a và b function cong2So(a, b) { return a + b; } // có thể không cần tên khi khai báo hàm var bien = function() { // thay đổi tiêu đề trang web theo ngày tháng hiện tại document.title = new Date(); }; </script> </body> </html>
Để gọi một hàm chỉ việc viết tên hàm cùng tham số truyền vào nếu có.
ví dụ về gọi hàm:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // hàm mẫu trưng bày. function ham1() {} function cong2So(a, b) { alert(a + b); } // gọi hàm mẫu ham1(); // gọi ra thế thôi chứ nó chẳng làm được cả. // hiển thị ô thông báo cùng tiêu đề trang web alert(document.title); // alert là hàm có sẵn trong trình duyệt // thực hiện phép cộng 2 số cong2So(2 , 3); // hiện thị ra ô thông báo cùng giá trị là số 5 // truy cập tới một đối tượng trong DOM // bằng cách gọi hàm getElementById của đối tượng document var vnjs = document.getElementById("header"); // trường hợp này hàm thường được bảo là phương thức window.location.reload(); // gọi hàm reload, bắt trình duyệt tải lại trang web </script> </body> </html>
Ngoài ra còn có cú pháp ít phổ biến hơn khi viết hàm:
new Function( [tham số 1] [, tham số 2] [..., tham số n] , "khối lệnh thân hàm" );
ví dụ về sử dụng new Function:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // khởi tạo hàm cộng var cong2So = new Function("a", "b", "alert(a + b)"); // gọi hàm cong2So(2 , 3); </script> </body> </html>
Phạm vi của biến
- Biến khai báo bên trong 1 hàm gọi là biến cục bộ (địa phương)
Biến này chỉ được tham chiếu ở trong phạm vi hàm mà nó đã khai báo. Không thể gọi từ trong hàm khác hoặc bên ngoài chương trình.
- Biến khai báo không nằm trong bất kỳ hàm nào gọi là biến toàn cục
Biến này được tham chiếu ở mọi nơi trong chương trình kể cả trong các hàm khác. Miễn là lúc tham chiếu đến biến này nó đã được khai báo.
"use strict"; là câu lệnh gì?
'use strict'; được viết để cho trình duyệt xem xét mã javascript một cách nghiêm ngặt (strict mode).
nó có phạm vi hoạt động giống như là phạm vi của biến
nếu được khai báo trong chương trình thì phạm vi của nó là toàn chương trình.
nếu được khai báo trong một hàm nào đó thì chế độ quản chế này (strict mode) chỉ áp dụng cho hàm đó mà thôi,
không có tác dụng trong hàm khác và toàn chương trình.
ý nghĩa của 'use strict'; như là sự cố gắng gìn giữ sự trong sáng của Javascript.
như hạn chế tình trạng chen lấn xô đẩy, tranh giành khách giữa các biến,
hạn chế tình trạng chơi chữ bằng cách dùng từ đồng âm khác nghĩa làm đau đầu anh em lập trình viên.
Có điều đáng tiếc là chỉ có những phiên bản trình duyệt mới hiểu nó.
ví dụ về tranh giành khách, đoạt xá:
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> ((function trueStory () { /* Chuyện nàng eval. Ngày xửa ngày xưa. Trong một chương trình nó, có một cái cửa sổ, sinh được 2 cô gái tên là eval và alert. eval xinh đẹp và rất tài năng, có khả năng biến một chuỗi thành một khối lệnh. alert xấu xí lại gian ác chả có tài năng gì nổi bật. Vì thế alert luôn tính kế hãm hại eval. Rình rập mãi, trong một lần vô tình eval ngủ quên alert đã tiến hành đoạt xá. */ eval = alert; // và thành công. eval("Hello world, I'm alert"); /* giờ đây linh hồn eval hiện tại không còn nữa, thay vào đó là chức năng của alert một kết cục bi thảm dành cho eval. */ })(); </script> </body> </html>
chuyện đáng tiếc trên sẽ không xảy ra nếu như sử dụng "use strict":
<!--DOCTYPE html--> <html> <head> <title>javascript - cơ bản</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> (function storyRewrite () { "use strict"; // đoạt xá; eval = alert; // nhưng gây lỗi luôn ! eval("Hello world, I'm alert"); // còn lâu mới được nhé })(); </script> Mở console lên sẽ thấy thông báo sau lỗi: <span style="color: red">SyntaxError</span><br/> </body> </html>
Javascript viết hoa chữ cái đầu các từ
<script type="text/javascript"> function toTitleCase(str) { return str && str.replace(/(^\w|\s+\w)/g, function(match) { return match.toUpperCase(); }); } alert( toTitleCase("convert string to title in javascript") ); </script>
Bài đăng
0 nhận xét:
Đăng nhận xét