Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bài 1: Làm quen với JavaScript - Giáo trình FPT

5,916 views

Published on

Giới thiệu về JavaScript
Lịch sử JavaScript
Mục đích của JavaScript
JavaScript và Browser
Chương trình JavaScript
Vị trí mã JavaScript
Sơ lược về mã JavaScript
IDE cho JavaScript

  • Sex in your area is here: ♥♥♥ http://bit.ly/2u6xbL5 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2u6xbL5 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Bài 1: Làm quen với JavaScript - Giáo trình FPT

  1. 1. Bài 1: Làm quen với JavaScript
  2. 2. Giới thiệu về JavaScript Lịch sử JavaScript Mục đích của JavaScript JavaScript và Browser Chương trình JavaScript Vị trí mã JavaScript Sơ lược về mã JavaScript IDE cho JavaScript Mục tiêu bài học Giới thiệu về JavaScript Lịch sử JavaScript Mục đích của JavaScript JavaScript và Browser Chương trình JavaScript Vị trí mã JavaScript Sơ lược về mã JavaScript IDE cho JavaScript Làm quen với JavaScript 2
  3. 3. HTML: Chứa nội dụng CSS: Cách trình bày JavaScript: Hành động của của trang web  JavaScript hồi đáp lại các tương tác của người dùng Khi người dùng nhấn chuột Khi người dùng nhấn vào menu JavaScript cái gì??? HTML: Chứa nội dụng CSS: Cách trình bày JavaScript: Hành động của của trang web  JavaScript hồi đáp lại các tương tác của người dùng Khi người dùng nhấn chuột Khi người dùng nhấn vào menu Làm quen với JavaScript 3
  4. 4. JavaScript được phát triển bởi Brendan Eich thuộc Netscape vào khoảng thời gian 1995-1996 Đầu tiên ngôn ngữ này có tên gọi là LiveScript, nhưng sau đó đổi tên thành JavaScript do ngôn ngữ Java trong thời điểm hiện tại rất nổi tiếng Cùng với lợi ích mà danh tiếng của ngôn ngữ Java đưa lại, JavaScript cũng gặp phải những bất lợi do có liên quan đến Java bởi Java không hỗ trợ tốt cho Web Chỉ những năm gần đây, JavaScript mới tránh được những bất lợi đó Lịch sử JavaScript JavaScript được phát triển bởi Brendan Eich thuộc Netscape vào khoảng thời gian 1995-1996 Đầu tiên ngôn ngữ này có tên gọi là LiveScript, nhưng sau đó đổi tên thành JavaScript do ngôn ngữ Java trong thời điểm hiện tại rất nổi tiếng Cùng với lợi ích mà danh tiếng của ngôn ngữ Java đưa lại, JavaScript cũng gặp phải những bất lợi do có liên quan đến Java bởi Java không hỗ trợ tốt cho Web Chỉ những năm gần đây, JavaScript mới tránh được những bất lợi đó Làm quen với JavaScript 4
  5. 5. JavaScript được tạo ra với mục đích xử lý phía client để tương tác với người dùng như Xác định tính hợp lệ của Form (Validate form) Xác định tính hợp lệ cho Form trên Client thay vì trên Server sẽ làm giảm tải cho Server và trả về kết quả lập tức cho người dùng Làm việc với ảnh để hồi đáp lại người dùng… Lịch sử JavaScript Làm quen với JavaScript 5 Validate form Slide Show
  6. 6. Năm 1997, Microsoft, Netscape và European Computer Manufactures đưa ra tài liệu đặc tả đầu tiên cho JavaScript có tên gọi là ECMAScript (hay ECMA-262) Năm 1999, phiên bản 3 của ECMA-262 ra đời Năm 2009, phiên bản 5 của ECMA-262 ra đời và là phiên bản mới nhất Tất cả các phiên bản của ECMA ra đời đều được các trình duyệt phổ biến như FireFox, Safari và Opera hỗ trợ, nhưng mỗi trình duyệt hỗ trợ khác nhau  Lập trình viên phải viết nhiều phiên bản cho một tác vụ ECMAScript Năm 1997, Microsoft, Netscape và European Computer Manufactures đưa ra tài liệu đặc tả đầu tiên cho JavaScript có tên gọi là ECMAScript (hay ECMA-262) Năm 1999, phiên bản 3 của ECMA-262 ra đời Năm 2009, phiên bản 5 của ECMA-262 ra đời và là phiên bản mới nhất Tất cả các phiên bản của ECMA ra đời đều được các trình duyệt phổ biến như FireFox, Safari và Opera hỗ trợ, nhưng mỗi trình duyệt hỗ trợ khác nhau  Lập trình viên phải viết nhiều phiên bản cho một tác vụ Làm quen với JavaScript 6
  7. 7. Đặc tả ECMA-262 ngày càng được phát triển làm cho JavaScript ngày càng hoàn thiện hơn Cùng với HTML5, CSS3 JavaScript ngày càng trở nên mạnh mẽ, có thể viết được các ứng dụng như trên desktop Các trình duyệt đang cố gắng hỗ trợ JavaScript tốt hơn để mã JavaScript có thể chạy ổn định trên tất cả các trình duyệt Lập trình viên được hỗ trợ bởi các thư viện có sẵn như JQuery, JSON, YUI… làm cho việc lập trình JavaScript trở nên dễ dàng hơn JavaScript kết hợp với các công nghệ khác như Java, Flash, ActivateX để hỗ trợ các tính năng như đa phương tiện hay đồ họa…  JavaScript đang phát triển và ngày càng hoàn thiện hơn, hướng đến có thể viết các ứng dụng như trên desktop Xu hướng của JavaScript Đặc tả ECMA-262 ngày càng được phát triển làm cho JavaScript ngày càng hoàn thiện hơn Cùng với HTML5, CSS3 JavaScript ngày càng trở nên mạnh mẽ, có thể viết được các ứng dụng như trên desktop Các trình duyệt đang cố gắng hỗ trợ JavaScript tốt hơn để mã JavaScript có thể chạy ổn định trên tất cả các trình duyệt Lập trình viên được hỗ trợ bởi các thư viện có sẵn như JQuery, JSON, YUI… làm cho việc lập trình JavaScript trở nên dễ dàng hơn JavaScript kết hợp với các công nghệ khác như Java, Flash, ActivateX để hỗ trợ các tính năng như đa phương tiện hay đồ họa…  JavaScript đang phát triển và ngày càng hoàn thiện hơn, hướng đến có thể viết các ứng dụng như trên desktop Làm quen với JavaScript 7 Tham khảo Overview: JavaScript, Flash, Java, Silverlight and ActiveX (Liya Kantor) (1)
  8. 8. Thực hiện các tác vụ phía Client Tạo menu đổ xuống Thay đổi nội dung trên trang web Thêm các thành phần động vào trang web Một số trang web sử dụng JavaScript tạo ra các hiệu ứng http://dibusoft.com/ http://www.hotel-oxford.ro/ http://www.dibusoft.com/ JavaScript có thể viết GAME http://www.themaninblue.com/experiment/BunnyHunt/ http://www.e-forum.ro/bomberman/dynagame.html#top JavaScript có thể làm Thực hiện các tác vụ phía Client Tạo menu đổ xuống Thay đổi nội dung trên trang web Thêm các thành phần động vào trang web Một số trang web sử dụng JavaScript tạo ra các hiệu ứng http://dibusoft.com/ http://www.hotel-oxford.ro/ http://www.dibusoft.com/ JavaScript có thể viết GAME http://www.themaninblue.com/experiment/BunnyHunt/ http://www.e-forum.ro/bomberman/dynagame.html#top Làm quen với JavaScript 8
  9. 9. Viết mã JavaScript đầu tiên Mở Browser (IE hoặc FireFox) Gõ vào thanh địa chỉ: javascript: alert(“Hello World”) Kết quả: Chương trình JavaScript bao gồm các câu lệnh được thông dịch bởi trình thông dịch tích hợp sẵn trên Browser  JavaScript phụ thuộc nhiều vào Browser Viết mã JavaScript đầu tiên Viết mã JavaScript đầu tiên Mở Browser (IE hoặc FireFox) Gõ vào thanh địa chỉ: javascript: alert(“Hello World”) Kết quả: Chương trình JavaScript bao gồm các câu lệnh được thông dịch bởi trình thông dịch tích hợp sẵn trên Browser  JavaScript phụ thuộc nhiều vào Browser Làm quen với JavaScript 9
  10. 10. Một chương trình JavaScript cũng giống như chương trình viết bằng các ngôn ngữ khác Một chương trình javaScript bao gồm nhiều câu lệnh Một câu lệnh được tạo nên từ các toán tử, từ định danh, biến… Câu lệnh này khai báo biến x có giá trị bằng 4 Một chương trình JavaScript gồm những gì? var x = 4 Một chương trình JavaScript cũng giống như chương trình viết bằng các ngôn ngữ khác Một chương trình javaScript bao gồm nhiều câu lệnh Một câu lệnh được tạo nên từ các toán tử, từ định danh, biến… Câu lệnh này khai báo biến x có giá trị bằng 4 Làm quen với JavaScript 10
  11. 11. Mã JavaScript được đặt trong thẻ <script> trong thẻ <head></head> hoặc (và) <body></body> Nên đặt mã Javascript trong thẻ <script> đặt ở cuối phần body để đảm bảo tất cả các thành phần đã được load Mã JavaScript trên trang Web <head> <title>A Web Page Title</title> <script type="text/javascript"> // Viết mã javscript ở đây </script> </head> Mã JavaScript được đặt trong thẻ <script> trong thẻ <head></head> hoặc (và) <body></body> Nên đặt mã Javascript trong thẻ <script> đặt ở cuối phần body để đảm bảo tất cả các thành phần đã được load Làm quen với JavaScript 11 <head> <title>A Web Page Title</title> <script type="text/javascript"> // Viết mã javscript ở đây </script> </head> <body> <script type="text/javascript"> document.write("hello"); document.write(" world"); </script> </body>
  12. 12. JavaScript là ngôn ngữ thông dịch, bộ thông dịch được tích hợp sẵn trên trình duyệt nên không cần bất cứ công cụ đặc biệt nào để lập trình Có thể viết mã JavaScript trên chương trình soạn thảo văn bản như notepad Công cụ để lập trình JavaScript Làm quen với JavaScript 12
  13. 13. JavaScript phân biệt chữ hoa chữ thường JavasScript bỏ qua ký tự cách Chú thích Chú thích nhiều dòng Chú thích trên một dòng Ký tự dấu chấm phẩy (;) để kết thúc một dòng lệnh. Ký tự này là bắt buộc Quy tắc cơ bản của JavaScript /* Dây là chú thích nhiều dòng Bạn có thể viết chú thích trên nhiều dòng */ JavaScript phân biệt chữ hoa chữ thường JavasScript bỏ qua ký tự cách Chú thích Chú thích nhiều dòng Chú thích trên một dòng Ký tự dấu chấm phẩy (;) để kết thúc một dòng lệnh. Ký tự này là bắt buộc Làm quen với JavaScript 13 // Đây là ký hiệu chú thích một dòng // Chú thích này chỉ chú thích được cho một dòng
  14. 14. Câu lệnh JavaScript chia làm hai loại Câu lệnh đơn Câu lệnh kép Câu lệnh JavaScript var x = 4 If( x ==1){ //Viết câu lệnh ở đây } else { //Viết câu lệnh ở đây } Câu lệnh JavaScript chia làm hai loại Câu lệnh đơn Câu lệnh kép Làm quen với JavaScript 14 If( x ==1){ //Viết câu lệnh ở đây } else { //Viết câu lệnh ở đây }
  15. 15. JavaScript có tập các từ khóa Tham khảo thêm về các từ khóa trong tài liệu ECMA-262 Từ khóa break delete if this while case do in throw with catch else instanceof try continue finally new typeof JavaScript có tập các từ khóa Tham khảo thêm về các từ khóa trong tài liệu ECMA-262 Làm quen với JavaScript 15 continue finally new typeof debugger for return var default function switch void
  16. 16. JavaScript cung cấp nhiều hàm dựng sẵn (built-in function) alert() Một số hàm không được hỗ trợ trên tất cả các trình duyệt.  Kiểm tra xem Browser có hỗ trợ hàm đó không là điều rất quan trọng (Sẽ được đề cập kỹ hơn trong các chương sau này) JavaScript cũng cho phép người dùng tự định nghĩa hàm Hàm Làm quen với JavaScript 16
  17. 17. Demo hàm <html><head> <script type="text/javascript"> function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body></html> Làm quen với JavaScript 17 <html><head> <script type="text/javascript"> function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body></html> Xem Demo/Function
  18. 18. Với những website có nhiều trang web. Các trang web cùng sử dụng một fuction thì việc lưu mã JavaScript ra một file riêng là rất cần thiết Viết mã JavaScript thành file riêng sẽ tách phần nội dung (HTML) và hành động (JavaScript)  Trang web dễ bảo trì hơn Các bước lưu mã JavaScript ra file bên ngoài B1. Tạo file txt mới B2. Viết mã JavaScript vào B3. Đổi tên file thành js B4. Gán địa chỉ của file cho thuộc tính Chú ý: Nên để file js và html cùng một thư mục Lưu mã JavaScript vào file bên ngoài Với những website có nhiều trang web. Các trang web cùng sử dụng một fuction thì việc lưu mã JavaScript ra một file riêng là rất cần thiết Viết mã JavaScript thành file riêng sẽ tách phần nội dung (HTML) và hành động (JavaScript)  Trang web dễ bảo trì hơn Các bước lưu mã JavaScript ra file bên ngoài B1. Tạo file txt mới B2. Viết mã JavaScript vào B3. Đổi tên file thành js B4. Gán địa chỉ của file cho thuộc tính Chú ý: Nên để file js và html cùng một thư mục Làm quen với JavaScript 18
  19. 19. Nội dung file myscript.js Lưu mã JavaScript vào file bên ngoài function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } Làm quen với JavaScript 19 function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } }
  20. 20. Nội dung file HTML Lưu mã JavaScript vào file bên ngoài <html> <head> <script type="text/javascript" src="myscript.js"></script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body> </html> Làm quen với JavaScript 20 <html> <head> <script type="text/javascript" src="myscript.js"></script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body> </html>
  21. 21. Lưu mã JavaScript vào file bên ngoài <html><head> <script type="text/javascript"> function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body></html> <html> <head> <script type="text/javascript" src="myscript.js"> </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body> </html> Làm quen với JavaScript 21 <html><head> <script type="text/javascript"> function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body></html> <html> <head> <script type="text/javascript" src="myscript.js"> </script> </head> <body> <p>Hien thi loi chao</p> <script type="text/javascript"> var x = 1; ham(x); </script> </body> </html> function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } }
  22. 22. Có rất nhiều IDE hỗ trợ cho việc viết code nhanh hơn Apache Visual Studio Visual Studio là công cụ mạnh mẽ và dễ sử dụng Vào trang http://www.microsoft.com/express/web để cài đặt IDE cho Javascript Có rất nhiều IDE hỗ trợ cho việc viết code nhanh hơn Apache Visual Studio Visual Studio là công cụ mạnh mẽ và dễ sử dụng Vào trang http://www.microsoft.com/express/web để cài đặt Làm quen với JavaScript 22
  23. 23. B1. Vào File  New File… để tạo file Tạo file HTML để viết mã Làm quen với JavaScript 23
  24. 24. B2. Chọn Web trong cửa sổ Categories B3. Chọn HTML page trong Templete Tạo file HTML để viết mã Làm quen với JavaScript 24
  25. 25. B4. Chọn File  Save HTML Page1.html as để lưu file này vào thư mục cần lưu Tạo file HTML để viết mã Làm quen với JavaScript 25
  26. 26. Làm tương tự như tạo file HTML nhưng chọn JScript File Lưu mã JavaScript ra file riêng Làm quen với JavaScript 26
  27. 27. Đối với website có nhiều trang. Nên tạo Project để quản lý các file B1. Chọn New Web Site từ menu File. Hộp thoại New Website mở ra B2. Chọn ASP.NET WebStie Trong project, tạo các file HTML và JS Tạo Project để quản lý file Làm quen với JavaScript 27
  28. 28. Mỗi trang web gồm 3 phần: Phần nội dung (HTML), phần trình bày (CSS) và phần hành động (CSS) JavaScript được phát triển bởi Brendan Eich vào 1995-1996. Đầu tiên có tên gọi là LiveScript, nhưng sau đó đổi tên thành JavaScript JavaScript được tạo ra với mục đích xử lý phía client JavaScript được đặc tả bởi tài liệu ECMAScript (hay ECMA-262) Mỗi browser hỗ trợ ECMA khác nhau, nên điều quan trọng nhất khi lập trình JavasSript là chạy ổn định trên nhiều browser Java là ngôn ngữ thông dịch, nó được thông dịch bằng browser nên không cần bất cứ công cụ lập trình nào Visual Studio là công cụ mạnh mẽ và dễ sử dụng hỗ trợ việc viết mã JavaScript nhanh hơn, thuận tiện hơn Tổng kết bài học Mỗi trang web gồm 3 phần: Phần nội dung (HTML), phần trình bày (CSS) và phần hành động (CSS) JavaScript được phát triển bởi Brendan Eich vào 1995-1996. Đầu tiên có tên gọi là LiveScript, nhưng sau đó đổi tên thành JavaScript JavaScript được tạo ra với mục đích xử lý phía client JavaScript được đặc tả bởi tài liệu ECMAScript (hay ECMA-262) Mỗi browser hỗ trợ ECMA khác nhau, nên điều quan trọng nhất khi lập trình JavasSript là chạy ổn định trên nhiều browser Java là ngôn ngữ thông dịch, nó được thông dịch bằng browser nên không cần bất cứ công cụ lập trình nào Visual Studio là công cụ mạnh mẽ và dễ sử dụng hỗ trợ việc viết mã JavaScript nhanh hơn, thuận tiện hơn Làm quen với JavaScript 28
  29. 29. Cũng giống như các ngôn ngữ khác, chương trình JavaScript được tạo thành bởi các câu lệnh. Mỗi câu lệnh gồm các từ khóa, biến, toán tử… Mã JavaScript được viết trong thẻ script đặt ở trong thẻ head hoặc thẻ body của trang web. Ngoài ra, mã cũng có thể được ghi ra file bên ngoài trang html JavaScript cũng có các hàm định nghĩa sẵn (built-in) và cho phép người dùng tự định nghĩa các hàm của riêng mình Tổng kết bài học Cũng giống như các ngôn ngữ khác, chương trình JavaScript được tạo thành bởi các câu lệnh. Mỗi câu lệnh gồm các từ khóa, biến, toán tử… Mã JavaScript được viết trong thẻ script đặt ở trong thẻ head hoặc thẻ body của trang web. Ngoài ra, mã cũng có thể được ghi ra file bên ngoài trang html JavaScript cũng có các hàm định nghĩa sẵn (built-in) và cho phép người dùng tự định nghĩa các hàm của riêng mình Làm quen với JavaScript 29
  30. 30. 1. Overview: JavaScript, Flash, Java, Silverlight and ActiveX Tác giả: Liya Kantor Link: http://javascript.info/tutorial/overview Tham khảo Làm quen với JavaScript 30

×