六,JavaWeb簡略的談下前端技術<三>JavaScript

時間 2019-11-09

標籤 javaweb 簡略前端技術 javascript 欄目 Java 简体版

原文原文鏈接

首先，JavaScript就是你們熟知的js，它和Java沒有半毛錢關係，和JSP也沒有半毛錢關係。他是Web頁面中的腳本語言，是一種解釋型語言，它的發明者看到java挺火的，而後就說，那麼我們就叫他javascript吧。純粹是爲了沾光來着。 javascript

那麼它有啥做用呢？咱們前面說過，HTML語言來決定一個網頁的內容，CSS來決定這個頁面的樣式，那麼JS就是來把這個頁面從靜態頁面變成動態的可交互的頁面的。咱們在之後的javaWeb程序中，常常性的會用JavaScript來進行數據驗證啊，控制瀏覽器啊，生成時鐘啊，日曆啊等小應用。 html

JavaScript是以事件來驅動的，直接對客戶端進行相應，不須要通過服務器，作過window編程的人就很好理解這句話，好比說我點擊了一個按鈕，那麼久會觸發一個按鈕的事件，這個事件的處理函數就能夠直接做出處理，好比說去執行一個算數運算啊什麼的，這個過程是不須要通過服務器的。驅動事件的事件函數裏邊能夠直接作出相應的事情而後返回給客戶端。 java

6.1 JavaScript的語言基礎

大體就幾點。 web

1，區分大小寫。編程

2，可加分號可不加分號，不加分號就以代碼行的結尾做爲結尾。瀏覽器

3，弱類型，沒有明確的變量類型，都是用var來定義變量得，初始化成什麼類型的數據，變量就是什麼類型的。服務器

4，大括號標記數碼段。微信

5，//和/*,,,*/一共有兩種註釋。和C的註釋用法相同。函數

6，數據類型有：int，float，string，boolean，object，null，undefined。 spa

7，關鍵字通常的C，C++，JAVA關鍵字不用就沒啥問題。

8，運算符，等同於C的運算符。

6.2 JavaScript的流程控制語句

和C的控制語言同樣。

6.3 JavaScript的函數定義和調用

1，函數的定義，最經常使用的就是function來實現，舉例：

Function functioName([param1, param2,...]){

Statemets;

[return exprission;]

}

2,函數的調用，和C同樣，有參數就加參數，沒參數就直接調用就好了。

6.4 JavaScript的事件處理

前邊說話JavaScript是事件驅動的。這裏在介紹一下，好比說頁面加載完畢以後就會觸發onload事件，當用戶點擊某個按鈕的時候就會觸發onclick事件。事件處理程序就是爲了響應這其中的某個事件而執行的處理程序。事件處理程序能夠是任意的Javascipt語句，可是通常都是自定義的函數來進行事件處理。

事件的類型：多數的瀏覽器內部有不少的事件，這個事件我就不在列表格一一的描述了，百度隨便找就一大把無非就是點擊按鈕onclick，加載完了onload，按下鍵盤是什麼事件了，按下鼠標又怎麼滴了，這些無聊的東西。我們爲了趕忙去搞後臺，這個就忽略了吧。

6.5 JavaScript的經常使用對象

比較經常使用的主要有三個，String對象，Date對象，window對象。

String對象。它是動態對象，須要建立對象實例後才能夠引用的屬性和方法。它能夠經過new來建立也能夠經過給var變量初始化一個字符串來建立。它經常使用的方法和Java的string對象差很少。不在贅述，其中可能常常用到的就是length方法了，就是返回字符串的長度。

Date對象。必須使用new來建立，mydate = new Data（）；經過調用Data對象的方法能夠獲取各類各樣的時間，好比說四位數的年份啦，小時數，分鐘數啦，固然可使用各類set方法來設置Data對象。

Window對象。它是真個網頁的對象。一個網頁最高級別的存在。各類方法仍是不在贅述，舉個例子以下：

<input name=」button」 value=」打開新窗口」 type=」button」 onclick=」

window.open(‘newWindow.html’,’’,’width=360,height=100,status=yes’)」>

點擊這個按鈕就會打開一個新的窗口。

6.6 DOM技術

DOM=Document Object Model（文檔對象模型）。

它把一個網頁頁面當作一個樹，其中每個頁面的標記都是他的一個節點，打個比方來講，若是用過Json的人應該很好理解，一樣的一串字符串，只要它符合特定的格式，你就能夠用JSON來解析，組合一個串字符串。因此，字符串之於JSON就差很少像Web頁面之於DOM。

使用DOM技術以後就能夠經過它來遍歷一個頁面裏邊的因此標記（也就是DOM技術裏邊的元素），打個比方：

<html>

<head>

<title>一個html文檔<title>

</head>

<body>

呵呵

</body>

</html>

在這個很是簡單的頁面中的層次結構以下圖：

額，和上邊的HTML文檔不同，這個圖我是別的書裏邊截的圖，我女盆友把我鼠標「搶」走了，無法畫，大體就是這個樣子。

其中 head 元素在 html 的下邊因此稱爲 html 元素的子節點 (children) ， html 元素則稱爲 head 元素的父節點 (parent) ， body 元素和 head 元素有同一個父節點因此稱爲 head 元素的兄弟節點 (sibling) 。 Head 元素一下的元素都是 html 元素的後代（ descendant ） ,html 元素以上的節點是 head 元素如下元素的祖先。

遍歷文檔。經過parentNode，firstChild，nextChild，lastChild，prevousSibling等屬性能夠很輕鬆的來遍歷一個web文檔的全部節點。

獲取文檔中指定的元素。能夠經過ID獲取，也能夠經過名字(name屬性)獲取。例子：

document.getElementById(「userId」);

document.getElementByName(「userName」)[0];

巴拉巴拉這麼多也該睡了，明天就開始搭建JavaWeb的開發環境嘍。

下期預告：《七，搭建JavaWeb的開發環境》

若是想查看更多的技術文檔請關注個人微信公衆號：ITYaoDao，或者直接掃描下邊二維碼：