Đố vui kiến thức web mùa thứ nhất

Để kỷ niệm "hậu" 1000 năm Thăng Long cũng như "tiền" Noel, kèm theo chúc mừng năm mới và 14/02 mình xin "sale off" cho các bạn một cuộc thi để cùng đua tài. Đây là một dạng đố vui kèm theo một số thủ thuật về web bên trong như: HTML, CSS, Javascript, Google... giúp các bạn giải trí nhẹ nhàng nhưng không kém phần trí tuệ

Quy tắc cuộc thi
Cuộc thi gồm 20 câu đố, mỗi câu đố được trình bày trong một trang web với lời gợi ý khác nhau, tuy nhiên, một số câu sẽ không có lời gợi ý, tự các bạn phải sử dụng kiến thức của mình để tìm tòi, suy luận.

Kết quả câu đố này sẽ là đường dẫn đến câu tiếp theo

Do thử hàng nên mình chỉ "úp" 7 câu đầu tiên, bạn nào hoàn tất 7 câu (đến được câu thứ 8) thì xem như đã "phá đảo". Người chiến thắng có thể gửi liên kết đến câu thứ 8 để chứng minh, cũng như có quyền "bóc tem" để ghi dấu ấn (lần này là ngoại lệ được phép bóc tem). Nếu bạn vẫn muốn cho những người chơi khác có dịp trải nghiệm, thì bạn có thể gửi liên kết đến e-mail của mình, mình sẽ đăng tải thông tin người chiến thắng nhưng không kèm liên kết đến bước 8.

Khi có người hoàn tất 7 câu mình sẽ tiếp tục "úp"  7 câu kế tiếp và cuộc chơi cứ tiếp tục như trên cho đến câu thứ 20.

Tổng kết lại mình sẽ nêu tên 3 người chiến thắng mỗi vòng ngay tại bài viết này để các bạn tiện theo dõi.

Hãy chỉ tôi cách "bắt lỗi"

"Bắt lỗi" là gì ?

"Bắt lỗi" nghe nôm na cũng có bà con và họ hàng xa với bắt bẻ, tựu chung lại vẫn là tìm cái sai mà tấn công, mà bắt, mà lụm. Trong lập trình "bắt lỗi" (debug) là một việc rất chi là hình tượng: đi bắt sâu, ứng dụng tốt là ứng dụng có ít lỗi, vì vậy công việc bắt sâu để tránh cho nó làm "rầu nồi canh" là việc tối cần thiết của một lập trình viên.

2 phút liệu có "làm" được CMS không ?

Hì hì, khi đọc tiêu đề gây "sốc" và "ngộ độc" tập thể này, có nhiều bạn sẽ nghĩ mình "siêu phét" hoặc chí ít cũng thuộc loại "phét có bằng cấp". Tất nhiên để tạo 1 CMS ngon lành theo hướng "tự xử" chí ít cũng tốn không ít "xương máu" và thời gian, nhanh thì 2-3 ngày, lâu thì 1 tháng, nếu sử dụng mã nguồn mở thì phải tìm hiểu cấu hình rắc rối, nếu sử dụng software phát sinh mã thì "chắc là có thể".

Quên mất chưa giới thiệu, CMS này là một dạng quản trị và cập nhật thông tin đơn giản, có đầy đủ chức năng Thêm, Xóa, Sửa, Lọc và cuối cùng là nó chạy trên môi trường Windows và sử dụng công nghệ .NET. Đặc biệt CMS này sử dụng LINQ đấy, rất thú vị và tiện phát triển sau này.

Khóa học Javascript - Bài 3: Sử dụng jQuery như thế nào ?

jQuery là một thư viện javascript khá nổi tiếng. Nó nổi tiếng vì sự đơn giản, dễ hiểu, dễ sử dụng. Một "gói mì ăn liền" khá ngon. Tuy nhiên, dù là một dạng "mì ăn liền" nhưng jQuery không hề "đuối", ngược lại nó còn bộc lộ những sức mạnh qua việc thao tác xử lý thẻ, tạo hiệu ứng cho thẻ.

Giới thiệu

Để biết thêm về jQuery ta tham khảo qua 2 website chính thức sau:
http://jquery.com Trang thông tin chi tiết về thư viện jQuery
http://jquery.org Trang thông tin về những sản phẩm do nhóm phát triển jQuery thực hiện.

Thông báo về việc tạm dừng viết bài

Thời gian vừa qua, mình có một số công việc đột xuất nên quỹ thời gian dành cho viết bài không nhiều. Có những bài mình đã soạn sẵn nhưng chưa chỉnh sửa lại để đăng lên do bận quá. Mình cũng gửi lời xin lỗi vì sự trễ hẹn của khóa học Javascript. Lý ra mình đã gửi thông báo này sớm hơn, nhưng do không ước lượng được thời gian và nghĩ rằng sẽ giải quyết công việc cá nhân sớm thôi. Hiện tại mình cố gắng giải quyết công việc cá nhân nhanh nhất và viết bài trở lại vào ngày 28/11.

Cảm ơn các bạn đã quan tâm, động viên và ủng hộ blog LINQ to Javascript trong thời gian qua.

Làm sao để tạo một website đa ngôn ngữ

Website đa ngôn ngữ là gì.
Trong thế giới internet ngày nay, mọi thông tin được truyền tải và diễn đạt dưới nhiều hình thức, trong đó, nội dung văn bản luôn được chú trọng. Yêu cầu truyền đạt thông tin trên diện rộng thì nội dung thông tin phải phù hợp với nhiều thành phần người sử dụng khác nhau, yếu tố ngôn ngữ, thân thiện với người sử dụng luôn được đặt lên hàng đầu. Chúng ta không thể làm cho người sử dụng cảm thấy thoải mái nếu họ không hiểu những gì họ đang làm, họ không biết họ phải làm gì, rào cản ngôn ngữ là một vấn đề nan giải. Vì vậy những website đa ngôn ngữ ra đời nhằm bản địa hóa nội dung, xử lý cho phù hợp với phần lớn người sử dụng ở bất kỳ vùng miền nào trên thế giới. Nói như vậy không có nghĩa là website đa ngôn ngữ phải bao gồm tất cả ngôn ngữ hiện có, mà nó chỉ đảm nhiệm việc bản địa hóa "một số" ngôn ngữ phong tục mà người chủ website hướng đến. Hiểu theo cách đơn giản thì website đa ngôn ngữ là website có thể hiển thị nội dung trên nhiều ngôn ngữ khác nhau (ít nhất là 2). Do nhu cầu phổ cập "Tiếng Việt cho người Anh" hay "đem chuông đi đánh xứ người" nên đa phần những website hiện nay thường có cặp bài trùng Tiếng Việt, Tiếng Anh, nên gọi tắt thì website đa ngôn ngữ là website Anh-Việt cũng không sai.

5 lý do tại sao bạn nên học Javascript

Trước khi trình bày những lý do cốt yếu để có thể "rủ rê" bạn học / nghiên cứu về Javascript, mình xin giới thiệu sơ qua về "lai lịch" của "anh chàng" này. Nguyên tổ tiên của anh ta là ECMAScript được mô tả và phát triển bởi Netscape, lạ chưa, té ra anh ta không có họ chi với Java hay sao ? Không phải anh ta họ Java tên là Script hay sao ? Xin thưa với các bạn rằng, Javascript và Java là một mối quan hệ "phức tạp", đại loại như "cùng cha khác ông nội" vậy, hoặc nói trắng ra là chả có dính chút sơ mướp hay sơ mít gì với nhau cả. Javascript ra đời nhằm mục đích hỗ trợ, trang bị một công cụ xử lý mạnh mẽ cho trang web. Thế không biết Javascript thì có chết không ? Tất nhiên là không, nhưng bạn cũng sẽ "tức mà chết" vì ngay bây giờ không tự trang bị cho mình kiến thức vững vàng về nó.

Những lý do sau cũng sẽ phần nào thuyết phục bạn nên đầu tư thời gian để nghiên cứu Javascript

Khóa học Javascript - Bài 2: Giới thiệu về Prototype

Prototype
Trang chủ http://www.prototypejs.org/

Là một Javascript framework mạnh mẽ, lâu đời. Điểm mạnh của Prototype là tập thư viện hướng đối tượng dùng để xử lý dữ liệu rất phong phú. Đi kèm theo đó có một add-on nổi tiếng là http://script.aculo.us/ trang bị cho Prototype khả năng tạo hiệu ứng phong phú.

Cắt chuỗi theo độ dài chỉ định

Nhiều lúc "cuộc đời ngang trái" ép ta phải cắt một chuỗi theo chiều dài nhất định, không theo cách thông thường là cắt một chuỗi theo nội dung phân cách. Việc cắt chuỗi theo nội dung phân cách trong Javascript thật đơn giản, ta có thể làm như sau

var inputString = "Hôm nay là một ngày đẹp trời, nên lấy Javascript ra ôn, ặc..ặc, thiệt là bó tay";
var parts = inputString.split(","); // cắt chuỗi tại những chỗ xuất hiện dấu phẩy
alert("Số phần đã cắt: " + parts.length);
alert("Phần 1: " + parts[0]);
alert("Phần 2: " + parts[1]);
alert("Phần 3: " + parts[2]);
alert("Phần 4: " + parts[3]);

Dòng 2 thực hiện việc cắt chuỗi, chỉ với hàm split có tham số là nội dung phân cách, ta đã xử đẹp "tứ mã phân thây" chuỗi trên dễ dàng.

Khóa học Javascript - Bài 1: Giới thiệu về những thư viện / framework Javascript

Phần mã của một website luôn gồm 2 phần: thư viện "tự phát" (triển) và thư viện sử dụng / kế thừa lại từ những thư viện có sẵn trên Internet. Dạng thư viện có sẵn này do một số "mạnh thường quân" phát triển nhằm cung cấp cho người sử dụng Javascript sự đơn giản, tiện lợi. Có thể kể đến những thư viện sau:

Thông báo nội dung học của lớp Javascript

Theo thông tấn xã bắp cải đưa tin, vào lúc 0 giờ ngày hôm nay, tổng số lượng người tham gia lớp học là 18 người, trong đó có 17 nam và 1 nghi vấn là nữ. Danh sách đầy đủ xin xem tại đây.

Những nội dung học được quan tâm

1. Ajax (89%)
2. Chưa biết nhiều về những hiệu ứng, trang trí website bằng Javascript (89%)
3. Phát triển những extension, plugin cho những thư viện, framework (89%)
4. Chưa biết cách sử dụng những thư viện, framework Javascript (Jquery, Prototype, Mootool...) (83%)
5. Tự phát triển thư viện riêng cho mình (78%)
6. Tương tác giữa Javascript và các thẻ HTML (61%)
7. Sử dụng biến và hàm (56%)
8. Những cú pháp và cách sử dụng những đối tượng cơ bản (56%)
9. Kiểm tra thông tin form (56%)

Position và Z-Index trong CSS

Trong HTML, mặc định các thẻ được phân tích và hiển thị từ trái qua phải, từ trên xuống dưới. CSS được trang bị những thuộc tính left, top, right, bottom để chỉ định vị trí tương đối của thẻ, nhưng khi ở chế độ mặc định, việc chỉ định left, top, right, bottom không có tác dụng

<div style="background: red; left: 10px; top: 20px; width: 100px; height: 100px;"></div>

Đoạn mã này không dịch chuyển thẻ DIV lại vị trí 10px theo chiều ngang và 20px theo chiều dọc, nguyên do là vì thẻ DIV mặc định có position là static. Position đóng vai trò quan trọng trong việc dàn trang, chỉ định vị trí hiển thị thẻ như mong muốn, thuộc tính position có những loại giá trị sau:

Ứng dụng dò lỗi tập tin MySQL

Những người từng sử dụng MySQL đã quen với việc xuất / nhập (Export / Import) dạng mã SQL để chuyển giao hay xử lý. Tất nhiên việc để nguyên mã SQL được xuất từ một ứng dụng sinh mã SQL thì không có gì để bàn cãi, vì cú pháp của ứng dụng đó sinh ra phải chính xác. Nhưng giả sử chúng ta cần thay thế một đoạn nhỏ nào đó trong mớ SQL này thì sao. Việc thay thế đó đôi khi phát sinh những lỗi cú pháp không mong muốn. Những lỗi này thường là:

• Xóa nhầm phần đóng của chú thích (comment)
• Xóa nhầm dấu kết thúc chuỗi (chuỗi đơn hoặc chuỗi kép)
• Thêm dư hoặc chưa escape ký tự nháy đơn hoặc nháy kép trong nội dung chuỗi
• Escape sai ký tự quy định do thừa dấu \ trong chuỗi (MySQL có những ký tự sau có thể đi kèm với dấu \ là: 0, ', ", \, b, n, r, t, Z, %, _)

JSON, đơn giản là JSON

JSON hay còn gọi là JavaScript Object Notation, là một chuẩn dùng để truyền tải dữ liệu. Vậy hóa ra JSON chả làm được gì rồi, đúng vậy, thực tế thì anh JSON này chả có chút "võ công" gì cả, thế mà "giang hồ" lại đồn đại là anh này "mạnh lắm", làm được "nhiều thứ" lắm thì không chính xác "lắm". JSON là một dạng văn bản thuần, mô tả về một loại thông tin nào đó mà "con người" có thể đọc được(human-readability, còn con khác thì không đọc được nhá).

Danh sách những đồng chí đã đăng ký lớp học Javascript (Cập nhật thường xuyên)

Trước hết mình xin cảm ơn sự quan tâm đến lớp học này của mình, đây cũng là lần đầu tiên mình viết blog và gõ đầu trẻ bất đắc dĩ, nên có thể thiếu sót trong quá trình chuẩn bị cũng như phổ biến thông tin, mong các anh em, bà con, đồng chí "chém" nhẹ tay để mình được nhờ.

Sau đây là danh sách những học sinh bị "lừa"(trúng thầy dỏm) đăng ký, danh sách sẽ được cập nhật từng ngày.
Một số nick có tên không dấu, mình xin phép không biên tập lại, lỡ hiểu nhầm thì nguy.

1. Tuy
2. Nam
3. Do Van Manh
4. Minh Sơn
5. Ý Nhi
6. thinhit
7. tuyencode
8. 7chulinhchi 
9. dungnguyen
10. siêu
11. Ali333
12. htd
13. vienleuy
14. potatokudo
15. Secuirty
16. pbn
17. cuibap
18. pino_o1
19. kbt09
20. Biết Chết Liền
21. gatesun

Nếu bạn nào đã đăng ký mà chưa có tên vui lòng liên hệ linqtojs@gmail.com hoặc góp ý ngay dưới bài viết này

Nếu bạn chưa đăng ký thì vui lòng đăng ký tại http://linq2js.blogspot.com/2010/10/lop-day-javascript-truc-tuyen.html

Tìm trẻ lạc
Hiện tại e-mail của bạn namprojs...... không gửi được, vui lòng phản hồi e-mail của bạn tại linqtojs@gmail.com

Là một web designer tôi cần biết những gì ?

Ngày đó, khi còn đi học ngành CNTT, mình và một số bạn chỉ biết đến 2 chuyên ngành chính là Công nghệ Phầm Mềm và Công nghệ Mạng (chứ không phải Phần Cứng đâu nha). Khi đó những bạn học Phần Mềm do tiếp xúc với nhiều phần mềm (hì hì, tất nhiên rồi), nên có kinh nghiệm hơn bên mạng, khi ra trường đi làm thì sẽ theo những hướng sau: làm lập trình ứng dụng, làm lập trình web (số tiết học hơi bị "thiếu thốn"), làm thiết kế web (có biết chi đâu mà, nhưng cũng làm đại) và đôi khi "lấn sân" sang quản trị mạng ... Thế đó, nhắc lại mới thấy, có những nghề mà ngày đó chúng mình không có những nơi đào tạo, không bài bản, khi đi làm chỉ biết nhắm mắt mà "lụi" thôi. Ngày nay, các cơ sở, các trường chuyên về thiết kế mọc lên khá nhiều, âu cũng là một sự thuận lợi cho các bạn trẻ. Thôi không dông dài nữa, mình đi thẳng vào vấn đề chính đây.

Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 3)

Trở lại nhiệm vụ lần trước, chúng ta đã tìm hiểu qua những khái niệm: gọi liên hoàn / không liên hoàn, cấu hình dành cho plugin... Hôm nay công việc sẽ khó "nhai" hơn, nào bắt đầu thôi.

Giới thiệu những thẻ tương tác dữ liệu
Trước khi bắt tay vào việc "code kiếc" chúng ta cần biết những phần tử (element) nào cần / được kiểm tra. Hiện tại HTML có những phần tử sau chứa giá trị khả dĩ có thể chuyển dữ liệu về máy chủ hoặc có thể tương tác với người sử dụng:

• Hộp nhập (textbox) cấu trúc thẻ <input type="text"/>
• Hộp mật khẩu (password) cấu trúc thẻ <input type="password"/>
• Hộp kiểm nhiều (checkbox) cấu trúc thẻ <input type="checkbox"/>
• Hộp kiểm đơn (radio) cấu trúc thẻ <input type="radio"/>
• Hộp tải tập tin (file) cấu trúc thẻ <input type="file"/>
• Nút nhấn (submit) cấu trúc thẻ <input type="submit"/>
• Hình ảnh (image) cấu trúc thẻ <input type="image"/>
• Hộp ẩn (hidden) cấu trúc thẻ <input type="hidden"/>
• Hộp chọn nhiều (listbox) cấu trúc thẻ <select size="5" multiple="multiple"></select>
• Hộp chọn đơn (dropdown, comboBox) cấu trúc thẻ <select></select>
• Hộp nhập văn bản nhiều (textarea) cấu trúc thẻ <textarea></textarea>

Trong những thẻ trên, thẻ input có thuộc tính value dùng để nhận / gán giá trị, riêng thẻ hình ảnh input type="image" thì sử dụng thuộc tính src.

Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 2)

Ở phần 1, chúng ta đã biết cấu trúc để viết một plugin cho jQuery, phần 2 này mình sẽ trình bày về cách xử lý dựa trên đối tượng jQuery.

Những cách sử dụng liên hoàn và không liên hoàn trong jQuery

Có thể gọi đây là một chuỗi những lệnh gọi phương thức xử lý của jQuery:

jQuery('#myheader').addClass('.hilite');
jQuery('#myheader').text('Hello world !!!');

Ở trên là từng câu lệnh riêng lẽ, ta có thể rút gọn:

jQuery('#myheader').addClass('.hilite').text('Hello world !!!');

2 khai báo trên đều có kết quả như nhau, nhưng lợi điểm thì khác nhau. Khai báo đầu tách riêng từng câu lệnh, điều này khiến cho jQuery phải truy vấn tìm ra tập thẻ thỏa điều kiện 2 lần ứng với mỗi lần gọi. Nhưng ở khai báo sau thì jQuery chỉ cần một lần truy vấn để tìm thẻ và thông tin những thẻ đó được bảo lưu cho những lần gọi tiếp theo sau. Để có thể gọi một chuỗi liên hoàn như khai báo hai, điều cần thiết là ta phải nắm rõ kết quả trả về của một phương thức jQuery, nếu phương thức trả về đối tượng jQuery thì có nghĩa ta có thể gọi liên hoàn, ngược lại thì không:

jQuery('#myheader').attr('href');
jQuery('#myheader').attr('href', 'http://google.com');

Với lệnh dòng 2, phương thức attr với tham số 'href' sẽ trả về giá trị thuộc tính href của thẻ #myheader, như vây ta không thể tiếp tục gọi liên hoàn theo sau câu lệnh này được. Đến dòng 3, phương thức attr có tham số 'href' và 'http://google.com' sẽ thực hiện việc gán giá trị của thuộc tính href của thẻ #myheader, phương thức này trả về đối tượng jQuery, ta có thể gọi liên hoàn. Như bạn thấy đó, cùng một phương thức attr, ở mỗi cách gọi (ngữ cảnh) khác nhau, thì kết quả trả về sẽ khác nhau, chúng ta cần tham khảo tài liệu về jQuery để có thể vận dụng chính xác.

Tạo plugin cho jQuery dùng để kiểm tra sự hợp lệ của form (Phần 1)

Lời mở đầu
jQuery là một thư viện Javascript khá nổi tiếng, thư viện này "bảo kê"  tất cả những thao tác xử lý về thẻ một cách linh hoạt và đơn giản. Ai chưa biết về thư viện này thì mất nửa "cuộc đời", mà biết rồi thì cũng mất thêm nửa "cuộc đời" để tìm hiểu nó, nói cho vui vậy thôi chứ jQuery theo mình là rất tuyệt nhưng không hẳn là "vô đối", ngoài jQuery còn có những "đại gia" như mootool, extJS, prototype... khi có thời gian mình sẽ giới thiệu nhiều hơn về chúng.

Làm sao để viết plugin cho jQuery ?
Viết một "cắm vào" (plugin) cho jQuery khó không ? Theo mình thì đơn giản vô cùng, quan trọng là viết xử lý có phức tạp hay không, chứ viết một cái được gọi là plugin của jQuery thì còn dễ hơn ăn bánh mì.

Tối ưu hóa website (Phần cuối)

Với phần cuối này, mình xin trình bày về cách tối ưu hóa hình ảnh trong website. Hình ảnh là thành phần quan trọng, được sử dụng khá nhiều trong trang, chính vì vậy bạn cần phải cân nhắc khi sử dụng hình ảnh hợp lý. Tối ưu hình ảnh có những công đoạn sau:

Cách sử dụng hình ảnh
Hình ảnh hiển thị thường thông qua 2 cách, sử dụng thẻ img và sử dụng thuộc tính background. Ở đây mình xin khuyến khích các bạn nên sử dụng thuộc tính background khi có thể, vì những lợi điểm sau:

Dễ thay đổi bằng hình ảnh khác khi cần, chỉ cần thay đổi nội dung CSS là có thể chuyển đổi hình ảnh khác, thay vì phải vào mã HTML dò tìm thẻ IMG và thay đổi thuộc tính src

Có thể tạo hiệu ứng thay đổi khi di chuyển mouse vào thẻ, chỉ cần định thêm style dành cho :hover là ta có thể có 2 trang thái hiển thị khác nhau trên cùng một thẻ, điều này muốn thực hiện trên thẻ IMG phải sử dụng Javascript