Các khái niệm javascript cơ bản

JavaScript là gì? JavaScript là một ngôn ngữ lập trình của HTML và WEB Nó là nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client Side script t.

JavaScript gì? JavaScript ngơn ngữ lập trình HTML WEB Nó nhẹ sử dụng phổ biến phần trang web, mà thi hành chúng cho phép Client-Side script tương tác với người sử dụng tạo trang web động Nó ngơn ngữ chương trình thơng dịch với khả hướng đối tượng JavaScript biết đến với tên Mocha, sau LiveScript, Hãng Netscape thay đổi tên thành JavaScript, phổ biến tượng Java lúc JavaScript xuất lần đầu Netscape 2.0 năm 1995 với tên LiveScript Core đa ngôn ngữ nhúng vào Netscape, IE, trình duyệt khác ECMA-262 Specification định nghĩa phiên chuẩn ngôn ngữ JavaScript sau: • • • • • JavaScript ngơn ngữ chương trình thơng dịch, nhẹ Được thiết kế để tạo ứng dụng mạng trung tâm Bổ sung tích hợp với Java Bổ sung tích hợp với HTML Mở đa tảng Client-side JavaScript Client-Side JavaScript Form phổ biến ngôn ngữ Script nên bao gồm tài liệu HTML cho việc mã hóa để thơng dịch trình duyệt Nghĩa trang web khơng cần HTML tĩnh, bao gồm chương trình mà tương tác với người dùng, điều khiển trình duyệt, tạo nội dung HTML động Kỹ thuật Client-Side JavaScript cung cấp nhiều lợi CGI Server-Side Script Ví dụ, bạn sử dụng JavaScript để kiểm tra người sử dụng nhập địa Email hợp lệ trường Form JavaScript code thực thi người sử dụng đệ trình Form, tất đầu vào hợp lệ, chúng đệ trình tới Web Server JavaScript sử dụng để nắm bắt kiện khởi tạo từ người sử dụng nhấp chuột, điều hướng link, hoạt động khác mà người dùng khởi tạo Các lợi JavaScript Các lợi việc sử dụng JavaScript là: • • • • Sự tương tác Server hơn: Bạn xác nhận đầu vào (input) người sử dụng trước gửi trang tới Server Điều làm tiết kiệm lưu lượng tải Server, nghĩa Server bạn tải Phản hồi tới khách truy cập: Họ chờ cho trang web tải lại để thấy xem họ quên nhập Khả tương tác tăng lên: Bạn tạo giao diện mà phản ứng lại người sử dụng rê chuột qua chúng kích hoạt chúng thơng qua bàn phím Giao diện phong phú hơn: Bạn sử dụng JavaScript để bao gồm mục thành phần Drag Drop (DnD) trượt (Slider) để cung cấp Rich Interface (Giao diện giàu tính năng) tới site khách truy cập bạn Hạn chế JavaScript Chúng ta đối xử JavaScript ngôn ngữ chương trình thức (full-fledged) Nó thiếu tính quan trọng sau: • • • Client-side JavaScript khơng cho phép đọc ghi file, lý bảo mật JavaScript không sử dụng cho việc kết nối mạng ứng dụng khơng có hỗ trợ có sẵn JavaScript khơng có khả đa luồng đa xử lý Một lần nữa, JavaScript ngơn ngữ chương trình thơng dịch, nhẹ mà cho phép bạn xây dựng khả tương tác trang HTML tĩnh Các công cụ phát triển JavaScript Một điểm mạnh lớn JavaScript khơng u cầu cơng cụ phát triển tốn Bạn bắt đầu với biên soạn (Editor) văn đơn giản Notepad Khi ngơn ngữ thơng dịch bên context trình duyệt web, bạn khơng cần phải mua Complier (bộ phiên dịch) Để làm sống bạn đơn giản hơn, nhiều nhà cung cấp cho đời công cụ chỉnh sửa JavaScript đẹp, liệt kê đây: • • • Microsoft FrontPage Microsoft phát triển HTML Editor phổ biến gọi FrontPage FrontPage cung cấp cho nhà lập trình cơng cụ JavaScript để giúp đỡ tạo Website có tính tương tác Macromedia Dreamweaver MX Macromedia Dreamweaver MX HTML JavaScript Editor phổ biến cộng đồng lập trình web chun nghiệp Nó cung cấp thành phần JavaScript xây dựng trước mà thuận tiện, tích hợp tốt với sở liệu, theo chuẩn XHTML XML Macromedia HomeSite HomeSite HTML JavaScript Editor từ Macromedia mà sử dụng để quản lý Website cá nhân cách hiệu JavaScript ngày nay? Chuẩn ECMAScript Edition cập nhật công bố năm qua JavaScript 2.0 tuân theo chuẩn ECMAScript Edition 5, khác chúng Chi tiết kỹ thuật cho JavaScript 2.0 tìm thấy site sau: http://www.ecmascript.org/ Ngày nay, JavaScript Netscape JScript Microsoft tuân theo chuẩn ECMAScript, hai ngôn ngữ hỗ trợ tính mà khơng phần chuẩn Cú pháp JavaScript JavaScript thực sử dụng lệnh JavaScript mà đặt thẻ HTML trang web Bạn đặt thẻ , chứa JavaScript bạn, đâu trang bạn, đề nghị bạn nên giữ thẻ Thẻ báo cho chương trình trình duyệt bắt đầu phiên dịch tất văn thẻ script Một cú pháp đơn giản JavaScript xuất sau: JavaScript code Thẻ script nhận hai thuộc tính quan trọng sau: • Language − Thuộc tính xác định ngơn ngữ scripting bạn sử dụng Giá trị javascript Mặc dù phiên gần HTML (và XHTML) thơi dần khơng sử dụng thuộc tính • Type − Thuộc tính đề nghị sử dụng giá trị nên thiết lập "text/javascript" Dưới đoạn JavaScript: JavaScript code JavaScript script bạn Bây làm ví dụ mẫu để in "Hello World" Chúng ta thêm HTML commet (lời bình) tùy ý mà bao quanh JavaScript code Điều bảo lưu code trình duyệt khơng hỗ trợ JavaScript Comment kết thúc với "// >" Tại "//" biểu thị comment JavaScript, thêm để ngăn trình duyệt đọc comment phần JavaScript code Tiếp theo, gọi hàm documet.write mà viết chuỗi vào tài liệu HTML Hàm sử dụng để viết văn bản, HTML hai Bạn xem code sau: Nó tạo kết sau: Hello World! Khoảng trắng dòng ngắt JavaScript bỏ qua khoảng trống, tab, dòng mà xuất chương trình JavaScript Bạn sử dụng khoảng trống, tab, dòng tự chương trình bạn bạn tự định dạng thụt đoạn chương trình bạn cách thích hợp để tạo code dễ dàng để đọc hiểu Dấu chấm phảy tùy ý Các lệnh đơn giản JavaScript nói chung theo sau ký tự dấu chấm phảy, mà chúng có C, C++, Java Tuy nhiên, JavaScript cho phép bạn bỏ quên dấu chấm phảy lệnh bạn đặt dịng riêng rẽ Ví dụ, code sau viết mà khơng sử dụng dấu chấm phảy: Nhưng định dạng dòng đơn sau, bạn phải sử dụng dấu chấm phảy: Ghi − Khi thực hành, tốt hết bạn sử dụng dấu chấm phảy Phân biệt kiểu chữ JavaScript ngôn ngữ phân biệt kiểu chữ (case-sensitive) Nghĩa từ khóa ngơn ngữ, biến, tên hàm, định danh khác phải luôn soạn Do đó, hai định danh TIME Time có ý nghĩa khác JavaScript Ghi chú: Bạn nên đặc biệt cẩn thận viết biến tên hàm JavaScript Comments JavaScript JavaScript hỗ trợ hai style lời bình C C++, vậy: • Bất kỳ văn // phần kết thúc dòng đối xử comment bị bỏ qua JavaScript • Bất kỳ văn ký tự /* */ xem comment Nó trải rộng qua nhiều dịng • JavaScript nhận HTML comment với dãy mở HTML comment không nhận JavaScript nên viết // > Ví dụ Ví dụ sau cách sử dụng comment JavaScript: Kích hoạt JavaScript trình duyệt Tất trình duyệt đại kèm với hỗ trợ có sẵn cho JavaScript Thường thì, bạn cần thao tác để enable (kích hoạt) disable (vơ hiệu hóa) hỗ trợ Chương giải thích thủ tục để kích hoạt vơ hiệu hóa hỗ trợ JavaScript trình duyệt bạn: Internet Explorer, Firefox, Chrome, Opera JavaScript Internet Explorer Dưới bước đơn giản để kích hoạt vơ hiệu hóa JavaScript IE: • Chọn Tools → Internet Options từ menu • Chọn Security tab từ hộp thoại • Nhấp chuột chọn Custom Level • Kéo bánh xe chuột tới bạn thấy Scripting option • Chọn Enable Active scripting • Cuối nhấn OK Để vơ hiệu hóa hỗ trợ JavaScript IE bạn, bạn cần chọn nút Disable Active scripting JavaScript Firefox Sau bước để kích hoạt vơ hiệu hóa JavaScript Firefox: • Mở tab mới, soạn about: config địa • Sau bạn thấy hộp thoại cảnh báo Chọn I'll be careful, I promise! • Sau bạn thấy danh sách configure options (các tùy chọn định cấu hình) trình duyệt • • Trong tìm kiếm, soạn javascript.enabled Tại đây, bạn tìm thấy tùy chọn để kích hoạt vơ hiệu hóa JavaScript việc kích chuột phải giá trị tùy chọn đó, chọn toggle Nếu javascript.enabled true, biến đổi thành false với việc nhấn toggle Nếu javascript bị vơ hiệu hóa, kích hoạt nhấn toggle JavaScript Chrome Sau bước để kích hoạt vơ hiệu hóa JavaScript Chrome: • Nhấp chuột vào menu phía bên phải trình duyệt • Chọn Settings • Nhấp chuột chọn Show advanced settings cuối trang • Dưới khu vực Privacy, nhấn nút Content settings • Trong khu vực "JavaScript", chọn "Do not allow any site to run JavaScript" "Allow all sites to run JavaScript (recommended)" JavaScript Opera Dưới bước để kích hoạt vơ hiệu hóa JavaScript Opera: • Từ menu, bạn chọn Tools → Preferences • Chọn tùy chọn Advanced từ hộp thoại • Chọn Content từ mục liệt kê • Chọn Enable JavaScript checkbox • Cuối nhấn Ok Để vơ hiệu hóa JavaScript Opera, bạn không nên chọn Enable JavaScript checkbox Cảnh báo trình duyệt Non-JavaScript Nếu bạn phải thực quan trọng sử dụng JavaScript, bạn hiển thị thơng báo cảnh báo tới người dùng sử dụng thẻ Bạn thêm khối noscript trực tiếp sau khối script sau: Sorry JavaScript is needed to go ahead Bây giờ, trình duyệt người dùng không hỗ trợ JavaScript JavaScript không kích hoạt, thơng báo từ hiển thị hình Điều hướng trang (Redirect) JavaScript Điều hướng lại trang gì? Bạn gặp tình bạn click vào URL để tới trang X bạn điều hướng tới trang Y Nó xảy Page Redirection – Điều hướng lại trang Khái niệm khác với: JavaScript – Refresh trang Có nhiều lý khác để bạn muốn redirect người dùng từ trang ban đầu Dưới số lý do: • Bạn khơng thích tên miền bạn bạn muốn chuyển qua tới tên miền Trong trường hợp này, bạn muốn điều hướng trực tiếp tất khách truy cập bạn tới site Tại đây, bạn trì tên miền cũ, đặt trang đơn với điều hướng lại trang tất khách truy cập tên miền cũ tới miền • Bạn xây dựng trang khác dựa trình duyệt tên dựa quốc gia khác nhau, sau đó, thay sử dụng điều hướng lại trang Server-Side, bạn sử dụng điều hướng lại trang Client-Side để chuyển người dùng tới trang thích hợp • Search Engines Index trang bạn Nhưng di chuyển tới miền mới, bạn không muốn đánh vị khách truy cập thông qua phương tiện tìm kiếm Vì bạn sử dụng điều hướng lại trang Client-Side Nhưng bạn nên nhớ điều không nên thực để lừa dối Search Engine, cho trang bạn thành trang bị cấm Page Redirection làm việc nào? Qui trình thực Page Redirection sau: Ví dụ Nó đơn giản để thực Page Redirection sử dụng JavaScript Client-Side Để điều hướng khách truy cập tới trang mới, bạn cần thêm dòng code khu vực head sau:

Click the following button, you will be redirected to home page.

Kết Ví dụ Bạn hiển thị thơng báo thích hợp cho khách truy cập trước điều hướng họ tới trang Điều cần chút thời gian trì hỗn để tải trang Ví dụ sau cách thực tương tự Tại đây, setTimeout() hàm có sẵn JavaScript mà sử dụng để thực thi lệnh khác sau khoảng thời gian cho Kết You will be redirected to vietjack.com main page in 10 seconds! Ví dụ Ví dụ sau cách điều hướng khách truy cập bạn tới trang khác dựa trình duyệt họ sử dụng Hộp thoại - Alert, Prompt, Confirmation JavaScript JavaScript hỗ trợ kiểu hộp thoại quan trọng Những hộp thoại sử dụng để thơng báo, xác nhận input, nhận input từ người dùng Dưới bàn luận kiểu hộp thoại Hộp thoại thông báo (Alert) Một hộp thoại thông báo (Alert Dialog Box) sử dụng phổ biến để cảnh báo tới người dùng Ví dụ, trường input yêu cầu nhập vài văn người dùng khơng cung cấp đầu vào nào, phần xác nhận, bạn sử dụng hộp thoại thông báo để đưa cảnh báo Tuy nhiên, hộp thơng báo sử dụng cho thông báo thân thiện Hộp thông báo cung cấp nút OK để chọn tiếp tục Ví dụ

Click the following button to see the result:

Kết Hộp thoại xác nhận (Confirmation) Một hộp thoại xác nhận (Confirmation Dialog) sử dụng phổ biến để nhận đồng ý người dùng tùy chọn Nó hiển thị hộp thoại với hai nút: OK Cancel Nếu người dùng click vào nút OK, phương thức confirm() trả true Nếu người dùng click nút Cancel, confirm() trả false Bạn sử dụng hộp thoại xác nhận sau: Ví dụ

Click the following button to see the result:

Kết Hộp thoại gợi ý (Prompt) Hộp thoại gợi ý (Prompt Dialog Box) hữu ích bạn muốn pop-up hộp văn để nhận input từ người dùng Vì thế, cho bạn khả tương tác với người dùng Người dùng cần điền thơng tin vào trường sau nhấn OK Hộp thoại hiển thị sử dụng phương thức prompt() mà nhận hai tham số: (i) Một label mà bạn muốn hiển thị hộp văn (ii) Một chuỗi mặc định để hiển thị hộp văn Hộp thoại có hai nút: OK Cancel Nếu người dùng nhấn vào nút OK, phương thức prompt() trả giá trị nhập từ hộp văn Nếu người dùng nhấn nút Cancel, phương thức prompt() trả null Ví dụ Sau ví dụ cách sử dụng hộp thoại Prompt

Click the following button to see the result:

Kết Từ khóa Void JavaScript void từ khóa quan trọng JavaScript mà sử dụng tốn tử ngơi xuất trước tốn hạng đơn nó, mà kiểu Toán tử xác định biểu thức để ước lượng mà không trả giá trị Cú pháp Cú pháp void hai kiểu sau: Ví dụ Sự sử dụng phổ biến toán tử ClientSide javascript:URL, cho phép bạn ước lượng biểu thức cho tác động thứ yếu (side-effects) mà trình duyệt khơng hiển thị giá trị biểu thức ước lượng Ở biểu thức alert ('Warning!!!') ước lượng khơng tải trở lại tài liệu

Click the following, This won't react at all

Click me! Kết Ví dụ Bạn xem ví dụ sau Link sau khơng biểu thức "0" khơng có tác động JavaScript Ở biểu thức "0" ước lượng, khơng tải trở lại tài liệu

Click the following, This won't react at all

Click me! Kết Ví dụ Cách sử dụng khác void chủ yếu để tạo giá trị undefined sau:

Click the following to see the result:

Kết In trang JavaScript Nhiều bạn thích đặt nút trang web bạn để in nội dung trang thơng qua máy in JavaScript giúp bạn thực chức sử dụng hàm print đối tượng window Hàm window.print() JavaScript in trang thực thi Bạn gọi hàm trực tiếp sử dụng kiện onclick ví dụ sau: Ví dụ Bạn thử ví dụ sau: Kết Mặc dù phục vụ mục đích để in, khơng cách đề nghị sử dụng Một trang máy in thân thiện thực trang với văn bản, khơng có hình ảnh, đồ họa quảng cáo Bạn tạo máy in trang thân thiện theo cách sau: • Tạo trang loại bỏ văn bản, đồ họa thừa, sau kết nối tới máy in trang thân thiện Bạn kiểm tra ví dụ sau: Ví dụ • Nếu bạn khơng muốn giữ phụ trang, bạn đánh dấu văn in sử dụng comment thích hợp giống như: sau bạn sử dụng PERL script khác background để lọc văn in hiển thị cho công việc in cuối Tại Vietjack, sử dụng phương thức để cung cấp phương tiện in tới khách truy cập Bạn kiểm tra ví dụ: Ví dụ Cách để in trang Nếu bạn không thấy phương tiện trên trang web, bạn sử dụng cơng cụ chuẩn trình duyệt để in trang web Bạn theo link sau: File → Print → Click OK button ... nghị sử dụng giá trị nên thiết lập "text /javascript" Dưới đoạn JavaScript: JavaScript code JavaScript script bạn Bây làm ví dụ mẫu.. .JavaScript sử dụng để nắm bắt kiện khởi tạo từ người sử dụng nhấp chuột, điều hướng link, hoạt động khác mà người dùng khởi tạo Các lợi JavaScript Các lợi việc sử dụng JavaScript là:... Trong khu vực "JavaScript" , chọn "Do not allow any site to run JavaScript" "Allow all sites to run JavaScript (recommended)" JavaScript Opera Dưới bước để kích hoạt vơ hiệu hóa JavaScript Opera: