javaWeb的记忆留痕：

普通的NPC

已于 2024-08-03 11:53:07 修改

阅读量1k

点赞数 22

分类专栏：学习心得文章标签： javascript 笔记前端 java tomcat

于 2024-08-03 11:36:40 首次发布

本文链接：https://blog.csdn.net/bg1213767607/article/details/140814902

版权

学习心得专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（1）JavaScript：

JavaScript 语句向浏览器发出的命令。面向的是客户端的代码，个人理解是，用来传输前端的数据，传递一个值或者一些数据。

1.JavaScript的代码位置：

写在<script> 标签内部，而<script>标签可以位于，html文件里面的<body>或者<head>标签内部，两者均可。放在<body>，<head>标签中二者的主要区别：

执行时机:
（1）放在<body>标签内部: 代码会在 HTML 文档加载完成后立即执行。
（2）放在 <head>标签内部或者<body>标签外部: 代码会在 HTML 文档开始加载时执
行。

2.位置：除了放在HTML里面还可以写在一个 .js文件里面，然后将这个文件导入到HTML里面

核心代码导入：

<script type="text/javaScript" src="js文件的路径"><script>

2.javaScript里面的DOM元素：

NPC理解：JavaScript就是用来传递数据，而DOM元素就是一个对象

相对于是面向一个对象去传输数据。比如HTML文档里面把标签，元素等等都可以看做一个对象，进行数据的传递，取值的等等

3.JavaScript空格的处理：

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面

的两行代码是等效的,让代码更好看，视觉上更“美观”

var name="彭于晏";
var name = "彭于晏";

4.javaScript数据的定义：

（不介绍语法，就只是留一个记忆痕迹，方便以后查询使用。）

<1>定义变量：JavaScript定义变量用var来定义，不多解释了，ES6风格（专栏里面有）的话可以选择let来用

定义数据里面都没什么太特殊的，对比java来记忆就行了，比如数组的创建：

var cars=new Array("Audi","BMW","Volvo");

<2>定义对象的话，采用键值对形式：

var You_person = {
    name = "彭于晏",
     age = "20",
     speakes = "坏掉的东西才会停下来，但你不会坏，你也不会停"
}

对于 You_person这个对象就有三个属性：name，age，speakes

取出属性和java一样：You_person.name ,You_person.age ,You_person.speakes

函数的定义：

//无形参，主要是了解这种模版，其余方法体内部，和形参的位置和java的没区别
function 函数名(){

//方法体内部逻辑代码

}

//带有形参的：
function 函数名(a,b){

//方法体内部的逻辑代码

}

(2）CSS

javaWeb学习：css的基础代码要会读得懂，稍微会做一些修改

css：就是让前端界面设计更加的美观，让用户体验感更好：比如设置字体，背景颜色，文本框位置等等

介绍css重要的几个模块：

选择器：优先级说明
行内样式>ID选择器>class选择器>元素选择器

1.模块：选择器

元素选择器: h1,p, div
类选择器:.my-class
ID 选择器: #my-id
属性选择器: [type="text"]
组合选择器: h1，p, div > p, ul li
伪类和伪元素选择器::hover,:active,::before,::after

2.模块：属性

字体相关: font-family,font-size,font-weight
颜色相关: color, background-color
尺寸相关: width, height, margin, padding
布局相关: display, position, float,flex
边框相关: border-width,border-color,border-style
文本相关: text-align,text-decoration, line-height

3. 模块：函数

颜色函数: rgb(),rgba(),hsl(),hsla()
长度函数: calc(),var()
变换函数:translate(),scale(),rotate(),skew()

4.css声明：

1.属性
属性是 CSS 中的关键词,用于定义元素的样式特性。
常见的属性有 color、font-size、margin、display等:

2.值
值是与属性相对应的具体数值或关键词。
值决定了属性的具体表现形式,如 color:red;、font-size:16px;等。

5.css里面需要的引入方式：

人话：类似于我们写篇作文，有逆序，插叙，倒序的手法，本质就是要把那段文本内容引进去。

css里面个人推荐的两种引入方式：

1.内嵌样式

人话：直接在标签内部，对 “属性” 进行设置，然后对 “值” 进行修改，比如下图的

color就是属性，red就是值， font-size就是属性，16px就是值

优点：快速为单个元素设置样式

缺点：大规模的css出现，将不会利于样式的复用和维护，

<div style="color: red; font-size: 16px;">这是一个内嵌样式的例子</div>

2.1.外部样式表

人话：将css的代码写在单独的 .css文件里面引入，和.js文件的引入一样

优点：

样式与内容完全分离,提高了代码的可维护性。
样式可以被多个页面共享,提高了代码的可复用性。

缺点：

需要额外的 HTTP 请求来加载样式表。

<head>
  <link rel="stylesheet" href="styles.css">
</head>

以上css的 api的目的：为了让后端能看懂大多前端的代码，不是专门研究前端的代码，谢谢！

记忆痕迹！！！然后用的时候来找！

我个人之前容易弄混的api：

（1）innerHTML 属性，表示获取/设置起始标签和结束标签中的内容，比如设置的内容里面还有标签，标签里面有自己的内容，输出的时候按照标签的特性输出HTML内容
（2）innerText 属性，表示获取/设置起始标签和结束标签中的文本，比如设置的内容里面还有标签，标签里面也有自己的内容，但输出的时候是纯文本，连那个表签名和文本内容一起输出了

除了学习：JavaScript和css，还需要学习 dom对象，dom4j，json，Jquery, EL表达式

（3）dom对象和dom4j

dom4j和普通的dom对象的区别：两个都是针对文档的，比如HTML或者xml文档：

只是dom4j对文档的解析操作更加简单，是做过了优化的。

普通的dom对象想要解析一个文档里面的内容流程：（1）我们需要一个工厂类实例，（2）去拿到对应的文档解析器（3）利用文档解析器，解析出我们的文档对象，（4）然后对这个文档进行我们需要的信息提取，是这样理解吗，原始的dom对象处理xml文件

1.dom对象解析文档：

import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;
import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;

public class DOMExample {
    public static void main(String[] args) {
        try {
            // 创建 DocumentBuilderFactory 实例,用于配置解析器
            DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
            // 创建 DocumentBuilder 实例
            DocumentBuilder builder = factory.newDocumentBuilder();
            // 解析 "example.xml" 文件,获得 Document 对象
            Document document = builder.parse("example.xml");

            // 获取 XML 文档的根元素
            Element root = document.getDocumentElement();
            // 获取所有 "book" 元素
            NodeList nodes = root.getElementsByTagName("book");

            // 遍历所有 "book" 元素
            for (int i = 0; i < nodes.getLength(); i++) {
                // 获取当前节点
                Node node = nodes.item(i);
                // 检查节点类型是否为元素节点
                if (node.getNodeType() == Node.ELEMENT_NODE) {
                    // 将节点强制转换为 Element 类型
                    Element book = (Element) node;
                    // 获取 "book" 元素中的 "title" 和 "author" 子元素,并输出它们的文本内容
                    System.out.println("Title: " + book.getElementsByTagName("title").item(0).getTextContent());
                    System.out.println("Author: " + book.getElementsByTagName("author").item(0).getTextContent());
                }
            }
        } catch (Exception e) {
            // 捕获并打印异常信息
            e.printStackTrace();
        }
    }
}

2.使用的是dom4j解析文档：

import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;

import java.io.File;

public class DOM4JExample {
    public static void main(String[] args) {
        try {
            // 创建 SAXReader 对象,用于解析 XML 文档
            SAXReader reader = new SAXReader();
            // 解析 "example.xml" 文件,获得 Document 对象
            Document document = reader.read(new File("example.xml"));

            // 获取根元素
            Element root = document.getRootElement();
            // 获取所有 "book" 元素
            java.util.List<Element> books = root.elements("book");

            // 遍历所有 "book" 元素
            for (Element book : books) {
                // 获取 "book" 元素中的 "title" 和 "author" 子元素,并输出它们的文本内容
                System.out.println("Title: " + book.elementText("title"));
                System.out.println("Author: " + book.elementText("author"));
            }
        } catch (DocumentException e) {
            // 捕获并打印异常信息
            e.printStackTrace();
        }
    }
}

注释:
1.创建 SAXReader 对象,用于解析 XML 文档。SAXReader 是 DOM4)提供的主要解析器
类。
2.使用 read()方法解析"example.xml" 文件,获得 Document 对象。Document 表示整个
XML 文档。
3.通过 getRootElement()方法获取根元素。
4.使用 elements("book")方法获取所有 "book" 元素,返回一个 List<Element>集合。
5.遍历 "book" 元素集合,通过 elementText("title")和elementText("author")方
法获取每个"book"元素中 "title" 和 "author" 子元素的文本内容,并输出。
6.捕获 DocumentException 异常,并打印异常信息。

这段代码展示了如何使用 DOM4库解析 XML 文档,并提取所需的信息。与前面的 DOM 示
例相比,DOM4」提供了更简洁和易用的 API,使 XML 处理更加高效和直观。

（4）Jquery,EL表达式，json

这些技术都比较简单，要会灵活运用，这里只是介绍他们的作用。真的不难，看些api，在项目里面写几行代码就上手了，比看那api傻傻乎乎研究半天快多了！

Jquery就是前端javaScript的简化版语法，

人话介绍一下.jsp文件：java代码就是写在后端，前端识别出来，读不懂。就像java代码是外国人，前端是中国人，需要用翻译官.jsp文件写java的代码，给我们浏览器前端解析，然后就可以识别了，.jsp文件就起到这么个作用

1.EL表达式，Jquery技术，json技术

EL表达式的出现就简化了jsp页面里面很多java代码的编写

Jquery的出现也是简化了javaScript对前端代码的简写

json是优化了数据传输

人话1： JSON、jQuery 和 JavaScript 三者之间的关系:

在这个家庭中:

父亲 JavaScript 是整个家庭的核心,提供了所有的基础和支持。
儿子 JSON 继承了父亲的优点,专注于在父亲的基础上做数据交换和传输的事情。
大儿子 jQuery 则是在父亲的基础上,提供了更多的工具和便捷,让整个家庭的生活更加美满。

人话2：描述 JSP 和 EL 表达式之间的关系。

在这个家庭中:

父亲 JSP:
- JSP 是整个家庭的核心,提供了所有的基础和支持。
- JSP 作为 Java Web 开发的一种技术,为开发者提供了在服务器端编写动态 HTML 页面的能力。
- JSP 承担了页面渲染、数据处理等重要功能,是整个 Web 应用程序的基石。
儿子 EL 表达式:
- EL 表达式继承了父亲 JSP 的优点,专注于在父亲的基础上简化和优化数据访问和操作的过程。
- EL 表达式为 JSP 页面提供了一种更加简洁、易用的方式来访问和处理数据,大大降低了 JSP 页面中 Java 代码的编写复杂度

结束语句：学计算机，多敲代码多问，学完整个项目之后，想一想一些核心的业务逻辑代码怎么完成，这样方便记忆留痕，对自己提升帮助也会很大，自己捋一捋一个项目给自己带来的收获，就像高中刷题一样，会一个模版，不变应万变。学会总结！