10.09 笔记-Java Script 01 获取元素对象和定时器使用

JavaScript01
    JS 原生态
1.JavaScript 产生的背景以及用途
   用途: 可以和WEB页面进行交互目的就是美化页面
   JavaScript 刚开始产生的时候主要为了解决诸如表单验证的效果
2.JavaScript 定义
    JavaScript 缩写是JS  正式名字是ECMAScript  这个标准就是有ECMA组织发展和维护 正式的标准 ECMA-262 由网景公司提供的javascript和微软公司提出的javascript
    JavaScript 网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。
    事件: 当鼠标或者键盘操作文本文档的时候就会产生事件 事件就是用户的操作
    事件驱动:当产生一个时间的时候 调用程序处理事件 达到一定的效果 这个过程叫做事件驱动
3. JavaScript 特点
    1.  JS是解析性语言
        所有程序员编写代码 都需要转换为机器的语言(2进制语言)，通过编译器转换 编译编译器  解析编译器
        js在转换为机器语言的时候 通过解析编译器进行转换 所以把js叫做解析性语言
    2.  JS 结构和c++十分相似
    3.  JS具有跨平台的性质
    4.  具有安全性和简单性
    5.  基于对象


    4.优点
        a)  美化页面
        b)  表单验证
        c)  分布式操作
    5.缺点
        浏览器兼容问题
    6.环境
        编辑器: sublime  np++  vim  记事本。。。。
        运行环境: 支持js的各种浏览器 例如：火狐  谷歌 360 ie 欧朋。。。。。
    7.JavaScript 和java 有关系吗？


    8.JavaScript 原理--特效
        找到需要美化的元素或者对象，进行美化
        找对象，改属性
    9.javascript  不能做什么
        a)   不能操作数据库
        b)   不能操作文件
    10.如何学习
        a)  基础语法  ECMAScript
        b)  BOM     浏览器对象
        c)  DOM     文档对象
    11.JavaScript 语法
        a)  使用方式


            i.  写在script标签中 内联


                例如:<script> alert(1)</script>


            ii. 通过事件的方式写js代码 内嵌


                例如:


                    <button onclick="alert('鼠标单击事件！')">鼠标单击事件</button>
                    <button onclick="test()">鼠标单击事件,调用函数</button>
                        如果事件写的值为return false 则是可以阻止默认行为
                    <a href="http://www.baidu.com" onclick="return check()">去百度</a>


            iii.通过协议的方式写js代码


                例如: <a href="javascript:alert('想去百度?')">百度</a>


            iv. 通过外部引入的方式写js代码


                例如:
                    // 外部引用
                    <script src="./js.js"></script>


                    <script src="./js.js"> // 外部引用后 script 标签里面写代码无效,不能写代码


                        一旦我们的script用于导入外部js文件 那么这对标签里面的所有代码无效
                        alert('我是引入外部js的同时，写的js代码');


                    </script>


        b)  js能再html中出现的位置


            除了style 和title 里面之外 js代码可以出现在html的任意位置


        c)  js执行顺序


            请各位以后将你的所有js代码放置在body标签后面


        d)  获取元素对象


            1.  document.getELementById(‘元素的id值’)->单个元素对象


            2.  var object = document.getElementsByTagName('标签名') // 结果是一个数组div


            3.  var object = document.getElementsByName('name属性名') //通过name属性找到对象 返回数组


            返回元素的对象属性


        e)  js中严格区分大小写！


        f)  js的调试方式 输出内容


            1.  alert(); //弹出窗口 类似于 win32 下面的 MessageBoxA("信息框");


            2.  document.write() //类似php里面的echo


                代码执行完毕之后 在执行会覆盖里面的内容  一定不能出现在事件里面 否则会覆盖所有内容


            3.  console.log()  记录到控制台 没有弊端


            3.1 console.dir 类似php print_r()  用来调试数组 对象


            4.  document.title  修改标题,调试动态数据


        g)  鼠标跟随图片特效


        h)  var 后面声明的是变量


        i)   运算符


            1.  奇葩的加号 +   数学运算 还可以字符串拼接


            如果两边都是数字 那么他就是数学运算


            如果任意一边为字符串那么他就是拼接


            2.  += 同上


            3.  对象成员访问符 php中对象成员访问符(->)


                a) .对象成员访问符
                    .成员访问符不能解析变量 他会将变量直接变为属性来进行访问 如果这个变量在对象中不存在则返回undefined


                b)  [] 对象成员访问符
                    []成员访问符 能解析变量 他会先解析变量 将变量里面的值去访问我们对象中的属性 如果这个解析之后的变量的属性不存在则返回undefined


                c)  奇葩的分号;   命令执行符
                    换行符也能作为命令执行符


                j)  定时器(重要 重要 重要 重点 重点 重点)
                        多次定时器(周期性定时器)时间单位为毫秒
                    第一种使用方式
                    setInterval(函数名，定时的时间)
                比如:


                    function Timer(){}


                    返回定时器Id
                    TimerId = setInterval(Timer,100);


                    销毁定时器
                    clearInterval(TimerId);


                第二种使用方式


                    TimerId = setInterval(function(){},定时的时间)


                    清除操作
                    clearInterval(TimerId)


    单次定时器(一次性定时器) 单次触发


        第一种使用方式


        setTimeout(函数名,定时的时间)


    比如:


        function Timer(){}


        返回定时器Id


        TimerId = setTimeout(Timer,100);


    第二种使用方式


        setTimeout(function(){},定时的时间)


        清除操作
        clearTimeout(变量)


    12.倒计时特效


        innerHTML  获取元素对象的文本值
        可读 可写的属性  读  对象.innerHTML  写 对象.innerHTML = 值


    13.轮播图


    14.新消息


        空白(空格) 需要使用全角中文空格敲击