Bài giảng Bài 1: Làm quen với JavaScript - ĐH FPT

Nội dung Bài 1: Làm quen với JavaScript giới thiệu về JavaScript, lịch sử JavaScript, mục đích của JavaScript và browser, chương trình JavaScript, vị trí mã JavaScript, sơ lược về mã JavaScript, IDE cho JavaScript.

Bài 1: Làm quen vớ i JavaScript Mụ c tiêu họ c Giớ i thiệ u JavaScript Lị ch sử JavaScript Mụ c đích củ a JavaScript JavaScript Brow ser Chư ng trình JavaScript Vị trí mã JavaScript Sơ lư ợ c mã JavaScript I DE cho JavaScript Làm quen vớ i JavaScript JavaScript 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 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 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ữ có tên gọ i LiveScript, ng sau đổ i tên thành JavaScript ngôn ngữ Java 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 gặ p phả i nhữ ng bấ t lợ i có liên q uan đế 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 Lị ch sử JavaScript JavaScript đư ợ c tạ o vớ i mụ c đích xử lý phía client để tư ng tác vớ i ngư i dùng Xác đị nh tính hợ p lệ củ a Form (Validate form) Xác đị nh tính hợ p lệ cho Form Client thay Server làm giả m tả i cho Server trả kế t 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… Validate form Slide Show Làm quen vớ i JavaScript ECMAScript Năm 1997, Microsoft, Netscape European Computer Manufactures đư a tài liệ u đặ c tả đầ u tiên cho JavaScript có tên gọ i ECMAScript (hay ECMA-262) Năm 1999, phiên bả n củ a ECMA-262 đờ i Năm 2009, phiên bả n củ a ECMA-262 đờ i phiên bả n mớ i nhấ t Tấ t phiên bả n củ a ECMA đờ i đề u đư ợ c trình duyệ t phổ biế n FireFox, Safari Opera hỗ trợ , ng mỗ i trình duyệ t hỗ trợ khác 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 Xu hư ng củ a JavaScript Đặ c tả ECMA-262 ngày đư ợ c phát triể n làm cho JavaScript ngày hoàn thiệ n hơ n Cùng vớ i HTML5, CSS3 JavaScript ngày trở nên mạ nh mẽ , viế t đư ợ c ứ ng dụ ng desktop Các trình duyệ t cố gắ ng hỗ trợ JavaScript tố t hơ n để mã JavaScript chạ y ổ n đị nh tấ t trình duyệ t Lậ p trình viên đư ợ c hỗ trợ bở i thư việ n có sẵ n 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ông nghệ khác Java, Flash, ActivateX để hỗ trợ tính đa phư ng tiệ n hay đồ họ a… JavaScript phát triể n ngày hoàn thiệ n hơ n, hư ng đế n viế t ứ ng dụ ng desktop Tham khả o Overview: JavaScript, Flash, Java, Silverlight and ActiveX (Liya Kantor) (1) Làm quen vớ i JavaScript JavaScript làm Thự c hiệ n tác vụ phía Client Tạ o menu đổ xuố ng Thay đổ i nộ i dung trang web Thêm thành phầ n độ ng vào trang web Mộ t số trang web sử dụ ng JavaScript tạ o hiệ u ứ ng http:/ / dibusoft.com/ http:/ / www.hotel-oxford.ro/ http:/ / www.dibusoft.com/ JavaScript viế t GAME http:/ / www.themaninblue.com/ experiment/ BunnyHunt/ http:/ / www.e-forum.ro/ bomberman/ dynagame.html# top Làm quen vớ i JavaScript Viế t mã JavaScript đầ u tiên Viế t mã JavaScript đầ u tiên Mở Browser (IE hoặ c FireFox) Gõ vào đị a : javascript: alert(“Hello World”) Kế t : Chư ng trình JavaScript bao gồ m câu lệ nh đư ợ c thơng dị ch bở i trình thơng dị ch tích hợ p sẵ n Brow ser JavaScript phụ thuộ c nhiề u vào Browser Làm quen vớ i JavaScript Mộ t chư ng trình JavaScript gồ m nhữ ng gì? Mộ t chư ng trình JavaScript giố ng chư ng tr ình viế t bằ ng 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ừ toán tử , từ đị nh danh, biế n… var x = Câu lệ nh khai báo biế n x có giá trị bằ ng Làm quen vớ i JavaScript 10 Hàm 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ợ tấ t trình duyệ t Kiể m tra xem Browser có hỗ trợ hàm khơng điề u rấ t quan trọ ng (Sẽ đư ợ c đề cậ p kỹ hơ n chư ng sau này) JavaScript cho phép ngư i dùng tự đị nh nghĩa hàm Làm quen vớ i JavaScript 16 Demo hàm function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } }

Hien thi loi chao

var x = 1; ham(x); Làm quen vớ i JavaScript Xem Demo/Function 17 Lư u mã JavaScript vào file bên Vớ i nhữ ng website có nhiề u trang web Các trang web sử dụ ng mộ t fuction việ c lư u mã JavaScript mộ t file riêng rấ t cầ n thiế t Viế t mã JavaScript thành file riêng tách phầ n nộ i dung (HTML) hành độ ng (JavaScript) Trang web dễ bả o trì hơ n Các bư c lư u mã JavaScript file bên 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 củ a file cho thuộ c tính Chú ý: Nên để file js html mộ t thư mụ c Làm quen vớ i JavaScript 18 Lư u mã JavaScript vào file bên Nộ i dung file myscript.js function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } Làm quen vớ i JavaScript 19 Lư u mã JavaScript vào file bên Nộ i dung file HTML

Hien thi loi chao

var x = 1; ham(x); Làm quen vớ i JavaScript 20 Lư u mã JavaScript vào file bên

Hien thi loi chao

var x = 1; ham(x); function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } } Làm quen vớ i JavaScript function ham(x) { if (x > 0) { alert("Hi"); } else { alert("hello"); } }

Hien thi loi chao

var x = 1; ham(x); 21 I DE cho Javascript Có rấ t nhiề u I DE hỗ trợ cho việ c viế t code nhanh hơ n Apache Visual Studio Visual Studio công cụ mạ nh mẽ dễ sử dụ ng Vào trang http:/ / www.microsoft.com/ express/ web để cài đặ t Làm quen vớ i JavaScript 22 Tạ o file HTML để viế t mã B1 Vào File Làm quen vớ i JavaScript New File… để tạ o file 23 Tạ o file HTML để viế t mã B2 Chọ n Web cử a sổ Categories B3 Chọ n HTML page Templete Làm quen vớ i JavaScript 24 Tạ o file HTML để viế t mã B4 Chọ n File Save HTML Page1.html as để lư u file vào thư mụ c cầ n lư u Làm quen vớ i JavaScript 25 Lư u mã JavaScript file riêng Làm tư ng tự tạ o file HTML ng chọ n JScript File Làm quen vớ i JavaScript 26 Tạ o Project để n lý file Đố i vớ i website có nhiề u trang Nên tạ o Project để n lý file B1 Chọ n New Web Site từ menu File Hộ p thoạ i New Website mở B2 Chọ n ASP.NET WebStie Trong project, tạ o file HTML JS Làm quen vớ i JavaScript 27 Tổ ng kế t họ c Mỗ i trang web gồ m phầ n: Phầ n nộ i dung (HTML), phầ n trình bày (CSS) 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 LiveScript, ng sau đổ i tên thành JavaScript JavaScript đư ợ c tạ o 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 lậ p trình JavasSript chạ y ổ n đị nh nhiề u brow ser Java ngôn ngữ thông dị ch, đư ợ c thơng dị ch bằ ng browser nên không cầ n bấ t công cụ lậ p trình Visual Studio cơng cụ mạ nh mẽ 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 Tổ ng kế t họ c Cũng giố ng ngơn ngữ khác, chư ng trình JavaScript đư ợ c tạ o thành bở i câu lệ nh Mỗ i câu lệ nh gồ m từ khóa, biế n, tốn tử … Mã JavaScript đư ợ c viế t thẻ script đặ t thẻ head hoặ c thẻ body củ a trang web Ngồi ra, mã đư ợ c ghi file bên trang html JavaScript có hàm đị nh nghĩa sẵ n (built-in) cho phép ngư i dùng tự đị nh nghĩa hàm củ a riêng Làm quen vớ i JavaScript 29 Tham khả o Overview: JavaScript, Flash, Java, Silverlight and ActiveX Tác giả : Liya Kantor Link: http:/ / javascript.info/ tutorial/ overview Làm quen vớ i JavaScript 30 ... thiệ u JavaScript Lị ch sử JavaScript Mụ c đích củ a JavaScript JavaScript Brow ser Chư ng trình JavaScript Vị trí mã JavaScript Sơ lư ợ c mã JavaScript I DE cho JavaScript Làm quen vớ i JavaScript. .. n cho mộ t tác vụ Làm quen vớ i JavaScript Xu hư ng củ a JavaScript Đặ c tả ECMA-262 ngày đư ợ c phát triể n làm cho JavaScript ngày hoàn thiệ n hơ n Cùng vớ i HTML5, CSS3 JavaScript ngày trở... Templete Làm quen vớ i JavaScript 24 Tạ o file HTML để viế t mã B4 Chọ n File Save HTML Page1.html as để lư u file vào thư mụ c cầ n lư u Làm quen vớ i JavaScript 25 Lư u mã JavaScript file riêng Làm