J2EE梳理(八)——關於前端基礎知識梳理

來源於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

發佈了117 篇原創文章 · 獲贊 59 · 訪問量 9萬+

私信關注