Hướng dẫn tóm tắt javascript
Kiến thức cơ bản về HTML và CSS có thể giúp bạn tạo được website đơn giản. Nhưng nếu bạn mong muốn 1 website sinh động và phức tạp hơn, bạn cần Javascript. Javascript là ngôn ngữ lập trình đơn giản, nhưng cực kì mạnh mẽ và phổ biến cho lập trình web. Các ứng dụng thường thấy ở Javascript có thể kể đến như: Show
Có nhiều phương pháp để học Javascript, và tốt nhất là để người học được tự tay mày mò trong suốt quá trình tìm hiểu. Bài viết hôm nay sẽ áp dụng phương pháp đó, và tiếp cận nó theo một cách mới để mong bạn đọc dễ làm quen và hình dung hơn: gamification – trò chơi hóa nội dung bài học. Hãy tưởng tượng bạn là nhân vật chính trong một game nhập vai, khởi đầu từ con số 0 tròn trĩnh để đấu tranh trở thành Anh Hùng trong cõi Javascript. Không gì hứa hẹn một hành trình bằng phẳng cả, nhưng đừng ngại ngần khi định mệnh đã gọi tên! INTRO CHAPTER! Javascript có thể được sử dụng dễ dàng với thẻ HTML [html] [/html] [html] [/html] Tuy nhiên, trong hành trình Javascript cơ bản này, bạn không cần phải chèn code hay file Javascript vào 1 file html và chạy file này. Bạn sẽ gõ code trực tiếp trên trình duyệt bằng công cụ Console. Để mở Console, hãy bấm F12 và chọn tab Console ở khung công cụ lập trình được hiển thị, hoặc sử dụng phím tắt nhanh Ctrl+Shift+J (Chrome/Firefox). Trường hợp nếu bạn không muốn sử dụng Console để thực hành mà muốn viết lên web thì hãy sử dụng các phương thức xuất dữ liệu ra trang tên là document.write(). Ví dụ:
Xong chưa nào? Hãy sẵn sàng chinh phục những thử thách để viết nên câu chuyện về Anh Hùng Javascript của riêng bạn! WELCOME TO CHAPTER 1! Quest 1: Kiến tạo Anh Hùng – Biến và kiểu dữ liệu
Mỗi Anh Hùng đều cần có 1 tên gọi để lưu danh sử sách, và tiện khoe với các em gái xinh đẹp trong quán rượu :”>. Hãy gõ lại đoạn code bên dưới vào Console và nhập tên vào hộp thoại được xổ ra. NEW SKILL!
Hàm Demo: http://jsfiddle.net/6QhmR/1/ BiếnĐoạn code trên là 1 ví dụ khi sử dụng biến. Hãy nghĩ 1 biến như 1 ngăn tủ được đặt tên, và tên biến là tên ngăn tủ, giá trị của biến là vật dụng trong ngăn tủ. Bạn có thể chứa bất kì thứ gì bạn muốn trong ngăn tủ đó, và khi cần tìm lại, bạn chỉ cần tra đúng tên ngăn tủ mà bạn cần. Biến có 2 phần, là tên biến và giá trị của biến. Tên biến rất đơn giản, khi bạn có thể đặt tên biến tùy ý với các
chữ cái hoa hay thường, các con số và dấu gạch chân (_). Còn với giá trị của biến thì chúng ta cần để ý thêm về kiểu dữ liệu. Ở ví dụ trên, ta đã dùng biến
Thao tác với biếnĐể chứa đồ trong tủ, bạn cần phải tìm 1 ngăn tủ rỗng, dán tên cho ngăn tủ đó (khai báo biến) và đặt 1 vật gì đó vào bên trong (gán giá trị cho biến).
Sau khi đặt xong biến, bạn có thể thử in ra bằng cách sử dụng hàm alert() để xem giá trị. Ví dụ:
LEVEL UP! Chúc mừng bạn lên cấp 2! XP +150 Quest 2: Sức mạnh tính toán – Các toán tử cơ bảnJavascript hỗ trợ đầy đủ các toán tử cơ bản cộng trừ nhân chia. Ngoài ra, bạn sẽ làm quen với 2 toán tử mới là ++ (tăng giá trị của biến kiểu Number lên 1.0 đơn vị) và — (giảm giá trị của biến kiểu Number xuống 1.0 đơn vị). Thứ tự tính toán (trong trường hợp không sử dụng dấu ngoặc tròn để gom nhóm ưu tiên) là nhân chia trước, cộng trừ sau và từ trái sang phải.
Ngoài ra, Javascript sử dụng toán tử + để nối các chuỗi kí tự.
LEVEL UP! Chúc mừng bạn lên cấp 3! XP +200 Quest 3: Sức mạnh logic – Các toán tử so sánhTrên con đường hành hiệp, Anh Hùng sẽ gặp rất nhiều cám dỗ và lựa lọc. Chính vì thế, Anh Hùng cần phải so sánh chính xác và sử dụng sức mạnh logic để nhận ra chân tướng đúng/sai của mọi sự vật, sự việc. Trong Javascript, kết quả của mọi so sánh đều là 1 biến kiểu boolean: hoặc là true, hoặc là false. Để so sánh giữa các biến hay các biểu thức, bạn có thể sử dụng NEW SKILL!
LEVEL UP! Chúc mừng bạn lên cấp 4! XP +300 Quest 4: Lựa chọn định mệnh – Điều kiện và rẽ nhánhChúc mừng bạn đã nắm vững các kĩ năng cơ bản, và đã đến lúc để lựa chọn phân cấp Anh Hùng. Bạn sẽ được lựa chọn giữa 3 phân cấp với 3 đặc điểm về chỉ số khác nhau. Các lựa chọn trong Javascript sẽ dẫn đến các điều kiện
rẽ nhánh khác nhau. Để tạo ra các lựa chọn trong Javascript, bạn sẽ sử dụng từ khóa
LEVEL UP! Chúc mừng bạn lên cấp 5! XP +400 Quest 5: Đấu trường Sinh Tử – Vòng lặpAnh Hùng nào cũng phải trải qua quá trình tập luyện và đấu tranh gian khổ để đạt đến vinh quang. Quá trình đó đòi hỏi những nỗ lực lặp đi lặp lại đến khi đạt được một ý đồ, một mục đích nào đó. Việc lặp các thao tác trong lập trình được gọi là vòng lặp, và là một trong những thành phần quan trọng nhất của lập trình. Vòng lặp sẽ có 1 điều kiện để duy trì và khi điều kiện đó không được đảm bảo thì vòng lặp sẽ kết thúc. Đối với Javascript cơ bản, có 2 cách để tạo vòng lặp: vòng lặp
BATTLE! Bạn chạm trán 1 con rồng già, và buộc phải giết nó để vượt qua NEW SKILL! NEW SKILL!
BATTLE WON! Chúc mừng bạn đã đạt danh hiệu “Dũng sĩ diệt Rồng”! LEVEL UP! Chúc mừng bạn lên cấp 6! XP +600 Quest 6: Tạo và gọi HàmHàm là 1 đoạn code riêng biệt có thể sử dụng nhiều lần. Hàm có thể nhận tham số từ biến và trả kết quả về để gán cho biến. Trước khi sử dụng, hàm cần được khởi tạo với từ khóa Một lưu ý khi sử dụng hàm là đừng ôm đồm quá nhiều xử lý trong một hàm. 1 hàm xử lý chuỗi không cần phải biết đầy đủ cắt chuỗi, đảo chuỗi, nhân đôi chuỗi.., mà chỉ cần thực hiện tốt 1 chức năng thôi. Đây là một thói quen lập trình tốt, sẽ giúp code đơn giản, dễ hiểu và dễ bảo trì qua thời gian.
LEVEL UP! Chúc mừng bạn lên cấp 7! XP +700 Quest 7: Đối tượngĐối tượng Javascript cũng giống như một vật thể thực ngoài đời: có các tính chất (thuộc tính) và khả năng (phương thức/hàm). Hiểu một cách khác, đối tượng trong Javascript là tập hợp của các thuộc tính và các phương thức (về bản chất cũng là hàm) bên trong. Có thể xem đối tượng như 1 biến đặc biệt trong Javascript, được khai báo trong cặp ngoặc nhọn
LEVEL UP! Chúc mừng bạn lên cấp 8! XP +800 Quest 8: MảngMảng là tập hợp nhiều phần tử, với mỗi phần từ là 1 biến được sắp xếp theo thứ tự và có đánh số chỉ mục (đánh số từ 0) cho từng biến để tiện truy xuất. Mỗi biến trong mảng có thể mang bất kì kiểu dữ liệu nào: từ Number, String đến cả đối tượng và mảng khác. Các biến trong mảng được đánh số tuần tự tăng dần từ 0, nên biến cuối cùng trong mảng sẽ có số chỉ mục bằng tổng số lượng biến trừ đi 1. Mảng được khai báo bên trong cặp ngoặc vuông
CHAPTER 1 COMPLETE! Chúc mừng bạn đã trở thành Tân Anh Hùng Javascript! Lời KếtCon đường cách mạng, còn lắm gian truân! Vì thế, Javascript dù rất đơn giản để học, nhưng để sử dụng thành thục phải trải qua thử nghiệm và thực hành nhiều. Với kiến thức cơ bản mà bài viết này cung cấp, mình mong rằng bạn sẽ có nền tảng tốt để học nhanh và phát triển nhanh kĩ năng Javascript của bản thân. Nếu có thắc mắc, ý kiến hay cần trợ giúp gì, hãy cùng thảo luận ở phần bình luận bên dưới nhé. Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng. |