JavaScript

1、js的简介

   (1)js是什么?

    js是可以嵌入到html中,是基于对象和事件驱动的脚本语言。

         特点:

      交互性

            安全性:js不能访问本地磁盘

      跨平台:浏览器中都具备js解析器

      (2)js能做什么

    js能动态的修改(增删)html和css的代码

    能动态的校验数据

      (3)js的历史及组成

    BOM(浏览器对象模型)DOM(文档对象模型)

      (4)js被引入的方式

    内嵌脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type = "button" value = "button" onclick="alert('xxx')">
</body>
</html>

 

    内部脚本

 

<script type="text/javascript">
    alert("xxx");
</script>

 

    外部脚本

      首先创建一个js文件

            其次在html中引入

 

<script type="text/javascript" src = "demo1.js"></script>

 

        js的代码放在哪?

        放在哪都行 但是在不影响html功能的前提下,越晚加载越好。

2、js的基本语法:

  (1)变量

       方法1:

       var x = 5;

       x = 'javascript';

          var y = "hello";

       var b = true;

      方法2:

       x = 5;

  (2)原始数据类型

       number:数字类型

       string:字符类型

       boolean:布尔

       null:空类型

       underfind:未定义 

    注意:number、boolean、string是伪对象

    类型转换:

      number\boolean转成string:

        toString();

      string\boolean转成number

        parseInt()

        parseFloat()

        boolean不能转

              string可以将数字字符串转换成number

           强制转换

        Boolean()  强制转换成布尔

           数字强制转成成布尔 非零就是true 零就是false

              字符串强转成布尔 非""就是true

        Number() 强制转换成数字

             布尔转数字 true转成1  false转成0

           字符串转数字 不能强制转换

  (3)引用数据类型

    java:Object obj = new Object();

    js:var obj = new Object();

       var num = new Number();

  (4)运算符

    赋值运算符

      var x = 5;

    算数运算符

      + - * \ %

      + : 遇到字符串变成连接

            - : 先把字符串转成数字然后进行运算

    逻辑运算符

      &&  || 

    比较运算符

      >  <  >= !=  ==

      === : 全等:类型和值都要相等

    三元运算符

      3 < 2?"大于":"小于"

    void运算符

<a href="javascript:void(0);">xxx</a>

    类型运算符

      typeof : 判断数据的类型(返回数据的类型)

      instanceof : 判断数据类型(判断是否是某种类型)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var obj = new Object();
    alert(typeof obj);
    alert(obj instanceof Object);
</script>

</head>
<body>
    
</body>
</html>

    返回:Object true

  (5)逻辑语句

    (1)if-else

    (2)switch

    (3)for

    (4)for in 

3、js的内置对象

    (1)Number

      创建方式:

        var myNum = new Number(value);

        var myNum = Number(value);

        属性和方法:

        toString():转成字符串

        valueOf():返回一个Number对象的基本数字值

    (2)Boolean

       创建方式:

        var bool = new Boolean(value);

        var bool = Boolean(value);

      属性和方法:

        toString():转成字符串

       valueOf():返回一个Boolean对象的基本值

    (3)String

       创建方式:

        var str = new String(s);

        var str = String(s);

      属性和方法:

        length:字符串的长度

        charAt() : 返回索引字符

        indexOf() : 返回字符索引

        lastIndexOf() : 逆向返回字符的索引

        split() : 将字符串按照特殊字符切割成数组

        substr() : 从起始索引号读取字符串中指定数目的字符

        substring();  提取字符串中两个指定的索引号之间的字符

        toUpperCase() : 转大写

    (4)Array

           创建方式:

        

 

         属性和方法:

        length : 数组的长度。

           join() : 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

              pop() : 删除并返回最后一个元素。

        push() : 向数组的末尾添加一个或多个元素,并返回新的长度

        reverse() : 反转数组

        sort():排序

    (5)Date

          创建方式:

          var myDate = new Date();

          var myDate = new Date(毫米值); //代表从1970-1-1到现在的一个毫秒值

        属性和方法:

          getFullYear() : 年

          getMonth() : 月 0 -11

          getDate() : 日 1-31

          getDay() :  星期 0 - 6

          getTime() : 代表从1970-1-1到指定日期(字符串)的一个毫秒数

          toLocaleString() : 获得本地时间格式的字符串

    (6)Math        

          属性和方法:

         PI : 圆周率

         abs() : 绝对值

            ceil() : 对数进行上舍入

         floor() : 对数进行向下舍入

         round() : 四舍五入

            pow(x,y) : 返回x的y次幂        

    (7)RegExp

        创建方式:

          var reg = new RegExp(pattern);

          var reg = /^正则规则$/;

        规则的写法:

        [0-9]

        [A-Z]

        [a-z]

        [A-z]

         \ d 代表数字

        \D 代表非数字

        \w 查找代表字母

          \W 查找非单词字符

        \s  查找空白字符

        \S 查找非空白字符 

        n+ 出现至少一次         

        n* 出现0次获多次

        n? 出现0次或1次

        {5} 出现5次

        {2-8} 2到8次

      方法:

        test(str):检索字符串中指定的值。返回true或false

      需求:

        校验邮箱:

        var email = "haohao_827@163.com";

        var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;

        reg.test(email);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var email = "haohao_827@163.com";
    var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
    alert(reg.test(email));
</script>

</head>
<body>
    
</body>
</html>

   返回:true

4、js的函数

   (1)js函数定义的方式

    普通方式

      语法:function 函数名(参数列表){函数体}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function method(){
        alert("xxx");
    }
    method();
</script>

</head>
<body>    
    
</body>
</html>

    匿名函数:

      语法:function(参数列表){函数体}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var method = function(){
        alert("yyy");
    };
    method();
</script>

</head>
<body>    
    
</body>
</html>

    对象函数

    语法:new Function(参数列表,函数体)

    注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var fn = new Function("a","b","alert(a+b)");
    fn(2,5);
</script>

</head>
<body>    
    
</body>
</html>

  函数的参数:

   (1)形参没有var去修饰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function fn(a,b,c){
        var sum = a + b + c;
        alert(sum);
    }
    fn(1,2,3);
</script>

</head>
<body>    
    
</body>
</html>

 

  输出:7

  (2)形参和实参的个数不一定一致

  返回值:

    (1)在定义函数的时候不必表明是否具有返回值。

    (2)返回值仅仅通过return关键字就可以了 return后的代码不执行。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function fn(a,b){
        return a + b;
    }
    alert(fn(2,3));
</script>

</head>
<body>    
    
</body>
</html>

 

输出结果为:5

    * js的全局函数

      (1)编码和解码

        encodeURI()  decodeURI()

        encodeURICompoent()  decodeURICompoent()

        escape() unescape()

        三者区别:

          进行编码的符号范围不同,实际开发中常使用第一种

      (2)强制转换

        Number()

        String()

        Boolean()

      (3)转成数字

         parseInt()

         parseFloat()

      (4)eval()方法

        将字符串当作脚本解析运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var str = "var a = 2;var b = 3;alert(a+b)";
    eval(str);
</script>

</head>
<body>    
    
</body>
</html>

输出5

五、js的事件

  1、 js的常用事件

        onclick : 点击事件

      onchange : 域内容被改变的事件

        需求:实现二级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <select id = "city">
        <option value = "bj">北京</option>
        <option value = "tj">天津</option>
        <option value = "sh">上海</option>
    </select>
    <select id = "area">
        <option>海淀</option>
        <option>朝阳</option>
        <option>东城</option>
    </select>
</body>

<script type="text/javascript">

    var select = document.getElementById("city");
    
    select.onchange = function(){
         var optionVal = select.value;
          switch(optionVal){
            case "bj":
                var area = document.getElementById("area");
                area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                break;
            case "tj":
                var area = document.getElementById("area");
                area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                break;
             case "sh":
                var area = document.getElementById("area");
                area.innerHTML = "<option>浦东</option><option>浦西</option><option>杨浦</option>";
                break;
            default:
                alert("error"); 
        }  
    }
    
</script>

</html>

        onfoucus :获得焦点的事件

        onblur : 失去焦点的事件

        需求:当输入框获得焦点的时候,提示输入的内容格式

             当输入框输入焦点的时候,提示输入有误

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <label for = "txt">name</label>
    <input id = "txt" type = "text"/><span id = "action"></span>
</body>

<script type="text/javascript">
    var txt = document.getElementById("txt");
    txt.onfocus = function(){
        //友好提示
        var span = document.getElementById("action");
        span.innerHTML = "用户名格式最小8位";
        span.style.color = "green";
    };
    txt.onblur = function(){
        //错误提示
        var span = document.getElementById("action");
        span.innerHTML = "对不起,格式不正确";
        span.style.color = "red";
    } 
</script>

</html>

  

      onmouseover :鼠标悬浮的事件

        onmouseout : 鼠标离开的事件

        需求:div元素 鼠标移入变为绿色 移出回复原色

      

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type = "text/css">
    #d1{
        background-color : red;
        width:200px;
        height:200px;
    }
</style>

</head>
<body>            
    <div id = "d1"></div>
</body>

<script type="text/javascript">
    var div = document.getElementById("d1");
    div.onmouseover = function(){
        this.style.backgroundColor = "green";
    }
    div.onmouseout = function(){
        this.style.backgroundColor = "red";
    }
</script>

</html>

      onload : 加载完毕的事件

      等到页面加载完毕再执行onload事件所指向的函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    window.onload = function()
    {
        var span = document.getElementById("span");
        span.innerHTML = "hello js"
    };
</script>

</head>
<body>            
    <span id = "span"></span>
</body>



</html>

  2、事件的绑定方式

    (1)将事件和响应行为都内嵌到html标签中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" value = "button" onclick = "alert('xxx')">
</body>

<script type="text/javascript">
    
</script>

</html>

当点击按钮的时候会弹出xxx

    (2)将事件内嵌到html中而响应行为用函数进行封装

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" value = "button" onclick = "fn()">
</body>

<script type="text/javascript">
    function fn(){
        alert("yyy");
    }
</script>

</html>

    (3)将事件和响应行为与html标签完全分离

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input id = "btn"type = "button" value = "button">
</body>

<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("zzz");
    }
</script>

</html>

    this关键字

    this经过事件的函数进行传递的是html标签对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" name = "mybtn" value = "button123" onclick = "fn(this)">
</body>

<script type="text/javascript">
    function fn(obj){
        alert(obj.name);
    }
</script>

</html>

  3、阻止事件的默认行为 

     IE:window.event.returnValue = false;

    W3c : 传递过来的事件对象.preventDefault();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <a href = "http://www.baidu.com" onclick = "fn(event)">点击我吧</a>
</body>

<script type="text/javascript">
    function fn(e){
        //IE window.event.returnValue = false;
        //w3c 传递过来的事件对象.preventDefault();
        //w3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标准
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
    }
</script>

</html>

  4、阻止事件的传播 

    IE:window.event.cancelBubble = true;

    W3c : 传递过来的事件对象.stopPropagation();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <div onclick = "fn1(event)" style = "width:100px;height:100px;background-color:green;padding:50px">
        <div onclick = "fn2(event)" style = "width:100px;height:100px;background-color:red;">xxx</div>
    </div>
</body>

<script type="text/javascript">
    function fn1(e){
        alert("fn1");
    }
    function fn2(e){
        alert("fn2");
        //阻止事件的传播        
        if(e&&e.preventDefault){
            e.stopPropagation();
        //IE标准
        }else{
            window.event.cancelBubble = true;
        }
    }
</script>

</html>

六、js的bom

  1、window对象

    弹框的方法

      提示框:alert("提示信息");

      确认框:confirm("确认信息");

        有返回值:如果点击确认返回true 如果点击取消 返回false

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    var res = confirm("您确认要删除吗");
    alert(res);
</script>

</html>

    输入框:prompt("提示信息");

      也有返回值:如果点击确认 返回输入框的文本,如果点击取消返回null

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    var res = prompt("请输入密码?");
    alert(res);
</script>

</html>

    open方法:

      window.open("url地址");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    window.open("http://www.baidu.com");
</script>

</html>

     定时器:

      setTimeout(函数,毫秒值);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    setTimeout(
        function(){
            alert("x");
        },
        3000
    );
</script>

</html>

    clearTimeout(定时器的名称)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var fn = function(){
        alert("x");
        timer = setTimeout(fn,2000);
    };
    var closer = function(){
        clearTimeout(timer);
    }
    fn();
</script>

</head>
<body>            
    <input type = "button" value = "button" onclick = "closer()">
</body>
</html>

    setInterval(函数,毫秒值);

    clearinterval(定时器的名称);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var timer = setInterval(
        function(){
            alert("你好");
        },
        2000        
    );
    
    var closer = function(){
        clearInterval(timer);
    }
</script>

</head>
<body>            
    <input type = "button" value = "button" onclick = "closer()">
</body>
</html>

    需求:注册后五秒跳转到首页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
        var time = 5;
        var timer;
        timer = setInterval(
            function(){
                var second = document.getElementById("second");    
                if(time >= 1)
                {
                    second.innerHTML = time;
                    time--;
                }
                else
                {
                    clearInterval(timer);
                    location.href = "demo11.html"
                }
            },
            1000
        );
</script>

</head>
<body>            
    恭喜您注册成功,<span id = "second" style = "color:red">5</span>秒后跳转到首页,如果不跳转请<a href = "demo11.html">点击这里</a>
</body>
</html>

    location跳转

      location.href = "url的地址"

      history

      back();

      forward();

      go();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
        
</script>

</head>
<body>            
    <a href = "demo14.html">后一页</a>
    <input type = "button" value = "上一页" onclick = "history.back()">
    <input type = "button" value = "下一页" onclick = "history.forword()">
</body>
</html>

七、js的dom

  1、理解dom对象的模型

    html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改

    在dom树当中 一切皆为节点对象

  2、dom的方法和属性

    查找元素

            

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <form name = "form1" action = "text.html" method = "post">
        <input type = "text" name = "username" value = "天道酬勤" id = "tid">
        <input type = "submit" name = "ok" value = "保存">
    </form>
</body>

<script type="text/javascript">
        var inputNode = document.getElementById("tid");
        alert(inputNode.value);
        
        var inputNode = document.getElementById("tid");
        alert(inputNode.type);
</script>

</html>

        

 

 

posted @ 2017-12-02 17:26  北极星小王子  阅读(247)  评论(0编辑  收藏  举报