十三的博客

前端开发

0%

发表于 更新于 分类于

今天在W3C学习时，看到一行提示：“您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。”感到很困惑，什么是文档加载后？为什么会覆盖整个文档？为此上网去查找了些资料。下面做下总结。

什么情况是文档加载后？

HTML文档加载，是自上而下的加载HTML表示的内容，当整个页面内容都加载完毕之后，再调用document.write()这方法会导致文档上所有内容被清空，只留下 document.write 中的内容。如下代码：

1
2
3
4
5
6
7
8
9
10
<body>
<button onclick="after()">点击这里</button> 
   <script type="text/javascript">
    document.write("hello");
    function after()
    {
     document.write("点击按钮后，会清除所有 ");
    }
    </script>
</body>

文档加载完成后，页面显示“hello”，当点击按钮后会清除并覆盖当前内容，显示“点击按钮后，会清除所有”。

阅读全文 »

发表于 更新于 分类于

当我们给一个元素绑定一个方法后，再绑定一个方法时，第一个方法往往会被覆盖掉。如下例子，结果只会执行第二个方法，也就是说只弹出“b”。

1
2
3
4
5
6
window.onload=function(){
    alert('a');
}
window.onload=function(){
    alert('b');
}

因此为了保证两个及以上的方法能够正常执行，可以对元素进行事件绑定。
绑定事件有两个函数，attachEvent()和addEventListener()。

  1. attachEvent(事件名称, 函数)，IE浏览器兼容，这个函数的执行顺序是相反的，即先绑定的方法后面执行。
    1
    2
    oBtn.attachEvent('onclick',bb);
    oBtn.attachEvent('onclick',aa);//先执行方法aa,再执行方法bb
  2. addEventListener(事件名称,函数, 捕获)，ff和chrome浏览器兼容，这个函数的执行顺序是按正常的顺序执行的，即先绑定的方法先执行。
    1
    2
    oBtn.addEventListener('click',aa,false);
    oBtn.addEventListener('click',bb,false);//先执行方法aa,再执行方法bb
    为了解决浏览器兼容性问题，使用if-else语句来处理兼容性，使其兼容所有的浏览器。这里要注意一点，attachEvent()的事件名称要比addEventListener()的事件名称前面多了个‘on’。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     if(oBtn.attachEvent)//IE
     {
         oBtn.attachEvent('onclick',bb);
         oBtn.attachEvent('onclick',aa);
     }
    else//ff、chrome
     {
         oBtn.addEventListener('click',aa,false);
         oBtn.addEventListener('click',bb,false);
     }
    到此一个事件绑定就完成了，但是为了使代码更加简洁明了，且方便调用，可以将此解决兼容性的if-else语句封装成一个函数。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function myAddEvent(obj,sEvent,fn)
            {
                if(obj.attachEvent)
                {
                    obj.attachEvent('on'+sEvent,fn);
                }
                else
                {
                    obj.addEventListener(sEvent,fn,false);
                }
            }
    之后就可以根据需要调用该封装函数了。
    1
    2
    myAddEvent(oBtn,'click',aa)
    myAddEvent(oBtn,'click',bb);
    既然可以对元素进行事件绑定，当然也可以解除绑定。解除绑定同样有两个函数detachEvent(事件名称, 函数)和removeEventListener(事件名称, 函数, 捕获)，分别对应attachEvent()和addEventListener()的解绑。由于二者的用法同attachEvent()和addEventListener()的用法类似，所以这里就不再进行详细的说明了。

发表于 更新于 分类于

概念

*正则表达式(RegExp)*是强大的字符串匹配工具，可以极大地简化普通字符串操作容易出问题的东西。正则表达式只能操作字符串，且区分大小写。

基本语法

  1. 直接量语法: /pattern/attributes
    1
    var re=/a/i;
  2. 创建 RegExp 对象的语法：：new RegExp(pattern, attributes);
    1
    var re=new RegExp('A','i');
    注意：参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。参数 attributes 是一个可选的字符串，包含属性 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

RegExp对象方法：

阅读全文 »

发表于 更新于 分类于

Javascript的异常处理

Javascript的异常就是当javascript引擎执行javascript代码时，发生了错误，导致程序停止运行的一种现象。当异常产生时，会创建一个异常类对象，该异常类对象将被提交给浏览器，这个过程称为“抛出异常”。当浏览器接收到异常对象时，会寻找能处理这一异常的代码并把当前异常对象提交给其处理，这一过程被称为“捕获异常”。
Javascript使用try..catch..finally语句来进行异常的捕获，try..catch..finally语句的基本语法格式为： 

1
2
3
4
5
6
7
try{
    //可能抛出异常的代码 
    }catch(error){
     //如果发生异常会执行的代码，error为发生的异常类对象 
    }finally{
    //无条件执行的代码 
    }

try块中的语句首先被执行。如果运行中发生了错误，控制就会转移到位于catch块中语句，其中括号中的error参数被作为例外变量传递。否则，catch块的语句被跳过不执行。无论是发生错误时catch块中的语句执行完毕，或者没有发生错误try块中的语句执行完毕，最后将执行 finally块中的语句。在try..catch..finally语句中，try是必需的，catch和finally均为可选语句，但catch和finally中必须至少出现一个。
下面例子为捕获到的是变量未定义的异常：

1
2
3
4
5
6
7
8
9
function demo()
        {   var str="你好"; //没有声明str的话会有异常
            try{
                alert(str);
            }catch(er){
                alert(er);
            }
        }
        demo();
阅读全文 »

发表于 更新于 分类于

虽说自己学的是前端，但是关于前后端的一些交互还是有必要做简单的了解的。这两天学会了简单的PHP加上MySql数据库来实现动态页面，在WAMP的集成环境下设计了一个简单的注册页面，并将注册信息通过后端传送到数据库。

  1. 首先创建好数据库，在WAMP的环境下，建立数据库“register”，并创建具有两个字段的“message”表，存放用户名(username)及密码(password)。当有用户注册填写相关信息时，所填信息会被保存到该数据库中。

  2. 首先创建”register.php”文件，在里面编写相关的前端代码。创建两个文本框分别为用户的姓名输入框和密码输入框，再加一个注册按钮，为注册按钮添加调用ajax的相关语句。

    1
    2
    3
    4
    5
    6
    oBtn.onclick=function()
     {
    var url='register_post.php?act=add&username='+oTxt1.value+'&password='+oTxt2.value;
    ajax(url, function (str){          
            });
     }

  3. 创建”register_post.php”文件，在里面编写与数据库连接的代码以及数据库的执行操作语句。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?php
    switch($_GET['act'])
    {
     case 'add':
      $username=$_GET['username'];//接收前端上传的数据
      $password=$_GET['password'];
      $sql="INSERT INTO message (username, password) VALUES('{$username}', '{$password}')";
      mysql_connect('localhost', 'root', '');
      mysql_select_db('register');
      mysql_query($sql);
      break;
    }
    ?>

  4. 执行”register.php”文件，输入用户名和密码，点击注册按钮，即可发现数据库多了所填写的用户名和密码字段，到此，一个小的动态注册页面完成。这里只是通过简单的做个小例子来让自己明白前后端的一些交互方式，并不做深入的学习。