JavaWeb入门（3）

JavaScript续
6.DOM简单学习：为了满足案例要求。
（1）功能：控制html文档的内容。
（2）代码：获取页面标签（元素）对象Element——获取对象：document.getElementById（“id值”）；
（3）操作Element对象：
修改属性值：明确获取对象的id——查看API文档，照可以修改的属性。
修改标签体内容：获取元素对象，使用innerHTML属性修改标签体内容。

7.事件简单学习：
（1）功能：某些组件被执行了某些操作后，出发了某些代码的执行。
（2）如何绑定事件：
第一种：直接在html标签上，指定时间的属性（操作），属性值就是js代码；
第二种：通过js获取元素对象，指定事件属性，设置一个函数。

8.BOM:
（1）概念：Browser Object Model 浏览器对象模型——将浏览器的各个组成部分封装成对象。
（2）组成：Window——窗口对象；Navigator——浏览器对象；Screen——显示器对象；History——历史记录对象；Location——地址栏对象。
（3）Window：窗口对象
【创建】
【方法】
alert（）；
confirm（）：如果用户点击确定，返回true，点击取消，返回false；
prompt（）：显示可提示用户输入的对话框；
open（）；
close（）：谁调用我，我关闭谁；
与定时器有关的方法：
setTimeout（）：一次性定时器；
clearTimeout（）：取消定时器；
setInterval（）：循环定时器；
clearTnterval（）。
【属性】
——获取BOM对象
history、location、navigator、screen；
——获取DOM对象
document
【特点】
Window对象不需创建可以直接使用
window引用可省略。
（4）Location：地址栏对象
【创建（获取）】
【方法】
reload（）重新加载当前文档。刷新。
【属性】
href ：设置或返回完整的URL。
（5）History：历史记录对象
【创建（获取）】
window.history
history
【方法】
back（）：加载history列表的前一个URL。
forward（）：加载history列表中的下一个URL。
go（参数）：加载history列表中的某个具体页面。
参数为正数（前进几个历史记录）；
参数为负数（后退几个历史记录）。
【属性】
length：返回当前窗口历史列表中的URL数量。

9.DOM：
（1）概念：Document Object Model 文档对象模型。
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
（2）W3C DOM 标准被分为3个不同的部分：
【核心 DOM】针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个的父对象
【XML DOM】针对XML文档的标准模型
【HTML DOM】针对HTML文档的标准模型
（3）核心DOM模型
【创建（获取）】在html dom模型中可以使用window对象获取
【方法】
——获取Element对象：
getElementById（）：根据id属性值获取元素。一般id值唯一；
getElementsByTagName（）：根据元素名称获取元素对象们。返回的是一个数组；
getElementsByClassName（）：根据元素Class属性值获取对象们。返回值是一个数组；
getElementsByName（）：根据name属性值获取对象们。
——获取其他DOM对象
createAttribute（name）；
createComment（）；
createElement（）；
createTextNode（）
【属性】
（4）Element：元素对象
【创建（获取）】
通过document来获取和创建
【方法】
removeAttribute（）：删除属性；
setAttribute（）：设置属性。
（5）Node：节点对象，其他5个的父对象
【特点】
所有dom对象都可以被认为是一个节点
【方法】
appendChild（）：向节点的子节点列表的结尾添加新的子节点。
removeChild（）：删除（并返回）当前节点的指定子节点。
replaceChild（）：用新节点替换一个子节点。
【属性】
parentNode 返回节点的父节点。

10.HTML DOM：
（1）标签体的设置和获取：innerHTML
（2）使用html元素对象的属性
（3）控制元素样式
使用元素的style属性来设置；
提前定义好类选择器的样式，通过元素的classname属性来设置其class属性值。

11.事件监听机制
（1）概念：某些组件被执行了某些操作后，触发某些代码的执行。
【事件】某些操作。如：单机，双击，键盘按下了，鼠标移动了；
【事件源】组件。如：按钮，文本输入框…
【监听器】代码；
【注册监听】将事件，事件源，监听器结合在一起。当事件源发生了某个事件，则触发执行某个监听器代码。
（2）常见的事件
【点击事件】
onclick：单击事件；
ondbclick：双击事件。
【焦点事件】
onblur：失去焦点；
onfocus：元素获得焦点。
【加载事件】
onload：一张页面或一张图完成加载。
【鼠标事件】
onmousedown：鼠标按钮被按下；
onmouseup：鼠标按钮被松开；
onmousemove：鼠标被移动；
onmouseout：鼠标从某元素松开。
【键盘事件】
onkeydown：某个键盘被按下；
onkeypress：某个键盘被按下并松开。
【选择和改变】
onchange：域的内容被改变；
onselect：文本被选中。
【表单事件】
onsubmit：确认按钮被电击；
conreset：重置按钮被电击。

Bootstrap
1.概念：一个前端开发的框架，来自Twitter，是目前很受欢迎的前端框架。基于HTML、CSS、JavaScript的，它简洁灵活。
【框架】一个半成品软件，开发人员可以在框架的基础上再进行开发，简化代码。
【好处】
定义了很多css样式和js插件。我们开发人员可以使用这些样式和插件得到丰富的页面效果。
响应式布局（同一套页面可以兼容不同分辨率的设备）。

2.快速入门
【步骤】
下载Bootstrap；
在项目中将这三个文件夹复制；
创建html页面，引入必要的资源文件。
（1）响应式布局
【实现】依赖于栅格系统：将一行平均分成12个格子
【步骤】
——定义容器。
相当于之前的table。
容器分类：container（两边有留白）；container-fluid（每种设备都是100%的宽度）
——定义行。
相当于之前的tr 样式：row
——定义元素。
指定该元素在不同设备上，所占的格子数目。样式：col-设备代号-格子数目。
设备代号：xs（超小屏幕，手机）；sm（小屏幕，平板）；md（中等屏幕，桌面显示屏）；lg（大屏幕）。
【注意】
一行中如果格子超过12，则超出部分自动换行。
栅格类属性可以向上兼容。
如果设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素占满一整行。
（2）全局CSS样式
【按键】【图片】【表格】【表单】【导航栏和分页】【轮播图】（直接可复制粘贴会改就行）

XML
1.概念：Extensible Markup Language 可扩展标记语言。
（1）可扩展：标签都是自定义的。
（2）功能：
【存储数据】配置文件；在网络中传输
（3）xml和html的区别：
xml标签都是自定义，html标签都是预定义的；
xml的语法严格，html语法松散；
xml是存储数据的，html是展示数据的。
（4）w3c：万维网联盟

2.语法
（1）基本语法：
后缀名.xml；
第一行必须定义为文档声明；
文档中有且仅有一个根标签；
属性值必须用引号包括起来（单双引号均可）；
标签必须正确关闭；
标签名称区分大小写
（2）快速入门：
（3）组成部分：
【文档声明】
——格式：<?xml 属性列表 ？>
——属性列表
version：版本号，必须的属性；
encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1；
standalone：是否独立。
【指令】（了解）结合CSS的
【标签】标签名称自定义的。
名称可以包含字母、数字以及其他的字符；
名称不能以数字或者标点符号开始；
名称不能以字母xml（或XML、Xml等等）开始；
名称不能包含空格。
【属性】id属性值唯一
【文本】
CDATA区：在该区域中的数据会被原样展示。
格式：<![CDATA[ 数据 ]]>
【约束】规定xml文档的书写规则
——作为框架的使用者：
能够在xml中引入约束文档，能够简单地读懂约束文档。
——分类
DTD：一种能够简单的约束技术；
Schema：一种复杂的约束技术。
——DTD
引入dtd文档到xml文档中（内部dtd和外部dtd）