JavaWeb--JavaScript

概念

一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。
JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

JavaScript语法

ECMAScript

客户端脚本语言的标准

基本语法：

与html结合方式

内部JS：

定义

HTMLDOM

innerHTML

HTML DOM
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- ```
    <div id="div1">
      div
    </div>
<script>
    var div = document.getElementById("div1");
    //替换标签中的元素
    div.innerHTML = "<input type = text>"
    //在标签中追加元素
    div.innerHTML += "<input type = text>"
</script>
```
- 控制元素样式
  - 使用元素的style属性来设置
    如：
    //修改样式方式1
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    //font-size--> fontSize
    div1.style.fontSize = "20px";
  - 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
    
    .d1{
    border: 1px solid red;
    width: 100px;
    height: 200px;
    }
    
    div2.className = "d1"
  - 通过这种方式可以和用户形成样式更改动态的互动，相反css则是静态样式

XML

概念

Extensible Markup Language 可扩展标记语言
可扩展：标签都是自定义的。 < user> < student>

功能

存储数据
- 配置文件
- 在网络中传输
xml与html的区别
1. xml标签都是自定义的，html标签是预定义。
2. xml的语法严格，html语法松散
3. xml是存储数据的，html是展示数据
w3c:万维网联盟

语法

基本语法：
- xml文档的后缀名 .xml
- xml第一行必须定义为文档声明
- xml文档中有且仅有一个根标签
- 属性值必须使用引号(单双都可)引起来
- 标签必须正确关闭
- xml标签名称区分大小写
例子：

<?xml version="1.0"?>

<users>
    <user id='1'>
        <name>zhangsan</name>
        <age>18</age>
        <gender>man</gender>
    </user>

    <user id='2'>
        <name>lisi</name>
        <age>19</age>
        <gender>female</gender>
    </user>

</users>

组成部分

文档声明
- 格式：< ?xml 属性列表 ?> （问号与<>不能有空格）
- 属性列表：
  - version：版本号，必须的属性
  - encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
  - standalone：是否独立
    - 取值：
      - yes：不依赖其他文件
      - no：依赖其他文件
- 指令(了解)：结合css的
  - < ?xml-stylesheet type="text/css" href="a.css" ?>
- 标签：标签名称自定义的
  - 规则：
    - 名称可以包含字母、数字以及其他的字符
    - 名称不能以数字或者标点符号开始
    - 名称不能以字母 xml（或者 XML、Xml 等等）开始
    - 名称不能包含空格
- 属性：
  - id属性值唯一
- 文本：
  - CDATA区：在该区域中的数据会被原样展示
    - 格式： < ![CDATA[ 数据 ]]>

约束

约束：规定xml文档的书写规则
- 作为框架的使用者(程序员)：
  1. 能够在xml中引入约束文档
  2. 能够简单的读懂约束文档
- 分类：
  1. DTD:一种简单的约束技术
  2. Schema:一种复杂的约束技术
- DTD：
```
* 引入dtd文档到xml文档中
		* 内部dtd：将约束规则定义在xml文档中
* 外部dtd：将约束的规则定义在外部的dtd文件中
     * 本地：< !DOCTYPE 根标签名 SYSTEM "dtd文件的位置">
     * 网络：< !DOCTYPE 根标签名 PUBLIC "dtd文件名字" "dtd文件的位置URL">
```
- Schema:
  - 引入：
  - 在schema中, 每个约束模式文档都可以被赋予一个唯一的使用URI标识的名称空间, Xml文件引schema约束的时候, 便是通过这个名称空间来声明来自哪个shema约束文档的.在xsd文档中, 至少要包括shema根元素和xml模式命名空间的定义, 元素定义等
    
    在schema中声明schema根元素:
  - 根元素包括模式的约束, xml模式空间命名的定义, 其他命名空间的定义, 版本信息, 语言信息和其他的信息.
    
    xmlns=URI: 使用默认的名称空间
    
    　　targetNamespace=:URI: 指定schema文档中声明的元素属于哪个命名空间
    
    　　xmlns:xsd=URI: 使用名称空间引入多个xml shema文档
    
    　　elementFormaDefault= " ": 指定shema文档中声明的跟元素和所有子元素都属于targetnamespace锁指定的名称空间
  - 填写xml文档的根元素
  - 引入xsi前缀. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  - 引入xsd文件命名空间. xsi:schemaLocation="http://www.itcast.cn/xml student.xsd"
  - 为每一个xsd约束声明一个前缀,作为标识 xmlns="http://www.itcast.cn/xml"
    < students xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://www.itcast.cn/xml"
    xsi:schemaLocation="http://www.itcast.cn/xml student.xsd">

解析

解析：操作xml文档，将文档中的数据读取到内存中
- 操作xml文档
  1. 解析(读取)：将文档中的数据读取到内存中
1. 写入：将内存中的数据保存到xml文档中。持久化的存储
- 解析xml的方式：
  1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树
    - 优点：操作方便，可以对文档进行CRUD的所有操作
    - 缺点：占内存
  2. SAX：逐行读取，基于事件驱动的。
    - 优点：不占内存。
    - 缺点：只能读取，不能增删改

常见的解析器

JAXP：sun公司提供的解析器，支持dom和sax两种思想
DOM4J：一款非常优秀的解析器
Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据
PULL：Android操作系统内置的解析器，sax方式的

Jsoup解析器

jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
快速入门：
- 步骤：
  1. 导入jar包
  2. 获取Document对象
  3. 获取对应的标签Element对象
  4. 获取数据
- 代码：

public static void main(String[] args) throws IOException, URISyntaxException {
    //获取Document对象，根据xml文档获取
    //获取student.xml的path,如果路径有中文或空格，改成.toURI().getPath()
    String path = JsoupDemo01.class.getClassLoader().getResource("student.xml").toURI().getPath();
    //解析xml文档，加载文档进内存，获取dom树------>Document
    Document document = Jsoup.parse(new File(path),"utf-8");
    //获取元素对象 Element
    Elements elements = document.getElementsByTag("name");
    //返回name标签对象的个数
    System.out.println(elements.size());
    //获取第一个name标签的文本输出在控制台
    Element element = elements.get(0);
    String text = element.text();
    System.out.println(text);
}

对象的使用

Jsoup：工具类，可以解析html或xml文档，返回Document
- parse：解析html或xml文档，返回Document
  - parse(File in, String charsetName)：解析xml或html文件的。
  - parse(String html)：解析xml或html字符串
  - parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象
Document：文档对象。代表内存中的dom树
- 获取Element对象
  - getElementById(String id)：根据id属性值获取唯一的element对象
  - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
  - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
  - getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
Elements：元素Element对象的集合。可以当做 ArrayList< Element>来使用
Element：元素对象
- 获取子元素对象
  - getElementById(String id)：根据id属性值获取唯一的element对象
  - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
  - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
  - getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
- 获取属性值
  - String attr(String key)：根据属性名称获取属性值
- 获取文本内容
  - String text():获取文本内容
  - String html():获取标签体的所有内容(包括子标签的字符串内容
Node：节点对象
- 是Document和Element的父类
快捷查询方式：
1. selector:选择器
  - 使用的方法：Elements select(String cssQuery)
    - 语法：参考Selector类中定义的语法
    - ```
    Elements select1 = document.select("student[number=\"heima_0001\"]");
    System.out.println(select1);
```
2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
  - 使用Jsoup的Xpath需要额外导入jar包。
  - 查询w3cshool参考手册，使用xpath的语法完成查询
  - 代码：
    //1.获取student.xml的path
    String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
    //2.获取Document对象
    Document document = Jsoup.parse(new File(path), "utf-8");

JavaScript--事件,监听机制

概念

某些组件被执行了某些操作后，触发某些代码的执行。
事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮文本输入框...
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码

常见的事件

点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
加载事件：
1. onload：一张页面或一幅图像完成加载。
鼠标事件：
1. onmousedown 鼠标按钮被按下。
  1. 定义方法时，定义一个形参接收event对象
  2. event对象的button属性可以获取鼠标按钮键被点击了
  3. 0，1，2依次为左键，中建，右键
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开
键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开
选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
表单事件：
1. onsubmit 确认按钮被点击。
  1. 方法返回true或者不返回，就会被提交表单，为false则阻止提交
2. onreset 重置按钮被点击

案例:表格全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .over{
            background-color: pink;
        }
        .out{
            background-color: white;
        }
    </style>

    <script>

        window.onload  = function(){
            document.getElementById("selectAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for (let i = 0; i < cbs.length; i++) {
                    cbs[i].checked = true;
                }
            }

            document.getElementById("unSelectAll").onclick = function(){
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = false;
                }

            }

            document.getElementById("selectRev").onclick = function(){
                var cbs = document.getElementsByName("cb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = !cbs[i].checked
                }

            }


            document.getElementById("firstcb").onclick = function(){
                var cbs = document.getElementsByName("cb");
                var firstcb = document.getElementById("firstcb");
                for (var i = 0; i < cbs.length; i++) {
                    cbs[i].checked = firstcb.checked;
                }

            }

            var trs = document.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmouseover = function(){
                    this.className = "over"
                }

                trs[i].onmouseout = function(){
                    this.className = "out"
                }

            }
        }

    </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

案例:表单检验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }
    .error{
        color: red;
    }
</style>
<script>
    window.onload = function () {
        //表单绑定总onsubmit事件，同时内置监听器监听所有表单各项的返回值判断
        document.getElementById("form").onsubmit = function () {
            //调用所有表单各项的判断校验方法
            return checkUsername() && checkPassword();
        }

        //给用户名和密码绑定离焦事件
        //加括号就是代码执行到此处直接执行该方法,不带括号是赋值
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;

        function checkUsername() {
            var reg = /^\w{6,12}$/;
            var username = document.getElementById("username").value;
            var flag = reg.test(username);
            var s_username = document.getElementById("s_username");
            if (flag){
                //提示对勾
                s_username.innerHTML = "<img src='img/gou.png' width='20px' height='20x'>";
            }else{
                //提示红色的用户名有误
                s_username.innerHTML = "用户名不符合规格";
            }
            return flag;
        }

        function checkPassword() {
            var reg = /^\w{6,12}$/;
            var password = document.getElementById("password").value;
            var flag = reg.test(password);
            var s_password = document.getElementById("s_password");
            if (flag){
                //提示对勾
                s_password.innerHTML = "<img src='img/gou.png' width='20px' height='20x'>";
            }else{
                //提示红色的用户名有误
                s_password.innerHTML = "密码不符合规格";
            }
            return flag;
        }

    }
</script>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="get" id="form">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" name="username" id="username" placeholder="请输入用户名">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="password" id="password" placeholder="请输入密码">
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center" ><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

Bootstrap

概念

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷
一个前端开发的框架
- 框架：一个半成品软件，开发人员可以在框架基础上再进行开发，简化编码
- 好处：
  - 定义了很多的css样式和js插件，我们开发人员可以直接使用这些样式和插件得到丰富的页面效果
  - 响应式布局
    - 同一套页面可以兼容不同分辨率的设备

快速入门

下载Bootstrap
在项目中将这三个文件夹复制
创建html页面，引入必要的资源文件

响应式布局

同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
步骤：
1. 定义容器。相当于之前的table、
  - 容器分类：
    1. container：两边留白
    2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
  - 设备代号：
    1. xs：超小屏幕手机 (<768px)：col-xs-12
    2. sm：小屏幕平板 (≥768px)
    3. md：中等屏幕桌面显示器 (≥992px)
    4. lg：大屏幕大桌面显示器 (≥1200px)
- 注意：
  1. 一行中如果格子数目超过12，则超出部分自动换行。
  2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
  3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

CSS样式和JS插件

全局CSS样式：
- 按钮：class="btn btn-default"
- 图片：
  - class="img-responsive"：图片在任意尺寸都占100%
  - 图片形状
    - < img src="..." alt="..." class="img-rounded">：方形
    - < img src="..." alt="..." class="img-circle"> ：圆形
    - < img src="..." alt="..." class="img-thumbnail"> ：相框
- 表格
  - table
  - table-bordered
  - table-hover
- 表单
  - 给表单项添加：class="form-control"

组件：
- 导航条
- 分页条
插件：
- 轮播图
data-toggle：触发事件的类型，如 modal，popover，tooltips 等

data-target ：事件的作用对象。

posted @ 2022-10-19 21:42 Joe_ximu 阅读(22) 评论(0) 编辑收藏举报

刷新页面返回顶部

Joe_ximu

JavaWeb--JavaScript

JavaWeb--JavaScript

概念

功能

JavaScript发展史

JavaScript语法

ECMAScript

HTMLDOM

innerHTML

XML

概念

功能

语法

组成部分

约束

解析

常见的解析器

Jsoup解析器

对象的使用

JavaScript--事件,监听机制

概念

常见的事件

案例:表格全选

案例:表单检验

Bootstrap

概念

快速入门

响应式布局

CSS样式和JS插件

公告