亚洲 欧洲 日韩 综合色天使,久久国产Av无码一区二区老太,人妻醉酒被下药迷昏带到诊所 ,亚州老熟女A片AV色欲小说

idea創(chuàng)建web項目沒有webapp，idea創(chuàng)建web項目沒有web文件夾？

投稿用戶 ? ? 創(chuàng)業(yè)雜談 ? 閱讀 1106

前端基礎

  • 前端：我們網(wǎng)站的頁面，包括網(wǎng)站的樣式、圖片、視頻等一切用戶可見的內容都是前端的內容。
  • 后端：處理網(wǎng)站的所有數(shù)據(jù)來源，比如我們之前從數(shù)據(jù)庫中查詢數(shù)據(jù)，而我們查詢的數(shù)據(jù)經過處理最終會被展示到前端，而用于處理前端數(shù)據(jù)的工作就是由后端來完成的。

相當于，前端僅僅是一層皮，它直接決定了整個網(wǎng)站的美觀程度，我們可以自由地編排頁面的布局，甚至可以編寫好看的特效；而靈魂則是后端，如何處理用戶的交互、如何處理數(shù)據(jù)查詢是后端的職責所在，我們前面學習的都是后端內容，而Java也是一門專注于后端開發(fā)的語言。

對于前端開發(fā)我們需要學習一些新的內容，只有了解了它們，我們才能編寫出美觀的頁面。

學習前端的目的只是為了讓同學們了解前后端的交互方式，在進行后端開發(fā)時思路能夠更加清晰，有關前端的完整內容學習，可以瀏覽其他前端知識教程。

我們在最開始講解網(wǎng)絡編程時，提到了瀏覽器訪問服務器，實際上瀏覽器訪問服務器就是一種B/S結構（ Browser/Server，瀏覽器/服務器模式 ），而我們使用Java代碼編寫的客戶端連接服務器就是一種C/S結構（ Client/Server架構，即客戶端/服務器架構 ）。

HTML頁面

我們前面學習了XML語言，它是一種標記語言，我們需要以成對標簽的格式進行填寫，但是它是專用于保存數(shù)據(jù)，而不是展示數(shù)據(jù)，而HTML恰恰相反，它專用于展示數(shù)據(jù)，由于我們前面已經學習過XML語言了，HTML語言和XML很相似，所以我們學習起來會很快。

第一個HTML頁面

我們前面知道，通過瀏覽器可以直接瀏覽XML文件，而瀏覽器一般是用于瀏覽HTML文件的，以HTML語言編寫的內容，會被瀏覽器識別為一個頁面，并根據(jù)我們編寫的內容，將對應的組件添加到瀏覽器窗口中。

我們一般使用Chrome、Safari、Microsoft Edge等瀏覽器進行測試，IE瀏覽器已經徹底淘汰了！

比如我們可以創(chuàng)建一個Html文件來看看瀏覽器會如何識別，使用IDEA也能編寫HTML頁面，我們在IDEA中新建一個 Web模塊 ，進入之后我們發(fā)現(xiàn)，項目中沒有任何內容，我們右鍵新建一個HTML文件，選擇HTML5文件，并命名為index，創(chuàng)建后出現(xiàn)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

我們發(fā)現(xiàn)，它和XML基本長得一樣，并且還自帶了一些標簽，那么現(xiàn)在我們通過瀏覽器來瀏覽這個HTML文件（這里推薦使用內置預覽，不然還得來回切換窗口）

我們發(fā)現(xiàn)現(xiàn)在什么東西都沒有，但是在瀏覽器的標簽位置顯示了網(wǎng)頁的名稱為 Title ，并且顯示了一個IDEA的圖標作為網(wǎng)頁圖標。

現(xiàn)在我們稍微進行一些修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lbw的直播間</title>
</head>
<body>
    現(xiàn)在全體起立
</body>
</html>

再次打開瀏覽器，我們發(fā)現(xiàn)頁面中出現(xiàn)了我們輸入的文本內容，并且標題也改為了我們自定義的標題。

我們可以在設置->工具->Web瀏覽器和預覽中將重新加載頁面規(guī)則改為 變更時 ，這樣我們使用內置瀏覽器或是外部瀏覽器，可以自動更新我們編寫的內容。

我們還可以在頁面中添加一個圖片，隨便將一張圖片放到html文件的同級目錄下，命名為 image.xxx ，其中xxx是后綴名稱，不要修改，我們在body節(jié)點中添加以下內容：

<img width="300" src="image.xxx" alt="劍光如我，斬盡牛雜">
<!--  注意xxx替換成對應的后綴名稱  -->

我們發(fā)現(xiàn)，我們的頁面中居然能夠顯示我們添加的圖片內容。因此，我們只需要編寫對應的標簽，瀏覽器就能夠自動識別為對應的組件，并將其展示到我們的瀏覽器窗口中。

我們再來看看插入一個B站的視頻，很簡單，只需要到對應的視頻下方，找到分享，我們看到有一個嵌入代碼：

<iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="800" height="500"> </iframe>

每一個頁面都是通過這些標簽來編寫的，幾乎所有的網(wǎng)站都是使用HTML編寫頁面。

HTML語法規(guī)范

一個HTML文件中一般分為兩個部分：

  • 頭部：一般包含頁面的標題、頁面的圖標、還有頁面的一些設置，也可以在這里導入css、js等內容。
  • 主體：整個頁面所有需要顯示的內容全部在主體編寫。

我們首先來看頭部，我們之前使用的HTML文件中頭部包含了這些內容：

<meta charset="UTF-8">
<title>lbw的直播間</title>

首先 meta 標簽用于定義頁面的一些元信息，這里使用它來定義了一個字符集（編碼格式），一般是UTF-8，下面的 title 標簽就是頁面的標題，會顯示在瀏覽器的上方。我們現(xiàn)在來給頁面設置一個圖標，圖標一般可以在字節(jié)跳動的IconPark網(wǎng)站找到： https://iconpark.oceanengine.com/home，選擇一個自己喜歡的圖標下載即可。

將圖標放入到項目目錄中，并命名為icon.png，在HTML頭部添加以下內容：

<link rel="icon" href="icon.png" type="image/x-icon" />

link 標簽用于關聯(lián)當前HTML頁面與其他資源的關系，關系通過 rel 屬性指定，這里使用的是icon表示這個文件是當前頁面圖標。

現(xiàn)在訪問此頁面，我們發(fā)現(xiàn)頁面的圖標已經變成我們指定的圖標樣式了。

現(xiàn)在我們再來看主體，我們可以在主體內部編寫該頁面要展示的所有內容，比如我們之前就用到了img標簽來展示一個圖片，其中每一個標簽都稱為一個元素：

<img width="300" src="image.xxx" alt="當圖片加載失敗時，顯示的文本">

我們發(fā)現(xiàn)，這個標簽只存在一個，并沒有成對出現(xiàn)，HTML中有些標簽是單標簽，也就是說只有這一個，還有一些標簽是雙標簽，必須成對出現(xiàn)，HTML中，也不允許交叉嵌套，但是出現(xiàn)交叉嵌套時，瀏覽器并不會提示錯誤，而是仍舊嘗試去解析這些內容，甚至會幫助我們進行一定程度的修復，比如：

<body>

    <iframe src="//player.bilibili.com/player.html?aid=333231998&bvid=BV1rA411g7q8&cid=346917516&page=1" width="800" height="500"
            scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</body>
</iframe>

很明顯上面的代碼已經出現(xiàn)交叉嵌套的情況了，但是依然能夠在瀏覽器中正確地顯示。

在主體中，我們一般使用div標簽來分割頁面：

<body>
    <div>我是第一塊</div>
    <div>我是第二塊</div>
</body>

通過使用 div 標簽，我們將整個頁面按行劃分，而高度就是內部元素的高度，那么如果只希望按元素劃分，也就是說元素占多大就劃分多大的空間，那么我們就可以使用 span 標簽來劃分：

<body>
    <div>
        <span>我是第一塊第一個部分</span>
        <span>我是第一塊第二個部分</span>
    </div>
    <div>我是第二塊</div>
</body>

我們也可以使用 p 段落標簽，它一般用于文章分段：

<body>
    <p>
        你看這個彬彬啊，才喝幾罐就醉了，真的太遜了。 這個彬彬就是遜呀！
        聽你這么說，你很勇哦？ 開玩笑，我超勇的，超會喝的啦。
        超會喝，很勇嘛。身材不錯哦，蠻結實的嘛。
    </p>
    <p>
        哎，杰哥，你干嘛啊。都幾歲了，還那么害羞！我看你，完全是不懂哦！
        懂，懂什么啊？ 你想懂？我房里有一些好康的。
        好康，是新游戲哦！ 什么新游戲，比游戲還刺激！
    </p>
    <p>
        杰哥，這是什么啊？ 哎呦，你臉紅啦！來，讓我看看。
        不要啦??！ 讓我看看嘛。 不要啦，杰哥，你干嘛?。?        讓我看看你法語正不正常??！
    </p>
</body>

那么如果遇到特殊字符該怎么辦呢？和XML一樣，我們可以使用轉義字符：

idea創(chuàng)建web項目沒有webapp，idea創(chuàng)建web項目沒有web文件夾？

注意：多個連續(xù)的空格字符只能被識別為一個，如果需要連續(xù)多個必須使用轉義字符，同時也不會識別換行，換行只會變成一個空格，需要換行必須使用 br 標簽。

通過了解了HTML的一些基礎語法，我們現(xiàn)在就知道一個頁面大致是如何編寫了。

HTML常用標簽

前面我們已經了解了HTML的基本語法規(guī)范，那么現(xiàn)在我們就來看看，有哪些常用的標簽吧，首先是換行和分割線：

  • br 換行
  • hr 分割線
<body>
    <div>
        我是一段文字<br>我是第二段文字
    </div>
    <hr>
    <div>我是底部文字</div>
</body>

標題一般用h1到h6表示，我們來看看效果：

<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<p>我是正文內容，真不錯。</p>
</body>

現(xiàn)在我們來看看超鏈接，我們可以添加一個鏈接用于指向其他網(wǎng)站：

<a href="https://www.bilibili.com">點擊訪問小破站</a>

我們也可以指定頁面上的一個錨點進行滾動：

<body>
<a href="#test">跳轉錨點</a>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<div id="test">我是錨點</div>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
</body>

每個元素都可以有一個id屬性，我們只需要給元素添加一個id屬性，就使用a標簽可以跳轉到一個指定錨點。

我們接著來看看列表元素，這是一個無需列表，其中每一個 li 表示一個列表項：

<ul>
    <li>一號選項</li>
    <li>二號選項</li>
    <li>三號選項</li>
    <li>四號選項</li>
    <li>五號選項</li>
</ul>

我們也可以使用 ol 來顯示一個有序列表：

<ol>
    <li>一號選項</li>
    <li>二號選項</li>
    <li>三號選項</li>
    <li>四號選項</li>
    <li>五號選項</li>
</ol>

表格也是很重要的一種元素，但是它編寫起來相對有一點麻煩：

<table>
    <thead>
    <tr>
        <th>學號</th>
        <th>姓名</th>
        <th>性別</th>
        <th>年級</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>0001</td>
        <td>小明</td>
        <td>男</td>
        <td>2019</td>
    </tr>
    <tr>
        <td>0002</td>
        <td>小紅</td>
        <td>女</td>
        <td>2020</td>
    </tr>
    </tbody>
</table>

雖然這樣生成了一個表格，但是這個表格并沒有分割線，并且格式也不符合我們想要的樣式，那么如何才能修改這些基礎屬性的樣式呢，我們就需要聊聊CSS了。

HTML表單

表單就像其名字一樣，用戶在頁面中填寫了對應的內容，點擊按鈕就可以提交到后臺，比如登陸界面，就可以使用表單來實現(xiàn)：

一個網(wǎng)頁中最重要的當屬輸入框和按鈕了，那么我們來看看如何創(chuàng)建一個輸入框和按鈕：

<label>
    我是輸入框
    <input type="text">
</label>

對于一個輸入框，我們一般會將其包括在一個 lable 標簽中，它和span效果一樣，但是我們點擊前面文字也能快速獲取輸入框焦點。

<body>
<div>登陸我們的網(wǎng)站</div>
<hr>
<div>
    <label>
        賬號：
        <input type="text">
    </label>
</div>
<div>
    <label>
        密碼：
        <input type="password">
    </label>
</div>
</body>

輸入框可以有很多類型，我們來試試看password，現(xiàn)在輸入內容就不會直接展示原文了。

創(chuàng)建一個按鈕有以下幾種方式，在學習JavaWeb時，我們更推薦第二種方式，我們后面進行登陸操作需要配合表單使用：

<button>登陸</button>
<input type="submit" value="登陸">
<input type="button" value="登陸">

現(xiàn)在我們就可以寫一個大致的登陸頁面了：

<body>
    <h1>登陸我們的網(wǎng)站</h1>
    <form>
        <div>
            <label>
                賬號：
                <input type="text" placeholder="Username...">
            </label>
        </div>
        <div>
            <label>
                密碼：
                <input type="password" placeholder="Password...">
            </label>
        </div>
        <br>
        <a href="https://www.baidu.com">忘記密碼</a>
        <br>
        <br>
        <div>
            <input type="submit" value="登陸">
        </div>
    </form>
</body>

表單一般使用 form 標簽將其囊括，但是現(xiàn)在我們還用不到表單提交，因此之后我們再來講解表單的提交。

input 只能實現(xiàn)單行文本，那么如何實現(xiàn)多行文本呢？

<label>
    這是我們的文本框<br>
    <textarea placeholder="文本內容..." cols="10" rows="10"></textarea>
</label>

我們還可以指定默認的行數(shù)和列數(shù)，拖動左下角可以自定義文本框的大小。

我們還可以在頁面中添加勾選框：

<label>
    <input type="checkbox">
    我同意本網(wǎng)站的隱私政策
</label>

上面演示的是一個多選框，那么我們來看看單選框：

<label>
    <input type="radio" name="role">
    學生
</label>
<label>
    <input type="radio" name="role">
    教師
</label>

這里需要使用name屬性進行分組，同一個組內的選項只能選擇一個。

我們也可以添加列表讓用戶進行選擇，創(chuàng)建一個下拉列表：

<label>
    登陸身份：
    <select>
        <option>學生</option>
        <option>教師</option>
    </select>
</label>

默認選取的是第一個選項，我們可以通過 selected 屬性來決定默認使用的是哪個選項。

當然，HTML的元素遠不止我們所提到的這些，有關更多HTML元素的內容，可以自行了解。

CSS樣式

之前我們編寫的頁面非?；A，我們只能通過一些很基本的屬性來排列我們的頁面元素，那么如何實現(xiàn)更高度的自定義呢，我們就需要用到CSS來自定義樣式，首先我們創(chuàng)建一個名為 style.css 的文件。

首先在我們HTML文件的頭部添加：

<link href="style.css" rel="stylesheet">

我們在CSS文件中添加以下內容：

body {
    text-align: center;
}

我們發(fā)現(xiàn)，網(wǎng)頁的內容全部變?yōu)榫又酗@示了，這正是css在生效，相當于我們現(xiàn)在給頁面添加了自定義的樣式規(guī)則。

當然，我們也可以選擇不使用CSS，而是直接對某個元素添加樣式：

<body style="text-align: center;">
  ...

這樣的效果其實是等同于上面的css文件的，相當于我們直接把樣式定義在指定元素上。

也可以在頭部直接定義樣式，而不是使用外部文件：

<style>
    body {
        text-align: center;
    }
</style>

使用以上三種方式都可以自定義頁面的樣式，我們推薦使用還是第一種，不然我們的代碼會很繁雜。

樣式的屬性是非常多的，我們不可能一個一個全部講完，視頻中用到什么再來講解什么，如果同學們感興趣，可以自行下去了解。

CSS選擇器

我們首先來了解一下選擇器，那么什么是選擇器呢？我們想要自定義一個元素的樣式，那么我們肯定要去選擇某個元素，只有先找到要自定義的元素，我們才能開始編寫樣式。

我們上面的例子中使用的就是標簽名選擇器，它可以快速選擇頁面中所有指定的的標簽，比如我們之前使用的就是 body 標簽，那么就相當于頁面中所有的body元素全都使用此樣式，那么我們現(xiàn)在來試試看選擇頁面中所有的 input 標簽：

input {
    width: 200px;
}

我們發(fā)現(xiàn)，頁面中所有的 input 元素寬度全部被設定為了200個像素（ px 是單位大小，代表像素，除了 px 還有 em 和 rem ，他們是根據(jù)當前元素字體大小決定的相對大小，一般用于適配各種大小的瀏覽器窗口，這里暫時不用）

樣式編寫完成后，如果只有一個屬性，可以不帶 ; 若多個屬性則每個屬性后面都需要添加一個 ;

因此，一個標簽選擇器的格式為：

標簽名稱 {
  屬性名稱: 屬性值
}

我們還可以設定輸入框的字體大小、行高等：

input {
    width: 200px;
    font-size: 20px;
    line-height: 40px;
}

我們現(xiàn)在可以通過選擇器快速地去設置某個元素樣式了，那么如何實現(xiàn)只設置某個元素的樣式呢，現(xiàn)在我們來看看，id選擇器，我們之前已經講解過了，每個元素都可以有一個id屬性，我們可以將其當做一個跳轉的錨點使用，而現(xiàn)在，我們可以使用css來進行定位：

我們先為元素添加id屬性：

<h1 id="title">登陸我們的網(wǎng)站</h1>

現(xiàn)在使用CSS選擇我們的元素，并設定一個屬性，選擇某個id需要在前面加上一個 # ：

#title {
    color: red;
}

雖然id選擇器已經可以很方便的指定某個元素，但是如果我們希望n個但不是元素都被選擇，id選擇器就無法實現(xiàn)了，因為每個元素的id是唯一的，不允許出現(xiàn)重復id的元素，因此接著我們來講解一下類選擇器。

每個元素都可以有一個 class 屬性，表示當前元素屬于某個類（注意這里的類和我們Java中的類概念完全不同）一個元素可以屬于很多個類，一個類也可以被很多個元素使用：

<form>
    <div >
        <label class="test">
            賬號：
            <input type="text" placeholder="Username...">
        </label>
    </div>
    <div>
        <label class="test">
            密碼：
            <input type="password" placeholder="Password...">
        </label>
    </div>
</form>

上面的例子中，兩個 label 元素都使用了 test 類（類名稱是我們自定義的），現(xiàn)在我們在css文件中編寫以下內容來以類進行選擇：

.test{
    color: blue;
}

我們發(fā)現(xiàn)，兩個標簽的文本內容都變?yōu)榱怂{色，因此使用類選擇器，能夠對所有為此類的元素添加樣式。注意在進行類選擇時，我們需要在類名前面加上 . 來表示。

組合選擇器和優(yōu)先級問題

我們也可以讓多個選擇器，共用一個css樣式：

.test, #title {
    color: red;
}

只需要并排寫即可，注意中間需要添加一個英文的逗號用于分割，我們也可以使用 * 來一次性選擇所有的元素：

* {
    color: red;
}

我們還可以選擇位于某個元素內的某個元素：

div label {
    color: red;
}

這樣的話，就會選擇所有位于div元素中的label元素。

當然，我們這里只介紹了一些常用的選擇器，有關詳細的CSS選擇器可以查閱： https://www.runoob.com/cssref/css-selectors.html

我們接著來看一下選擇器的優(yōu)先級：

idea創(chuàng)建web項目沒有webapp，idea創(chuàng)建web項目沒有web文件夾？

我們根據(jù)上面的信息，來測試一下，首先編寫一下HTML文件：

<body>
    <div class="test" id="simple" style="color: blue">我是測試文本內容</div>
</body>

現(xiàn)在我們來編寫一下css文件：

.test {
    color: yellow;
}

#simple {
    color: red;
}

* {
    color: palegreen;
}

那么現(xiàn)在我們可以看到，實際上生效的是我們直接編寫在標簽內部的內聯(lián)屬性，那么現(xiàn)在我們依次進行移除，來看看它們的優(yōu)先級。

那么如果我們希望某個屬性無視任何的優(yōu)先級，我們可以在屬性后面添加 !important 標記，表示此屬性是一個重要屬性，它的優(yōu)先級會被置為最高。

思考：那要是我每個選擇器的這個屬性后面都加一個 !important 會怎么樣？

自定義邊距

我們來看看，如何使用css控制一個div板塊的樣式，首先編寫以下代碼，相當于一個div嵌套了一個div元素：

<div id="outer">
    <div id="inner">
        
    </div>
</div>

現(xiàn)在編寫一下自定義的css樣式，我們將div設定為固定大小，并且背景顏色添加為綠色：

#outer {
    background: palegreen;
    width: 300px;
    height: 300px;
}

我們發(fā)現(xiàn)左側快速預覽頁面存在空隙，這是因為瀏覽器給我們添加了一個邊距屬性，我們只需要覆蓋此屬性并將其設定為0即可：

body {
    margin: 0;
}

現(xiàn)在我們給內部嵌套的div也設定一個大小，并將顏色設定為橙色：

#inner {
    background: darkorange;
    width: 100px;
    height: 100px;
}

現(xiàn)在我們發(fā)現(xiàn)內部的div元素位于右上角，我們還可以以百分比的形式來指定大小：

#inner {
    background: darkorange;
    width: 100%;
    height: 100%;
}

百分比會依照當前可用大小來進行分配，比如當前位于一個div內部，并且外部div元素是固定大小300px，因此100%就相當于使用了外部的全部大小，也是300px，現(xiàn)在內部元素完全將外部元素覆蓋了，整個元素現(xiàn)在呈現(xiàn)為橙色。

我們可以為一個元素設定邊距，邊距分為外邊距和內邊距，外部元素內邊距決定了內部元素與外部元素之間的間隔，我們來修改一下css樣式：

#outer {
    background: palegreen;
    width: 300px;
    height: 300px;
    padding: 10px;
}

我們發(fā)現(xiàn)，內部的div元素小了一圈，這是因為外部div元素設定了內邊距，上下左右都被設定為10px大小。

而我們發(fā)現(xiàn)，實際上我們在一開始也是將body的外邊距設定為了0，整個頁面跟瀏覽器窗口直接間隔0px的寬度。

編寫一個漂亮的登陸界面

現(xiàn)在我們就來嘗試編寫一個漂亮的登陸界面吧！

JavaScript語言

也稱為js，是我們整個前端基礎的重點內容，只有了解了JavaScript語言，我們才能了解前端如何與后端交互。

JavaScript與Java沒有毛關系，僅僅只是名字中包含了Java而已，跟Java比起來，它更像Python，它是一門解釋型語言，不需要進行編譯，它甚至可以直接在瀏覽器的命令窗口中運行。

它相當于是前端靜態(tài)頁面的一個補充，它可以讓一個普通的頁面在后臺執(zhí)行一些程序，比如我們點擊一個按鈕，我們可能希望執(zhí)行某些操作，比如下載文件、頁面跳轉、頁面彈窗、進行登陸等，都可以使用JavaScript來幫助我們實現(xiàn)。

我們來看看一個簡單的JavaScript程序：

const arr = [0, 2, 1, 5, 9, 3, 4, 6, 7, 8]

for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - 1; j++) {
        if(arr[j] > arr[j+1]){
            const tmp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = tmp
        }
    }
}

window.alert(arr)

這段代碼實際上就是實現(xiàn)了一個冒泡排序算法，我們可以直接在頁面的頭部中引用此js文件，瀏覽器會在加載時自動執(zhí)行js文件中編寫的內容：

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

我們發(fā)現(xiàn)JS的語法和Java非常相似，但是它還是和Java存在一些不同之處，而且存在很多陰間語法，那么我們來看看JS的語法。

JavaScript基本語法

在js中，定義變量和Java中有一些不同，定義一個變量可以使用 let 關鍵字或是 var 關鍵字，IDEA推薦我們使用 let 關鍵字，因為 var 存在一定的設計缺陷（這里就不做講解了，之后一律使用let關鍵字進行變量聲明）：

let a = 10;
a++;
window.alert(a)

上面的結果中，我們得到了a的結果是11，也就是說自增和自減運算在JS中也是支持的，并且JS每一句結尾可以不用加分號。

js并不是Java那樣的強類型語言（任意變量的類型一定是明確的），它是一門弱類型語言，變量的類型并不會在一開始確定，因此我們在定義變量時無需指定變量的確切類型，而是在運行時動態(tài)解析類型：

let a = 10;
a = "HelloWorld！"
console.info(a)

我們發(fā)現(xiàn)，變量a已經被賦值為數(shù)字類型，但是我們依然在后續(xù)能將其賦值一個字符串，它的類型是隨時可變的。

很多人說，這種變態(tài)的類型機制是JS的一大缺陷。

世界上只有兩種語言：一種是很多人罵的，一種是沒人用的。

我們接著來看看，JS中存在的基本數(shù)據(jù)類型：

  • Number：數(shù)字類型（包括小數(shù)和整數(shù)）
  • String：字符串類型（可以使用單引號或是雙引號）
  • Boolean：布爾類型（與Java一致）

還包括一些特殊值：

  • undefined：未定義 – 變量聲明但不賦值默認為undefined
  • null：空值 – 等同于Java中的null
  • NaN：非數(shù)字 – 值不是合法數(shù)字，比如：
  • window.alert(100/'xx')

我們可以使用 typeof 關鍵字來查看當前變量值的類型：

let a = 10;
console.info(typeof a)
a = 'Hello World'
console.info(typeof a)

JavaScript邏輯運算和流程控制

我們接著來看看js中的關系運算符，包括如下8個關系運算符：大于（>）,小于（<）,小于等于（<=）,大于等于（>=）,相等（），不等（!=），全等（=），不全等（!==）

其實關系運算符大致和Java中的使用方法一致，不過它還可以進行字符串比較，有點像C++的語法：

console.info(666 > 777)
console.info('aa' > 'ab')

那么，相等和全等有什么區(qū)別呢？

console.info('10' == 10)
console.info('10' === 10)

我們發(fā)現(xiàn)，在Java中，若運算符兩邊是不同的基本數(shù)據(jù)類型，會直接得到false，而JS中卻不像這樣，我們發(fā)現(xiàn)字符串的10居然等于數(shù)字10，而使用全等判斷才是我們希望的結果。

== 的比較規(guī)則是：當操作數(shù)類型一樣時，比較的規(guī)則和恒等運算符一樣，都相等才相等，如果兩個操作數(shù)是字符串，則進行字符串的比較，如果里面有一個操作數(shù)不是字符串，那兩個操作數(shù)通過Number()方法進行轉換，轉成數(shù)字進行比較。

因此，我們上面進行的判斷實際上是運算符兩邊都進行了數(shù)字轉換的結果進行比較，自然也就得到了true，而全等判斷才是我們在Java中認識的相等判斷。

我們接著來看邏輯運算，JS中包括&&、||、&、|、?:等，我們先來看看位運算符：

console.info(4 & 7)
console.info(4 | 7)

實際上和Java中是一樣的，那么我再來看看邏輯運算：

console.info(true || false)

對于boolean變量的判斷，是與Java一致的，但是JS也可以使用非Boolen類型變量進行判斷：

console.info(!0)
console.info(!1)

和C/C++語言一樣，0代表false，非0代表true，那么字符串呢？

console.info(!"a")
console.info(!"")

我們發(fā)現(xiàn)，空串為false，非空串為true，我們再來看看：

console.info(true || 7)
console.info(7 || true)

我們發(fā)現(xiàn)，前者得到的結果為true，而后者得到的結果卻是是7，真是滑天下之大稽，什么鬼玩意，實際上是因為，默認非0都是true，而后者又是先判斷的7，因此會直接得到7而不是被轉換為true

那么我們再來看看幾個特殊值默認代表什么：

console.info(!undefined)
console.info(!null)
console.info(!NaN)

最后來使用一下三元運算符，實際上和Java中是一樣的：

let a = true ? "xx" : 20
console.info(a)

得益于JS的動態(tài)類型，emmm，三元運算符不一定需要固定的返回值類型。

JS的分支結構，實際上和Java是一樣的，也是使用if-else語句來進行：

if("lbwnb"){   //非空串為true
    console.info("!!!")
} else {
    console.info("???")
}

同理，多分支語句也能實現(xiàn)：

if(""){
    console.info("!!!")
} else if(-666){
    console.info("???")
} else {
    console.info("O.O")
}

當然，多分支語句也可以使用switch來完成：

let a = "a"
switch (a){
    case "a":
        console.info("1")
        break
    case "b":
        console.info("2")
        break
    case "c":
        console.info("3")
        break
    default:
        console.info("4")
}

接著我們來看看循環(huán)結構，其實循環(huán)結構也和Java相差不大：

let i = 10
while(i--){
    console.info("100")
}
for (let i = 0; i < 10; i++) {
    console.info("??")
}

JavaScript函數(shù)定義

JS中的方法和Java中的方法定義不太一樣，JS中一般稱其為函數(shù)，我們來看看定義一個函數(shù)的格式是什么：

function f() {
    console.info("有一個人前來買瓜")
}

定義一個函數(shù)，需要在前面加上 function 關鍵字表示這是一個函數(shù)，后面跟上函數(shù)名稱和 () ，其中可以包含參數(shù)，在 {} 中編寫函數(shù)代碼。我們只需要直接使用函數(shù)名+ () 就能調用函數(shù)：

f();

我們接著來看一下，如何給函數(shù)添加形式參數(shù)以及返回值：

function f(a) {
    console.info("得到的實參為："+a)
    return 666
}

f("aa");

由于JS是動態(tài)類型，因此我們不必指明參數(shù)a的類型，同時也不必指明返回值的類型，一個函數(shù)可能返回不同類型的結果，因此直接編寫return語句即可。同理，我們可以在調用函數(shù)時，不傳參，那么默認會使用undefined：

function f(a) {
    console.info("得到的實參為："+a)
    return 666
}

f();

那么如果我們希望不傳參的時候使用我們自定義的默認值呢？

function f(a = "6666") {
    console.info("得到的實參為："+a)
    return 666
}

f();

我們可以直接在形參后面指定默認值。

函數(shù)本身也是一種類型，他可以被變量接收，所有函數(shù)類型的變量，也可以直接被調用：

function f(a = "6666") {
    console.info("得到的實參為："+a)
    return 666
}

let k = f;
k();

我們也可以直接將匿名函數(shù)賦值給變量：

let f = function (str) {
    console.info("實參為："+str)
}

既然函數(shù)是一種類型，那么函數(shù)也能作為一個參數(shù)進行傳遞：

function f(test) {
    test();
}

f(function () {
    console.info("這是一個匿名函數(shù)")
})

對于所有的匿名函數(shù)，可以像Java的匿名接口實現(xiàn)一樣編寫lambda表達式：

function f(test) {
    test();
}

f(() => {
    console.info("可以，不跟你多bb")
})
function f(test) {
    test("這個是回調參數(shù)");
}

f(param => {
    console.info("接受到回調參數(shù)："+param)
})

JavaScript數(shù)組和對象

JS中的數(shù)組定義與Java不同，它更像是Python中的列表，數(shù)組中的每個元素并不需要時同樣的類型：

let arr = [1, "lbwnb", false, undefined, NaN]

我們可以直接使用下標來訪問：

let arr = [1, "lbwnb", false, undefined, NaN]
console.info(arr[1])

我們一開始編寫的排序算法，也是使用了數(shù)組。

數(shù)組還可以動態(tài)擴容，如果我們嘗試訪問超出數(shù)組長度的元素，并不會出現(xiàn)錯誤，而是得到undefined，同樣的，我們也可以直接往超出數(shù)組長度的地方設置元素：

let arr = [1, "lbwnb", false, undefined, NaN]
arr[5] = "???"
console.info(arr)

也可以使用 push 和 pop 來實現(xiàn)棧操作：

let arr = [1, "lbwnb", false, undefined, NaN]
arr.push("bbb")
console.info(arr.pop())
console.info(arr)

數(shù)組還包括一些其他的方法，這里就不一一列出了：

let arr = [1, "lbwnb", false, undefined, NaN]
arr.fill(1)
console.info(arr.map(o => {
    return 'xxx'+o
}))

我們接著來看對象，JS中也能定義對象，但是這里的對象有點顛覆我們的認知：

let obj = new Object()
let obj = {}

以上兩種寫法都能夠創(chuàng)建一個對象，但是更推薦使用下面的一種。

JS中的對象也是非常隨意的，我們可以動態(tài)為其添加屬性：

let obj = {}
obj.name = "傘兵一號"
console.info(obj)

同理，我們也可以給對象動態(tài)添加一個函數(shù)：

let obj = {}
obj.f = function (){
    console.info("我是對象內部的函數(shù)")
}

obj.f()

我們可以在函數(shù)內使用this關鍵字來指定對象內的屬性：

let name = "我是外部變量"
let obj = {}
obj.name = "我是內部變量"
obj.f = function (){
    console.info("name屬性為："+this.name)
}

obj.f()

注意：如果使用lambda表達式，那么this并不會指向對象。

除了動態(tài)添加屬性，我們也可以在一開始的時候指定對象內部的成員：

let obj = {
    name: "我是內部的變量",
  	f: function (){
        console.info("name屬性為："+this.name)
    }
}

obj.f()

注意如果有多行屬性，需要在屬性定義后添加一個 , 進行分割！

JavaScript事件

當我們點擊一個頁面中的按鈕之后，我們希望之后能夠進行登陸操作，或是執(zhí)行一些JS代碼來實現(xiàn)某些功能，那么這個時候，就需要用到事件。

事件相當于一個通知，我們可以提前設定好事件發(fā)生時需要執(zhí)行的內容，當事件發(fā)生時，就會執(zhí)行我們預先設定好的JS代碼。

事件有很多種類型，其中常用的有：

  • onclick：點擊事件
  • oninput：內容輸入事件
  • onsubmit：內容提交事件

那么如何為事件添加一個動作呢？

<input type="password" oninput="console.info('正在輸入文本')">

我們可以直接為一個元素添加對應事件的屬性，比如 oninput 事件，我們可以直接在事件的值中編寫js代碼，但是注意，只能使用單引號，因為雙引號用于囊括整個值。

我們也可以單獨編寫一個函數(shù)，當事件發(fā)生時直接調用我們的函數(shù)：

function f() {
    window.alert("你輸入了一個字符")
}
<input type="password" oninput="oninput()">

僅僅了解了事件，還不足以實現(xiàn)高度自定義，我們接著來看DOM。

Document對象

當網(wǎng)頁被加載時，瀏覽器會創(chuàng)建頁面的文檔對象模型（ D ocument O bject M odel），它將整個頁面的所有元素全部映射為JS對象，這樣我們就可以在JS中操縱頁面中的元素。

idea創(chuàng)建web項目沒有webapp，idea創(chuàng)建web項目沒有web文件夾？

比如我現(xiàn)在想要讀取頁面中某個輸入框中的內容，那么我們就需要從DOM中獲取此輸入框元素的對象：

document.getElementById("pwd").value

通過document對象就能夠快速獲取當前頁面中對應的元素，并且我們也可以快速獲取元素中的一些屬性。

比如現(xiàn)在我們可以結合事件，來進行密碼長度的校驗，密碼長度小于6則不合法，不合法的密碼，會讓密碼框邊框變紅，那么首先我們先來編寫一個css樣式：

.illegal-pwd{
    border: red 1px solid !important;
    box-shadow: 0 0 5px red;
}

接著我們來編寫一下js代碼，定義一個函數(shù)，此函數(shù)接受一個參數(shù)（元素本身的對象）檢測輸入的長度是否大于6，否則就將當前元素的class屬性設定為css指定的class：

function checkIllegal(e) {
    if(e.value.length < 6) {
        e.setAttribute("class", "illegal-pwd")   
    }else {
        e.removeAttribute("class")
    }
}

最后我們將此函數(shù)綁定到 oninput 事件即可，注意傳入了一個this，這里的this代表的是輸入框元素本身：

<input id="pwd" oninput="checkIllegal(this)" type="password">

現(xiàn)在我們在輸入的時候，會自動檢查密碼是否合法。

既然oninput本身也是一個屬性，那么實際上我們可以動態(tài)進行修改：

document.getElementById("pwd").oninput = () => console.info("???")

那么，我們前面提及的window對象又是什么東西呢？

實際上Window對象范圍更加廣闊，它甚至直接代表了整個窗口，當然也包含我們的Document對象，我們一般通過Window對象來彈出提示框之類的東西。

發(fā)送XHR請求

JS的大致內容我們已經全部學習完成了，那么如何使用JS與后端進行交互呢？

我們知道，如果我們需要提交表單，那么我們就需要將表單的信息全部發(fā)送給我們的服務器，那么，如何發(fā)送給服務器呢？

通過使用XMLHttpRequest對象，來向服務器發(fā)送一個HTTP請求，下面是一個最簡單的請求格式：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com');
xhr.send();

上面的例子中，我們向服務器發(fā)起了一次網(wǎng)絡請求，但是我們請求的是百度的服務器，并且此請求的方法為GET請求。

我們現(xiàn)在將其綁定到一個按鈕上作為事件觸發(fā)：

function http() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.baidu.com');
    xhr.send();    
}
<input id="button" type="button" onclick="http()">

我們可以在網(wǎng)絡中查看我們發(fā)起的HTTP請求并且查看請求的響應結果，比如上面的請求，會返回百度這個頁面的全部HTML代碼。

實際上，我們的瀏覽器在我們輸入網(wǎng)址后，也會向對應網(wǎng)站的服務器發(fā)起一次HTTP的GET請求。

在瀏覽器得到頁面響應后，會加載當前頁面，如果當前頁面還引用了其他資源文件，那么會繼續(xù)向服務器發(fā)起請求，直到頁面中所有的資源文件全部加載完成后，才會停止。

本文內容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權/違法違規(guī)的內容， 請發(fā)送郵件至 sumchina520@foxmail.com 舉報，一經查實，本站將立刻刪除。
如若轉載，請注明出處：http://www.qjsdgw.cn/104536.html
贊 (0)
上一篇 2022年9月19日 pm8:06
下一篇 2022年9月19日 pm9:30

相關推薦