黑马程序员_JavaScript函数的基本使用

最新推荐文章于 2024-08-09 21:30:00 发布

尛马过河

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量589

点赞数

文章标签： javascript CSS 正则表达式函数

本文链接：https://blog.csdn.net/wahaha_hehongwei/article/details/8744591

版权

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

一、在HTML中使用JavaScript

1.在<body>……</body>之间，多个JavaScript分别用<script>包含

例1：一般直接在页面输出的内容放在<body>……</body>之间

<body>
<script type="text/javascript">
document.write("<h1>hello world!</h1>");
</script>
</body>

例2：也可把函数放到<body>……</body>之间

<body>
<div οnclick="clickme()">click me</div>
<script type="text/javascript">
function clickme()
{
alert("you clicked me!");
}
</script>
</body>

例3：也可把外部js文件放在<body>……</body>之间

<body>
<div οnclick="clickme()">click me</div>
<script type="text/javascript" src="example.js"></script>
</body>

外部example.js文件：function clickme()

{

alert("you clicked me!");

}

2.在<head>……</head>之间，用法同上一样，只是如果把一般输出内容放在<head></head>貌似没有太多意义，把输出内容都放在body内容的前面了。

注意：对于这两种放的位置，貌似其中可能会影响页面加载速度。

（1）有书说对于很多JavaScript代码都放在<head>里的话意味着必须等全部JavaScript代码都被下载、解析和执行完成以后才能开始呈现页面的内容，这样呈现页面的时候会出现延迟，而延迟过程中浏览器窗口中将是一片空白，而放在<body>内容的最后面则可避免这种情况。

（2）也有书说把JavaScript代码放在<head>里可确保在需要使用脚本之前，它已经被载入，可加快页面的下载速度。

二、下面来看个常用的例子，函数的编写和调用，使用到正则表达式

<html>
<head>
    <title>javascript函数的编写和调用</title>
    
    <script type="text/javascript">
        //对输入内容的验证函数
        //参数：1.文本框ID，2.显示错误信息的label的ID，3.正则表达式，4.文本框空时提示的信息，5.不匹配正则表达式时提示的信息
        function check(textID,errorID,regex,nullMessage,errorMessage) {
            var textValue = document.getElementById(textID).value;
            if (!textValue) {
                //如果文本框为空
                document.getElementById(errorID).innerHTML = nullMessage;
                document.getElementById(errorID).style.color = "red";
                document.getElementById(textID).focus();
            }
            else {
                var reg = new RegExp(regex);
                if (!reg.test(textValue)) {
                    //如果与正则表达式不匹配
                    document.getElementById(errorID).innerHTML = errorMessage;
                    document.getElementById(errorID).style.color = "red";
                    return;
                }
                //如果输入的内容正确，提示可以使用
                document.getElementById(errorID).innerHTML = "可以使用";
                document.getElementById(errorID).style.color = "blue";
            }
        }
    </script>
    <script type="text/javascript">
        //对用户名的验证
        function userNameCheck() {
            check("nameId", "errorUserName", "^[a-zA-Z_][A-Za-z0-9_]*$", "用户名不能为空", "用户名必须是字母数字或下划线, 不能以数字开头");
        }
    </script>
    <script type="text/javascript">
        //对密码的验证
        function pwCheck() {
            check("PW", "errorPW", "^[A-Za-z0-9_]{6,16}$", "密码不能为空", "密码为6-16位字母、数字或者下划线");
        }
    </script>
</head>
<body>
　　<div><input type="text" id="nameId" value="" οnblur="userNameCheck()"/><label id="errorUserName"></label></div>
　　<div><input type="password" id="PW" value="" οnblur="pwCheck()"/><label id="errorPW"></label></div>
</body>
</html>

这个例子是对输入的用户名和密码使用javascript进行我们规定的规则进行验证，这个规则使用正则表达式来匹配。其中把验证的过程写成一个函数，具体验证时再进行调用。貌似里面用到了DOM的知识，但是由于还没学习到，不懂就直接网上找，才完成了这个小例子，供以后编写代码时参考。

尛马过河

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员_JavaScript函数的基本使用

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------一、在HTML中使用JavaScript1.在……之间，多个JavaScript分别用包含例1：一般直接在页面输出的内容放在……之间document.write("hello world!");例2：也可把函数放到……之间click mefunction
复制链接

扫一扫