Diễn đàn thảo luận tin học, học tập và giải trí miễn phí.
Đây là bài viết JavaScript cơ bản và nâng cao trong box
một box của chuyên mục
SquallLTT thanks to Ky*Niem*Buon Tự bạch: Bạn muốn thiết kế cho mình 1 trang Web tương tác, bạn muốn học ...
| |||||||
|
#1
13-12-2006, 01:51 PM
| ||||
| ||||
 JavaScript cơ bản và nâng cao SquallLTT thanks to Ky*Niem*Buon Tự bạch: Bạn muốn thiết kế cho mình 1 trang Web tương tác, bạn muốn học lập trình nhưng chưa biết bắt đầu từ đâu ...vậy thì bài viết này có thể giúp bạn làm được điều đó vì tôi viết bài này rất căn bản. Đáng lẽ tôi định để đên khi tôi học xong toàn bộ JavaScript (căn bản thôi) mới post bài này nhưng do đã lỡ đăng kí làm Mod box này nên cũng muốn đóng góp 1 cái gì đó smile.gif Các bạn có thể post bài này trên các diễn đàn khác nhưng xin đề tên nhonguoiyeu ở dưới, tôn trọng bài viết này cũng chính là tôn trọng tôi và công sức của tôi , đồng thờI cũng tôn trọng chính bản thân các bạn . Trong bài tôi có sử dụng 1 số bài viết trong quyển "Tài liệu JavaScript" của khoa toán tin ĐHQG Hà Nội và đặc biệt là "Hướng dẫn thiết kế trang Web tương tác bằng JavaScript" của nhà xb mũi Cà Mau . Nếu bạn có trong tay 2 quyển này thì có lẽ bạn chẳng cần đọc bài viết này làm chi Tôi post bài này cho những bạn không có điều kiện mua và đọc những quyển sách đó Các bạn lưu ý, ko chat chit trong topic này và hãy đọc và làm theo trước khi post câu hỏi chứ đừng có khó cái là hỏi ngay Một điều cần lưu ý nữa là, tiêu đề topic là "JavaScript cơ bản và nâng cao" nhưng phần nhiều là cơ bản cho những người chưa biết gì Nếu bạn muốn học JavaSScript nâng cao xin hãy đọc cuốn "The Definitive Guide" của David Flanagan (cái này thì nhonguoiyeu chưa đọc vì cơ bản nhonguoiyeu cũng chưa học hết, vả lại nhonguoiyeu học JavaScript để có kiến thức về lập trình trước khi học PHP/MySQL thôi) Cuối cùng, vì nhonguoiyeu mới học IT và đây là lần đầu nhonguoiyeu viết 1 bài "dài kì" nên sẽ không tránh được những lỗi, mong mọi người đóng góp để hoàn thiện bào viết Thank Phần I -Tổng quan về JavaScript. Biến và hàm trong JavaScript I-Tổng quan về JavaScript. 1-JavaScript là gì?JavaScript là ngôn ngữ dưới dạng Script có thể gắn với các file HTML để bổ sung tính tương tác của Web. Nó không đuợc biên dịch mà được trình duyệt diễn dịch. JavaScipt là ngôn ngữ dựa trên đối tượng nhưng nó không phải là ngôn ngữ hướng đối tượng do không hỗ trợ các lớp hay tính thừa kế. 2-Các dạng thay thế cho JavaScript là gì?Có 1 số ngôn ngữ khác cũng có khả năng bổ sung tính tương tác cho Web nhưng tất cả chúng đều khác ở 1 số điểm: -Script CGI (common gateway interface): Các Script rất mạnh nhưng chúng nằm trên máy chủ nên có 1 số nhược điểm như: kết nối giữa trình duyệt Web và máy chủ sẽ giới hạn tốc độ tương tác trên Web của bạn, máy chủ Web có thể bị quá tải nếu có nhiều người sử dụng đồng thời, không phải mọi người đều có thể truy cập đến các vùng trên máy chủ Web mà có thể chạy Script CGI vì các Script có thể làm ngưng trệ máy chủ... -Java: Mặc dù có tên tương tự nhau nhưng chúng ko phải là ngôn ngữ giống nhau. Javascript được Netscape tại ra để cung cấp tính tương tác cho Web còn Java dược Sun viết như là 1 ngôn ngữ lập trình có thể làm việc trên tất cả HDH khác nhau. -VB Script: Đây có lẽ là ngôn ngữ gần gũi nhất với JS nhưng nó có 1 hạn chế là chỉ làm việc trên IE (Nó là ngôn ngữ độc quyền của MS). 3-Các giới hạn của JavaSript (JS). -JavaScript không thể giao tiếp với máy chủ: 2 công việc chủ yếu của máy chủ mà JS không thể thực hiện được là việc tập hợp thông tin từ người dùng và giao tiếp với các máy khác, ta cũng không thể gửi mail với JS vì muốn gửi mail thì phải giao tiếp với máy chủ và tất nhiên JS thì... bó tay -JavaScript không thể tạo các hình ảnh đồ họa: 1 trong các giới hạn của JS là nó ko thể tạo các hình ảnh đồ họa của riêng nó mà chỉ làm việc với các hình ảnh có sẵn theo nhiều cách nên đây cũng ko phải là 1 giới hạn gì to tát lắm. -JS làm việc khác nhau trên các trình duyệt khác nhau. 4-Nhúng JavaScript vào HTML. CODE Như bạn đã thấy JavaScript nằm giữa thẻ <script> và </Script> (Thuộc tính language trong thẻ Script dùng để xác định ngôn ngữ được sử dụng, ở đây là JavaScript) và nó có thể đặt ở phần giữa thẻ <Head>...</Head> hoặc cặp thẻ <Boday>...<Body>. Việc bạn đặt JavaScript ở phần đầu hay phần thân trang web ko thành vấn đề vì JavaScript vẫn hoạt động bình thường, tuy nhiên tốt nhất nên đặt ở phần đầu vì như thế ta ko phải tìm kiếm chúng trên toàn bộ trang Web Các dòng bắt đầu với 2 dấu // là các dòng ghi chú trong JavaScript. Các trình duyệt sẽ bỏ qua văn bản nào xuất hiện sau dấu //. Trong lập trình, các ghi chú là cực kì quan trọng vì bạn có thể hiểu rõ đoạn Script của mình khi bạn viết nó nhưng sau 1 vài ngày sau đó, bạn muốn thực hiện việc thay đổi bạn có thể sẽ mất thời gian để định hướng những gì mà bạn viết trước đó. Ta đặt <!-- trứớc thẻ <script> và --> trước </Scrpit> để giấu JS trong các trình duyệt cũ không hỗ trợ JavarScript (Điều này nói thật thì cũng ko cần thiết lắm vì những trình duyệt như vậy -Nếu bạn có 1 file JavaScript (có phần mở rộng là .js) và muốn thêm vào trang Web mà không muốn phải viết lại bạn làm như sau: <script src=’File_nguồn’>.....</Script>  Mirror: http://othermirror.com/movie-JavaScript cơ bản và nâng cao/ http://othermirror.com/game-JavaScript cơ bản và nâng cao/ http://othermirror.com/anime-JavaScript cơ bản và nâng cao/ http://othermirror.com/musics-JavaScript cơ bản và nâng cao/ http://othermirror.com/torrentz-JavaScript cơ bản và nâng cao/ http://othermirror.com/subtitle-JavaScript cơ bản và nâng cao/ Các bài viết cùng chủ đề liên quan:
         |
|
#1
By
SquallLTT 
on
13-12-2006, 01:52 PM
|
 5-Viết chương trình đầu tiên. Bạn thử dán đoạn mã sau vào Notepad rùi lưu với my_first_program.htm CODE II-Biến trong JavaScript 1- Biến là gì ?Biến là những đại lượng mà giá trị của nó có thể thay đổi trong quá trình xử lý. Trong toán học, biến thường được dùng để lưu trữ các con số, còn trong tin học biến thường được dùng để lưu trữ thông tin Quy tắc đặt tên biến trong JavasCript: -Kí tự bắt đầu phải bắt đầu với 1 chữ cái, các kí tự sau có thể là chữ số, chữ cái... -Không được có khoảng trắng, dùng dấu “_” để phân cách thay cho khoảng trắng -Các biến là phân biệt chữ hoa, chữ thường vì vậy biến1#Biến1#BIẾN1..... Bạn cũng nên chú ý 1 điều rằng ko nên đặt tên biến trùng với tên các hàm, mảng..... Quy tắc trên còn được dùng trong 1 số ngôn ngữ lập trình khác nữa Phạm vi của biến: Phạm vi của biến có thể là 1 trong 2 kiểu sau -Biến toàn cục: có thể truy cập từ bất cứ đâu trong ứng dụng. Cách khai báo: ten_biến=giá_trị_biến VD: x=0, y=12 ..... -Biến cục bộ: chỉ có giá trị trong phạm vi chương trình mà nó khai báo, thường được sử dụng trong các hàm. Cách khai báo: var tên_biến=giá_trị_biến Như bạn đã thấy ở trên, biến cục bộ được khai báo với từ khóa var đứng trước Biến toàn cục cũng có thể sử dụng từ khóa var nhưng điều đó là không cần thiết 2-Các kiểu dữ liệu trong JavaScript a-Từ tố Khác với các ngôn ngữ lập trình khác, JavaScript ko có kiểu hằng số (Const) để biểu diễn 1 giá trị ko đổi nào đấy. b-Các kiểu dữ liệu Khác với C++, Java và nhiều ngôn ngữ lập trình bậc cao khác, JavaScript là ngôn ngữ có tính định kiểu thấp, điều này có nghĩa là không cần chỉ ra kiểu dữ liệu khi khai báo biến, kiểu dữ liệu tự chuyển thành kiểu dữ liệu phù hợp khi cần JavaScript có 4 kiểu dữ liệu *Kiểu số nguyên: có thể biểu diễn theo 3 cách +Hệ có số 10 (Chú ý số đầu tiên phải khác 0) +Hệ cơ số 8 (Với chữ số đầu tiên là 0) +Hệ cơ số 16 (Với 2 chữ số đầu tiên là 0x) *Kiểu dấu phẩy động *Kiểu logic: có 2 giá trị là True hoặc False *Kiểu chuỗi (String): được đặt trong dấu “...” hoặc ‘...’ tùy từng trường hợp, cái này ta xét sau III- Xây dựng các biểu thức trong JavaScript 1-Định nghĩa và phân loại biểu thức-Tập hợp các toán tử và các toán hạng nhằm đánh giá 1 giá trị nào đó gọi là biểu thức (Expresstion) Về cơ bản có 3 kiểu biểu thức trong JavaScript: số học, chuỗi và logic. Javascript cũng hỗ trợ biểu thức điều kiện với cú pháp như sau: (điều_kiện) ? Val_True:ValFalse Ví dụ X= y>12 ? 20:30 Tức là biến X có giá trị bằng 20 nếu biến y>12 và có giá trị là 30 nếu biến y<=12 2-Các toán tử a-Toán tử gán. Dùng dấu “ =” để gán giá trị cho biến Ngoài kiểu gán thông thường, JavaScript còn hỗ trợ kiểu gán rút gọn VD: Kiểu gán thông thường Kiểu gán rút gọn x = x + y x + = y x = x - y x - = y x = x * y x * = y x = x / y x / = y x = x % y x % = y b-So sánh 1 số toán tử so sánh thông dụng trong JavaScript == Trả lại giá trị đúng nếu toán hạng bên trái bằng bên phải != Trả lại giá trị đúng nếu toán hạng bên trái khác bên phải > Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn bên phải >= Trả lại giá trị đúng nếu toán hạng bên trái lớn hơn hoặc bằng bên phải < Trả lại giá trị đúng nếu toán hạng bên trái bé hơn bên phải <= Trả lại giá trị đúng nếu toán hạng bên trái bé hơn hoặc bằng bên phải c-Số học Ngoài các toán tử +,-.*,/ (Cộng trừ nhân chia) thông thường, JavaScript còn hỗ các toán tử sau: var1% var2 Lấy phần sư khi chia 2 biến cho nhau - Toán tử phủ định, có giá trị ohủ định toán hạng var++ (++var) Tăng biến lên 1 đơn vị var-- (--var) Giảm biến xuống 1 dơn vị Lưu ý: Khi ta gán gía trị của toán tử ++ hay --vào 1 biến(Ví dụ: y=x++ or y=--x) thì ta sẽ có các kết quả khác nhau tùy thuộc vào sự xuất hiện của dấu ++ (--) đứng trước hay sau x. Nếu ++(--) đứng trước thì x sẽ tăng (giảm) giá trị trước khi gán cho y, Nếu đứng sau thì x sẽ được gán cho y trước khi nó tăng hoặc giảm gía trị d-Chuỗi Để liên kết 2 chuỗi với nhau ta dùng toán tử “+” VíDụ: x=”MyLove” y=”I Love You Forever” z=x+y //z=”MyLove I Love You Forever” e-Logic JavaScript hỗ trợ các toán tử logic sau expr1 && expr2 Toán tử Logic AND, trả lại giá trị True nếu 2 giá trị cùng “True” expr1 || expr2 Toán tử Logic OR trả lại giá trị True nếu 1 trong 2 giá trị là True ! expr Toán tử Logic phủ định. g-Bitwise Đây là toán tử thao tác trên bit, đầu tiene giá trị được chuyển dưới dạng số nguyên 32 bit sau đó lần lượt thực hiện các phép toán trên từng bit Cái này ta ko cần biết nhiều nói qua thế thôi (Căn bản là tại tôi lười đánh quá hihi) IV-Cập nhật ngày tháng cho trang Web của bạn 1-Trong khi các biến dùng để lưu trữ thông tin thì các hàm dùng để xử lý thông tin. Tất cả các hàm đều có dạng function_name(). Đôi khi có 1 cái gì đó trong dấu ngoặc đôi khi lại không có gì. (Cái này ta sẽ nói đến sau). 2-Các hàm cơ bản cần biết. Để cập nhật ngày tháng cho trang Web bạn cần biết 1 số hàm cơ bản sau: -Hàm Alert(): Hàm này các bạn đã gặp ở ngay phần đầu tiên. Bây giờ ta sẽ xét lại nó CODE Bạn save với tên alert.htm và chạy thử. Đầu tiên bạn sẽ thấy 1 hộp cảnh báo hiện ra thông báo tác giả viết ra trang web là nhonguoiyeu. Trong khi hộp cảnh báo còn trên màn hình trình duyệt sẽ ngưng mọi công việc. Bằng việc nhấn nú OK trong hộp cảnh báo sẽ làm cho trình duỵet đóng lại và trình duyệt sẽ hoàn tất việc hiển thị Web (Trong trường hợp này là viết ra các từ To code, perchance to function ) (Bạn muốn viết những gì trong hộp cảnh báo bạn đặt chúng giữa 2 dấu “...” ) -Hàm prompt(): Đây là 1 hàm rất hữu dụng. Hàm Prompt() bắt người dùng nhập 1 thông tin nào đó và sau đó gán những gì người dùng nhập vào cho 1 biến. Bạn xem ví dụ sau: CODE Hình1 Bạn lưu nó với tên prompt.htm rồi chạy nó. Bạn sẽ thấy 1 hộp dấu nhắc hiện lên, bạn nhập tên bạn vào đó rồi ấn OK, trang web sẽ ssáp ứng lại với dòng Dear tên_bạn Thank you for coming to My Web |
| |
|
#2
By
SquallLTT
on
13-12-2006, 01:53 PM
|
| Văn bản phía trên hộp nơi mà người dùng sẽ nhập vào tên của họ ("What's your name?") là chuỗi đầu tiên trong hàm prompt; văn bản phía trong hộp ("put your name here") là chuỗi thứ 2. Hai chuỗi này cách nhau bởi dấu phẩy, văn bản mà bạn muốn hiển thị được đặt trong dấu "..." (Bạn haỹ nhớ đièu này, tôi sẽ không nhắc lại lần nữa đâu). Nếu bạn ko muốn bất kỳ chỗ nào trong hộp hãy đặt 2 dấu nhấp kép sát nhau("")ở vị trí thứ 2 Ta dùng document.write() để viết ra những dòng text ra trình duyệt (bạn có thể dùng document.writeln() để viết. Sự khác nhau giữa 2 hàm này là hàm document.writeln() sẽ tự động xuống dòng sau khi viết xong còn document.write() thì không) Bạn chạy thử đoạn mã sau và sẽ thấy sự khác nhau giữa chúng CODE Trở lại hình 1, nếu bạn viết document.write(" the_name") thì nó sẽ hiện ra Dear the_name... Nhưng nếu bạn bỏ 2 dấu "" thì nó sẽ in ra giá trị của biến the_name. Bạn hãy nhớ điều này Đây là 3 hàm cơ bản nhất mà bạn cần biết. 3-Các tham sốCác từ nằm trong dấu ngoặc của các hàm được gọi là tham số. Hàm document.write () đòi hỏi 1 tham sô: một chuỗi cần viết ra trang Web của bạn. Hàm prompt() cần 2 tham số: 1 chuỗi để viết lên phía trên hộp nhập và 1 chuỗi đuwocj viết trong hộp nhập. Các tham số là phần của hàm mà bạn có thể kiểm soát. Ví dụ: với hàm prompt(), bạn ko thể thay đổi màu sắc của hộp, có bao nhiêu nút hay bất kì những gì khác. Tất cả những gì bạn có thể làm là thay đổi tham số của nó. 4-Viết ngày tháng ra trang Web Bây giờ bạn đã biết về biến và hàm, vậy ta trở lại vấn đề chính của phần này: viết ngày tháng ra trang Web của bạn. Để thực hiện điều này trước tiên bạn phải kiểm tra giờ địa phương trên máy tính của người sử dụng: Var now=new Date(); Phần đầu tiên của dòng này, var now=, là 1 dòng quen thuộc, nó thiết lập biến now với 1 giá trị nào đó. Phần thứ hai, new Date (chú ý những chỗ viết hoa, viết thường vì JavaScript phân biệt chữ hoa chữ thường, tôi sẽ ko nhắc lại đâu nhé) là phần mới, nó sẽ tạo ra 1 đối tượng. Nếu bạn hỏi tôi đối tượng là gì thì thật khó để trả lời cho bạn vì tôi cũng như nhiều bạn khác, chỉ học ở nhà, tất cả là theo cách hiểu của mình mà thôi. JavaScript là ngôn ngữ lapạ trình dựa trên đối tượng nhưng nó không phải là ngôn ngữ hướng đối tượng như tôi đã nói ở phần đầu. Các hàm về ngày tháng có sẵn Bây giờ JavaScript đã tạo đối tượng ngày tháng, ta sẽ lấy thông tin ra từ đối tượng này bằng cách dùng các hàm về ngày tháng có sẵn. Để lấy ra năm hiện tại, ta dùng hàm getYear() của đối tượng var now=new Date(); var the_year=now.getYear(); Trong đoạn mã trên, biến now là đối tượng của kiểu Date và hàm getYear() là 1 method của đối tượng kiểu Date. Các method của đối tượng Date trả lại các thông tin ngày tháng từ 1 đối tượng kiểu Date. Để áp dụng method getYear() với ngày tháng lưu trong biến now, bạn vần phải viết: now.getYear() Các method về thời gian và ngày tháng thường dùng: Tên Mô tả getDate() Ngày của tháng dưới dạng số nguyên từ 1-31 getDay() Ngày trong tuần dưới dạng số nguyên với 0 là chủ nhật, 1 là thứ hai... getHours() Giờ trong ngày dứoi dạng số nguyen từ 0-23 getMinutes() Số phút dưới dạng số nguyên từ 0-59 getMonth() Tháng dưới dạnh số nguyên từ 0 (tháng 1) đến 11 (tháng 12) getSeconds() Số giây dưới dạng số nguyên từ 0-59 getTime() Giờ hiện tại tính theo mili giây, trong đó giá trị 0 biểu thị 1970-01-01 0:0:0 getYear() Lấy số năm tuy nhiên định dạng này tùy thuộc vào trình duyệt. Nói tóm lại, tất cả những người xây dựng trình duyệt không tính đến sự kiện năm 2000-y2k (Cái này bây giờ chẳng còn quan trọng với chúng ra nữa rồi. Hihi) Các bạn nên lưu ý 1 điều, trong JavaScript và các ngôn ngữ bậc cao khác, số đếm luôn bắt đầu từ 0 chứ không phải là 1. Bạn hãy nhớ điều đó CODE Bạn save đoạn mã trên với tên thedate.htm và chạy nó. Nếu bạn chạy nó vào ngày 26 tháng 3 thì bạn sẽ nhậ được kết quả là Today's date is: 26/3 Bạn cũng có thể tham khảo đoạn mã sau: CODE CODE Bạn chạy nó và sẽ nhận được kết quả như đoạn mã 1. Tuy nhiên, theo tôi biết thì đoạn mã trên sẽ gây ra lỗi trong trình duyệt Netscape 2 (Cái này thì bây giờ có ai sài nữa đâu mà lo, nhỉ) Ai chà, viết đến đây tôi mới phát hiện ra lỗi của mình: Trong những đoạn mã tôi trình bày, có nơi tôi kết thúc dòng lệnh bằng dấu (  có luc ko. Mặc dù có hay ko có dấu ( khi kết thúc 1 dòng lệnh hay ko ở trong JavaScript là ko quan trọng nhưng theo lời khuyên thì bạn cứ nên có để cho...dễ nhìn. Sorry.Y2k và cách giải quyết nó. Ai chà, có lẽ là tôi đã quá cẩn thận khi đưa vấn đề y2k vào bài viết này nhưng cũng phải nói đến sự kiện này cho những bạn mới học IT (như tôi chẳng hạn) biết. Trước hết bạn cần phải biết Y2K là gì? đó là sự cố máy tính sẽ xảy ra vào năm 2000 đối với một số máy chạy trên hệ điều hành cũ. Y2K không chỉ ảnh hưởng lớn đối với máy tính nối mạng mà còn có thể gây tác hại đối với cả máy tính cá nhân của bạn nữa bởi nó sẽ làm bạn nhầm lẫn không thể phân biệt được năm nào là năm 1900 và năm nào là năm 2000. Nguyên nhân của sự cố Y2K là do vấn đề không thể nhận biết được sự khác biệt giữa các năm 2000 và 1900 bởi vì chúng được lập trình với 2 chữ số cuối cùng nhằm tiết kiệm chi phí khi mà giá cả "chip" còn khá đắt đỏ. Khi những máy này thêm một con số vào sau 99, BIOS sẽ đặt lại số đếm thành 00. Vấn đề này là do máy tính nhận dạng ngày 01/01/00 (ngày 1 tháng 1 năm 2000) như là ngày 1 tháng 1 năm 1900. (echip.com.vn) Cách khắc phục Y2K trong các trình duyệt Web: CODE Hi vọng bạn hiểu được đoạn code trên. Nếu bạn ko hiểu nó thì cũng chẳng sao vì chúng ta sẽ còn xét lại nó trong phần “viết các hàm của riêng bạn” sau này Hết Phần I (Các bạn chú ý, 1 số code tôi dùng word để viết nên có thể ko sử dụng được, tôi sẽ khắc phục điều này ở phần sau. Thứ 2, do ko có thời gian để trang trí nên bài viết ko đẹp mắt lắm, mong các bạn thông cảm) |
| |
|
#3
|
| Vậy làm thế nào mà mình có thể thêm nhiều hiệu ứng trong cùng 1 web và đúng vị trí mình cần ? (ý mình nói là dùng code JavaScripts, vì mình đã từng thử làm theo bài viết và thêm được khoảng 3 hiệu ứng (tức là 3 đoạn mã js) tới đoạn thứ 4 là mất tất cả hiệu ứng luôn, chỉ mình cách thêm thoải mái đi. Anyway, Thanks very much. |
| |
