关于JavaScript的入门

一、js简介

1、js是什么
2、js作用
3、组成
4、引入方式
    外联式：src引入

二、基本语法

1、变量
2、原始数据类型
undefined类型:当声明的对象未初始化时，该变量类型的默认值是undefined
3、引入数据类型
4、运算符
5、逻辑语句

三、js内建对象(Number,Boolean,String,Array,Date,Math,RegExp)

一些较常用的为：
(1)String

创建方式：
            var str = new String(s);
            var str = String(s);
        属性和方法：
            length:字符串的长度
            split();将字符串按照特殊字符切割成数组，然后变量接收后可循环输出
            substr():从起始索引号提取字符串中指定数目的字符
                例：var str ="a-fd-sss-dfd";
                    alert(str.substr(2,3));//fd-
            substring():提取字符串中两个指定的索引号之间的字符
                例：var str = "a-fd-sss-dfd";
                    alert(str.substring(2,3));//f -----[f,d)

(2)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):检索字符串中指定的值。  
            test方法有返回值，返回 true 或 false
        需求：
            校验邮箱：
            var email = haohao_827@163.com
            var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
            reg.test(email);

四、js的函数

1、js函数定义的方式
    (1)普通方式
        语法：function 函数名(参数列表){函数体}
        示例：
            function method(){
                alert("xxx");
            }
            method();
    (2)匿名函数
        语法：function(参数列表){函数体}
        示例：
            var method = function(){
                alert("yyy");
            };
            method();

2、函数的参数
    (1)形参没有var去修饰
    (2)形参和实参个数不一定相等


3、返回值
    (1)在定义函数的时候不必表明是否具有返回值
    (2)返回值仅仅通过return关键字就可以了 return后的代码不执行
    function fn(a,b){
        return a+b;
        //alert("xxxx");
    }
    alert(fn(2,3));

五、js的事件

事件
事件源
响应行为

套路：
①首先找到需要的事件类型
②找到事件源，绑定事件
③将事件发生后的响应行为封装到一个函数中

1、js的常用事件
①onclick:点击事件

②onchange:域内容被改变的事件

需求：实现二级联动
            <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>
            <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>";
                            break;
                        default:
                            alert("error");
                    }
                };              

            </script>

③onfoucus:获得焦点的事件
④onblur:失去焦点的事件

需求： 当输入框获得焦点的时候，提示输入的内容格式
                    当输入框失去焦点的时候，提示输入有误
            <label for="txt">name</label>
            <input id="txt" type="text" /><span id="action"></span>
            <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>

⑤onmouseover:鼠标悬浮的事件
⑥onmouseout:鼠标离开的事件

需求：div元素 鼠标移入变为绿色 移出恢复原色
            #d1{background-color: red;width:200px;height: 200px;}
            <div id="d1"></div>
            <script type="text/javascript">
                var div = document.getElementById("d1");
                div.onmouseover = function(){
                    this.style.backgroundColor = "green";
                };
                div.onmouseout = function(){
                    this.style.backgroundColor = "red";
                };
            </script>

⑦onload:加载完毕的事件（获取节点时最好写上，不然可能没有加载节点）

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

2、事件的绑定方式
(1)将事件内嵌到html中而响应行为用函数进行封装

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

（2）将事件和响应行为 与html标签完全分离

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

    ****this关键字
        this经过事件的函数进行传递的是html标签对象
        <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
        <script type="text/javascript">
            function fn(obj){
                alert(obj.name);
            }
        </script>

六、js的bom

(1)window对象
①弹框的方法：

提示框：alert("提示信息");
            确认框：confirm("确认信息");
                有返回值：如果点击确认返回true  如果点击取消 返回false
                var res = confirm("您确认要删除吗？");
                alert(res);
            输入框：prompt("提示信息");
                有返回值：如果点击确认返回输入框的文本 点击取消返回null
                var res =  prompt("请输入密码？");
                alert(res);

②定时器：

setInterval(函数,毫秒值);
            clearInterval(定时器的名称)
                var timer = setInterval(
                function(){
                    alert("nihao");
                },
                2000
            );
            var closer = function(){
                clearInterval(timer);
            };

        需求：注册后5秒钟跳转首页
        恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
        <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="../jsCore/demo10.html";
                    }
                },
                1000
            );
        </script>

（2）location
location.href=”url地址”;

七、js的dom

1、理解一下文档对象模型
    ①html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
    ②在dom树当中 一切皆为节点对象
2、dom方法和属性
    getElementById()
    getElementsByName()
    getElementsByTagName()