JavaScript基本定义操作及DOM和BOM

//JavaScript基本定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
         //定义变量
         /*var a=3;
        alert(a);
        a="abc";
        alert(a);*/

         //定义number类型
         var num1=1;
         var num2=1.2;
         var num3=NaN;
         //输出到页面上
         document.write(num1+"-----"+typeof(num1)+"<br>");
         document.write(num2+"-----"+typeof(num2)+"<br>");
         document.write(num3+"-----"+typeof(num3)+"<br>");

         //定义string类型
         var str1="abc";
         var str2='def';
         document.write(str1+"-----"+typeof(str1)+"<br>");
         document.write(str2+"-----"+typeof(str2)+"<br>");

         //定义boolean类型
         var flag=true;
         document.write(flag+"-----"+typeof(flag)+"<br>");

         //定义null,undefined
         var obj1=null;
         var obj2=undefined;
         var obj3;
         document.write(obj1+"-----"+typeof(obj1)+"<br>");
         document.write(obj2+"-----"+typeof(obj2)+"<br>");
         document.write(obj3+"-----"+typeof(obj3)+"<br>");

         /*
         *RegExp：正则表达式对象
         *   1.正则表达式：定义字符串的组合规则
         *      1.单个字符：[]
         *        如：[a](代表a) [ab](代表a或者b)  [a-zA-Z0-9_](代表大小写字母和数字和下划线)
         *          特殊符号代表特殊含义的单个字符：
         *              \d：数字字符[0-9]
         *              \w：单个单词字符[a-zA-Z0-9_]
         *      2.量词符号：
         *              ？表示出现0次或1次
         *              *表示出现0次或多次
         *              +表示出现1次或多次
         *              {m,n}表示 m<= 数量 <=n
         *                 {,n}表示最多n次
         *                 {m,}表示最少m次
         *      3.开始结束符号
         *        ^：开始
         *        $：结束
         *    创建：
         *      1.var RegExp=new RegExp("正则表达式")
         *      2.var RegExp=/正则表达式/
         *    方法：
         *      1.text(参数)：验证指定字符串是否符合正则定义
         * */
         //建立正则表达式
         var reg1=new RegExp("\\w{6,12}");/*这个\w前要交转义符号\，不然识别不了*/
         var reg2=/^\w{6,12}$/;
         alert(reg1);
         alert(reg2);
         //验证
         var username="zhangsan";/*8位字符，符合要求*/
         var flag1=reg1.test(username);
         var flag2=reg2.test(username);
         alert(flag1);
         alert(flag2);


    </script>
</head>
<body>

</body>
</html>

//DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
<!--
    DOM：
       功能：控制HTML文档的内容
       代码：获取页面标签对象
            document.getElementById(“id值”)：通过元素id获取元素对象
       操作Element对象：
            1.设置属性值
            2.修改标签体内容
               属性：innerHTML

     事件简单学习
         功能：某些组件被执行某些操作后，触发某些代码的执行。
         如何绑定属性：直接在HTML标签上，指定事件的属性（操作），属性值就是js代码。
           1.事件：onclick-----点击事件
           2.通过就是获取元素对象，指定事件属性，设置一个函数

-->

    <!--<img src="../img/ranran.jpg" id="yzm1">-->
     <h1 id="title">你好吗？</h1>
     <script>
         /*var yzm=document.getElementById("yzm1");
         alert("我要换图片了");
         yzm.src="../img/background.jpg";

         var title=document.getElementById("title");
         alert("我要换内容了");*/

         /*title.innerHTML="我不好";*/

         function funs(){
             alert('我被点击了');
             alert('我又被点击了');
         }

     </script>
     <!--<img src="../img/ranran.jpg" onClick="alert('我被点击了')">-->
     <img src="../img/ranran.jpg" onClick="funs()">

     <img src="../img/ranran.jpg" id="src111">
     <script>
         function fun2(){
             alert("还点我是吧！");
         }


         //1获取src111对象
         var src111=document.getElementById("src111");
         //绑定事件
         src111.onclick=fun2;
     </script>

</body>
</html>

JavaScript基本定义操作及DOM和BOM

猜你喜欢