Javaweb第三天笔记
[TOC]
内容回顾
什么是CSS：层叠样式表
CSS的作用：对网页进行美化
-
CSS选择器：
- 元素选择器：
div{ border:1px solid blue; width:40px; height:45px; } - ID选择器：
#d1{ border:2px solid red; } - 类选择器：
.divClass{ border:2px solid yellow; }
- 元素选择器：
CSS浮动
div是块级元素单独一行，span是行级元素多个一行
要想让div一行显示多个，可以使用浮动
标签 float：left/right
清除浮动clear:both-
CSS盒子模型
如果一个页面布局复杂的情况下，我们可以把每一块都封装成一个小盒子，然后可以把多个小盒子放到一个大盒子里面，然后用大盒子在页面上布局
今日要点
- 什么是Javascript?
- ==Javascript实现表单校验==
- Javascript实现图片轮播
- ==掌握Javascript定时器的使用==
- BOM对象
要求: 会使用Javascript实现表单校验
-
01-案例三：使用JS完成注册,页面的数据简单校验：需求和JS的概述.avi
问：什么是Javascript，它有哪些特点？
答：JS是一种脚本语言(脚本语言是解释执行语言。特点是较容易上手，编程功能上相对简单一些。例如：JS语言、python语言等。编程语言功能较强大，可以用来开发规模较大的系统软件，或者做系统底层的开发。：例如 C 语言、C# 语言等)，针对咱们浏览器。
特点: 交互性，安全性，跨平台性。
==问：JS有几部分组成==
ECMAScript：JavaScript的基本的语法
BOM：Browser Object Model 浏览器对象模型
DOM：Document Object Model 文档对象模型 -
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问：
==和===的区别
答：==：判断值是否相等
===：判断值相等类型也相同
=赋值，==等于，===全等于 -
03-案例三：使用JS完成注册页面的数据简单校验：JS的通常开发的步骤.avi
问: JS的开发步骤
答:- JS通常都由一个事件触发.
- onload事件：浏览器加载完成触发
- onclick事件：鼠标单击触发
- 触发一个函数,定义一个函数.
function 函数名称(){ //操作 } - 获得要操作的对象的控制权.
var uValue = document.getElementById("username").value; if(uValue == ""){ alert("用户名不能为空！"); return false; }
- JS通常都由一个事件触发.
-
04-案例三：使用JS完成注册页面的数据简单校验：代码实现.avi
问: JS的两种引入方式
- 页面内直接编写JS代码,JS代码需要使用
<script></script>.理论上可以写在HTML中的任意位置 - 将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
<script src=”文件路径”></script>
问: 代码实现步骤
- 在表单标签中定义 onsubmit事件
<form onsubmit=”return checkForm()”></form>
注意：当返回值为true则提交表单 - 定义checkForm()函数，实现校验数据功能
问: JS校验正则表达式就有两个方法:- String对象中的match方法
- 正则对象：/正则表达式/.test(String) 是正则对象中的test方法.
- 数组：
str.match("正则表达式"); 正则.test("字符串"); - Java 返回Boolean matches()
- 页面内直接编写JS代码,JS代码需要使用
-
05-案例三：使用JS完成注册页面的数据简单校验：总结.avi
问: JS 的外部引入方式写法
<script src="../js/文件.js"></script>案例三总结：
功能: 完成表单数据校验：- 在form标签中定义事件
onsubmit要return 函数() - 获得标签
document.getElementById(“ID”)
document.getElementsByName();返回数组 - JS引入的两种方式
- 外部JS文件
.js通过<script type=”text/javascript” src=”路径”></script> - HTML内部写在
<head></head>内部
- 外部JS文件
- ==练习==
- 在form标签中定义事件
-
06-案例四：使用JS完成图片的滚动效果：需求和JS的定时介绍.avi
问: 定时器的使用
- 周期执行
setInterval(“函数名称()”,time) - 执行一次（到时则执行）
setTimeout(“”,time)
- 周期执行
-
01-案例一：使用JS实现图片轮播效果：需求和分析.avi
问: 如何清除定时器
答:clearInterval()clearTimeout()
分析图片轮播实现步骤：- 创建一个HTML文件
- 当页面加载的时候开始计时..使用
onload事件..(onload表示页面加载完成之后执行触发) - 编写onload事件触发的函数.
- 获得操作图片的控制权..
document.getElementById() - 修改图片的src的属性..
<img src=””/>
-
02-案例一：使用JS实现图片轮播效果：代码实现.avi
==练习==
-
03-案例二：使用JS实现定时弹出广告：需求和分析.avi
- 使用定时函数
- 清除定时函数
- 修改CSS属性
display:显示block/隐藏none
-
04-案例二：使用JS实现定时弹出广告：代码实现.avi
- 创建一个HTML页面
- 确定事件：页面的加载事件
- 触发一个函数，编写该函数.
- 在函数中设置定时操作..定时执行一个显示的函数.
- 操作CSS：
对象.style.display = ""对象.style.backgroundColor ="" - 获得ID执行清除定时，重新设置定时，5秒钟隐藏.
注意：一个页面只能有一个onload
-
05-案例二：使用JS实现定时弹出广告：总结：BOM的window对象.avi
问: 什么是BOM
答: BOM(Browser Object Model,浏览器对象模型)
问: BOM中window对象的常用方法- 弹框
alert() 弹出警告框confirm() 确认框prompt() 对话框 - 计时器
setTimeout()setInterval()clearTimeoutclearInterval() - 打开新的窗口
open(“url”)
注意：window中的对象属性函数在调用时可以省略window不写
window.alert(123)===alert(123) - 弹框
-
06-案例二：使用JS实现定时弹出广告：总结：BOM的其他对象.avi
问: BOM中对象都有哪些
- Navigator对象: 浏览器基本信息
- Screen对象: 浏览器的屏幕信息
- History对象: 浏览器历史记录信息
- Location对象: 浏览器地址栏
href跳转
通过JS访问网站地址有两种：window.open(地址)location.href = “地址”
今日总结
什么是Javascript以及作用？
Javascript是一种脚本语言，针对浏览器开发，可以实现网页的动态效果
交互性，安全性，跨平台性-
表单数据校验
JS编程的流程：- 确定事件（onclick鼠标点击事件，onsubmit表单的提交事件，onload页面加载完成事件）
- 定义函数实现功能
function 函数名(参数){ js代码 }- 获取标签的控制权, 修改标签样式和属性
给标签定义ID属性，通过document.getElementById(ID值)
<div id=”d1”> XXXX </div> var div = document.getElementById(“d1”); // 可以修改标签的样式 .style.样式 = “…..”; // 可以修改标签的属性 .属性名称 = “…..”; -
图片轮播
- 通过onload事件调用加载轮播函数
注意：onload事件要写在body标签中 - 定义功能函数
- 计时器周期性的改变图片
setInterval(“函数调用”,ms)周期性的计时器
setTimeout(“函数调用”,ms)一次性的计时器
改变图片：图片标签.src = “xxxxxx”
- 通过onload事件调用加载轮播函数
-
计时器
var id = setInterval(“函数调用”,ms) //周期性的计时器 var id = setTimeout(“函数调用”,ms) //一次性的计时器 // 清除计时器： clearInterval(ID) clearTimeout(ID) -
BOM(Broswer Object Model,浏览器对象模型)
- window: 浏览器中的窗口
特点：API调用不需要书写window
三个框：警告框alert(), 确认框confirm(), 对话框prompt()
三个函数：
setInterval(“函数调用”,ms)周期性的计时器
setTimeout(“函数调用”,ms)一次性的计时器
open()打开新的窗口访问地址 - location: 浏览器的地址栏
属性：href 改变浏览器地址栏的值
location.href = “” - history: 浏览器历史记录
- screen: 浏览器显示的屏幕
- navigator: 浏览器的信息
- window: 浏览器中的窗口
