nicode 統一碼

也叫萬國碼、單一碼，是計算機科學領域里的一項業界標準，包括字符集、編碼方案等。統一碼是為了解決傳統的字符編碼方案的局限而產生的，它為每種語言中的每個字符設定了統一并且唯一的二進制編碼，以滿足跨語言、跨平臺進行文本轉換、處理的要求。

Unicode 零寬字符

Unicode字符中有一類特殊的字符叫做零寬字符 ZWJ（zero width joiner），也叫非打印字符、不可見字符。正則的斷言即叫零寬斷言，意思即本身并不占用寬度，如比較出名的零寬空格ZWSP：U+200B。

零寬字符本質也是字符，對于計算機來說，它依然會占用空間，在 Unicode 字符集中擁有獨立的編碼，你在 Word 鍵入這一字符它仍會被計入字數統計，同樣在代碼中打印這類字符的長度可以看到也是會占用長度的。

零寬字符的寬度為 0，對于肉眼而言不可見，在我們常用的一些軟件中并不會顯示，比如瀏覽器、Excel...，這些字符通常被用于在阿拉伯文與印度語系等文字中，用于控制字符間是否產生連字的效果，在其他大多數語言中，你并不能直接打出這類字符。

常見的幾種零寬字符有：

• 零寬空格：U+200B
• 零寬連接符：U+200D，常見的復雜Emoji表情即用到了該字符，用于表示多字符關系從而合成復雜新字符
• 零寬非連接符：U+200C
• 零寬非斷空格符：U+FEFF
• 左至右符：U+200E
• 右至左符：U+200F
• 蒙古文元音分隔符：U+180E

怎么能看見零寬字符？

直接復制到開發工具如 vscode 里，是可以直接看到這類字符的 unicode 碼的。

在 windows 記事本中-右鍵，選擇 “顯示 Unicode 控制字符”，也可以?看到這類特殊符號。

navicat 中查看mysql中的數據，也可以像記事本一樣右鍵選擇“顯示 Unicode 控制字符”，光標聚焦的時候也可以看到有特殊符號顯示出來。

還有復制粘貼進網頁、記事本、輸入框中，移動光標的時候，也可以發現，這類字符也是需要靠光標移動的。

零寬字符的應用場景

• 字符加密解密
• 數據防爬
• 隱形水印
• 縮短網址
• 敏感詞分隔過審
• 空白評論、空白用戶名
• 輸入內容翻轉如：花了?7萬5?千，其中的7萬5會被翻轉成5萬7

零寬字符踩坑

之所以發現這個問題，也是從客戶的一個 excel 模板中粘貼電話號碼，最終發現莫名有特殊字符，開始還以為是輸入組件的bug。

數據庫是支持這種字符的，所以如果前后端未進行數據過濾，是會被直接存儲到數據庫中的，正常也是沒什么問題。但是如果有搜索功能，用戶在應用中直接手動輸入檢索的時候，因為手動輸入是不包含特殊字符的，所以有可能導致匹配不出來，給人的感覺就是：明明看著一毛一樣，一個字母一個字母對著敲的，咋就搜不出來呢！

在前端表單中，如果用戶輸入時是直接從其他地方如 excel 里復制的，就有可能包含這類看不見的零寬字符，據說從 iphone 手機的通訊錄里復制的電話號碼粘貼進excel中就有可能包含零寬字符。

當用戶提交時，前端在控制臺打印或者network里看提交的接口參數里也是看不到這類字符的，還有如果 input 輸入框有限制最大輸入長度 max-length，零寬字符也是會占用輸入框的長度的。

前端解決方案

前端解決可以直接在輸入或提交表單的時候通過 unicode 碼去過濾這類特殊字符，但是每個輸入框都要這樣去做工作量太大了，而且都是重復性工作，最終想到了用 vue 的全局指令自己封裝一個 v-trim 統一去過濾數據，正好項目中用的 elment-ui 的輸入框組件 trim 修飾符也有bug，直接一塊解決了，后期使用和維護都比較方便。

directives目錄下的 index.js，利用webpack提供的 require.context，自動注冊目錄下的指令文件，直接將文件名作為指令名：

// require.context是webpack提供的api用來創建上下文作用域
// 三個參數分別為：目錄、是否搜索子文件夾、匹配文件名的正則
const fileInfo = require.context('./', false, /^\.\/(?!index.js).*\.js$/)
const fileNameList = fileInfo.keys() || []

export default {
  // 插件為對象時，Vue.use()會默認調用install
  install: function(Vue) {
    fileNameList.forEach(fileName => {
      const directive = fileInfo(fileName)
      // 提取路徑中的文件名作為指令名稱
      const directiveName = fileName.replace(/^(\.\/)([a-zA-Z0-9-_]+)\.js$/, '$2')
      // 注冊指令
      Vue.directive(directiveName, directive.default || directive)
    })
  }
}

directives目錄下的 trim.js，去除輸入框首尾空格和過濾零寬字符：

/**
 * 去除輸入框首尾空格和過濾零寬字符
 * ? element-ui 的輸入框el-input加了 trim 會導致字符中間不能輸入空格(文檔上有說：不支持 v-model 修飾符)
 * ? 需同時過濾掉輸入內容里的零寬字符，一般是用戶直接從 excel 中直接復制粘貼進來的內容
 */

const TRIM = {
  inserted: el => {
    // 兼容第三方輸入組件，如el-input
    const inputTag = el.tagName !== 'INPUT' ? el.querySelector('input') : el
    const handler = function(event) {
      const oldVal = event.target.value || ''
      // 過濾掉零寬字符和首尾空格
      const newVal = oldVal.replace(/[\u200b-\u200f\uFEFF\u202a-\u202e]/g, '').trim()
      if (oldVal != newVal) {
        event.target.value = newVal
        dispatchEvent(inputTag, 'input')
      }
    }
    el.inputTag = inputTag
    el._blurHandler = handler
    inputTag.addEventListener('blur', handler)
  },

  unbind: el => {
    const { inputTag } = el
    inputTag.removeEventListener('blur', el._blurHandler)
  }
}

function dispatchEvent(el, type) {
  const evt = document.createEvent('HTMLEvents')
  evt.initEvent(type, true, true)
  el.dispatchEvent(evt)
}

export default TRIM

在 vue 入口文件 main.js 中注冊全局指令：

Vue.use 本身是一個函數，如果需要注冊的插件是一個對象，就需提供 insatll 方法，Vue 會去執行它，同時傳遞一個Vue構造函數作為第一個參數，以及 use 中的其他參數，不依賴Vue去運行的我們可以直接用 Vue.prototype 去掛載到原型上就行了；需要和 Vue 構造函數進行交互的時候，才使用 Vue.use，如全局組件（像iview、element-ui）、全局過濾器、全局指令這些。

import Vue from 'vue'
import App from './App'
import router from './router'

// 全局指令
import directives from '@/directives'
Vue.use(directives)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  },
})

在vue頁面中的輸入框中使用：

<template>
  <div>
    <input v-trim />
    <el-input v-trim />
  </div>
</template>

參考文檔

• Unicode 官網
• How to use Unicode controls for bidi text
• Unicode Character Categories
• 后端過濾隱藏字符（零寬度字符）

、 HTTP協議請求報文以及響應報文

2、 JAVA Socket編程 Socket以及ServerSocket

3、 WEB服務器概念 Tomcat服務器目錄結構和基本配置server.xml文件

4、 什么是Servlet? 怎樣實現一個自定義Servlet?

5、 Servlet基本配置

6、 ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

7、 service方法以及doGet和doPost方法

8、 servlet生命周期

9、 怎樣獲取網頁提交的參數?

10、 會話HttpSession和Cookie

11、 調用一個已定義好的Servlet有哪些方式

12、 表單提交數據到Servlet 中文亂碼處理

13、 客戶端頁面向服務端servlet傳遞參數有哪些方式

14、 JSP的運行原理以及基本語法

15、 JSP隱式對象

16、 JavaScript基本語法

17、 JavaScript中的對象

18、 JavaScript與AJAX

19、 基于對象的Javascript以及繼承的實現

客戶端/服務器的優勢在于：

服務器和客戶端分攤任務，分別負責部分處理工作；

服務器可以同時為多臺客戶端服務；

多個客戶端可以同時訪問服務器上的相同數據。

IP

網絡ID：網絡ID標識了計算機或網絡設備所在的網段；

主機ID：主機ID標識了特定的主機或網絡設備

特殊IP地址:

0.0.0.0和127.0.0.1就是兩個此類地址，第一個稱為缺省路由，后一個是環回地址；

127.0.0.1被保留用于用戶主機的本地IP話務，它被分配給一個特殊接口，即起到閉合電路作用的環回接口

端口

端口使用一個16位的數字來表示，它的范圍是0~65535，1024以下的端口號保留給預定義的服務，如：http使用80端口；

java.net包

java.net包可以實現Java的網絡功能，

InetAddress：

InetAddress getByName(String host) 在給定主機名的情況下確定主機的 IP 地址

注：host可以是主機名 IP地址 或者域名

InetAddress getLocalHost() 返回本地主機的InetAddress對象

InetAddress[] getAllByName(String host) 在給定主機名的情況下，根據系統上配置的名稱服務返回其 IP 地址所組成的數組可能一個主機名對應多個服務器（負載均衡）

JAVA Socket編程

socket用于描述IP地址和端口，應用程序通過套接字向網絡發出請求或者應答網絡請求；

套接字會因為網絡的連接中斷而失效，所以對它的操作都有可能拋出IOException

Socket以及ServerSocket

客戶端流程：向服務端請求，獲取輸入輸出流，進行收發數據，關閉io流，關閉套接字

服務器流程：創建套接字，獲得客戶端請求，獲得輸入輸出流，收發信息，關閉io流，關閉套接字

包裝以提高效率（用BufferedReader包裝輸入流，用PrintWriter包裝輸出流）

BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));

PrintWriter(OutputStream out, boolean autoFlush) 利用現有的OutputStream構造格式打印流，由參數autoFlush指定是否帶自動刷新緩存的功能

進程與線程的區別

進程是指系統中正在運行中的應用程序，它擁有自己獨立的內存空間；

線程是指進程中一個執行流程，一個進程中允許同時啟動多個線程，他們分別執行不同的任務；

線程與進程的主要區別在于：每個進程都需要操作系統為其分配獨立的內存地址空間，而同一進程中的所有線程在同一塊地址空間中，這些線程可以共享數據，因此線程間的通信比較簡單，消耗的系統開銷也相對較小。

在Java中實現線程有兩種方式，分別是：

擴展java.lang.Thread類

實現java.lang.Runnable接口

線程start()調用run()方法，重寫的是run()

線程生命周期

線程狀態：

新建狀態（New）：使用new關鍵字創建線程對象，僅僅被分配了內存；

就緒狀態（Ready）：線程對象被創建后，等待它的start方法被調用，以獲得CPU的使用權；

運行狀態（Running）：執行run方法，此時的線程的對象正占用CPU；

睡眠狀態（Sleeping）：調用sleep方法，線程被暫停，睡眠時間結束后，線程回到就緒狀態，睡眠狀態的線程不占用CPU；

死亡狀態（Dead）：run方法執行完畢后，線程進入死亡狀態；

阻塞狀態（Blocked）：線程由于某些事件（如等待鍵盤輸入）放棄CPU，暫停運行，直到線程重新進入就緒狀態，才有機會轉到運行狀態；

Yield()和join()的不同

HTTP協議

HTTP （HyperText Transfer Protocol）協議即超文本傳輸協議，是基于網絡應用層的協議，它建立在TCP/IP協議的基礎上；

該協議使用可靠的TCP連接，默認端口是80；

HTTP協議基于客戶端/服務器模式，客戶端主動發出HTTP請求，服務器接收HTTP請求，返回HTTP響應結果。

HTTP協議是指超文本傳輸協議，專門用于在Internet上傳輸信息的協議，目前的版本是1.1；

HTTP是應用層的協議，它基于請求/響應模式；

HTTP協議默認使用80端口進行通訊；

HTTP協議是無狀態的的協議。

請求報文實例：

請求報文是指客戶端瀏覽器向網絡服務器請求頁面時，發送到服務器端的字符串，必須符合HTTP協議的格式要求，它可能包含如下組成部分：

GET /index.html HTTP/1.1

Accept: image/gif, image/x-xbitmap, image/jpeg, …, */*

Accept-Language: zh-cn

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Host: www.163.com:80

Connection: Keep-Alive

<空行>

請求報文中的大部分項目是可選的，只有GET和Host部分是必需的；

GET部分的格式是：

GET<空格>/[請求的URL]<空格>HTTP/協議版本號

如：GET /index.html HTTP/1.1

Host部分的格式是：

Host:<空格>服務器域名或IP地址:端口號

如：Host: www.newer.com.cn:80

換言之，請求報文中只要包含以上兩部分，就可以向網絡站點服務器請求到頁面。

//拼湊請求報文

String strHttp = "GET / HTTP/1.1\r\n";

strHttp += "Host: " + hostName + ":" + WEB_PORT + "\r\n";

響應報文實例：

響應報文是指網絡服務器收到來自客戶端的請求后，發回到客戶端的字符串，它用來告訴客服端：服務器已經接受請求，隨后跟隨的是被請求的網頁內容；

響應報文可能包含如下組成部分：

HTTP/1.1 200 OK

Date: Sat, 11 Aug 2007 11:58:37 GMT

Server: Apache/1.3.37(Unix)

Accept-Ranges: bytes

Content-Length: 11503

Content-Type: text/html

<空行>

響應報文中也有兩部分是必需的：

HTTP/協議版本號<空格>狀態碼<空格>OK

狀態碼是一個3位整數，用來表示不同的狀態，200表示響應成功，

如：HTTP/1.1 200 OK

狀態碼的具體描述請參閱本課件最后的附表。

Content-Type:<空格>text/html;<空格>charset=字符集編碼

用來描述服務器發回響應的文件類型以及字符集編碼，text/html說明是文本文件或超文本文件，

如：Content-Type: text/html; charset=GB2312

模擬：

out.println("Http/1.1 200 OK");

out.println("Content-Type:text/html; charset=GB2312");

狀態碼：

Web應用的優勢

相對于傳統的C/S結構（Client客戶端/Server服務器）的應用程序而言，B/S結構的Web應用程序具備以下優勢：

集中部署，無需安裝客戶端程序；

集中管理，業務邏輯在服務端進行維護；

數據共享，所有客戶端訪問同一服務器的數據；

覆蓋面廣，只要有Internet覆蓋的區域都可通過瀏覽器享受服務；

更強的平臺無關性，不必關心客戶端的軟硬件平臺，只要遵循HTTP協議，都可獲得支持。

WEB服務器概念

Web服務器可以解析(handles)HTTP協議。當Web服務器接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。為了處理一個請求(request)，Web服務器可以響應(response)一個靜態頁面或圖片，進行頁面跳轉(redirect)，或者把動態響應(dynamic response)的產生委托(delegate)給一些其它的程序例如CGI腳本，JSP(JavaServer Pages)腳本，servlets，ASP(Active Server Pages)腳本，服務器端(server-side)JavaScript，或者一些其它的服務器端(server-side)技術。無論它們(譯者注：腳本)的目的如何，這些服務器端(server-side)的程序通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

Tomcat服務器目錄結構和基本配置server.xml文件

博客http://blog.csdn.net/mycomein/article/details/45798161

tomcat環境變量的設置：

首先添加TOMCAT_HOME的環境變量，值為d:\Program Files\tomcat7。

添加CATALINA_HOME環境變量，值為%TOMCAT_HOME%，

添加CATALINA_BASE環境變量，值為%TOMCAT_HOME%。

Tomcat是以面向對象的方式運作的；在執行期間，它會基于配置文件的設定動態地組建其對象結構。

Server.xml文件中的每個主要元素都會創建軟件“對象”、排序及進程管道中設置的這些元素嵌套方，讓您能執行過濾、分組等工作。

什么是Servlet? 怎樣實現一個自定義Servlet?

Servlet是用Java語言編寫的程序，它運行在Web服務器上，用以處理來自客戶端的請求；

它一般會把處理的結果以為HTML的形式返回，在客戶端形成動態網頁

Servlet的優點

Servlet運行在Web服務器中，可以擴展服務器的功能；

Servlet可以和其他資源交互，從而生成返回給客戶端響應的內容，即動態網頁；

使用Java編寫，所以能夠跨平臺；

Java的所有優點都可以在Servlet中體現；

Servlet很安全，因為訪問Servlet的唯一途徑是通過服務器；

只要符合Servlet規范的Servlet容器都可以運行Servlet。

自定義servlet

一個類繼承HttpServlet，重寫doGet()和doPost()方法，如果需要看到創建和銷毀的過程，可以重寫init()和destroy()方法。

Servlet基本配置

在web.xml中加入servlet的配置：

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>com.tkclm.servlet.LoginServlet</servlet-class>

</servlet

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>將action與class對應起來

ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

HttpServletRequest

HttpServletResponse

Javaweb容器的四種作用域

幾乎所有web應用容器都提供了四種類似Map的結構：application session request page，Jsp或者Servlet通過向著這四個對象放入數據，從而實現Jsp和Servlet之間數據的共享。

application:整個應用 對應servlet中ServletContext

session：會話　　　　對應servlet中HttpSession

request：一次請求　　對應servlet中的HttpServletRequest

page：當前頁面

ServletConfig：此接口定義Servlet配置對象，以便于容器將信息傳遞給Servlet。

ServletContext：此接口定義了一組方法，用于Servlet與容器進行通信。

service方法以及doGet和doPost方法、

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

service方法是接口中的方法，servlet容器把所有請求發送到該方法，該方法默認行為是轉發http請求到doXXX方法中，如果你重載了該方法，默認操作被覆蓋，不再進行轉發操作！此方法用來調度客戶端的請求，API文檔中明確規定，請勿重寫該方法。

servlet生命周期

怎樣獲取網頁提交的參數?

①String str=request.getParameter("參數名稱")方法可以獲得參數值。

對于復選框類的數據，可以通過
②String[] str=request.getParameterValues("參數名稱")方法獲得。

會話HttpSession和Cookie

Cookie通過在客戶端記錄信息確定用戶身份，Session通過在服務器端記錄信息確定用戶身份。Cookie由服務器產生，給客戶端頒發的通行證，每一個Cookie只能保存一個變量，

若需要修改（包括刪除）需要服務器重新頒發Cookie。

會話對象（它主要解決了HTTP協議是無狀態的問題。）

所謂的會話是指：在一段時間內，某客戶端與服務器之間的一連串的請求與響應；

會話對象可以使用戶訪問一個站點的多個頁面時共享信息；

javax.servlet.http.HttpSession接口用來提供會話對象，如果我們在程序中需要操作會話，就可以使用它；

可以通過HttpServletRequest的getSession方法獲得（或創建）HttpSession對象。

調用一個已定義好的Servlet有哪些方式

發送請求（包括表單（） a標簽 js的）重定向（重定向跟轉發）

重定向：response.sendRedirect("success.jsp");
r轉發：equest.getRequestDispatcher("success.jsp").forward(request,response);
1.轉發在服務器端完成的；重定向是在客戶端完成的
2.轉發的速度快；重定向速度慢
3.轉發的是同一次請求；重定向是兩次不同請求
★4.轉發不會執行轉發后的代碼；重定向會執行重定向之后的代碼
★5.轉發地址欄沒有變化；重定向地址欄有變化
6.轉發必須是在同一臺服務器下完成；重定向可以在不同的服務器下完成

表單提交數據到Servlet 中文亂碼處理

可以通過字符集轉碼來解決此問題：

對于get

new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");

對于post

request.setCharacterEncoding("UTF-8");

客戶端頁面向服務端servlet傳遞參數有哪些方式

表單

a標簽

Ajax即js

<jsp:param>

<%setAttributr();%>

JSP的運行原理以及基本語法

Jsp執行過程：

JSP 頁面內容

JSP元素包括JSP腳本元素（包括注釋，聲明，表達式，scriptlet），指令元素（page，include，taglib），動作元素。

Jsp聲明：

需求：某系統計算的金額中有兩種形式，一種是帶有兩位小數的，另一種是整數，現在要求你在JSP頁面將不帶小數的金額轉換為帶兩位小數的金額。

<%

String trans(String money){

Int index = money.indexOf(“.”);

If(index == -1){

Money = money +”.00”;

}

Retrun money;

}

%>

<%=trans(money)%>

Jsp注釋<%-- comment--%>>不會顯示在網頁上，html<!-- comment-->注釋會顯示在網頁中

Jsp指令包括 page，include，taglib

例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ include file="../jsp/Header.jsp"%>

格式：<%@ 指令名稱 屬性1="屬性值1" 屬性2="屬性值2" … 屬性n="屬性值n"%>

l page 指令用于設置JSP 頁面的屬性，這個屬性將被用于和容器通信

<%@ page %>指令作用于整個JSP頁面，同樣包括靜態的包含文件。

無論你把<% @ page %>指令放在JSP的文件的哪個地方，它的作用范圍都是整個JSP頁面。

[ language=“java” ]

主要指定JSP容器要用什么語言來編譯JSP的元素

[ import=“{package.class | package.*}, ...” ]

JSP程序可以使用哪些包

[pageEncoding = “UTF-8”]

Jsp程序用什么編碼格式編碼

l include指令

用來在JSP文件被編譯時導入一個指定的文件，語法形式

<%@ include file = ”relativeURLspec” %>

include 指令告訴編譯器在編譯當前的JSP程序時,將由relativeURLspec所指定的外部文件代碼插入到include編譯指令所在的位置,并把它作為當前JSP程序的一部分編譯.如果被嵌入文件在包含它們的主JSP程序被裝載到內存之后被修改,那么主JSP程序連同被嵌入的文件將在下一次請求產生時被重新編譯.

這個包含的過程是靜態的,而包含的文件可以是HTML文件、JSP頁面、文本文件或是一段java程序

l Taglib指令

taglib 指令允許用戶創建自定義標簽 jstl

總結：

JSP 腳本由三個元素組成，即 JSP 表達式、JSP Scriptlet 和 JSP 指令

JSP 表達式包括在 <%= %>內； Scriptlet 包含在<% %>內；聲明包含在<%! %>內

JSP 指令共有三種類型，即 page、include 和 taglib。JSP 指令包括在 <%@ 和 %>內

page 指令用于設置 JSP 頁面的屬性；include 指令用于在 JSP 頁面嵌入其他文件

JSP隱式對象

l request表示客戶端對網頁的請求

l response實現 javax.servlet.http.HttpServletResponse 接口使用 HTTP 協議將響應發送給客戶端

l out表示輸出流

l Session

l Application 表示 JSP 頁面所屬的應用程序

l pageContext使用戶可以訪問頁面作用域中定義的所有隱式對象它的作用范圍是在同一頁面

l Page使用 page 對象可以訪問 Servlet 類的所有變量和方法

l config實現javax.servlet.ServletConfig接口，表示Servlet 的配置，其常用方法有：

getInitParameter() 獲取初始化的參數

getServletContext() 獲取環境

getServletName() 獲取Servlet名字

l exception對象用于處理 JSP 頁面中的錯誤

JavaScript基本語法

Js特點：腳本語言，基于對象，事件驅動，平臺無關

將JavaScript嵌入網頁（三種方式）：

1.使用 <script>…</script> 標簽將語句嵌入文檔

2.將 外部JavaScript 源文件鏈接到 html 文檔中

<script src= "test.js"></script>

可使多個網頁共享一個腳本文件內的代碼

一般在其中定義一系列在多個網頁中都可能要用到的函數

3.作為網頁元素的事件處理程序,當事件觸發時自動運行

<marquee onmouseover=“this.stop()”>

JavaScript基本語法部分：

語句：一條由計算機完成的、幫助你達到某種目的的指令，JavaScript中的每一行都可認為是一條語句

變量：一個代表某個值的名字就是變量

表達式：A-1+B 就是表達式

函數：具有一定功能的程序段

數據類型：

變量

JS是弱類型的語言,即聲明變量時不需指定數據類型,為它賦值時其類型才確定,而且再次為其賦值可改變它的數據類型.

變量的命名: 只能包含數字，字母，下劃線（"_"）,但不能以數字開頭,不能是保留字(關鍵字)

JS區分大小寫

用var聲明變量

函數的聲明與調用

方式一、

function 函數名([參數[,參數...]]){
<語句組>
[return <表達式>;]
}

方式二、

函數名 = function ([參數[,參數...]]) {

…

}

方式三、(較不常用)

Function類

函數名 = new Function ([“參數名”[,“參數名”...]]，“函數體”)

arguments對象

1:arguments是收到的實參副本
　　在詞法分析中, 首先按形參形成AO的屬性,值為undefined
　　當實參傳來時, 再修改AO的相應屬性.
　　2:并把所有收到實參收集起來,放到一個arguments對象里
　　t(a,b,c){},
　　調用時: t(1,2,3,4,5) 5個參數
　　此時 , AO屬性只有a,bc,3個屬性, arguments里有1,2,3,4,5, 所有的值

　　對于超出形參個數之外的實參, 可以通過arguments來獲得
　　3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應
　　4:arguments.length 屬性代表實參的個數
　　5:arguments一定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性
　　6:arguments每個函數都會有,因此,arguemnts只會在內部找自身的arguments,
　　無法引用到外層的arguments
　　<script type="text/javascript">
　　// 求圓形面積,矩形面積, 三角形面積
　　function area () {
　　if(arguments.length == 1) {
　　alert(3.14 * arguments[0] * arguments[0]);
　　} else if(arguments.length == 2) {
　　alert(arguments[0] * arguments[1]);
　　} else if(arguments.length == 3) {
　　alert(arguments[0] + arguments[1] + arguments[2]);
　　} else {
　　return null;
　　}
　　}
　　area(10,20,30);
　　
　　</script>

內部函數

function a( d){
var i=0;

Function c(){

//....

}
function b(){

c();
alert(++i);
}
return b;
}
var c = a();
c();

閉包：允許使用內部函數－－即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。

類型轉換

強制類型轉換,ECMAScript中可用的3種強制類型轉換:
Boolean(value);
Number(value);
String(value);

NaN --- 不是一個數字類型

NaN 值非常特殊，因為它“不是數字”，所以任何數跟它都不相等，甚至 NaN 本身也不等于 NaN 。

isNaN(testValue) 計算一個參數，檢查它是否為數值。

var iNum = 10;

var snum = iNum.toString(8); 12 進制

var iNum1= parseInt("12.6"); 12

var iNum2= parseInt("hello"); NaN

var iNum3= parseInt("123world");123

var fNum4= parseFloat("25.12.6");25.12

var b1 = Boolean("");false

var b2 = Boolean(undefined);false

var b3 = Boolean(0);false

var iNum = Number("25.12.6");NaN

var bl = isNaN(Number("13f"))true

JavaScript中的對象

本地對象

Object Function Array String Boolean Number Date RegExp Error EvalError RangeError TypeError ReferenceError SyntaxError URIError

內置對象

Global Math

宿主對象（自定義對象）

對象是用關鍵字new后跟要實例化的類的名字創建，例如：

var oObj = new Object();

如果構造 函數無參數，括號可省略

var oObj = new Object;

Object 對象：

可以對object對象增加函數屬性

判斷對象是否有某個屬性：

alert(oPerson.hasOwnProperty(“age”));

字符串對象 String

屬性：length

數組對象 Array

創建數組對象

myArr=new Array(); myArr [10]= “array”; //MyArray數組的長度為10

myArr=new Array(3); //可存放三個元素

myArr=new Array(“a”,”c”,”d”);//存放了三個元素的數組

myArr=[“a”,”b”,”c”]; //存放了三個元素的數組

下標從0開始編號

數學對象 Math

max(,,,,)方法:返回各個參數中最大的數

min(,,,)方法:返回各個參數中最小的數

abs()方法:返回絕對值

sin()方法:返回參數的正弦值,參數為弧度

sqrt()方法:求輸入參數的平方根

round():四舍五入為整數

random():返回0-1的隨機小數

返回 n 到 m之間的隨機整數：

var iNum = Math.floor(Math.random() * (m-n+1) ＋n)；

floor():取整,返回比參數小的最大整數

ceil():返回大于或等于參數的最近整數

Grobal對象：對象從不直接使用，并且不能用 new 運算符創建。它在 Scripting 引擎被初始化時創建，并立即使其方法和屬性可用。

日期時間對象Date

日期對象的創建:

mydate=new Date()
創建代表當前日期時間的日期對象

mydate=new Date(“October 1,2005,12:00:00”)
創建代表2005年國慶午時的日期對象

Mydate=new Date(2005, 9, 1)

創建代表2005年10月1日的日期對象

日期對象以系統內存中以數值表示,以1970年1月1日0時0分0秒0毫秒為起始點,每過一毫秒增加一.

get方法組à從日期對象中分解出它所處的年月日,星期幾,時分秒,毫秒值

getYear()à返回年份數

getMonth()à返回月份數:0-11,應加上1.

getDate()à返回當前Date對象的日期數:1-31

getDay()à返回星期幾:0-6, 0代表星期日

getHours()à返回小時數:0-23

getMinutes()à返回分鐘數:0-59

getSeconds()à返回秒數:0-59

getTime()à返回毫秒數:自起始時刻開始

set方法組à設置(改變)日期對象的某一部分

setYear()à設置年份數

setMonth()à設置月份數:參數0-11

setDate()à設置日期數:參數1-31

setHours()à設置小時數:參數0-23

setMinutes()à設置分鐘數:參數0-59

setSeconds()à設置秒數:參數0-59

JavaScript與AJAX

1.1XMLHttpRequst對象的概述

　　在使用XMLHttpRequest對象發送請求和處理響應之前，必須先調用JavaScript創建一個XMLHttpRequest對象。由于XMLHttpRequest不是一個W3C標準，所以可以采用很多JavaScript方法來創建XMLHttpRequest的實例，IE把XMLHttpRequest實現為一個ActiveX對象，其他瀏覽器則把它實現為一個本地的JavaScript對象，由于存在這些差別，JavaScript必須包含有關的邏輯，從而使用ActiveX技術與使用本地的JavaScript對象技術創建XMLHttpRequst的一個實例。

　　很多人可能還記得從前的那段日子，那時不同瀏覽器上的JavaScript與DOM簡直千差萬別，聽了這段話后有人可能不寒而栗。幸運的是，在這里為了明確該如何創建XMLHttpRequst對象的實例，并不需要那么詳細的編寫代碼來區別瀏覽器的類型。你要做的只是檢查瀏覽器是否提供對ActiveX對象的支持。如果瀏覽器支持ActiveX對象，就可以使用ActiveX對象來創建XMLHttpRequest對象。否則，就要使用本地的JavaScript對象技術來創建。下面的代碼展示了編寫跨瀏覽器的JavaScript代碼來創建XMLHttpRequst是多么的簡單。

　　創建XMLHttpRequest的一個實例：

var xmlHttp; function createXMLHttpRequst(){ if(window.ActiveXObject){
　　　　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　　　}
　　　　else if(window.XMLHttpRequst){
　　　　　　xmlHttp = new XMLHttpRequest();
　　　　} }

　　可以看到，創建一個XMLHttpRequest相當容易。首先，要創建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequst方法完成創建XMLHttpRequst對象的具體工作。這個方法中只有簡單的分支邏輯（選擇邏輯）來確定如何創建對象。對window.ActiveXObject的調用會返回一個對象，也可能返回一個null，if語句會把調用返回的結果看作是true或false(如果返回對象則為true，返回null則為false)，以此指示瀏覽器是否支持ActiveX控件，相應地得知瀏覽器是不是IE，如果確實是，則通過實例化一個ActiveX的一個新實例來創建XMLHttpRequst對象，并傳入一個串指令指示要創建何種類型的ActiveX對象

。在這個例子中為構造函數提供的字符串是Microsoft。XMLHTTP,這說明你想創建一個XMLHttpRequst的一個實例。

　　如果window.ActiveXObjec調用失?。ǚ祷豱ull）,JavaScript就會轉到else語句的分支確定瀏覽器是否把XMLHttpRequst實現為一個本地的JavaScript對象。如果存在window.XMLHttpRequest，就會創建XMLHttpRequst的一個實例。

　　由于ajax具有動態類型特性，而且XMLHttpRequst在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問XMLHttpRequst實例的屬性和方法，而不論這個實例創建的方法是什么。這就大大地簡化了開發過程，而且在JavaScript中也不必編寫特定于瀏覽器的邏輯。

1.2方法和屬性

　　abort()　　停止當前請求；

　　getAllResponseHeaders()　　把HTTP請求的所有響應首部作為鍵值對返回；

　　getResponseHeader("header")　　返回指定首部的串值；

　　open("method","url")　　建立對服務器的調用。method參數可以使GET POST 或PUT。url可以使相對url或絕對url，這個方法還包括三個可選的參數；

　　send(content)　　向服務器發送請求；

　　setRequstHeader("header","value")　　把指定首部設置為所提供的值。在設置任何首部之前必須先調用open();

　　下面來更詳細地討論這些方法。

　　void open(string method, string url, boolean asynch ,string usename ,string password); 這個方法會建立對服務器的調用。這是初始化一個請求的純腳本方法。它有兩個必要的參數三個可選的參數。要提供調用的特定方法（get/post/put）,還要提供所調用資源的url。另外還可以傳遞一個Boolean值，這是這個調用是異步的還是同步的。默認值為true,表示本質上是異步的，如果這個參數為false，處理就會等待，知道服務器返回響應為止。由于異步調用是ajax主要優勢之一，所以倘若這個參數設為false，從某種程度上講與使用XMLHttpRequst對象的初衷不太相符。不過在某些情況下見這個參數設為fals也是有用的，比如持久存儲頁面之前可以先驗證用戶的輸入。最后兩個參數不說自明，允許你指定一個特定的用戶名和密碼。

　　void send(content) 這個方法具體向服務器發送請求。如果請求聲明為異步的，這個方法就會立即返回，否則它會等到直到接收到響應為止。可選參數可以是DOM對象的實例、輸入流，或串。傳入這個方法的內容會作為一個請求體的一部分發送。

　　void setRequstHeader(string header,string value);這個方法為為HTTP請求中一個給定的首部設置值，它有兩個參數，第一個串表示要設置的首部，第二個串表示要在首部中放置的值。注意，這個方法必須在調用opend()之后才能調用。

　　在所有的這些方法中，最有可能用到的就是opend()和send()。XMLHttpRequest對象還有很多屬性，在設計Ajax交互時這些屬性非常有用。

　　void abort() 顧名思義，這個方法就是要停止請求。

　　string getAllResponseHeaders() 這個方法的核心功能對開發人員應該很熟悉，它返回一個串，其中包含HTTP請求的所有響應首部，首部包括Content-Length/Data和URI

　　string getReponseHeader(string header) 這個方法與getAllResponseHeaders()是對應的，不過它有一個參數表示您希望的指定收不到的值，并把這個值作為串返回。除了這些標準方法，處理XMLHttpRequst可以大量使用這些屬性。

　　onreadystatechange 每個狀態改變時都會觸發這個事件處理器，通常會調用一個javacript函數；

　　readyState 請求狀態。有5個可取的值：0：=未初始化，1=正在加載，2=已加載，3=交互中，4=完成；

　　responseText服務器的響應，表示為一個串；

　　responseXML服務器的響應，表示為XML,這個對象可解釋為DOM對象；

　　status服務器HTTP狀態碼（200對應Ok 404對應 not found ,等）

　　statusText HTTP狀態碼的相應文本（ok或not found等）

1.3AJAX交互設計

　　1.一個客戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作，很多這樣的事都可以觸發Ajax事件。

<input type="text" d="email" name="email" onblur="validateEmail()"/>

　　2.創建XMLHttpRequst對象的一個實例。使用open()方法建立調用，并調用url及所希望的HTTP方法（通常是post/get）。請求實際上是通過一個send()方法調用觸發，代碼如下：

var xmlHttp; function validateEmail(){ 　　var email = document.getElementById("email");
　　var url = "validate?email="+escape(email.value);
　　if(window.ActiveObject){
　　　　xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
　　}
　　else if(window.XMLHttpRequst){
　　　　xmlHttp = new XMLHttpRequst();
　　}
　　xmlHttp.open("get",url);
　　xmlHttp.onreadystatechange = callback;
　　xmlHttp.send(null);
}

　　3.向服務器做出請求?？赡苷{用servlet、CGI腳本，或者任何服務器端技術。

　　4.服務器可以做你想做的事情，包括訪問時數據庫，甚至訪問另一個系統。

　　5.請求返回到瀏覽器。content-type設置為text/xml ,XMLHttpRequst的對象只能處理text/html類型的結果。在另外一些更復雜的示例中

　　6.在這個demo中，XMLHttpRequst對象配置為處理返回結果時要調用callback()函數，這個函數會檢查XMLHttpRequst對象的readyState屬性，然后查看服務器返回的狀態碼。如果一切正常，callback()函數就會在客戶端做一些有意思的工作。一下就是一個典型的回調方法：

function callback(){ 　　if(xmlHttp.readyState == 4){
　　　　if(xmlHttp.status == 200){
　　　　　　//do something interesting here
　　　　}
　　} }

　　可以看到，正常的請求/響應模式有所不同，但對于web開發人員來說，并不是完全陌生的。顯然，在創建和建立XMLHttpRequst對象時還可以做些事情，另外當“回調”函數完成狀態檢查之后也可以有所作為。一般的，你會把這些標準調用包裝在一個庫中，一便在整個應用中使用，或者可以使用web上提供的庫

基于對象的Javascript以及繼承的實現

關鍵字this

指向調用該方法的“當前”對象

this使用的幾種場合：

用在對象的方法中

構造函數

事件處理函數

原型－prototype

objectName.prototype

objectName 是對象的名稱。

objectName.prototype本身也是對象

用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。

prototype 對象是個模板，要實例化的對象都以這個為基礎。

prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例

利用prototype修改本地對象

個本地對象也有prototype屬性

通過prototype屬性創建新方法

通過prototype屬性重定義已有方法

var books = new Array("java","C","VB"); Array.prototype.hasItem = function(oItem){ for(i=0; i<books.length; i++){ if(oItem == books[i]){ return true; } } return false;}

var books = new Array("java","C","VB");

Array.prototype.pop = function(){

return "pop object";

}

var o = books.pop(); //原本為VB -à 重載后 pop object

自定義對象的4種方式

1．通過工廠方式創建

此工廠創建的對象各屬性都一樣

function createPerson(){

var oPerson = new Object()；

oPerson.name = "張三";

oPerson.age = 22;

oPerson.showAge = function(){

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson();

var oPerson2 = createPerson();

此工廠根據傳參的不同 創建不同的屬性

function createPerson(sName, iAge){

var oPerson = new Object()；

oPerson.name = sName;

oPerson.age = iAge;

oPerson.showAge = function(){ //或者函數外定義

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson("張三"，22);

var oPerson2 = createPerson("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

2．通過構造函數方式創建

function Person(sName, iAge){

this.name = sName;

this.age = iAge;

this.showAge = function(){ //或者函數外定義

alert(this.age);

}

}

var oPerson1 = new Person("張三"，22);

var oPerson2 = new Person("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

3．通過原型方式創建

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.books = new Array("java","C");

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

oPerson1.books.push("VB");

alert(oPerson1.books); // java,C,VB

alert(oPerson2.books); // java,C,VB

4．混合的構造函數/原型方式創建

function Car(sColor, iDoors, iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike", "Sue");

}

Car.prototype.showColor = function () {

alert(this.color);

};

var oCar1 = new Car("red", 4, 23);

var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"

alert(oCar2.drivers); //outputs "Mike,Sue"

原型(prototype)鏈

prototype類似于模板，要實例化的對象都以這個模板為基礎， prototype對象的任何屬性和方法都被傳遞給類的所有實例。

所有 JavaScript 內部類的 prototype 屬性都是只讀的，所以：不能更改內部對象的 prototype ，只能為內部對象的原型添加或重載屬性和方法

自定義對象可以更改其prototype ，即：

子類類名.prototype = 父類對象實例;

1、創建基類

function Polygon(iSides){ //多邊形

this.iSides = iSides;

}

Polygon.prototype.getArea = function(){

return 0;

}

2、創建子類

function Triangle(iBase,iHeight){ //三角形對象

this.iBase = iBase;

this.iHeight = iHeight;

}

Triangle.prototype = new Polygon(3);

Triangle.prototype.getArea = function(){

return 0.5 * this.iBase * this.iHeight;

}

function Rectangle(iLength,iWidth){ //矩形對象

this.iLength = iLength;

this.iWidth = iWidth;

}

Rectangle.prototype = new Polygon(4);

Rectangle.prototype.getArea = function(){

return this.iLength * this.iWidth;

}

3、測試

var triangle = new Triangle(10,4);

var rectangle = new Rectangle(8,4);

alert(triangle.iSides);

alert(rectangle.iSides);

alert(triangle.getArea());

alert(rectangle.getArea());