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()
clearTimeout
clearInterval()
- 打开新的窗口
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: 浏览器中的窗口
网友评论