03_javascript(一)-BOM

javascript

• js是一门脚本语言

  • 直接通过浏览器执行的为脚本语言
  • js是轻量级编程语言

• javascript组成

  • ECMAScript语法和基本对象(核心)
  • DOM描述了处理网页内容的方法接口(文档对象模型)
  • BOM描述了与浏览器进行交互的方法接口(浏览器对象模型)

• 变量声明不是必须的(不一定要写var)

  • 在方法中带var，此时该变量为局部变量
  • 在方法中不带var，此时该变量为成员变量

• 网页加载完成之后自动调用该函数

<script>
    window.onload = function(){
        //获取页面指定位置的元素
        var uEle = document.getElementById("username");
        //alert(uEle);
        //获取页面指定位置的内容(值)
        var uValue = uEle.value;
        alert(uValue);
    }
</script>

• 校验表单用onsubmit,写在form里
  • omsubmit后接收一个函数的调用,调用的函数有返回值,然后拿到返回值后再return给onsubmit

<form action="#" method="get" onsubmit="return check_form()">
</form>

js基本语法

• ECMAScript:
  • undefined 和 null区别
    • undefined:定义了没赋值
    • null:没有定义
  • == 和 ===区别
    • ==:"66"和66是一样的(尝试将字符串向number类型转型)(一般笔试题会出现 )
    • ===:"66"和66是不一样的
    • js中没有equals,所有的比较都用==或===
  • 数据类型
    • undefined
    • boolean
    • number
    • string
    • object
    • null

简单的数据校验

• 获取元素:
  • document.getelementbyid('id_name')
• 获取元素值:
  • document.getelementbyid("id_name").value
  • ==如果id是一个字符串,则加上引号,如果是一个变量,则不需要==
  • 表单提交设置监听为:onsubmit,如果时普通事件就用onclick
• 输出:
  • 在制定位置写内容
    • doculment.getElementById('id_name').innerHTML = 'inner string'
  • 文档输出
    • document.write():向页面中写内容
  • 弹框
    • alert
• js中比较特殊的事件
  • onsubmit:一般用于表单提交,需要有返回值
    • 函数返回值为false不提交
  • onload:浏览器加载完成后调用
• onsubmit="return checkForm()"下载表单form的位置,不是写在submit按钮的位置
• onload方法写在body的属性中,表示body中的内容加载完成后调用

轮播图

<!--简单切换图片-->
<script type="text/javascript">
    var picNum = 1
    function switchImg() {
        picNum++;
        if (picNum > 3) {
            picNum = 1;
        }
        picSrc = document.getElementById('img1').src = "../../img/"+picNum+".jpg"
    }
</script>

• 自动轮播
  • 在body中通过onload方法在网页加载完后调用自定义init方法
  • 通过window.setinterval('func()',time)调用函数实现自动轮播

<!--自动轮播-->
<script type="text/javascript">
    var num = 1
    function init() {
        window.setInterval("swithcImgAtuo()",3000)
    }
    function swithcImgAtuo()  {
        num++
        if (num > 3) {
            num = 1
        }
        document.getElementById("img1").src = "../img/"+num+".jpg"
    }
</script>

定时弹出广告

• onload事件只能绑定一次

<script type="text/javascript">
    function init(){
        //书写轮图片显示的定时操作
        setInterval("changeImg()",3000);
        
        //1.设置显示广告图片的定时操作
        time = setInterval("showAd()",3000);
    }
    
    //书写函数
    var i=0
    function changeImg(){
        i++;
        //获取图片位置并设置src属性值
        document.getElementById("img1").src="../img/"+i+".jpg";
        if(i==3){
            i=0;
        }
    }
    
    //2.书写显示广告图片的函数
    function showAd(){
        //3.获取广告图片的位置
        var adEle = document.getElementById("img2");
        //4.修改广告图片元素里面的属性让其显示
        adEle.style.display = "block";
        //5.清除显示图片的定时操作
        clearInterval(time);
        //6.设置隐藏图片的定时操作
        time = setInterval("hiddenAd()",3000);
    }
    
    //7.书写隐藏广告图片的函数
    function hiddenAd(){
        //8.获取广告图片并设置其style属性的display值为none
        document.getElementById("img2").style.display= "none";
        //9.清除隐藏广告图片的定时操作
        clearInterval(time);
    }
    
</script>

javascript引入方式

• 内部引入:script标签内书写
• 外部引入:<script type="text/javascript" src="1.js" ></script>
• 行内引入:

BOM

• window:浏览器打开的窗口,需要掌握的方法
  • alert():弹框
  • setInterval():周期性调用函数,返回一个code
  • clearInterval():清楚周期性调用函数
  • setTimeout():在指定的毫秒数后调用函数或者计算表达式
  • clearTimeout():同上
  • confirm():弹出对话框
  • prompt():显示输入对话框
• history:用户在浏览器中浏览过的url
  • back():上一个url
  • forward():下一个url
  • go():加载history列表中的具体页面
• location:包含有关当前url的信息
  • href:制定url进行跳转

表单验证

• 聚焦事件onfocus
• 失焦事件onblur

js中正则校验

• 使用String对象中的match方法
• 使用正则对象中的test方法