Đang tải... (xem toàn văn)
Bài giảng về ngôn ngữ lập trình Web JavaScript | Tailieuhay ngon ngu javascript tài liệu, giáo án, bài giảng , luận văn,...
1THIẾT KẾ VÀ LẬP TRÌNH WEBThời lượng: 11 Buổi lý thuyết 11 Buổi thực hành 2Thông tin giảng viênTên: Mai Xuân HùngKhoa: Hệ Thống Thông TinMail: hungmx@uit.edu.vn 3Hình thức thiNộp và chấm project: 5.0 điểmThi trực tiếp trên máy: 5.0 điểm (90 phút) 4Phần mềm lập trìnhEditor (trình soạn thảo): DreamWeaverWeb server: Apache và MySQL (cài gói xampp 1.7.2) 5Gợi ý danh sách các đề tài 1. Hệ thống đăng ký học phần qua mạng tại trường Đại Học Công Nghệ Thông Tin 2. Đăng ký các bài báo qua mạng (gồm phải biện qua mạng)3. Bán hàng qua mạng + Điện thọai di dộng + Bán hoa qua mạng + Bán áo quần qua mạng + Bán thiết bị máy tính qua mạng4. Xây dựng công cụ hỗ trợ làm Web các nhân5. Tra cứu từ điển qua mạng (gồm cơ sở dự liệu hình ảnh) 6. Tạo trang Web site blog cá nhân7. Xây dựng Web site quản lý tài nguyên học tập8. Xây dựng hệ thống thi trắc nghiệm qua mạng9. Xây dựng web site cá nhân10. Xây dựng trang Web cho trường học, công ty. 6Gợi ý danh sách đề tài11. Xây dựng web site tuyển dụng qua mạng12. Xây dựng web site rao vặt qua mạng13. Xậy dựng web site đưa tin tức (vnexpress.net, dantri.com.vn, ngoisao.net) qua mạng14. Xây dựng Web site mạng xã hội (facebook)15. Xây dựng Web site sàn giao dịch chứng khoán 7Nội dung môn họcBài 1: Tổng quanBài 2: Lập trình web với ngôn ngữ lập trình web tĩnh HTML, CSSBài 3: Lập trình web với ngôn ngữ kịch bản javascript Bài 4: Nhắc lại CSDL và các câu lệnh truy vấn SQLBài 5: Lập trình web động với ngôn ngữ lập trình web động PHPBài 6: Ngôn ngữ lập trình web động PHP với trình quản trị CSDL MySQLBài 7: Cơ chế truyền dữ liệu Get, Post, Request, session, cookie trong PHPBài 8: Tiếng việt trong PHP với CSDL MySQLBài 9: Các nội dung mở rộng: Phân trang, Upload file, Export, Import file.Bài 10: Ôn tập NGÔN NGỮ JAVASCRIPT Giảng viên: Hoàng Văn Hiệp Viện CNTT – ĐH Bách Khoa Hà Nội JAVASCRIPT LÀ GÌ? Là ngôn ngữ kịch đƣợc thực máy client Đƣợc nhúng vào trang web Đƣợc thiết kế để tăng khả tƣơng tác cho trang web Là ngôn ngữ thông dịch Đƣợc hỗ trợ trình duyệt Đƣợc phát triển hãng Netscape (khác với Java) JAVASCRIPT CÓ THỂ LÀM GÌ? Đặt liệu động vào trang HTML Đáp ứng kiện Đọc ghi đối tƣợng HTML Sử dụng để kiểm tra liệu trƣớc gửi đến server Lƣu trữ đọc thông tin ngƣời sử dụng (cookie) CHÈN JAVASCRIPT VÀO HTML Chèn trực tiếp mã vào HTML Chèn file JavaScript chứa mã VÍ DỤ VỊ TRÍ ĐẶT JAVASCRIPT Các kịch đƣợc đặt phần Chỉ đƣợc thực có lời gọi Đáp ứng kiện Thƣờng hàm Các kịch đƣợc đặt phần Đƣợc thực trang web đƣợc nạp trình duyệt VỊ TRÍ ĐẶT JAVASCRIPT Có thể đặt kịch phần phần Số lƣợng kịch đƣợc nhúng vào HTML không giới hạn CHÚ THÍCH TRONG JAVASCRIPT Giống nhƣ ngôn ngữ C++ Chú thích cho dòng // Dòng thích Chú thích cho đoạn /* Đoạn thích */ CHÚ Ý Các lệnh JavaScript phân biệt chữ hoa chữ thƣờng Ví dụ Document.Write(“”) sai Kết thúc lệnh dấu ; BIẾN TRONG JAVASCRIPT Đƣợc sử dụng để lƣu trữ liệu thay đổi kịch đƣợc thực Quy tắc đặt tên biến Phải Ví Phân bắt đầu chữ ký tự gạch dƣới _ dụ: x, y, z, length, _height, _width biệt chữ hoa chữ thƣờng Biến X khác với biến x MỘT SỐ PHƢƠNG THỨC alert(), comfirm(), prompt() open(), close() đóng focus() thiết mở cửa sổ lập focus cho cửa sổ setTimeout(code, millisec) thực đoạn mã sau khoảng thời gian VÍ DỤ Windows Object function open_new() { mywin = window.open(''); mywin.document.write('Day la cua so moi'); } function close_win() { mywin.close(); } Mo cua so moi Dong cua so ĐỐI TƯỢNG SCREEN Chứa thông tin hình hiển thị screen.width, screen.height – chiều rộng, chiều cao hình screen.availWidth, screen.availHeight – chiều rộng chiều cao hình (không bao gồm taskbar) VÍ DỤ Screen Object document.write("Kich thuoc man hinh: " + screen.width + "x" + screen.height); ĐỐI TƯỢNG HISTORY Chứa thông tin địa duyệt trình duyệt Thuộc tính history.length số địa history Phương thức history.go() nạp lại địa cụ thể history.back() nạp lại địa trước địa history.forward() nạp lại địa sau địa VÍ DỤ History Object function myFunc() { var num = prompt("Di chuyen den trang:"); history.go(num); } document.write("History Length: " + history.length + ""); Trang truoc Trang sau Di chuyen den trang xac dinh ĐỐI TƢỢNG DOCUMENT Biểu diễn toàn thành phần nội dung trang HTML Đƣợc sử dụng để truy nhập đến thành phần THUỘC TÍNH title tiêu đề trang web URL địa trang web VÍ DỤ Document Object document.write("Tieu de cua trang web: " + document.title + ""); document.write("Dia chi trang web: " + document.URL + ""); PHƢƠNG THỨC getElementById() trả đối tƣợng thông qua ID đối tƣợng đƣợc sử dụng để truy nhập đến đối tƣợng write() ghi chuỗi lệnh HTML cửa sổ trình duyệt writeln() giống dòng lệnh write(), nhƣng chèn thêm ký tự xuống CÁC ĐỐI TƢỢNG DOCUMENT CÁC ĐỐI TƢỢNG DOCUMENT Truy nhập thông qua thuộc tính đối tƣợng Thuộc tính innerHTML Nội dung văn mà đối tƣợng tác động VÍ DỤ Document Object function changeColor() { document.getElementById("myBody").bgColor = "red"; } Thay doi mau nen VÍ DỤ Thuoc tinh innerHTML function change() { document.getElementById("heading").innerHTML = "Tiêu đề thay đổi"; } Đây tiêu đề đoạn văn setTimeout("change()", 5000); BÀI TẬP HC VIN CÔNG NGH BU CHÍNH VIN THÔNG BÀI GING K THUT LP TRÌNH Biên son : Ths. NGUYN DUY PHNG Gii thiu môn hc GII THIU MÔN HC I. GII THIU CHUNG S phát trin công ngh thông tin trong nhng nm va qua đã làm thay đi b mt kinh t xã hi toàn cu, trong đó công ngh phn mm tr thành mt ngành công nghip quan trng đy tim nng. Vi s hi t ca công ngh vin thông và công ngh thông rin, t trng v giá tr phn mm chim rt cao trong các h thng vin thông cng nh các thit b đu cu i. Chính vì lý do đó, vic nghiên cu, tìm hiu, tin ti phát trin cng nh làm ch các h thng phn mm ca các k s đin t vin thông là rt cn thit. Tài liu ging dy “K thut lp trình” cho h đào to t xa đc xây dng da trên giáo trình “K thut lp trình” đã đc ging dy ti hc vi n trong nhng nm qua vi mc đích cung cp cho sinh viên nhng kin thc c bn nht, có tính h thng liên quan ti lp trình. Thông qua cun tài liu này, chúng tôi mun gii thiu vi các bn đc v k nng lp trình cu trúc và mt s thut toán quan trng, bao gm: i cng v lp trình cu trúc; Duyt và đ qui; Ngn xp, hàng đi và danh sách móc ni; Cây; th và cu i cùng là Sp xp và tìm kim. II. MC ÍCH Môn hc cung cp cho sinh viên k nng lp trình trên các cu trúc d liu quan trng nh: stack, queue mlink, tree & graph cùng vi phng pháp phân tích, thit k, đánh giá thut toán. Sau khi hc xong môn hc này, sinh viên có kh nng vit đc chng trình gii quyt nhng bài toán trong thc t. III. PHM VI NGHIÊN CU Nghiên cu các thut toán c bn đc s dng trong thc t nh các thut toán tìm kim, các thut toán liên quan đn đ th. Các gii thut lp trình da trên danh sách, cây… Nghiên cu cách cài đt các thut toán trên máy tính. Tìm hiu các lnh vc ng dng ca các thut toán, phng pháp trong thc t. IV. PHNG PHÁP NGHIÊN CU hc tt môn hc này, sinh viên cn lu ý nhng vn đ sau: 1. Kin thc cn trc Li nói đu 2 - Sinh viên phi có kin thc c bn v toán hc cao cp. - Thành tho ít nht mt ngôn ng lp trình. c bit trong cun sách này đã s dng ngôn ng lp trình C đ mô t thut toán, vì vy sinh viên phi nm đc ngôn ng lp trình C. 2. Các tài liu cn có: Sách hng dn hc tp K thut lp trình. Ths. Nguyn Duy Phng, Hc vin Công ngh Bu chính Vin thông, 2006. N u cn sinh viên nên tham kho thêm: - Giáo trình K thut lp trình. Ts. Lê Hu Lp, Ths. Nguyn Duy Phng, Hc vin Công ngh Bu chính Vin thông, 2002. - Bài ging đin t môn hc: “K thut lp trình” ca Hc vin Công ngh Bu chính Vin thông. 3. t ra mc tiêu, thi hn cho bn thân t ra các mc tiêu tm thi và thi hn cho bn thân và c gng thc hin chúng Xây d ng mc tiêu trong chng trình nghiên cu. 4 Nghiên cu và nm nhng kin thc ct lõi Sinh viên nên đc qua sách hng dn hc tp trc khi nghiên cu bài ging môn hc và các tài liu tham kho khác. 5. Tham gia đy đ các bui hng dn hc tp Thông qua các bui hng dn hc tp, ging viên s giúp sinh viên nm đc ni dung tng th ca môn hc và gii đáp thc mc, đng th i sinh viên cng có th trao đi, tho lun vi nhng sinh viên khác v ni dung bài hc. 6. Ch đng liên h vi bn hc và ging viên Cách đn gin nht là tham d các din dàn hc tp trên mng Internet, qua đó có th trao đi trc tip các vn đ vng mc vi ging viên hoc các bn hc khác đang online. 7. T ghi chép li nhng ý chính Vic ghi chép li nhng ý chính là mt ho t đng tái hin kin thc, kinh nghim cho thy nó giúp ích rt nhiu cho vic hình thành thói quen t hc và t duy nghiên cu. 8. Hc đi đôi vi hành Hc lý thuyt đn đâu thc hành làm bài tp và thc hành ngay đn đó đ hiu và nm chc lý thuyt. Sinh viên cn cài đt trên máy tính các 1 2 JAVASCRIPT Bài 1: TỔNG QUAN VỀ JAVASCRIPT. 1. Đặc tính của ngôn ngữ Javascript: avascript là một ngôn ngữ thông dịch (interpreter), chương trình nguồn của nó được nhúng (embedded) hoặc tích hợp (integated) vào tập tin HTML chuẩn. Khi file được load trong Browser (có support cho JavaScript), Browser sẽ thông dịch các Script và thực hiện các công việc xác định. Chương trình nguồn JavaScript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được hiển thị. Javascript là một ngôn ngữ có đặc tính: . • Đơn giản. . • Động (Dynamic). . • Hướng đối tượng (Object Oriented). 2. Ngôn ngữ JavaScript: Một trong những đặc tính quan trọng của ngôn ngữ JavaScript là khả năng tạo và sử dụng các đối tượng (Object). Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng. Trong JavaScript ,các Object được nhìn theo 2 khía cạnh: .a. Các Object đã tồn tại. .b. Các Object do người lập trình xây dựng. Trong các Object đã tồn tại được chia thành 2 kiểu: .a. Các Object của JavaScript (JavaScript Built-in Object). .b. Các đối tượng được cung cấp bởi môi trường Netscape. 3. Built-in Object trong JavaScript: JavaScript cung cấp 1 bộ các Built-in Object để cung cấp các thông tin về sự hiện hành của các đối tượng được load trong trang Web và nội dung của nó.Các đối tượng này bao gồm các phương pháp (Method) làm việc với các thuộc tính (Properties) của nó. 4. Các đối tượng được cung cấp bởi môi trường Netscape: Netscape Navigator cung cấp các đối tượng cho phép JavaScript tương tác với file HTML, các đối tượng này cho phép chúng ta điều khiển việc hiển thị thông tin và đáp ứng các sự kiện trong môi trường Navigator.Ví dụ Đối tượng Mô tả Window Cung cấp các phương pháp và các tính chất cho cửa sổ hiện hành của trình duyệt,bao gồm các đối tượng cho mỗi frame. Location Cung cấp các tính chất và phương pháp làm việc với các địa chỉ URL hiện hành được mở. History Các đối tượng history cung cấp thông tin về các danh sách cũ và có thể giới hạn sự tương tác với danh sách. Document Đây là một đối tượng được sử dụng nhiều nhất .Nó chứa đựng các Đối tượng,tính chất và các phương pháp làm việc với các thành phần của tài liệu như các :form,link,anchor,applet. 5. Các đối tượng do người lập trình xây dựng: a. Định nghĩa thuộc tính của đối tượng: (Object Properties) Cú pháp : Object-name.Property-name (tên đối tượng.tên đặc tính) Ví dụ :Một đối tượng airplane có các thuộc tính như sau: Airplane.model Airplane.maxspeed Airplane.price Airplane.fuel 3 Airplane.seating b. Thêm các phương pháp cho đối tượng:( Method to Object) Sau khi đã có các thông tin về airplane ta tiếp tục xây dựng phương pháp để sử dụng thông tin này.Ví dụ bạn muốn in ra mô tả của airplane hoặc tính toán khoảng cách tối đa của cuộc hành trình với nhiên liệu đã có: Airplane.description() Airplane.distance() c. Tạo một instance của đối tượng: Trước khi thao tác với một đối tượng của JavaScript ta phải tạo một instance cho đối tượng đó. 6 . Nhúng JavaScript vào trong tập tin HTML: Cú pháp: <SCRIPT LANGUAGE=”JavaScript”> JavaScript Program </SCRIPT> Thuộc tính của thẻ SCRIPT .+ SRC :Địa chỉ URL chỉ đến tập tin chương trình JavaScript (*.js) .+ LANGUAGE: Chỉ định ngôn ngữ được sử dụng trong Script và các phiên bản sử dụng (ví dụ như :JavaScript ,JavaScript .1.2 vv… ,VBScript). 7. Ẩn các Scripts đối với các Browser không cung cấp JavaScript: <SCRIPT LANGUAGE=”JavaScript”> <!- - Dòng dấu Script đối với các Browser không cung cấp (support) JavaScript Program //Dòng kết thúc việc dấu Script và chú thích - - > </SCRIPT> 8. Sử dụng tập tin JavaScript bên ngoài : <SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.hcmuns.edu.vn/scrol Lý thuyết: 45 tiết Thực hành: 30 tiết • GVHD: Dương Khai Phong • Email: khaiphong@gmail.com • Website: http://sites.google.com/site/khaiphong 1/ Giới thiệu tổng quan Web 2/ HTML JavaScript 3/ Các đối tượng ASP.Net 4/ ADO.Net (kết nối sở liệu) 5/ Triển khai ứng dụng Web + Ôn tập PHẦN 1: Webpage – Website HTML, XHTML, DHTML Các ngôn ngữ lập trình web Web Server – Web Browser – HTTP Mô hình ứng dụng Quá trình Request - Respone a Webpage: Web hệ thống văn có mối siêu liên kết bên với (interlinked hypertext documents) truy xuất thông qua hệ thống Internet Webpage trang thông tin chứa: văn (text), hình ảnh (images), phim (videos) đa phương tiện khác…có mối siêu liên kết với (hyperlinks) Một trang web tập tin HTML XHTML truy xuất thông qua giao thức HTTP b Website: Website tập hợp trang web nằm tên miền tên miền phụ WWW hệ thống mạng Internet Phân loại: • Website tĩnh: chủ yếu giới thiệu thông tin • Website động: có tương tác với người dùng WEBSITE WEB PAGE Trang chủ WEB PAGE Giới thiệu WEB PAGE Tin tức WEB PAGE Liên hệ WEB PAGE Quảng cáo WEB PAGE Sản phẩm WEB PAGE Hình ảnh WEB PAGE Menu WEB PAGE Sự kiện WEB PAGE Videos a HTML: HTML viết tắt HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản) HyperText – văn kết nối đến văn khác Sử dụng “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định cách biểu diễn trang web đến người sử dụng Một tập tin HTML tập tin văn có chứa thẻ đánh dấu (các tập tin có phần mở rộng *.htm *.html) b XHTML: XHTML viết tắt eXtensible HyperText Markup Language (ngôn ngữ đánh dấu siêu văn mở rộng): ngôn ngữ đánh dấu tương tự ngôn ngữ HTML có cú pháp chặt chẽ XHTML xem hệ HTML dựa chuẩn XML c DHTML: DHTML viết tắt Dynamic HyperText Markup Language (ngôn ngữ đánh dấu siêu văn động) Là ngôn ngữ dùng tạo trang web dựa kết hợp nhiều kỹ thuật như: ngôn ngữ HTML tĩnh, ngôn ngữ kịch máy khách (Javascript), ngôn ngữ định dạng trình diễn Cascading Style Sheets (CSS) Document Object Model (DOM) DHTML cho phép người dùng thêm hiệu ứng vào trang web mà HTML không thực a Giới thiệu: Các đối tượng javascript hỗ trợ: Array Math Date String … Window objects Document Event Frames History Location Navigator Screen b • • • • c Đối tượng bản: Array: đối tƣợng dùng quản lí danh sách mảng Math: đối tƣợng liên quan đến phép tính toán học String: đối tƣợng dùng để thao với chuỗi văn Date: đối tƣợng liên quan đến ngày Đối tượng trình duyệt: window: Công dụng: dùng quản lý thông tin tất đối tƣợng cửa sổ trình duyệt Các thuộc tính bản: đối tƣợng window đƣợc xem đối tƣợng (base class) tất đối tƣợng khác Các phương thức bản: alert(), blur(), close(), open(), focus(), navigate() c Đối tượng trình duyệt: document: Công dụng: dùng quản lý thông tin tài liệu HTML cửa sổ trình duyệt (đƣợc xem đối tƣợng window) Các thuộc tính phương thức: Các thuộc tính: • alinkColor • bgColor • Body • fgColor • linkColor • location • Title • URL • vlinkColor Các phƣơng thức: • clear() • close() • open() • write() • writeln() c Đối tượng trình duyệt: history: Công dụng: dùng quản lý danh sách URL duyệt Các thuộc tính phương thức: Các thuộc tính: • current • length • next • previous Các phƣơng thức: • back() • forward() • go(relPos string) c Đối tượng trình duyệt: location: Công dụng: dùng quản lý thông tin URL Các thuộc tính phương thức: Các thuộc tính: • hash • host • hostname • href Các phƣơng thức: • reload() • replace(URL) a Giới thiệu: Javascript quản lý tƣơng tác ngƣời dùng trình duyệt thông qua quản lý kiện (Event) Form đối tƣợng Form b Sự kiện: (Event) Sự kiện kết thao tác ngƣời dùng tác động lên đối tƣợng Một kiện bao gồm thông tin: Kiểu kiện: click, double click, change, Vị trí trỏ thời điểm xảy kiện Các kiện thƣờng gặp: • • • • • • onClick onChange onFocus onBlur onSelect onMouseOver • • • • • • onMouseOut onLoad onUnload .. .JAVASCRIPT LÀ GÌ? Là ngôn ngữ kịch đƣợc thực máy client Đƣợc nhúng vào trang web Đƣợc thiết kế để tăng khả tƣơng tác cho trang web Là ngôn ngữ thông dịch Đƣợc hỗ trợ trình duyệt... (cookie) CHÈN JAVASCRIPT VÀO HTML Chèn trực tiếp mã vào HTML Chèn file JavaScript chứa mã