Đỉnh NGUYỄN

life's a journey not a destination


Leave a comment

Visual Studio 2010 Update for HTML 5 and CSS3


Microsoft vừa phát hành bản cập nhật Web Standards Update đầu tiên cho Visual Studio 2010 SP1 và Visual Web Developer Express 2010 SP1. Bản phát hành này cập nhật hỗ trợ HTML 5 và CSS 3 cũng như W3C specifications mới nhất. Đồng thời cũng hỗ trợ các API cho JavaScript Intellisense.

Download Web Standards Update for Visual Studio SP1

Để tìm hiểu nhiều hơn bản cập nhật này, xem các links sau:

Advertisements


Leave a comment

Lấy giá trị được chọn của nút Radio dùng jQuery


Cách lấy giá trị được chọn của nút Radio dùng jQuery chỉ với 1 dòng mã

var checkedradio = $('[name="gr"]:radio:checked').val();

Đầu tiên là xác định tất cả các thành phần có thuộc tính name là “gr”, sau đó chỉ rõ loại thành phần cần lấy là radio, tiếp đến dựa vào trạng thái của thành phần (checked). Dùng val() để thuộc tính value của thành phần được chọn.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Lấy giá trị được chọn của nút Radio dùng jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnRadio').click(function () {
                var checkedradio = $('[name="gr"]:radio:checked').val();
                $('#sel').html('Selected value: ' + checkedradio);
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="radio" name="gr" value="Milk" />Milk<br />
        <input type="radio" name="gr" value="Butter" checked="checked" />Butter<br />
        <input type="radio" name="gr" value="Cheese" />Cheese<br />
        <hr />
        <p id="sel"></p>
        <input id="btnRadio" type="button" value="Get Selected Value" />
    </div>
</body>
</html>

image


Leave a comment

Hiển thị ngày theo định dạng dd/MM/yyyy dùng JavaScript


Để hiện thị ngày theo định dạng dd/MM/yyyy, viết script như sau:

<script type="text/javascript">
        var curDt = new Date();
        var MM = curDt.getMonth() + 1;
        var dd = curDt.getDate();
        var yyyy = curDt.getFullYear();
        var date = dd + '/' + MM + '/' + yyyy;
        alert(date);
    </script>

Kết quả

SNAGHTML1fdc1c

Nếu bạn muốn tháng và ngày gồm 2 ký số, chỉ việc cộng thêm 0 như sau:

<script type="text/javascript">
        var curDt = new Date();
        var MM = curDt.getMonth() + 1;
        MM = (MM < 10) ? '0' + MM : MM;
        var dd = curDt.getDate();
        dd = (dd < 10) ? '0' + dd : dd;
        var yyyy = curDt.getFullYear();
        var date = dd + '/' + MM + '/' + yyyy;
        alert(date);
    </script>

Kết quả

SNAGHTML229434

Nếu bạn có cách nào tốt hơn mà không dùng JavaScript frameworks. Vui lòng chia sẽ với tôi và mọi người (thông qua comment).


Leave a comment

Cách vô hiệu hóa (disable) JavaScript trên trình duyệt IE6 hoặc thấp hơn


Người phát triển web thường phải xách định loại trình duyệt và phiên bản để chạy các đoạn JavaScript thích hợp. Nếu dùng không bất kỳ framework JavaScript nào, thì có cách nào để chỉ chạy đoạn JavaScript trên trình duyệt IE6 hoặc cao hơn?

Chỉ cần thêm đoạn mã giữa cặp thẻ head như sau:

<head>
<title>Execute script only if > IE 6</title>
<!--
[if gte IE 7]>
<script type="text/javascript">
    alert("You are running Internet Explorer 7 or greater");
</script>
<![endif]-->
</head>

Đây là lời khuyên từ Microsoft nhằm xác định loại trình duyệt và phiên bản


Leave a comment

5 cách điều hướng (navigate) URL với JavaScript


1. Điều hướng đăng nhập

<script type="text/javascript">
    window.location.href = 'login.aspx?backurl=' + window.location.href;
</script>

2. Quay lại trang vừa xem

<script type="text/javascript">
    alert('back');
    window.history.back(-1);
</script>

3. Điều hướng trực tiếp

<script type="text/javascript">
    window.navigate('top.aspx');
</script>

4. Cách khác

<script type="text/javascript">
    self.location = 'top.aspx';
</script>

5. Hoặc cách khác

<script type="text/javascript">
    alert('Access Violation');
    top.location = 'error.aspx';
</script>


Leave a comment

jQuery 1.4 Alpha 2 được phát hành


image jQuery 1.4 Alpha 2 vừa được phát hành. Mã phát hành lần này là bản stable release và được test trên nhiều trình duyệt. Phát hành lần này được. Nhóm phát triển jQuery sẽ không đưa thêm đặc tính mới vào phiên bản lần này, nhưng các đặc tính sẽ được kiểm duyệt và tối ưu cho việc phát hành final sắp tới

Regular: http://code.jquery.com/jquery-1.4a2.js 

Minified: http://code.jquery.com/jquery-1.4a2.min.js

Nhóm phát triễn jQuery rất cần bạn phát triển và kiểm tra. Nếu phát hiện bất kỳ lỗi hay phiền toái nào liên quan, vui lòng ghi nhận và phản hồi

jQuery 1.4 final dự kiến phát hành vào 14/01/2010


Leave a comment

Teach Yourself JavaScript


Introduction

JavaScript là ngôn ngữ kịch bản dựa trên đối tượng, gọn nhẹ, chạy phía trình duyệt. Cung cấp tính tương tác cho trang web, kiểm tra sự hợp lệ dữ liệu ngay từ phía trình duyệt, và nhiều thứ khác.

Writing JavaScript

Mã JavaScript được nhúng vào tài liệu HTML. Đặt JavaScript bất kỳ nơi đâu trong file HTML, nhớ phải đặt giữa thẻ khai báo <script>. Một số thông số chính của thẻ <script> là:

<script type=”text/javascript” language=”javascript”>
<!--
Mã JavaScript đặt ở đây.
-->
</script>

Ngoài ra mã javascript còn có thể đặt hoặc gọi từ bất kỳ đối tượng nào trong tài liệu HTML

<input type=”submit” onclick=”javascript:alert(‘button is clicked.’);” />

Nếu muốn định nghĩa hàm (function), nên định nghĩa trong phần HEAD của tài liệu HTML. Bởi vì head là phần đầu tiên được load lên khi tài liệu HTML được truy xuất. Và như vậy chắc chắn hàm JavaScript đã sẵn sàng để dùng.

Một ví dụ cụ thể

<HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    <!-- hide JavaScript from older browsers
      function bar() {
        document.write("Hi there.")
      }
    // end hiding from older browsers -->
  </SCRIPT>
  </HEAD>

  <BODY>
    HTML document goes here...
  </BODY>
  </HTML>
Lưu ý: javascript, html không phân biệt chữa hoa, chữ thường

Và đây là phần gọi hàm:

<input type="button" text=”button” onClick="foo()">

Nếu bạn không hiểu sự kiện onClick là gì, đừng lo. Chúng ta sẽ từ từ tìm hiểu sau.

 <input type="text" value="compute_value()">

Trong trường hợp này giá trị hàm trả về sẽ là dòng chữ xuất hiện trên button.


Leave a comment

8 đoạn javascript hay dùng trên web


JavaScript và các framework của nó ngày càng phát triển, nhất là sau khi Ajax ra đời. Dưới đây là 8 đoạn JavaScript đơn được dùng phổ biến trên  web.

1. Ngăn không cho nhấn phải chuột (chỉ tương thích IE)

<script language="javascript" type="text/javascript">
    <!–
        function click() {
            if (event.button == 2) {
                alert(‘DO NOT STEAL!’);
            }
        }
        document.onmousedown = click
    //–>
</script>

2. Hiện cửa sổ dạng Popup (cửa sổ nổi lên)

<script language="javascript" type="text/javascript">
    <!–
        window.open(‘
http://dinhnguyenngoc.spaces.live.com/’);
    //–>
</script>

3. Hiện cửa sổ Popunder (cửa sổ chìm xuống)

<script language="javascript" type="text/javascript">
    <!–
        if (navigator.appName.indexOf("JavaScript") == -1) {
            var myWin = open(”, ‘winin’, ‘toolbar=0,menubar=0, scrollbars=1,status=0,resizable=1,width=80,height=430’);
            myWin.blur();
            myWin.location = ‘
http://dinhnguyenngoc.spaces.live.com/’;
        }
    //–>
</script>

4. Bookmark (Add Favorite) tự động (chỉ IE)

<a href="javascript:window.external.AddFavorite(‘http://dinhnguyenngoc.spaces.live.com/’, ‘Nguyen Ngoc\’s Blog’);">Bookmark Nguyen Ngoc’s Blog!</a>

5. Hiện hộp thoại in trang web

<a href="javascript:window.print()">Print This Page</a>

6. DropdownList

<script language="javascript" type="text/javascript">
    <!–
        function jumpBox(list) { location.href = list.options[list.selectedIndex].value }
    //–>
</script>

<form>
    <select>
        <option selected="selected">———————–</option>
        <option value="firstpage.html">One</option>
        <option value="secondpage.html">Two</option>
    </select>
    <input type="button" value="Go" onclick="jumpBox(this.form.elements[0])" />
</form>

7. Hiệu ứng rollover

<script language="JavaScript">
    <!–
        MouseOver("firstimage.gif", "secondimage.gif", "width=100 height=30 border=0 alt=”Click Here”", "yourpage.html");
    // –>
</script>

8. Goback, Forward, Reload

<a href="javascript:history.back(1)">Go Back</a> Forward: <a href="javascript:history.forward(1)">
        Go Forward</a> Refresh: <a href="javascript:location.reload(1)">Refresh</a>

(Mong được góp ý và cập nhật).