CSS

作者: chcvn | 来源:发表于2017-09-15 22:21 被阅读7次

    Javaweb第三天笔记

    [TOC]

    内容回顾

    1. 什么是CSS:层叠样式表

    2. CSS的作用:对网页进行美化

    3. CSS选择器:

      • 元素选择器:
        div{
            border:1px solid blue;
            width:40px;
            height:45px;
        }
        
      • ID选择器:
        #d1{
            border:2px solid red;
        }
        
      • 类选择器:
        .divClass{
          border:2px solid yellow;
        }
        
    4. CSS浮动
      div是块级元素单独一行,span是行级元素多个一行
      要想让div一行显示多个,可以使用浮动
      标签 float:left/right
      清除浮动clear:both

    5. CSS盒子模型
      如果一个页面布局复杂的情况下,我们可以把每一块都封装成一个小盒子,然后可以把多个小盒子放到一个大盒子里面,然后用大盒子在页面上布局


    今日要点

    1. 什么是Javascript?
    2. ==Javascript实现表单校验==
    3. Javascript实现图片轮播
    4. ==掌握Javascript定时器的使用==
    5. BOM对象

    要求: 会使用Javascript实现表单校验

    1. 01-案例三:使用JS完成注册,页面的数据简单校验:需求和JS的概述.avi

      问:什么是Javascript,它有哪些特点?
      答:JS是一种脚本语言(脚本语言是解释执行语言。特点是较容易上手,编程功能上相对简单一些。例如:JS语言、python语言等。编程语言功能较强大,可以用来开发规模较大的系统软件,或者做系统底层的开发。:例如 C 语言、C# 语言等),针对咱们浏览器。
      特点: 交互性,安全性,跨平台性。
      ==问:JS有几部分组成==
      ECMAScript:JavaScript的基本的语法
      BOM:Browser Object Model 浏览器对象模型
      DOM:Document Object Model 文档对象模型

    2. 02-案例三:使用JS完成注册页面的数据简单校验:JS的基本语法.avi

      问:怎么声明一个变量 
      var a = 10; 自动推导
      int b = 10;
      问:JS的数据类型 
      答:原始类型:

      • 数值型:number(使用isNaN(变量)判断是否是数值类型)
      • 字符型:string(单引号或者双引号)
      • 布尔型:boolean
      • 未定义型:undefined(为赋值的变量) var a;
      • 空型:null 针对对象的默认值 var b = null; 清空变量

      检测数据类型 typeof a; 不是函数 运算符
      引用了类型 Object

      问:=====的区别
      答:== :判断值是否相等
      ===:判断值相等类型也相同
      =赋值,==等于,===全等于

    3. 03-案例三:使用JS完成注册页面的数据简单校验:JS的通常开发的步骤.avi

      问: JS的开发步骤
      答:

      1. JS通常都由一个事件触发.
        • onload事件:浏览器加载完成触发
        • onclick事件:鼠标单击触发
      2. 触发一个函数,定义一个函数.
        function 函数名称(){
            //操作
        }
        
      3. 获得要操作的对象的控制权.
        var uValue = document.getElementById("username").value;
        if(uValue == ""){
            alert("用户名不能为空!");
            return false;
        }
        
    4. 04-案例三:使用JS完成注册页面的数据简单校验:代码实现.avi

      问: JS的两种引入方式

      • 页面内直接编写JS代码,JS代码需要使用<script></script>. 理论上可以写在HTML中的任意位置
      • 将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可. <script src=”文件路径”></script>
        问: 代码实现步骤
      1. 在表单标签中定义 onsubmit事件<form onsubmit=”return checkForm()”></form>
        注意:当返回值为true则提交表单
      2. 定义checkForm()函数,实现校验数据功能
        问: JS校验正则表达式就有两个方法:
        • String对象中的match方法
        • 正则对象:/正则表达式/.test(String) 是正则对象中的test方法.
        • 数组: str.match("正则表达式"); 正则.test("字符串");
        • Java 返回Boolean matches()
    5. 05-案例三:使用JS完成注册页面的数据简单校验:总结.avi

      问: JS 的外部引入方式写法 <script src="../js/文件.js"></script>

      案例三总结:
      功能: 完成表单数据校验:

      1. 在form标签中定义事件onsubmitreturn 函数()
      2. 获得标签 document.getElementById(“ID”)
        document.getElementsByName(); 返回数组
      3. JS引入的两种方式
        • 外部JS文件.js通过 <script type=”text/javascript” src=”路径”></script>
        • HTML内部写在<head></head>内部
      4. ==练习==
    1. 06-案例四:使用JS完成图片的滚动效果:需求和JS的定时介绍.avi

      问: 定时器的使用

      • 周期执行 setInterval(“函数名称()”,time)
      • 执行一次(到时则执行)setTimeout(“”,time)
    2. 01-案例一:使用JS实现图片轮播效果:需求和分析.avi

      问: 如何清除定时器
      答: clearInterval() clearTimeout()
      分析图片轮播实现步骤:

      • 创建一个HTML文件
      • 当页面加载的时候开始计时..使用onload事件..(onload表示页面加载完成之后执行触发)
      • 编写onload事件触发的函数.
      • 获得操作图片的控制权..document.getElementById()
      • 修改图片的src的属性..<img src=””/>
    3. 02-案例一:使用JS实现图片轮播效果:代码实现.avi

      ==练习==

    4. 03-案例二:使用JS实现定时弹出广告:需求和分析.avi

      • 使用定时函数
      • 清除定时函数
      • 修改CSS属性 display:显示block/隐藏none
    5. 04-案例二:使用JS实现定时弹出广告:代码实现.avi

      • 创建一个HTML页面
      • 确定事件:页面的加载事件
      • 触发一个函数,编写该函数.
      • 在函数中设置定时操作..定时执行一个显示的函数.
      • 操作CSS:对象.style.display = "" 对象.style.backgroundColor =""
      • 获得ID执行清除定时,重新设置定时,5秒钟隐藏.

      注意:一个页面只能有一个onload

    6. 05-案例二:使用JS实现定时弹出广告:总结:BOM的window对象.avi

      问: 什么是BOM
      答: BOM(Browser Object Model,浏览器对象模型)
      问: BOM中window对象的常用方法

      • 弹框alert() 弹出警告框 confirm() 确认框 prompt() 对话框
      • 计时器setTimeout() setInterval() clearTimeout clearInterval()
      • 打开新的窗口 open(“url”)

      注意:window中的对象属性函数在调用时可以省略window不写 window.alert(123)===alert(123)

    7. 06-案例二:使用JS实现定时弹出广告:总结:BOM的其他对象.avi

      问: BOM中对象都有哪些

      • Navigator对象: 浏览器基本信息
      • Screen对象: 浏览器的屏幕信息
      • History对象: 浏览器历史记录信息
      • Location对象: 浏览器地址栏 href 跳转
        通过JS访问网站地址有两种:window.open(地址) location.href = “地址”

    今日总结

    1. 什么是Javascript以及作用?
      Javascript是一种脚本语言,针对浏览器开发,可以实现网页的动态效果
      交互性,安全性,跨平台性

    2. 表单数据校验
      JS编程的流程:

      • 确定事件(onclick鼠标点击事件,onsubmit表单的提交事件,onload页面加载完成事件)
      • 定义函数实现功能
       function  函数名(参数){
           js代码
       }
      
      • 获取标签的控制权, 修改标签样式和属性
        给标签定义ID属性,通过document.getElementById(ID值)
      <div    id=”d1”> XXXX </div>
      var div = document.getElementById(“d1”);
      // 可以修改标签的样式  .style.样式 = “…..”;
      // 可以修改标签的属性  .属性名称 = “…..”;
      
    3. 图片轮播

      • 通过onload事件调用加载轮播函数
        注意:onload事件要写在body标签中
      • 定义功能函数
      • 计时器周期性的改变图片
        setInterval(“函数调用”,ms) 周期性的计时器
        setTimeout(“函数调用”,ms) 一次性的计时器
        改变图片:图片标签. src = “xxxxxx”
    4. 计时器

      var id = setInterval(“函数调用”,ms)  //周期性的计时器
      var id = setTimeout(“函数调用”,ms) //一次性的计时器
      // 清除计时器:
      clearInterval(ID)
      clearTimeout(ID)
      
    5. BOM(Broswer Object Model,浏览器对象模型)

      • window: 浏览器中的窗口
        特点:API调用不需要书写window
        三个框:警告框alert(), 确认框confirm() , 对话框prompt()
        三个函数:
        setInterval(“函数调用”,ms) 周期性的计时器
        setTimeout(“函数调用”,ms) 一次性的计时器
        open() 打开新的窗口访问地址
      • location: 浏览器的地址栏
        属性:href 改变浏览器地址栏的值
        location.href = “”
      • history: 浏览器历史记录
      • screen: 浏览器显示的屏幕
      • navigator: 浏览器的信息

    相关文章

      网友评论

        本文标题:CSS

        本文链接:https://www.haomeiwen.com/subject/cjiesxtx.html