1.前言
D30_Java_script 与 tomcat
2.BOM
- 浏览器对象模型
- js为我们提供了一些内置对象，控制和改变浏览器的一些行为和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
1. window属性
document 当前文档对象，主要是进行DOM操作
history 记录历史，可以回退
localStorage 存储到浏览器本地，没有过期时间
sessionStorage 存储到浏览器本地，是会话级别(关浏览器数据消失)
location 可以完成页面跳转
2. window方法
alert 警示框
confirm 确认框
prompt 输入框
-->
<script>
//1. history
function returnHtml(){
//回退到历史记录的上一级
window.history.back()
}
/* 2. localStorage 和 sessionStorage*/
function setData(){
window.localStorage.setItem('username','admin')
window.sessionStorage.setItem('password','root')
}
function getData(){
var username=window.localStorage.getItem('username');
console.log(username);
var password= window.sessionStorage.getItem('password');
console.log(password);
}
function removeData(){
window.localStorage.removeItem('username')
}
//3. location
function toBaidu(){
window.location.href="http://baidu.com"
}
//4. 弹框
function dialog(){
/* window.alert('警示内容');
var flag=window.confirm('确定要这样做吗？');
if(flag){
alert('我答应你');
}else{
alert('你也配？');
} */
var password=window.prompt('请输入你的银行卡密码：')
console.log(password);
}
</script>
</head>
<body>
<h1>01_bom页面</h1>
<input type="button" value="返回上一个界面" onclick="returnHtml()"/>
<input type="button" value="保存本地数据" onclick="setData()"/>
<input type="button" value="获取本地数据" onclick="getData()"/>
<input type="button" value="移除本地数据" onclick="removeData()"/>
<hr>
<input type="button" value="点击跳转至百度" onclick="toBaidu()">
<hr>
<input type="button" value="弹框汇总" onclick="dialog()">
</body>
</html>
3.DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
DOM：文档对象模型
描述：document对象，代表的就是当前文档
功能：对当前文档实现增删改查
查询
从整个文档内进行搜索
从某个范围内搜索(根据父级找子级)
根据子级找父级
找兄弟
属性操作
目标： 单标签、双标签
双标签的标签体内容进行操作
目标： 双标签
对元素的增删操作
-->
<script>
window.onload=function(){
//1.从整个文档内进行搜索
/* var usernameEle=document.getElementById("username");
console.log(usernameEle); */
/* var usernameEles=document.getElementsByName("user");
usernameEles.forEach((item)=>{console.log(item);}) */
//2. 从某个范围内搜索(根据父级找子级)
/* var form01=document.getElementById("form01")
console.log(form01);
var childs=form01.children;//拿到所有的子标签(不包括文本、不包括孙子级及后代)
console.log(childs);
for(var i=0;i<childs.length;i++){
console.log("----");
console.log(childs[i]);
}
var username=form01.firstElementChild
console.log(username);
var button=form01.lastElementChild;
console.log(button); */
//3. 根据子级找父级
/* var email=document.getElementById("email");
var form02= email.parentElement;
console.log(form02); */
//4. 找兄弟
/* var password=email.previousElementSibling;
var br=email.nextElementSibling;
console.log(password);
console.log(br); */
}
//5. 操作属性
function getParams(){
//获取到用户输入的用户名(获取到用户名元素的value属性值)
var username=document.getElementById("username")
//获取username的value属性值
//语法：元素名.属性名
console.log(username.value);
console.log(username.type);
console.log(username.id);
console.log(username.name);
//修改属性值
//语法：元素名.属性名="新值"
username.value="新值666";
username.id="sdfgh"
}
function changeImg(){
document.getElementById("img01").src="img/1681181342911.png"
}
//6. 操作双标签内容
function changeInner(){
//6.1 获取双标签内容
var a01=document.getElementById("a01")
var text=a01.innerText
console.log(text);
var html=a01.innerHTML
console.log(html);
//6.2 修改双标签内容
// a01.innerText="百<i>度</i>"
a01.innerHTML="百<i>度</i>"
}
//7. 对元素的增删
function changeUl(){
//7.1 在列表增加语言 c++
//a. 创建一个li标签
var li=document.createElement("li");
//b. 设置li标签的内容为c++
li.innerText="c++66"
// var text=document.createTextNode('c++')
// li.appendChild(text)
//c. 将li标签追加到ul标签内
//c. 将li标签添加到js前
//d. 将li标签替换js
var ul= document.getElementById("names");
// ul.appendChild(li)
var js= document.getElementById("js");
// ul.insertBefore(li,js)
ul.replaceChild(li,js)
//7.2 删除
document.getElementById("img01").remove()
document.getElementById("form01").remove()
}
</script>
</head>
<body>
<h1>标题</h1>
<form action="" id="form01">
username:<input type="text" id="username" name="user"><br/>
password:<input type="password" id="password" name="user"><br/>
email:<input type="text" id="email" name="user"><br/>
<div>
<input/>
</div>
<a href="http://baidu.com" id="a01">点击<i>跳转</i></a><br/>
<img src="aaaa" id="img01"/><br/>
<input type="button" value="提交" onclick="getParams()"/>
</form>
<input type="button" value="点击换图" onclick="changeImg()"/>
<input type="button" value="双标签内容操作" onclick="changeInner()"/>
<ul id="names">
<li>java</li>
<li>mysql</li>
<li>python</li>
<li>html</li>
<li>css</li>
<li id="js">js</li>
<li>go</li>
</ul>
<input type="button" value="操作" onclick="changeUl()">
</body>
</html>
4.正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
正则
1. 正则如何创建
var reg=/要求/
2. 正则如何使用
正则对象下的方法
test 验证字符串是否符合正则要求，返回值是boolean
字符串对象下的方法
match 匹配提取
replace 匹配替换
3. 正则的编写
用户名：字母+数字+下画线，长度5-10
-->
<script>
var reg=/o/gi;
var username='HelloWOrld'
//验证字符串是否符合正则要求
var flag=reg.test(username);
console.log(flag);
//匹配提取
var result=username.match(reg);
console.log(result);
var result02=username.replace(reg,'a');
console.log(username);
console.log(result02);
function checkUser(){
var user=document.getElementById("user").value;
//用户名：字母+数字+下画线，长度5-10
var usernameReg=/^[a-zA-Z0-9_]{5,10}$/
//验证码：
var passwordReg=/^[0-9]{6}$/
var errMsg=document.getElementById("errMsg")
var flag=usernameReg.test(user);
if(flag){
errMsg.innerText="√"
}else{
errMsg.innerText="格式不对"
}
}
</script>
</head>
<body>
<input type="text" id="user">
<span id="errMsg"></span><br/>
<input type="button" value="点击" onclick="checkUser()"/>
</body>
</html>
5.XML
-
可扩展标记语言
- 标签可以自定义
- 约束文件(定义当前xml中可以有哪些标签，有哪些属性、顺序)
-
功能：配置文件
-
目标：java语言是可以读取xml的内容
-
文档结构
- <?xml version="1.0" encoding="UTF-8"?>
-
指定约束文件
- dtd
- Schema(xxx.xsd)
-
标签
-
语法规则
- 和html一样
-
感受一下java程序如何读取xml配置文件
-
步骤
- 创建一个xml文件
- 导入dom4j的jar包
- 创建解析器
- 读取根节点‘
- 读取数据
- …
-
代码
-
package com.atguigu.demo; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.DocumentException; import org.dom4j.Element; import org.dom4j.io.SAXReader; import java.util.List; public class XmlDemo { public static void main(String[] args) throws DocumentException { //1. 创建解析器对象 SAXReader reader=new SAXReader(); //2. 解析器对象加载xml文件,获取文档对象(Document) Document document = reader.read(XmlDemo.class.getClassLoader().getResourceAsStream("employees.xml")); //3. 根据文档对象获取根节点 Element rootElement = document.getRootElement(); System.out.println(rootElement); //4. 获取内容 Element manager = rootElement.element("employee"); Element name = manager.element("name"); String text = name.getText(); System.out.println("text = " + text); List<Element> employee = rootElement.elements(); for (Element element : employee) { System.out.println(element.element("name").getText()); } //寻找属性值 Element manager1 = rootElement.element("manager"); Attribute id = manager1.attribute("id"); String value = id.getValue(); System.out.println("value = " + value); } }
-
-
6.Tomcat
-
服务器
- 硬件
- 计算机(操作系统)
- 软件
- tomcat
- 硬件
-
安装tomcat
-
将tomcat解压到一个无中文无空格的目录下
-
条件
- 必须正确配置JAVA_HOME的环境变量
-
-
启动和停止服务器
- startup.bat
- shutdown.bat
6.1 Tomcat的目录结构
-
bin
- tomcat的命令文件
-
conf
- tomcat的配置文件所在目录
-
lib
- jar包
-
logs
- 日志文件所在的目录
-
temp
- 临时目录
-
webapps
- 我们需要部署的项目所在的目录
-
work
- 工作目录(jsp)
6.2 部署一个自己写的项目
6.2.1 方式一
- 创建一个项目
- 将项目拷贝到webapps内
- 启动服务器
- 客户端通过网络请求请求该项目的资源
6.2.2 方式二
-
创建一个项目
-
将项目打包
- xxx.war(Maven去打包)
-
将war包拷贝到webapps内
-
启动服务器
-
客户端通过网络请求请求该项目的资源
6.2.3 方式三
-
创建一个项目
-
让tomcat去引用这个项目
-
tomcat的conf下创建Catalina/localhost目录,并在该目录下准备一个app.xml文件
-
内容
-
<!-- path: 项目的访问路径,也是项目的上下文路径,就是在浏览器中,输入的项目名称 docBase: 项目在磁盘中的实际路径 --> <Context path="/app" docBase="D:\mywebapps\app" />
-
-
6.3 解决启动服务器的乱码问题
- 修改tomcat的安装目录\conf\logging.properties
- 将UTF-8改为GBK
6.4 修改tomcat的端口号
-
修改tomcat的安装目录\conf\server.xml
-
将8080修改即可
-
<Connector port="8888" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />
-
672
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
