**網頁設計學習筆記**

# **網頁設計學習筆記** <head> <style> h1{ font-family:"Papyrus",fantasy; } h2{ font-family:"Papyrus",fantasy; } h3{ font-family:"Papyrus",fantasy; } h4{ font-family:"Papyrus",fantasy; } p{ font-family:"Papyrus",fantasy; } </style> </head> <body> <h1 style="color:DodgerBlue;"> Html </h1> <p> 這對我來說是一次全新的嘗試。<br>就如同所有程式語言，開頭都是緣起於一句HELLO WORLD!<br>在寫Html的時候，程式碼中會出現<head>以及<body><br>通常在撰寫的時候網頁頁面的排版會放在head，用來讓用戶端看起來更美觀，而核心的程式碼則會放在body 中，負責驅動物件。而最常用的p，則是顯示文字的基礎。 </p> <p> 以下是一個Hello world程式的code：<br> <a href = "https://reurl.cc/x92xaV">Hello World</a> </p> <h1 style="color:DodgerBlue;"> CSS </h1> <h4 style="color:DodgerBlue;"> 第二項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/blob/master/HW2.html">Github專案2</a><br>在這項作業我嘗試，並且成功的將個人的介紹頁面透過CSS加上了色彩與其他排版，使原本只有黑色字體的html變得不那麼陽春。</p> <h4 style="color:DodgerBlue;"> 第三項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/blob/master/HW3.html">Github專案3</a><br>過了兩週之後，我已經能夠稍微掌握CSS的用法，在課餘時間多半是使用Mac內建的“文字編輯”寫出程式，打開終端機將副檔名改為.html，透過Safari顯示，並利用終端機直接讀取檔案並進行編輯，以達到想要的效果 </p> <h4 style="color:DodgerBlue;"> 第四項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/blob/master/HW4.html">Github專案4</a><br>就是一個登入的介面，可以透過以下連結查看他的效果：<br><blockquote class="imgur-embed-pub" lang="en" data-id="XBwKwvF"><a href="https://imgur.com/XBwKwvF">View post on imgur.com</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script> </p> <h1 style="color:DodgerBlue;"> JavaScript </h1> <p style = "color:rgb(200,150,0);"> JavaScript的宣告變數方式有兩種<br>一種是var、一種是let<br>由此可見JavaScript是一種弱型別語言 </p> <h3 style = "color:DodgerBlue;"> 何謂強弱型別 </h3> <p> 強弱型別（Strong and weak typing）表示在電腦科學以及程式設計中，經常把程式語言的型別系統分為強型別（英語：strongly typed）和弱型別（英語：weakly typed）兩種。這兩個術語並沒有非常明確的定義，但主要用以描述程式語言對於混入不同資料型別的值進行運算時的處理方式。強型別的語言遇到函式引數型別和實際叫用型別不符合的情況經常會直接出錯或者編譯失敗；而弱型別的語言常常會實行隱式轉換，或者產生難以意料的結果。大致而言，「強型別」隱含著程式語言對容許混合情況出現加上了嚴格的限制，以避免程式碼以無效的資料使用方式編譯或執行。例如，整數除法運算不可用於字串；連結串列上的運算步驟不可用於數字。然而，這些限制的本質和效力是極易改變的。 </p> <h4 style="color:DodgerBlue;"> 第五項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/tree/master/HW5_JS_Folder">Github專案5</a> </p> <h3 style="color:DodgerBlue;"> JavaScript中Function的創建方式＆呼叫方式： </h3> <p> 創建:function 名稱(arg){要做的事情}<br/> 呼叫:函式名稱(arg) </p> <h3 style="color:DodgerBlue;"> JavaScript 中的物件導向 </h3> <p> JavaScript 中使用一種名為「建構式函式（constructor functions）」的函式來定義物件和它們的特色，透過函式建構式，將可以根據你的需要用更有效率的方式來產生許多物件，而這些物件都已經包含你所定義好的屬性和方法。從Github專案5的連結進入，第11至第14題便是物件導向的練習。 </p> <h4 style="color:DodgerBlue;"> 第六項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/blob/master/HW6.js">Github專案6</a> </p> <h3 style="color:DodgerBlue;"> Class & Constructor </h3> <p> 1.&emsp;&emsp;分成 Class 和 Object 兩種。<br> 2.&emsp;&emsp;Class 內部會描述 Properties 和 Method。<br> 3.&emsp;&emsp;Class 能建構出 Object ，也被稱作 Instance 。<br> 4.&emsp;&emsp;Instance 能夠使用 Class 內的 Method，並藉由 Method 存取 Object 內的資料。<br><br>雖然看起來跟JavaScript的Constructor差不多，但是在 JavaScript 的 Prototype-Based 物件導向中，不區分 Class 和 Object 所有的東西都可以是 Object ，且不一定需要經過 Class 或 Constructor 才能建立 Instance，直接操作 Prototype 也能辦到。再來，如果在 Java 中要做 Class 間的繼承，得在定義 Class 時指定要繼承的父類別。在 JavaScript 中則是以改變 Constructor 的 Prototype 來使用其他 Constructor 的 Method 。<br><br>其他更加詳細的資料可以參閱<a href="https://reurl.cc/41O5qX">JavaScript | ES6 中最容易誤會的語法糖 Class - 基本用法</a> </p> <h3 style="color:DodgerBlue"> Method </h3> <p> 如上一個標題下所述，Method是在class裡面的function，但method不需要像function一樣前面要宣告一個function，而是直接打名稱加上參數即可 </p> <h3 style="color:Tomato;"> Please Keep In Mind !! </h3> <p style="color:Tomato;"> 如果要使用物件中的method的話，記得要加括號 </p> <h4 style="color:DodgerBlue;"> 第七項作業 </h4> <p><a href = "https://github.com/RogerChen530/wp110b/blob/master/HW7.js">Github專案7</a> </p> <h3 style="color:DodgerBlue;"> 正規表達式—— Regular Expression (RE) </h3> <p> 正規表達式是使用單個字串來描述、符合一系列符合某個句法規則的字串。在很多文字編輯器裡，正則運算式通常被用來檢索、替換那些符合某個模式的文字。<br>範例可以參閱我的Github專案7<br>詳細資料可參照<a href="https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Regular_Expressions">MDN Web Docs —— 正規表達式</a> </p> <h4 style="color:DodgerBlue;"> 程式專案 </h4> <p><a href="https://codepen.io/rogerchen530/pen/xxYaQow">Codepen.io/RogerChen530/ClickCounter</a> </p> <p> 一個簡單的點擊計數器，能夠幫助使用者計算事件的完成、執行...等動作的次數。內部的技術含量不高，不過我想實用性應該執得期待。 </p> <h2> 以上便是這個學期的網頁設計筆記、札記與隨筆，最後感謝願意整篇看完的螢幕前的您。：） </h2> </body>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.