J2EE梳理(八)——关于前端基础知识梳理

最新推荐文章于 2023-06-28 22:36:23 发布

vanlyy

最新推荐文章于 2023-06-28 22:36:23 发布

阅读量452

点赞数

分类专栏： j2ee基础文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_38719347/article/details/104239872

版权

j2ee基础专栏收录该内容

25 篇文章 1 订阅

订阅专栏

来源于how2j
本节内容旨在对相关前端知识进行简单梳理，有个框架即可；

HTML

hello world

例子

<html>
  <body>
    <p>Hello HTML</p>
  </body>
</html>

效果：Hello HTML

中文显示

代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
</head>
<p>中文</p>

html标签

HTML是Hyper Text Markup Language 超文本标记语言的缩写
HTML是由一套标记标签（markup tag）组成，通常就叫标签
标签由开始标签和结束标签组成

<p> 这是一个开始标签
</p> 这是一个结束标签
<p> Hello World </p> 标签之间的文本叫做内容

html元素

元素指的是从开始标签到结束标签之间所有的代码
比如:<p>HelloWord</p>
一个完整的HTML文件，应该至少包含html元素，body元素，以及里面的内容
实际开发中，即使一个元素不完整，也是可以正常显示的
但这不是因为你写的牛B，是因为浏览器很强大

html属性

属性用来修饰标签的，比如要设置一个标题居中
<h1 align="center">居中标题</h1>
写在开始标签里的 align="center" 就叫属性；align 是属性名；center 是属性值；属性值应该使用双引号括起来

<h1 >未设置居中的标题</h1>

<h1 align="center">居中标题</h1>

在这里插入图片描述

html使用进行注释

CSS

样例

不使用CSS:

<table border="1">
  <tr >
      <td bgcolor="gray" >1</td>
      <td bgcolor="gray">2</td>
  </tr>
  
  <tr>
      <td  bgcolor="gray">3</td>
      <td  bgcolor="gray">4</td>
  </tr>
  
  <tr>
      <td  bgcolor="gray">a</td>
      <td  bgcolor="gray">b</td>
  </tr>
  
</table>

res:不适用css，就要给每一个td元素加上bgcolor属性
使用css：

<style>
td{
  background-color:gray;
}
</style>
 
<table border="1">
  <tr >
      <td>1</td>
      <td>2</td>
  </tr>
  
  <tr>
      <td>3</td>
      <td>4</td>
  </tr>
  
  <tr>
      <td>a</td>
      <td>b</td>
  </tr>
  
</table>

使用css 给每一个单元格加上背景颜色
只需要在最前面写一段css代码，所有的单元格都有背景颜色了
这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到

基本语法

例子：选择所有p元素，并设置颜色为红色
代码：

<style>
p{
   color:red;
}
</style>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>
<p>这是一个P</p>

直接在某一个元素上增加style属性即可达到css一样的效果
代码：

<p style="color:red">这是style为红色的</p>
<p>这是一个没有style的p</p>

在这里插入图片描述

JavaScript

JavaScript Hello

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。
完整的javascript由语言基础，BOM和DOM组成。本模块主要讲解javascript语言本身和BOM， DOM的内容请参考HTML DOM
通过javascript向文档中输出文本：
- document是javascript的内置对象，代表浏览器的文档部分
- document.write(“Hello Javascript”); 向文档写入字符串
- 代码：

<script>
  document.write("Hello Javascript");
</script>

在这里插入图片描述

javascript+DOM 例子：
代码：

<button onclick="document.getElementById('text').style.display='none'">隐藏文本</button>
 
<button onclick="document.getElementById('text').style.display='block'">显示文本</button>
 
<p id="text"> 这个是一段可以被javascript隐藏的文本</p>

解释：

onclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲，以block的形式显示)

onclick，getElementById，style.display 这些内容，是HTML DOM 应该到才会用到的知识和概念

在这里插入图片描述

Javascript BOM DOM
- 完整的javascript由语言基础，BOM和DOM组成。
- 只有通过javascript操作DOM对象的时候，才会带来很好的实用效果

Script标签

javascript代码必须放在script标签中
script标签可以放在html的任何地方，一般建议放在head标签里
例子1：javascript都是放在script标签中的，一旦加载，就会执行

<html>
  <head>
   <script>
      document.write("这是 javascript");
   </script>
  </head>
</html>

在这里插入图片描述

使用外部js文件：当javascript代码特别多，并且都写在html里的时候，会显得比较繁杂，难以维护。把javascript代码剥离出来，单独放在一个文件里，在html中引用该文件即可。
准备一个hello.js，里面的是内容是
document.write("hello javascript ");

<html>
  <script src="https://how2j.cn/study/hello.js"></script>
</html>

在这里插入图片描述

注释

单行：

<script type="text/javascript">
// 单行注释
document.write("hello java");
</script>

多行:

<script type="text/javascript">
/*
进行
多行注释
*/
document.write("hello java");
</script>

变量

使用var声明一个变量
示例：

<script>
  var x = 10;
  document.write("变量x的值:"+x);
</script>

在这里插入图片描述

不适用var:

<script>
  x = 10;
  document.write("没有用var声明的变量x的值:"+x);
</script>

在这里插入图片描述

命名规则：

var $a;
var _b;
var ab123;
 //合法

函数

不带参数函数示例：

<script>
function print(){
  document.write("这一句话是由一个自定义函数打印");
}
print();
</script>

解释：

function关键字用于定义一个函数
print即函数的名称
()表示参数列表，像这样就指没有参数
{ 表示函数开始
} 表示函数结束
光有函数的定义，还不够，它不会自动执行，还需要进行第5行的调用

带参数：

<script>
function print(message){
  document.write(message);
}
print("第一句话");
print("<br>");
print("第二句话");
</script>

在这里插入图片描述

带返回值函数：自定义一个calc函数，用于计算两个参数的和，并通过return 返回计算结果

<script>
function print(message){
  document.write(message);
}
 
function calc(x,y){
  return x+y;
}
 
var sum = calc(500,20);
print(sum);
 
</script>

在这里插入图片描述

HTML DOM

DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
概念：DOM把所有的html都转换为节点

DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点

例子：

<html>
<body>
<div id="d1">hello HTML DOM</div>
  
</body>
  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>
  
</html>

在这里插入图片描述

通过document.getElementById获取了id=d1的div标签对应的元素节点
然后通过attributes 获取了该节点对应的属性节点
接着通过childNodes获取了内容节点

JSON

JSON JavaScript 对象表示法（JavaScript Object Notation）是一种存储数据的方式。

创建JSON对象

var gareen = {"name":"盖伦","hp":616};这样就创建了一个JSON 对象
JSON对象由名称/值对组成名称和值之间用冒号:隔开名称必须用双引号" 包含起来；值可以是任意javascript数据类型，字符串，布尔，数字，数组甚至是对象；不同的名称/值对之间用逗号 , 隔开
代码：

<script>
var gareen = {"name":"盖伦","hp":616};
  
document.write("这是一个JSON对象: "+gareen);
 
</script>

在这里插入图片描述

访问JSON对象

通过点. 访问JSON对象的属性
代码：

<script>
var gareen = {"name":"盖伦","hp":616};
 
document.write("英雄名称: " + gareen.name + "<br>");
document.write("英雄血量: " + gareen.hp + "<br>");
</script>

在这里插入图片描述

创建JSON数组

通过方括号[] 创建JSON 数组
代码：

<script>
 
var heros=
[
    {"name":"盖伦","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死歌","hp":432},
    {"name":"火女","hp":389}
]
 
document.write("JSON数组大小"+heros.length);
 
</script>

在这里插入图片描述

访问JSON数组

访问JSON数组和访问普通数组一样，通过下标访问
代码：

<script>
  
var heros=
[
    {"name":"盖伦","hp":616},
    {"name":"提莫","hp":313},
    {"name":"死哥","hp":432},
    {"name":"火女","hp":389}
]
  
document.write( "第4个英雄是:" +  heros[3].name);
  
</script>

在这里插入图片描述

JSON对象与JavaScript对象

JavaScript对象分内置对象(Number,String,Array,Date,Math)和自定义对象：JSON就是自定义对象，只不过是以JSON这样的数据组织方式表达出来；所以不存在JSON对象与JavaScript对象的转换问题

字符串转为JSON对象
代码：

<script>
 
var s1 = "{\"name\":\"盖伦\"";
var s2 = ",\"hp\":616}";
var s3 = s1+s2;
 
document.write("这是一个JSON格式的字符串:" + s3);
document.write("<br>");
var gareen = eval("("+s3+")");
 
document.write("这是一个JSON对象: " + gareen);
  
</script>

在这里插入图片描述

解释：通过字符串拼接得到一个JSON结构的字符串，并不是一个JSON对象。需要通过eval转换得到
转换的时候注意,eval 函数要以（开头，）结尾
或者使用JQuery的$.parseJSON转换函数
JSON 对象转换为字符串：json 对象因为是一个javascript对象，所以如果直接打印的话，看不到里面的内容。
有时候要看看这个对象是不是我们期望的，所以需要通过 JSON.stringify 函数把它转换为字符串：

<script>
var hero = {"name":"盖伦","hp":"616"};
document.write("这是一个json 对象："+ hero);
document.write("<br>");
var heroString = JSON.stringify(hero)
document.write("这是一个json 字符串："+ heroString );
</script>

在这里插入图片描述

AJAX

什么是AJAX

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

工作原理

在这里插入图片描述

示例

使用AJAX 通过无刷新验证账号是否存在
代码：

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text"> 
<span id="checkResult"></span>
 
<script>
var xmlhttp;
function check(){
  var name = document.getElementById("name").value;
  var url = "https://how2j.cn/study/checkName.jsp?name="+name;
 
  xmlhttp =new XMLHttpRequest();
  xmlhttp.onreadystatechange=checkResult; //响应函数
  xmlhttp.open("GET",url,true);   //设置访问的页面
  xmlhttp.send(null);  //执行访问
}
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
  
}
 
</script>

AJAX请求流程

示意图：
步骤1：创建XHR对象：
- XMLHttpRequest；XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，悄悄的和服务器进行数据交互
- AJAX就是通过它做到无刷新效果的
- 代码：

<script>
var xmlhttp =new XMLHttpRequest();
document.write(xmlhttp);
</script>

在这里插入图片描述

步骤2：设置响应函数：
- XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
- 当服务器响应回来的时候，调用怎么处理呢？
- 通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
步骤3：设置并发出请求：
- 通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是/study/checkName.jsp
- 通过send函数进行实际的访问xmlhttp.send(null);null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
- 只有在用"POST"，并且需要发送参数的时候，才会使用到send。类似这样：xmlhttp.send("user="+username+"&password="+password)
步骤4：处理响应信息
- 在checkResult 函数中处理响应：
- 代码：

function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
     document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}

xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

xmlhttp状态
checkName.jsp:现在看不明白不要紧，等学了JSP再来看，就会发现其实很简单。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
 
<%
    String name = request.getParameter("name");
     
    if("abc".equals(name))
        out.print("<font color='red'>已经存在</font>");
    else
        out.print("<font color='green'>可以使用</font>");
     
%>

JSP

通过Servlet进行整个网站的开发是可以的。不过在Servlet中输出html代码，特别是稍微复杂一点的html代码，就会给人一种很酸爽的感觉。
如果能够直接使用Html代码，然后在html中写java代码，就好了JSP … 就可以干这个事情。

示例：

<html>
    <head>
           <title>第一个 JSP 程序</title>
    </head>
    <body>
           <%
                  out.println("Hello World！");
           %>
    </body>
</html>

JSP简介

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。
JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP

JSP流程

以下步骤表明了 Web 服务器是如何使用JSP来创建网页的：

就像其他普通的网页一样，您的浏览器发送一个 HTTP 请求给服务器。
Web 服务器识别出这是一个对 JSP 网页的请求，并且将该请求传递给 JSP 引擎。通过使用 URL或者 .jsp 文件来完成。
JSP 引擎从磁盘中载入 JSP 文件，然后将它们转化为 Servlet。这种转化只是简单地将所有模板文本改用 println() 语句，并且将所有的 JSP 元素转化成 Java 代码。
JSP 引擎将 Servlet 编译成可执行类，并且将原始请求传递给 Servlet 引擎。
Web 服务器的某组件将会调用 Servlet 引擎，然后载入并执行 Servlet 类。在执行过程中，Servlet 产生 HTML 格式的输出并将其内嵌于 HTTP response 中上交给 Web 服务器。
Web 服务器以静态 HTML 网页的形式将 HTTP response 返回到您的浏览器中。
最终，Web 浏览器处理 HTTP response 中动态产生的HTML网页，就好像在处理静态网页一样。

JSP优势

以下列出了使用JSP带来的其他好处：

与ASP相比：JSP有两大优势。首先，动态部分用Java编写，而不是VB或其他MS专用语言，所以更加强大与易用。第二点就是JSP易于移植到非MS平台上。
与纯 Servlet 相比：JSP可以很方便的编写或者修改HTML网页而不用去面对大量的println语句。
与SSI相比：SSI无法使用表单数据、无法进行数据库链接。
与JavaScript相比：虽然JavaScript可以在客户端动态生成HTML，但是很难与服务器交互，因此不能提供复杂的服务，比如访问数据库和图像处理等等。
与静态HTML相比：静态HTML不包含动态信息。

JSP语法

jsp由这些页面元素组成：

静态内容：就是html,css,javascript等内容
指令：以<%@开始 %> 结尾，比如<%@page import=“java.util.*”%>
表达式 <%=%>：用于输出一段html
Scriptlet：在<%%> 之间，可以写任何java 代码
声明:在<%!%> 之间可以声明字段或者方法。但是不建议这么做。
动作：<jsp:include page=“Filename” > 在jsp页面中包含另一个页面。在包含的章节有详细的讲解
注释 <%-- – %>
不同于 html的注释通过jsp的注释，浏览器也看不到相应的代码，相当于在servlet中注释掉了
List item

示例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import="java.util.*"%>
<%
    List<String> words = new ArrayList<String>();
    words.add("today");
    words.add("is");
    words.add("a");
    words.add("great");
    words.add("day");
%>
  
<table width="200px" align="center" border="1" cellspacing="0">
  
<%for (String word : words) {%>
 
<tr>
    <td><%=word%></td>
</tr>
 
<%}%>
  
</table>

在这里插入图片描述

JQuery

JQuery是一个javascript的框架，是对javascript的一种封装。

通过JQuery可以非常方便的操作html的元素

示例：使用JQuery进行隐藏和显示

<script src="https://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $("#b1").click(function(){
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});
 
</script>
 
<button id="b1">隐藏div</button>
 
<button id="b2">显示div</button>
 
<br>
<br>
 
<div id="d">
 
这是一个div
 
</div>

在这里插入图片描述

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js

VUE.JS

什么是 Vue？

考虑这个需求：我们要把一个 json对象的数据，显示到一个元素上去。
如果不使用 Vue, 那么就会用到 JS 或者 JQuery，通过操作 HTML DOM 的方式，把数据显示上去。
如果使用Vue, 那么仅仅需要提供数据，以及数据要绑定到的元素的id,就行了,不需要显式地操作HTML DOM。
以下就用代码来表示这两种方式，通过比较，就知道Vue 是做什么的了。

JS方式的问题、

首先准备一个div元素，它其实就是视图
然后在js代码中准备一个json数据。
接着通过原生的js 获取 div 对应的 html dom
最后把 json 数据赋给 html dom，就导致 div 里显示英雄的名称了

示例：

<div id="div1">
   
</div>
  
<script>
  
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//获取 html dom
var div1 = document.getElementById("div1");
 
//显示数据
div1.innerHTML= gareen.name;
  
</script>

在这里插入图片描述

js 方式的问题：js 方式有问题吗？没问题。不过敏锐的同学会意识到， html dom其实只是手段，我们真正想要的，就是数据，显示在元素上。
而vue.js 就是用来解决这个问题的。
下面请看vue.js 的做法。
Vue的方法：
- 首先导入 vue.js 要用到的库： vue.min.js. 这里这个库我是放在网站上的，自己练习的同学，可以从右上角下载一个，方便自己本地用。
  <script src="http://how2j.cn/study/vue.min.js"></script>
- 同样准备一个div元素，其id是div1.
- 在js中准备json数据 gareen
- 创建一个Vue对象。这个Vue对象就把数据 gareen和视图 div1 关联起来了

new Vue({
	  el: '#div1',
	  data: {
	    message: gareen
	  }
	})

在视图div中，就可以通过如下方式把数据取出来了。{{gareen.name}}
代码：

<script src="https://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">
   
  {{gareen.name}}
 
</div>
  
<script>
  
//准备数据
var gareen = {"name":"盖伦","hp":616};
 
//通过vue.js 把数据和对应的视图关联起来
new Vue({
      el: '#div1',
      data: {
        message: gareen
      }
    })
  
</script>

在这里插入图片描述

这种方式 html dom对开发人员就是透明的了。

vanlyy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
J2EE梳理(八)——关于前端基础知识梳理

文章目录HTMLhello world中文显示html标签html元素html属性html使用进行注释CSS样例基本语法JavaScriptJavaScript HelloScript标签注释变量函数HTML DOMJSON创建JSON对象访问JSON对象创建JSON数组访问JSON数组JSON对象与JavaScript对象AJAX什么是AJAX工作原理示例AJAX请求流程来源于how2j本...
复制链接

扫一扫