javascriptWebStageDay03

day02问题解答:
块级元素: margin-top可调 ;height 可调;
行内元素: margin-top不可调 ;height 可调;

day03笔记:
html:网页布局,骨架
css:设计/调整/美化网页布局
javascript: 表单验证,页面呈现动态效果,事件响应

将js引入html中:
1.写一个script的标签,直接在标签体内写js代码,script可以写在任意位置,但一般都写在head下
2.写一个script的标签,src属性 可以指向一个外部的js文件
注意事项:
js的引用:javascript的标签一旦使用了src属性,那么写在标签体的代码 就会被浏览器忽略掉;
js的组成:
1.ECMSAScript标准语法部分(核心)
2.DOM :doucument object modal 文档对象模型
3.BOM :broswer object modal 浏览器对象模型

1.变量的定义:
var i = “1”;
js中的注释: // 单行 /**/ 多行
2.数据类型:
1) 原始类型
(1) Undefinded : 变量未初始化; 在函数中未返回数据 你却接收了
(2) String 字符串 “” ”
(3) Number 数值类型
(4) Boolean true|false
(5) Null null只有这一个
typeof运算符: 判断变量的类型 返回被判断变量的类型 类型属于原始类型 返回该类型的类型名(小写)
alert(typeof i)
注意:如果被判断的是Null类型或引用类型,返回object

2) 引用类型
        new 对象();

3.运算符:
跟java基本一致

逻辑运算(了解)
    >  >=  <  <=
    1) 比较双方都是数值类型,与常识一致
    2) 比较双方都是字符串,会比较assic码
    3) 一方是number,另一方是number的字符串,隐式将字符串转换为number进行比较
    4) 一方是number,另一方是 非number的字符串,无法进行比较,返回false
等性运算符
    ==
    1).只要两个变量的字面值相同即可
    ===
    2).既要字面值相同,类型也要相同

4.控制语句
跟java基本一样
if for

5.方法或函数的定义
java:
修饰 返回值 方法名(形参列表){方法体}
js:
方式一: function 方法名(形参列表){方法体}
方式二: 匿名函数 function (形参列表){方法体}
举例:
var f=function(形参列表){方法体}
var user=new Object();
user.speak=function(){alert(“说话了”)}

6.事件(浏览器在页面上能侦测到的所有的行为)
事件绑定:
常见事件:
点击事件onclick
页面加载成功事件 onload
οnlοad=function(){…} 等页面全部加载完成后再执行

    方式一:通过标签的事件属性控制
        <xx onclick="函数名()"/>
    方式二:要求写js代码
        获取xx元素对象:var 元素对象=document.getElementById("id值");
        xx元素对象.事件属性=function(){//想做的事情}

        举例:
        <input type="button" value="点我" id="test2" />
        <JavaScript>
        var object2=document.getElementById("test2");
        object2.onclick=function(){alert("点击后弹窗");}
        <JavaScript/>

7.BOM browser object modal 浏览器对象模型

Window 
    特点:
        只要属性或者方法属于window 内置对象 , window可以省略不谢 
        var history=window.history========history
    内置对象
        属性:
            获取其他几个对象
            history location  navigator 
        方法:
            弹出框
                alert() 警告框
                confirm()//确认框  重点
                prompt() 输入框 毛用没有

            定时器 重点

            打开和关闭 基本没啥用


History 
    forward() 前进
    back() 后退

    go()方法
        参数 正数 前进
            负数 倒退


Location :地址 指的是描述当前页面的url信息
    href 模拟跳转效果 

可以增加一些逻辑判断,是否跳转

案例一:用户注册页面验证
步骤分析:
1.创建页面
2.事件 表单提交事件 onsubmit : 绑定函数,必须有一个boolean的返回值
3.编写函数 checkform(){
//判断用户名和密码是否为空
//先获取到输入框对象 var 元素对象=document.getElementById(“id值”);
//获取value属性
//判断到底是否为空
//为空 提示信息
//return false;
//不为空
继续下一步
retur true;

}

案例二:轮播图
需求: 在页面加载成功以后,每隔2秒 轮播图图片切换一次,依次反复不停
学习:定时器;
页面加载成功后定时器开始计时,计时时间到,则执行定义的方法;循环不停;
图片src属性
定时器:
1.setInterval(方法名,毫秒值);
2.setInterval(“方法名”,毫秒值);
3.setInterval(function(){},毫秒值);

步骤分析:
1.创建页面
2.事件    页面加载成功
3.启动定时器
    setInterval(函数,2000);
4.编写函数
    获取图片对象

改变图片src路径

案例三:弹出广告
需求: 在页面加载成功 每隔4秒 上方 显示出来图片 2秒关闭了 如此反复三次 结束
学习: 定时器
元素.style.css属性

定时器:
定义定时器,都有返回值,返回自己的id
1.周期性定时器 setInterval(函数,毫秒值)
2.一次性定时器 setTimeout(函数,毫秒值)
清楚定时器:
clearInterval(id) //清除周期性定时器
clearTimeout(id) //清除一次性定时器

步骤分析:
1.创建页面
2.事件
页面加载成功
3.启动定时器:
启动周期性 每隔4秒 图片显示出来
setInterval(showImg,4000)

4.在showImg函数
    找到对应图片显示出来 控制css样式
    控制它父容器

    //定义一次性定时器  关了
    setTimeout(closeImg,2000)
5.编写closeImg函数
    找到对应图片显示出来 控制css样式
    控制它父容器 display:none