11HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/
22HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Mục tiêu...
33HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dung...
44HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Của hã...
55HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Có một...
66HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Các tr...
77HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dung...
88HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số h...
99HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp th...
1010HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số...
1111HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp ...
1212HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số...
1313HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp ...
1414HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội du...
1515HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụn...
1616HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn...
1717HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụn...
1818HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn...
1919HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụn...
2020HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Sử d...
2121HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụn...
2222HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn...
2323HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụn...
2424HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chú ...
2525HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội du...
2626HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn n...
2727HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến...
2828HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến...
2929HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến...
3030HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến...
3131HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến...
3232HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn n...
3333HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các ...
3434HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các ...
3535HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các ...
3636HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các ...
3737HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các ...
3838HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn n...
3939HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một ...
4040HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một ...
4141HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một ...
4242HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một ...
4343HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một ...
4444HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn n...
4545HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hàm ...
4646HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hàm ...
4747HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn n...
4848HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu ...
4949HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu ...
5050HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu ...
5151HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu ...
5252HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu ...
5353HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bài 3:...
Upcoming SlideShare
Loading in...5
×

Bài 3 - Ngôn ngữ lập trình Javascript - Học lập trình web cơ bản với Html, Css, Javascript

326,791

Published on

Mục tiêu :
Sử dụng ngôn ngữ JavaScript
Chèn hoặc tích hợp JavaScript vào trang HTML

Xem đầy đủ tại http://www.hoclaptrinhweb.com

Published in: Education
2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
326,791
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
2
Likes
28
Embeds 0
No embeds

No notes for slide
  • Thời lượng : 15 tiết
  • Minhoa_Bai03_slide16.html
  • Minhoa_Bai03_slide18.html
  • Minhoa_Bai03_slide22.html
  • Minhoa_Bai03_slide28.html
  • Transcript of "Bài 3 - Ngôn ngữ lập trình Javascript - Học lập trình web cơ bản với Html, Css, Javascript"

    1. 1. 11HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/
    2. 2. 22HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Mục tiêuMục tiêu• Sử dụng ngôn ngữ JavaScript• Chèn hoặc tích hợp JavaScript vàotrang HTML
    3. 3. 33HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript
    4. 4. 44HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Của hãng Netscape Communications− Là một ngôn ngữ kịch bản (scripting language) dùng đểtương tác với các trang HTML dựa trên đối tượng(object-based scripting language )− Chủ yếu dùng cho kỹ thuật lập trình ở phía client− Code của JavaScript thường được nhúng (embedded)trực tiếp hoặc tích hợp (integrated) vào trang webBài 3: Ngôn ngữ lập trình JavascriptGiới thiệu tổng quan về Javascript
    5. 5. 55HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Có một số đặc điểm sau:• Là một ngôn ngữ thông dịch(interpreted language), nghĩa làcác script thi hành không cần biên dịch trước (precompile).Trình duyệt dịch script, phân tích và thi hành ngay tức thời• Lập trình theo cấu trúc (Structured progarming)• Có phân biệt chữ HOA và thườngBài 3: Ngôn ngữ lập trình JavascriptGiới thiệu tổng quan về Javascript
    6. 6. 66HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/− Các trình duyệt hỗ trợ JavaScript:• Netscape Navigator (bắt đầu từ phiên bản 2.0)• Microsoft Internet Explorer (bắt đầu từ phiên bản 3.0)• Những trình duyệt khác có hỗ trợ JavaScript (như Opera…)Bài 3: Ngôn ngữ lập trình JavascriptGiới thiệu tổng quan về Javascript
    7. 7. 77HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup Boxescơ bản – Popup Boxes2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup Boxescơ bản – Popup Boxes3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript
    8. 8. 88HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số hộp thoại cơ bản – Popup BoxesMột số hộp thoại cơ bản – Popup Boxes• Hộp thông báo – Alert box• Hộp xác nhận – Confirm box• Hộp nhận giá trị - Prompt box
    9. 9. 99HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp thông báo – Alert box− Xuất câu thông báo trong một cửa sổBài 3: Ngôn ngữ lập trình JavascriptMột số hộp thoại cơ bản – Popup boxesalert(“Câu thông báo”)Ví dụ:<body><form id="nhap"><input type="button" name="chao" value="Xuất câu chào"onClick="alert(Chào bạn, chúc mừng bạn đến với ngôn ngữJavaScript); "></form></body>ClickClick
    10. 10. 1010HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số hộp thoại cơ bảnMột số hộp thoại cơ bản• Hộp thông báo – Alert box• Hộp xác nhận – Confirm box• Hộp nhận giá trị - Prompt box
    11. 11. 1111HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp xác nhận – Confirm box− Có dạng hàm (true/false), giúp người dùng quyết địnhđồng ý hoặc từ chối một yêu cầuBài 3: Ngôn ngữ lập trình JavascriptMột số hộp thoại cơ bản – Popup boxes<biến> = confirm(“Câu hỏi”)Ví dụ:<body><form id="nhap"><input type="button" name="chao" value="Đổi mật khẩu"onClick="traloi=confirm(Bạn có đồng ý đổi mật khẩu);"></form></body>ClickClick
    12. 12. 1212HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Một số hộp thoại cơ bảnMột số hộp thoại cơ bản• Hộp thông báo – Alert box• Hộp xác nhận – Confirm box• Hộp nhận giá trị - Prompt box
    13. 13. 1313HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hộp nhận giá trị – Prompt box− Có dạng hàm, yêu cầu nhập vào một giá trịBài 3: Ngôn ngữ lập trình JavascriptMột số hộp thoại cơ bản – Popup boxes<biến> = prompt(“Câu hướng dẫn”, “giá trị mặc định”)Ví dụ:<body><form name="nhap"><label id="chao" style="color:#3300CC"></label><br><input type="button" name="xuat" value="Xuất câu chào"onClick="chao.innerText=prompt(Nhập tên của bạn:, )"></form></body>
    14. 14. 1414HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript
    15. 15. 1515HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụng JavaScript trong trang HTMLSử dụng JavaScript trong trang HTML• Chèn JavaScript vào Head section• Chèn JavaScript vào Body section• Sử dụng tập tin thư viện – External script• Chèn JavaScript vào sự kiện• Chú thích trong JavaScript
    16. 16. 1616HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn JavaScript vào Head section− Đặt đoạn lệnh JavaScript trong cặp tag <script>Bài 3: Ngôn ngữ lập trình JavascriptSử dụng JavaScript trong trang HTML<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Ví dụ về script</title><script language="javascript" type="text/javascript">//Đọan JavaScript</script></head><body>Nội dung trang web</body></html> Minh họaMinh họa
    17. 17. 1717HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụng JavaScript trong trang HTMLSử dụng JavaScript trong trang HTML• Chèn JavaScript vào Head section• Chèn JavaScript vào Body section• Sử dụng tập tin thư viện – External script• Chèn JavaScript vào sự kiện• Chú thích trong JavaScript
    18. 18. 1818HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn JavaScript vào Body section− Đặt cặp tag <script> trong cặp tag <body>Bài 3: Ngôn ngữ lập trình JavascriptSử dụng JavaScript trong trang HTML<html><head> <title>Ví dụ về script</title></head><body><script language="javascript" type="text/javascript">//Đọan JavaScript</script>Nội dung trang web<script language="javascript" type="text/javascript">//Đọan JavaScript</script>…</body></html> Minh họaMinh họa
    19. 19. 1919HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụng JavaScript trong trang HTMLSử dụng JavaScript trong trang HTML• Chèn JavaScript vào Head section• Chèn JavaScript vào Body section• Sử dụng tập tin thư viện – External script• Chèn JavaScript vào sự kiện• Chú thích trong JavaScript
    20. 20. 2020HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Sử dụng tập tin thư viện – External script− Các đọan code dùng chung sẽ được viết trong một tập tinvà lưu với phần mở rộng là .js− Sử dụng thuộc tính src (source) của tag <script> để khaibáo tập tin *.jsBài 3: Ngôn ngữ lập trình JavascriptSử dụng JavaScript trong trang HTML<html><head> <title>Ví dụ về script</title><script language="javascript" src="<tên tập tin>.js"></script></head><body>Nội dung trang web</body></html>
    21. 21. 2121HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụng JavaScript trong trang HTMLSử dụng JavaScript trong trang HTML• Chèn JavaScript vào Head section• Chèn JavaScript vào Body section• Sử dụng tập tin thư viện – External script• Chèn JavaScript vào sự kiện• Chú thích trong JavaScript
    22. 22. 2222HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chèn JavaScript vào sự kiện− HTML cho phép chèn JavaScript vào các sự kiện của tag− Code JavaScript sẽ được thi hành khi phát sinh sự kiệnBài 3: Ngôn ngữ lập trình JavascriptSử dụng JavaScript trong trang HTMLMinh họaMinh họa
    23. 23. 2323HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Sử dụng JavaScript trong trang HTMLSử dụng JavaScript trong trang HTML• Chèn JavaScript vào Head section• Chèn JavaScript vào Body section• Sử dụng tập tin thư viện – External script• Chèn JavaScript vào sự kiện• Chú thích trong JavaScript
    24. 24. 2424HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Chú thích trong JavaScript− Chú thích cho một dòng, ta dùng ký hiệu //− Chú thích từ 2 dòng trở lên, bắt đầu bằng ký hiệu /* vàkết thúc bằng */Bài 3: Ngôn ngữ lập trình JavascriptSử dụng JavaScript trong trang HTMLVí dụ:<script language="javascript">//In dòng tiêu đềdocument.write("<h1>Đây là dòng tiêu đề</h1>");/* Hai dòng lệnh sauin hai đọan văn bản */document.write("<p>Đây là đọan văn thứ nhất </p>");document.write("<p>Đây là đọan văn thứ hai </p>");</script>
    25. 25. 2525HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Nội dungNội dung1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript1. Giới thiệu tổng quan1. Giới thiệu tổng quanvề JavaScriptvề JavaScript2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes2. Một số hộp thoại2. Một số hộp thoạicơ bản – Popup boxescơ bản – Popup boxes3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML3. Sử dụng JavaScript3. Sử dụng JavaScripttrong trang HTMLtrong trang HTML4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript4. Ngôn ngữ lập trình4. Ngôn ngữ lập trìnhJavaScriptJavaScript
    26. 26. 2626HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn ngữ lập trình JavaScriptNgôn ngữ lập trình JavaScript• Biến - Variable• Các toán tử - Operators• Một số hàm cơ bản trong JavaScript• Hàm - Function• Cấu trúc điều khiển
    27. 27. 2727HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến – Variable− Khai báo:• <tên biến> phải bắt đầu bằng ký tự (a -> z) hoặc dấu gạchdưới (_)Bài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptvar <tên biến>;hoặc var <tên biến> = <giá trị>;hoặc <tên biến> = <giá trị>;
    28. 28. 2828HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến – Variable− Khai báo:• Khai báo bên ngoài hàm gọi là biến toàn cục (global variable)• Khai báo trong hàm gọi là biến cục bộ (local variable) và chỉđược phép sử dụng trong hàm khai báo nóBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptMinh họaMinh họa
    29. 29. 2929HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến – Variable− Giá trị của biến:• Số - Number : một con số (như 23 hoặc 3.1415)• Luận lý – Boolean : true hoặc false• Chuỗi – String : một chuỗi các ký tự ( như “abc”)• null : khi không xác định giá trị• undefined : khi không xác định giá trịBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript
    30. 30. 3030HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến – Variable− Phân biệt giá trị null và undefined:• undefined: biến được khai báo nhưng chưa được gán giá trị• null: biến được khai báo và được gán = nullBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:var TestVar;alert(TestVar);  undefinedVí dụ:var TestVar = null;alert(TestVar);  null
    31. 31. 3131HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Biến – Variable− Kiểm tra kiểu dữ liệu: dùng toán tử typeofBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:document.write(typeof 10);  “number”document.write(typeof (JS));  “string”document.write(typeof new Date());  “object”document.write(typeof myVar);  “undefined”typeof <giá trị>hoặc typeof (<giá trị>)
    32. 32. 3232HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn ngữ lập trình JavaScriptNgôn ngữ lập trình JavaScript• Biến - Variable• Các toán tử - Operators• Một số hàm cơ bản trong JavaScript• Hàm - Function• Cấu trúc điều khiển
    33. 33. 3333HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các toán tử - Operators− Toán tử số học – Arithmetic operatorsBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript
    34. 34. 3434HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các toán tử - Operators− Toán tử gán – Assignment operatorsBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript
    35. 35. 3535HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các toán tử - Operators− Toán tử so sánh – Comparision operatorsBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript
    36. 36. 3636HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các toán tử - Operators− Toán tử luận lý – Logical operatorsBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript
    37. 37. 3737HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Các toán tử - Operators− Toán tử điều kiện – Conditonal operatorBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript(<điều kiện>) ? <giá trị 1> : <giá trị 2>Ví dụ:tinhtrang = (tuoi>=18) ? “trưởng thành” : “vị thành niên”
    38. 38. 3838HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn ngữ lập trình JavaScriptNgôn ngữ lập trình JavaScript• Biến - Variable• Các toán tử - Operators• Một số hàm cơ bản trong JavaScript• Hàm - Function• Cấu trúc điều khiển
    39. 39. 3939HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số hàm cơ bản trong JavaScript− eval(“chuỗi”): đánh giá biểu thức “chuỗi” và thi hành nhưlà code JavaScriptBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:str="if (3>2) document.write(đúng); else document.write(sai);“var ktra = eval(str); // “đúng”document.write("<br>" + eval("2+2")); // 4
    40. 40. 4040HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số hàm cơ bản trong JavaScript− isNaN(<giá trị>): kiểm tra <giá trị> không phải là số haykhông (true/false). Nếu <giá trị> là chuỗi “”, trả về trueBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:document.write(isNaN(5-2)+ "<br />");  falsedocument.write(isNaN(0)+ "<br />");  falsedocument.write(isNaN("Hello")+ "<br />");  true
    41. 41. 4141HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số hàm cơ bản trong JavaScript− Number(<đối tượng>): chuyển đổi một đối tượng sangmột con số, nếu không chuyển được, trả về NaNBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:document.write(Number("227") + "<br>");  227document.write(Number(true) + "<br>");  1document.write(Number(false) + "<br>");  0document.write(Number("227 233"));  NaN
    42. 42. 4242HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số hàm cơ bản trong JavaScript− parseInt(“chuỗi” [,<cơ số>]): phân tích “chuỗi” và trả vềsố nguyên, <cơ số> xác định hệ thống số. Chỉ phân tíchsố đầu tiên và nếu không chuyển được, trả về NaN.Bài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ: document.write(parseInt("10") + "<br />");  10document.write(parseInt("10.33") + "<br />");  10document.write(parseInt("34 45 66") + "<br />");  34document.write(parseInt(" 60 ") + "<br />");  60document.write(parseInt("40 tuổi") + "<br />");  40document.write(parseInt("Cô ấy 40") + "<br />");  NaN
    43. 43. 4343HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Một số hàm cơ bản trong JavaScript− parseFloat(“chuỗi”): tương tự hàm parseInt nhưng trả vềsố thựcBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptVí dụ:document.write(parseFloat("10.33") + "<br />");  10.33document.write(parseFloat("34 45 66") + "<br />");  34document.write(parseFloat(" 60 ") + "<br />");  60document.write(parseFloat("40 tuổi") + "<br />");  40document.write(parseFloat("Cô ấy 40") + "<br />");  NaN
    44. 44. 4444HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn ngữ lập trình JavaScriptNgôn ngữ lập trình JavaScript• Biến - Variable• Các toán tử - Operators• Một số hàm cơ bản trong JavaScript• Hàm - Function• Cấu trúc điều khiển
    45. 45. 4545HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hàm – Function− Khai báo: Hàm có thể được khai báo trong tag <head>hoặc tag <body> hoặc trong tập tin *.jsBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptfunction <tên hàm>( [ tham số 1, tham số 2, … ] ){/* khối lệnh xử lý */[ return <giá trị trả về >]}Ví dụ:function dt_hinhvuong(canh){ return canh*canh; }
    46. 46. 4646HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Hàm – Function− Sử dụng:Bài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScript<biến> = <tên hàm>([<giá trị>, …])hoặc <tên hàm>([<giá trị>, …])Ví dụ:<input type="button" value="Tính diện tích"onClick = "alert(dt_hinhvuong(3))">
    47. 47. 4747HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Ngôn ngữ lập trình JavaScriptNgôn ngữ lập trình JavaScript• Biến - Variable• Các toán tử - Operators• Một số hàm cơ bản trong JavaScript• Hàm - Function• Cấu trúc điều khiển
    48. 48. 4848HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc điều khiển− if … elseBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptif (<điều kiện>)// Một lệnh xử lý;Hoặcif (<điều kiện>){/* Khối lệnh xử lý; */}
    49. 49. 4949HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc điều khiển− if … elseBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptHoặcif (<điều kiện>){/* Khối lệnh xử lý 1; */}else{/* Khối lệnh xử lý 2; */}
    50. 50. 5050HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc điều khiển− switchBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptswitch (<biểu thức>){case <giá trị 1>:/* Khối lệnh xử lý 1 ; */break;case <giá trị 2>:/* Khối lệnh xử lý 2 ; */break;…[default:/* Khối lệnh xử lý n ; */ ]}
    51. 51. 5151HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc điều khiển− Vòng lặp forBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptfor (<giá trị bắt đầu> ; <điều kiện lặp> ; <bước nhảy>){/* Khối lệnh xử lý; */[break;]}Ví dụ: in bảng cửu chương 2var i;for ( i=1; i<=10; i++){document.write( "2 * " + i + " = " + 2*i + "<br>")}Ví dụ: in ngược bảng cửu chương 2for (var i=1, j=10; i<=10; i++, j--){document.write( "2 * " + j + " = " + 2*j + "<br>")}
    52. 52. 5252HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/• Cấu trúc điều khiển− Vòng lặp while và do … whileBài 3: Ngôn ngữ lập trình JavascriptNgôn ngữ lập trình JavaScriptwhile (<điều kiện>){/* Khối lệnh xử lý; */[break;]}Hoặcdo{/* Khối lệnh xử lý; */[break;]} while (<điều kiện>)Ví dụ:var i = 0;var n = 0;while (i < 5){ i++ ;if (i == 3)continue;n += i;document.write("i : " + i + " ; " + "n : " + n + "<br>");}
    53. 53. 5353HỌC LẬP TRÌNH WEB TỪ CƠ BẢN ĐẾN NÂNG CAOHocLapTrinhWeb.COMα - Tek http://www.facebook.com/groups/hoclaptrinhweb/Bài 3: Ngôn ngữ lập trình JavaScriptHẾTHẾT

    ×