JavaScript Tutorials: 01/17/10

Sunday, January 17, 2010

when this javascript function is called?

Hello everyone,

I am using SharePoint Server 2007 Enterprise with Windows Server 2008 Enterprise. I am developing using VSTS 2008 + C# + .Net 3.5 + ASP.Net. I am learning the following code dealing with javascript, my confusion is for $(function(){...} part of code, when it will be called and what is its function? I did not see any code invokes this function.

<!doctype html>
<html lang="en">
<head>
  <title>Test</title>
  <link type="text/css" href="tabcontrol/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="tabcontrol/jquery-1.3.2.js"></script>
  <script type="text/javascript">
      $(function() {
          $("#tabs").tabs();
      });
  </script>
</head>
<body>

<div class="demo">

<div id="tabs">
  <ul>
      <li><a href="#tabs-1">tab1</a></li>
      <li><a href="#tabs-2">tab2</a></li>
  </ul>
  <div id="tabs-1">
      <p>tab1 info</p>
  </div>
  <div id="tabs-2">
      <p>tab2 info</p>
  </div>
</div>

</div>

</body>
</html>

thanks in advance, George

Please Post Comment your answers

How can I programmatically inspect an ActiveXObject at runtime, using Javascript?

I am looking to create a Javascript library for ActiveX objects, enabling chainability.

Answers

Only objects that implement IDispatchEx can be inspected at runtime. MSDN specifically lists the differences between IDispatch and IDispatchEx:

IDispatchEx was developed to provide all the services of IDispatch as well as some extensions that are appropriate for more dynamic late-bound languages such as scripting languages. The additional features of IDispatchEx beyond those provided by IDispatch are:

Add new members to an object ("expando").

Delete members of an object.

Case-sensitive dispatch operations.

Search for member with implicit name.

Enumerate DISPIDs of an object.

Map from DISPID to element name.

Obtain properties of object members.

Method invocation with this pointer.

Allow browsers that support the concept of name spaces to obtain the name space parent of an object.

I've made bold the relevant issue.

As Eric points out in the comments, you can use enumerate the members of the objects using foreach (or for...in perhaps?), but I'm not sure, from the question, what you specifically want to do.

Since not all ActiveX controls will implement IDispatchEx (or may not implement all methods of IDispatchEx properly or completely), are there specific controls you're looking to play with?

More details will lead to better answers.

parse a character out of a string in javascript

if i have a number of string like this

var info = "Information4Table"
var next = "Joe5Table"
var four = "ERweer11Table"
var nice = "ertertertn14Table"

and i want to parse out the number between the first word and the string "Table". So for the first item, i want to get "4" and in the last i would want to get "14". what would be the best way to do this javascript / jquery

Answers

1. You can use a regular expression to get the number from the string:

var n = /\d+/.exec(info)[0];

2. Another option would be to use regular expressions to take numbers out of the string:

var my_str="ERweer11Table";
var my_pattern=/\d+/g;
document.write(my_pattern.match(patt1));

This would output "11"

3. You can use a regular expression for just this sort of thing, especially handy/performant if the pattern doesn't change:

var regex = new RegExp(/[0-9]+/);   // or \d+ will also capture all digits
var matches = +regex.exec(yourStringHere);
var value = matches ? matches[0] : "";

Keep around the regex object and you can use it for all your processing needs. The matches variable will contain null if there's no number in the string, or an array with the matches if there was one or more. The value will have your number in it. The leading '+' operator ensures it's a number type instead of a string type.

HTML CSS JS navigation list issue

I am working on a small application below where there is a collection of list items all list items should be within the box no matter how many they are like they can be on the second column. Also I want to keep a limit on the number of list items that can be displayed like not more then say 10 so the moment there are 10 items the 10th item should be omitted and "View All" should be displayed. so once user clicks on View All he can be directed to the second page and all items can be displayed.

below is my code.

Thanks

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#container {

border: 1px dotted #D7D7D7;
padding: 0px 5px 5px 8px;
height: 250px;
width: 250px;


}


#heading {

}
ul {
display: inline;
}
ul li{
display: block;
}

</style>
</head>
<div id="container">
<div id="heading">Style </div>
<ul>
   <li> >>1 </li>
   <li> >>2 </li>
   <li> >>3 </li>
   <li> >>4 </li>
   <li> >>5 </li>
   <li> >>6 </li>

</ul>



</div>
<body>
</body>
</html>

Answers

Hey Josh,

If you're looking to limit the amount of items displayed you can do this with a fixed width on your list items and overflow hidden to clip additional items from being displayed.

<style>
ul {
     height: 20px;
     overflow: hidden;
     width: 180px;
   }

li {
     display: block;
     float: left;
     height: 20px;
     width: 20px;
   }

ul.unlimited {
    height: auto;
}

#view_all {
    display: none;
}
</style>

No for displaying the view all link. I would advise generating that on the server side. However if you don't have control over that, you can do this with javascript for example you could make a simple jquery script:

<script>
       $(document).ready(function() {
         if ($("#container ul li").length > 9) {
           $("#view_all").show().click(function() {
             $("#container ul").addClass("unlimited");
             return false;
           });
         }
       });
</script>

Here I'm assuming you have an anchor embedded in your html with an id of "view_all". You can see what we're doing here. The CSS hides the view all link by default and uses a fixed width and height on the list. If there are more than 10 items they won't be visible as the default styling only permits 9 to be shown. However, the jquery script will tell the web browser to make the view all link visible. Then we assign a click event handler on that link. This applies a class to the list which removes the fixed height allowing all of the list items to be displayed.

You can handle this in a variety of different ways but this is one simple solution. Also note that you would want to add an id or class to the unsorted list so you could be a bit more explicit in your CSS/JS code.

What property is alert showing me?

When I am writing Javascript, I use window.alert() to debug. Usually I pass variables to alert and it pops up with a string containing that variables value. However, if I pass alert an object, it tells me the type of the object. For example:

var form = document.getElementById("my_form");
alert(form); // returns [object HTMLFormElement]

That bit, the part that says [object blah blah]. What property is that? I have recently started making my own objects to encapsulate useful parts of the site I am working on... but when I pass my own objects to alert it gives me the generic message [object Object], which is not very helpful if I have made a bunch of different kinds of object. I would prefer, for instance, my object to return to me something more along the lines of [object My_Object].

Is there a property I can set in function My_Object() that will tell alert what I want it to tell me?

Thanks!

Create hidden cmd javascript

I'm looking for a way to run a cmd command without showing the cmd window to the user.

I'm using something like:


   function reboot()  {
         var ws = new ActiveXObject("WScript.Shell");
         ws.Exec("shutdown.exe -r -t 120");

   }

But it still shows the window, is there anyway not to show it?

Thanks

How do I break this script

(function () {
    var h = {
        userName: "4-12\u4e2a\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        userNameMin: "\u4e0d\u80fd\u5c0f\u4e8e4\u4e2a\u5b57",
        userNameMax: "\u4e0d\u80fd\u8d85\u8fc712\u4e2a\u5b57",
        userNameExist: "\u8be5\u7528\u6237\u540d\u5df2\u88ab\u6ce8\u518c\u4e86\uff0c\u8bf7\u6362\u6362",
        userNameInvalid: "\u53ea\u652f\u6301\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        userNameStartInvalid: "\u7528\u6237\u540d\u4e0d\u80fd\u4ee5\u4e0b\u5212\u7ebf\u5f00\u5934",
        nickName: "6\u4f4d\u4ee5\u5185\u4e2d\u6587\u621612\u4f4d\u4ee5\u5185\u82f1\u6587\u5b57\u7b26",
        nickNameMin: "\u4e0d\u80fd\u5c0f\u4e8e1\u4e2a\u5b57",
        nickNameMax: "\u4e0d\u80fd\u8d85\u8fc76\u4e2a\u6c49\u5b57\u621612\u4e2a\u82f1\u6587\u5b57\u7b26",
        nickNameExist: "\u8be5\u540d\u5b57\u5df2\u88ab\u5360\u7528\uff0c\u8bf7\u6362\u6362",
        nickNameInvalid: "\u53ea\u652f\u6301\u4e2d\u6587\u3001\u5b57\u6bcd\u6216\u6570\u5b57\uff0c\u4e0d\u652f\u6301\u7a7a\u683c\u548c\u7279\u6b8a\u7b26\u53f7",
        nickNameError: "\u540d\u5b57\u4e2d\u542b\u6709\u8fdd\u7981\u8bcd\uff0c\u8bf7\u4fee\u6539\uff0c\u671b\u8c05\u89e3",
        password: "6-16\u4f4d\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        passwordMin: "\u4e0d\u80fd\u5c0f\u4e8e6\u4e2a\u5b57\u7b26",
        passwordMax: "\u4e0d\u80fd\u8d85\u8fc716\u4e2a\u5b57\u7b26",
        passwordInvalid: "\u53ea\u652f\u6301\u82f1\u6587\u5b57\u6bcd\u3001\u6570\u5b57\u548c\u4e0b\u5212\u7ebf",
        password1: "\u8bf7\u518d\u786e\u8ba4\u4e00\u6b21\u4f60\u8f93\u5165\u7684\u5bc6\u7801",
        password1Invalid: "\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4",
        email: "\u8bf7\u8f93\u5165\u4f60\u5e38\u7528\u7684Email",
        emailExist: "\u8be5Email\u5df2\u88ab\u6ce8\u518c",
        emailInvalid: "Email\u683c\u5f0f\u4e0d\u6b63\u786e",
        sex: "\u8bf7\u9009\u62e9\u4f60\u7684\u6027\u522b",
        validateCode: "\u8bf7\u8f93\u5165\u56fe\u50cf\u4e2d\u7684\u6587\u5b57",
        validateCodeInvalid: "\u9a8c\u8bc1\u7801\u9519\u8bef",
        loading: '<img align="absmiddle" alt="" src="http://images.digu.com/web_res_v1/images/ico_loading16.gif" /> \u6b63\u5728\u68c0\u67e5\u552f\u4e00\u6027',
        checkCode: '<img align="absmiddle" alt="" src="http://images.digu.com/web_res_v1/images/ico_loading16.gif" /> \u6b63\u5728\u68c0\u67e5\u9a8c\u8bc1\u7801',
        ok: '<img align="absmiddle" alt="ok" src="http://images.digu.com/web_res_v1/images/ico_valid.gif" />',
        required: "\u5fc5\u586b"
    },
        a = 4,
        j = 12,
        e = 1,
        k = 12,
        r = 6,
        x = 16,
        l = "/jump?aid=reg_validate",
        d = true,
        o = true,
        B = true;
    var p = $("#userName"),
        D = $("#nickName"),
        c = $("#password"),
        s = $("#password1"),
        z = $("#email"),
        q = $('input[name="sex"]'),
        i = $("#validateCode"),
        b = {};
    b[p.attr("id")] = u(p),
    b[D.attr("id")] = u(D),
    b[c.attr("id")] = u(c),
    b[s.attr("id")] = u(s),
    b[z.attr("id")] = u(z),
    b[q.attr("name")] = u(q),
    b[i.attr("id")] = u(i);

    function t(E) {
        var G = A(E.val()),
            F = b[E.attr("id")];
        if (G.length < a) {
            F.showErr(h.userNameMin)
        } else {
            if (G.length > j) {
                F.showErr(h.userNameMax)
            } else {
                if (!/^([a-z]|[A-Z]|[0-9])[0-9a-zA-Z_]+$/.test(G)) {
                    F.showErr(h.userNameStartInvalid)
                } else {
                    if (!g(G)) {
                        F.showErr(h.userNameInvalid)
                    } else {
                        if (w(G)) {
                            F.showErr(h.userNameExist)
                        } else {
                            F.showTips(h.loading);
                            $.getJSON(l, {
                                tag: "userName",
                                userName: G
                            },


                            function (H) {
                                if (H.result == "successName") {
                                    F.showOk(h.ok);
                                    d = true
                                } else {
                                    if (H.result == "existName") {
                                        F.showErr(h.userNameExist);
                                        d = false
                                    }
                                }
                            })
                        }
                    }
                }
            }
        }
    }
    function w(F) {
        var E = /^(1[3|5|8][0-9]{9})$/;
        return E.test(F)
    }
    function v(E) {
        var G = A(E.val()),
            F = b[E.attr("id")];
        if (!n(G)) {
            F.showErr(h.nickNameInvalid)
        } else {
            if (C(G) < e) {
                F.showErr(h.nickNameMin)
            } else {
                if (C(G) > k) {
                    F.showErr(h.nickNameMax)
                } else {
                    F.showTips(h.loading);
                    $.getJSON(l, {
                        tag: "nickName",
                        nickName: G
                    },


                    function (H) {
                        if (H.result == "successNickName") {
                            F.showOk(h.ok);
                            o = true
                        } else {
                            if (H.result == "repeatNickName") {
                                F.showErr(h.nickNameExist);
                                o = false
                            } else {
                                if (H.result == "errorNickName") {
                                    F.showErr(h.nickNameError);
                                    o = false
                                }
                            }
                        }
                    })
                }
            }
        }
    }
    function u(F) {
        var E = F.parents("tr").find(".tips-box");
        return {
            showTips: function (G) {
                F.addClass("reg-ipt-focus");
                E.removeClass("tips-box-err").removeClass("tips-box-ok").html(G).show()
            },
            showErr: function (G) {
                F.addClass("reg-ipt-focus");
                E.addClass("tips-box-err").removeClass("tips-box-ok").html(G).show()
            },
            showOk: function (G) {
                F.addClass("reg-ipt-focus");
                E.addClass("tips-box-ok").removeClass("tips-box-err").html(G).show()
            },
            hide: function () {
                F.removeClass("reg-ipt-focus");
                E.hide()
            }
        }
    }
    function g(F) {
        var E = new RegExp("^[A-Za-z0-9_]+$");
        return F.match(E)
    }
    function n(F) {
        var E = /^([0-9a-zA-Z\u4E00-\u9FA5])+$/;
        return E.test(F)
    }
    function C(H) {
        var G = 0;
        var F = /([\u4E00-\u9FA5])/;
        for (var E = 0; E < H.length; E++) {
            if (F.test(H.charAt(E))) {
                G += 2
            } else {
                G++
            }
        }
        return G
    }
    function y(E) {
        return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(E)
    }
    function m(E) {
        return E.replace(/(^\s*)/g, "")
    }
    function f(E) {
        return E.replace(/(\s*$)/g, "")
    }
    function A(E) {
        return f(m(E))
    }
    $("#regForm").submit(function () {
        var E = true;
        if (p.val() == "") {
            b[p.attr("id")].showErr(h.required);
            E = false
        }
        if (D.val() == "") {
            b[D.attr("id")].showErr(h.required);
            E = false
        }
        if (c.val() == "") {
            b[c.attr("id")].showErr(h.required);
            E = false
        }
        if (s.val() == "") {
            b[s.attr("id")].showErr(h.required);
            E = false
        }
        if (c.val().toLowerCase() != s.val().toLowerCase()) {
            b[s.attr("id")].showErr(h.password1Invalid);
            E = false
        }
        if (z.val() == "") {
            b[z.attr("id")].showErr(h.required);
            E = false
        }
        if (i.val() == "") {
            b[i.attr("id")].showErr(h.required);
            E = false
        }
        if (q.filter(":checked").length == 0) {
            b[q.attr("name")].showErr(h.required);
            E = false
        }
        return E
    });
    $(".reg-ipt").focus(function () {
        b[this.id].showTips(h[this.id])
    }).blur(function () {
        if ($(this).val() == "") {
            b[this.id].hide()
        }
    });
    p.blur(function () {
        if ($(this).val() != "") {
            t($(this))
        }
    }).keyup(function () {
        $("#userDomain").text($(this).val())
    });
    D.blur(function () {
        if ($(this).val() != "") {
            v($(this))
        }
    });
    c.keyup(function () {
        if (c.val() != "") {
            $("#confirmPwd").show()
        } else {
            $("#confirmPwd").hide()
        }
    }).blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F != "") {
            if (F.length < r) {
                E.showErr(h.passwordMin)
            } else {
                if (F.length > x) {
                    E.showErr(h.passwordMax)
                } else {
                    if (!g(F)) {
                        E.showErr(h.passwordInvalid)
                    } else {
                        E.showOk(h.ok)
                    }
                }
            }
        }
    });
    s.blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F.toLowerCase() != c.val().toLowerCase()) {
            E.showErr(h.password1Invalid)
        } else {
            E.showOk(h.ok)
        }
    });
    z.blur(function () {
        var F = A($(this).val()),
            E = b[this.id];
        if (F != "") {
            if (!y(F)) {
                E.showErr(h.emailInvalid)
            } else {
                E.showTips(h.loading);
                $.getJSON(l, {
                    tag: "email",
                    email: F
                },


                function (G) {
                    if (G.result == "emailSuccess") {
                        E.showOk(h.ok);
                        B = true
                    } else {
                        if (G.result == "notOnly") {
                            E.showErr(h.emailExist);
                            B = false
                        }
                    }
                })
            }
        }
    });
    q.click(function () {
        var E = b[q.attr("name")];
        if (q.filter(":checked").length > 0) {
            E.showOk(h.ok)
        }
    });
    i.blur(function () {
        var F = $(this).val(),
            E = b[this.id];
        if (F.length != 4) {
            E.showErr(h.validateCodeInvalid)
        } else {
            E.showTips(h.checkCode);
            $.getJSON(l, {
                tag: "code",
                code: F
            },


            function (G) {
                if (G.result == "codeSuccess") {
                    E.showOk(h.ok)
                } else {
                    if (G.result == "errorCode") {
                        E.showErr(h.validateCodeInvalid)
                    }
                }
            })
        }
    });
    $("#changeImgCode").click(function () {
        $("#imgCode").attr("src", "/index/image.jsp?" + (new Date).getTime());
        i.val("");
        return false
    })
})();

JavaScript Tutorials

Sunday, January 17, 2010

when this javascript function is called?

How can I programmatically inspect an ActiveXObject at runtime, using Javascript?

parse a character out of a string in javascript

HTML CSS JS navigation list issue

What property is alert showing me?

Create hidden cmd javascript

How do I break this script

Categories

Tags

Archives

Popular Posts

Recent Comments

My Blog List