网页前端 --(js) | 易学教程

1.JS变量

1.1基本数据类型

类似于java中的基本数据类型。

属性名	属性说明
string	字符串类型。 "" 和 '' 都是字符串。 JavaScript中没有单个字符
boolean	布尔类型。固定值为true和false
number	数字类型。任意数字及NaN标记 NaN（Not A Number）没有特定意义，仅标记当前值不是一个数字。但NaN标记属于数字类型
null	空，一个占位符
undefined	未定义类型。该类型只有一个固定值，即undefined，表示变量声明却未定义具体的值。可以理解为Java中，int类型的0，String类型的空字符串，都是为赋值时的默认值

1.2 引用数据类型

Java 中的引用数据类型都是Class（类）

JavaScript中的引用数据类型都是对象。

标准创建方式：

var str = new String();//和java相同

var str = new String; //js独有的方式

引用数据类型默认值：null

2. js 运算符

比较运算符

== 逻辑等。仅仅对比数据值。

=== 全等。对比数据值并且对比类型。

如果值和类型都相同，则为true；值和类型有一个不同，则为false

<script>
    /*     *       ==     仅仅比较值是否相同。  如果相同，返回true，否则返回false     *       ===    比较值和数据类型。   如果值和数据类型都相等，返回true；  否则返回false     * */     var aa = "10";
    alert(aa==10);//true     alert(aa===10);//类型不同，false     alert(aa==="10");//true  值和类型都相等 </script>

3. JS函数

function 方法名(参数列表){

}

return可忽略

一定有返回值。默认值：undefined

目前阶段：JS函数没有重载，只有覆盖

4.JS正则对象

Java正则：“字符串”

JS正则：正则对象

var reg = /^表达式$/; 直接量（开发中常用）

直接量中存在边界，即^代表开始，$代表结束

直接量方式的正则是对象，不是字符串，别用引号

test(string)

匹配传入的字符串是否匹配正则。

字符串全部匹配正则，返回true

有一个字符不匹配，返回false

<script>
    var str = "  ccc    ";
    //定义一个正则对象
    var reg = /^\s*$/;//  \s空白符--空格   。  空格可以有0个或多个
    alert(reg.test(str));
</script>

5.js事件

       onclick

       onsubmit

写在<form>

onsubmit=”return 方法名()”

被绑定的方法必须有boolean返回值。

true:表单正常提交

false:阻止表单提交

       HTML-DOM绑定方式：

              document.getElementById(“”).事件名=方法名;

              document.getElementById(“”).事件名=function(){

};

onchange事件

域内容发生改变时

<select> 域

<script>
        function run(){
            alert("xxxxxxxx");
        }
    </script>
</head>
<body>
    <select onchange="run()">
        <option value="ll">榴莲</option>
        <option value="sl">石榴</option>
        <option value="cm">草莓</option>
    </select>
</body>

小结：

只有域内容发生改变时，才会触发onchange事件
域内容未发生改变，onchange事件不会触发

6. js 定时器

定时器：固定一个周期，执行某一项任务

循环定时器： setInterval()
一次性定时器：setTimeout()

<script>
    function run1(){
        alert("你好");
    }
    //循环定时器：
    //setInterval("run1()",2000);//每隔2秒，执行一次run1方法
    //一次性定时器：
    setTimeout("run1()",2000);//2秒之后，执行一次run1方法

    //定时器其他写法：
    //setTimeout(run1,2000);//2秒之后，执行一次run1方法
    /*setTimeout(function () {
        run1();
    },2000);//2秒之后，执行一次run1方法*/
</script>

定时器三种写法：

setTimeout(“方法名()”,毫秒值);

setTimeout(方法名,毫秒值);

setTimeout(function(){ //JS代码 },毫秒值);

取消定时器

clearInterval(id);取消循环定时器
clearTimeout(id);取消一次性定时器

<script>
        function run1(){
            alert("执行run1");
        }
        var xid = setInterval("run1()",1000);
        function runx() {
            clearInterval(xid);
        }
    </script>
</head>
<body>
    <input type="button" value="点我取消循环定时器" onclick="runx()"/>
</body>

注意：页面上的定时器ID都不相同

7. 轮播图

需求分析

1、onload
2、循环定时器
3、一个<img> 重复更改src

<script>

      //计数器
      var num = 1;
      //更换图片
      function changeImg(){
         //1、获取图片标签对象
          var img = document.getElementById("lbt");
         //2、更改src属性
         img.src="img/"+(++num==4?num=1:num)+".jpg";
      }
   </script>
</head>

<body onload="setInterval('changeImg()',2000)">

8. 定时弹广告

1、onload
2、setTimeout
3、获取对象
对象.className="显示样式"
对象.className="隐藏样式"

<script>
      //显示图片       function showImg(){
         //1、获取图片对象          var img = document.getElementById("ad");
         //2、对象.className          img.className="showImg";
         //设置一个定时器，2秒后隐藏图片          setTimeout("hideImg()",2000);
      }
      //隐藏图片            function hideImg(){
               //1、获取图片对象                var img = document.getElementById("ad");
               //2、对象.className                img.className="hiddenImg";
           }
   </script>
</head>
<body onload="setTimeout('showImg()',2000)">

9.JS事件总结

事件名	描述
onload	某个页面或图像被完成加载时触发
onsubmit	提交按钮被点击时触发
onclick	点击某个对象时触发
ondblclick	双击某个对象时触发
onblur	元素失去焦点时触发失去焦点前提：必须先获取焦点
onfocus	元素获得焦点时触发
onchange	域的内容被用户改变时触发

焦点（关注点）：一个网页只有一个焦点

焦点在输入框中有直接体现：闪烁的光标

鼠标键盘事件：

事件名	描述
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开、弹起前提：必须先按下
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
onmouseover	鼠标被移到某元素之上移入
onmouseout	鼠标从某元素移开移出前提：必须先移入

来源：oschina

链接：https://my.oschina.net/u/4424718/blog/4267309

标签

black