回上頁 - 網頁JQuery語法

001、網頁程式JavaScript/JQuery介紹

1、網頁前端程式JavaScript

網頁是由HTML標籤語法組成

透過CSS樣式表語法進行設計和美化

然後可以使用JavaScript程式進行畫面元件的控制和觸發事件

 

2、後端程式PHP/MySQL

網頁後端程式很多種，其中PHP程式語言是世界使用最多的網頁程式語言

MySQL是資料庫

範例：會員系統、討論區、電子郵件、Youtube影片

 

3、JQuery程式語言：是我們上課學習程式的語言

JQuery程式語言，其實就是JavaScript，是濃縮後的JavaScript函式庫，極大的簡化了寫法，變得更容易學習和使用，也因此自從有了JQuery之後，做為JQuery為基底開發出來的各方面設計和功能非常多

JavaScript寫法是：document.getElementById("div1")

JQuery寫法是：$("#div1")

JavaScript寫法是：

let div1 = document.getElementById("div1");

div1.addEventListener("click", function(){ alert(123); });

JQuery寫法是：

$("#div1").click(function(){ alert(123););

 

4、JQuery可以在網頁上學習哪些事？

層層堆疊的網頁標籤，要學習選擇器的寫法

學習各種元件事件，進行動態效果設計，資料判斷

有大量各類的內建函式可以使用

動態的元件效果，增加使用者對畫面的喜好

透過數據資料和控制元件，可以製作一些遊戲

 

5、下載文字軟體Sublime：

這是一套可以用來書寫各種純文字檔案的軟體，提供方便的程式碼格式化和顯示

1、打開Google，搜尋Sublime，點入網站，選擇Download，選擇Windows，下載並安裝

2、在桌面新增一個你"姓名"的資料夾

3、將開啟的目錄設定到你的桌面資料夾，File --> Open Folder --> 桌面 --> 你的姓名資料夾

4、寫一段文字內容，並儲存成 001.html。一般網頁是使用*.htm和*.html副檔名

5、開啟網頁：點二下你儲存的網頁檔案，就可以透過chrome來查看你做的網頁畫面

6、畫面顯示內容由上而下，由左而右


<b>今天是星期一</b>



<p>這是一個段落</p>



<a href="http://www.google.com.tw">這是一個連結</a>

6、一個網頁語法架構

有成對的<html>、<head>、<body>，和內容中的各種HTML標籤

1、在Sublime中，開啟一個新檔案，File --> New File

2、先儲存：File --> Save，或按Ctrl+S儲存快捷鍵比較快，名稱為 001b.html

3、在內容中寫 <html+Tab鍵或Enter鍵，就會列出預設的HTML架構標籤，如下範例001b.html


範例：001b.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> -->文件顯示的語言，utf-8是國際繁體中文
    <meta name="viewport" content="width=device-width, initial-scale=1"> -->網頁顯示比例設定
    <title></title> -->書籤名稱
</head>
<body>
    ......... -->書寫網頁內容
</body>
</html>

1、大部份HTML標籤都是成對的，範圍代表開始到結束

2、<html> ... </html>：代表這是一個HTML文件，有開始到結束範圍

3、<head> ... </head>：這叫標頭區，用來書寫一些HTML文件設定，有開始到結束範圍

4、<title> ... </title>：文件書籤名稱，可試試如下範例

5、<body> ... </body>：這就是書寫HTML語法的地方，也就是做網頁內容


範例：

<title>元宇村網站</title>

如果網頁標籤都不寫，預設就是在<body> ... </body>標籤內


範例：

<body>
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</body>

1、Ctrl+C：複製

2、Ctrl+V：貼上

3、Ctrl+A：全選

4、Ctrl+X：剪下

5、Ctrl+S：儲存

6、Ctrl+N：開新檔案

7、Ctrl+W：關閉檔案

8、輸入法切換：Shift鍵+Ctrl鍵

9、輸入法-中文和英文切換：Shift鍵

10、輸入法-半形與全形字切換：Shift鍵+Space空白鍵

shape
shape