課程簡介

講師介紹

簡單的上課規則

1. 不會直接發問
2. 有問題記得問
3. 愉快心情上課
4. 簡報錯了記得提醒
5. 有空就練練

網頁的組成

網頁的組成

什麼是HTML

• 全名Hyper Text Markup Language
• 網頁技術最基礎的部分
• 是標記語言不是程式語言
• 主要用途是定義網頁的內容

什麼是HTML

• 使用標籤Tag來表示功能單位
• 使用巢狀結構來組合標籤

什麼是HTML

如何寫HTML

如何寫HTML

如何寫HTML

如何寫HTML

如何寫HTML

一些快捷鍵

一些快捷鍵

常用HTML標籤

常用HTML標籤

常用HTML標籤

1. 複製圖片網址
2. 儲存圖片到檔案中寫上圖片檔名

常用HTML標籤

表格

• border： 邊框

• <tr>：橫列

• <td>：直行

• <th>：欄位標題

• caption：表格的標題

常用HTML標籤

表格

• 水平合併多行的儲存格

• colspan="2" 表示從這一行開始往右合併至下一行

• 後面幾列的 <tr> 中同樣位置的 <td> 就要省略不寫

常用HTML標籤

表格

水平合併多行的儲存格

• colspan="2" 表示從這一行開始往右合併至下一行

• 後面幾列的 <tr> 中同樣位置的 <td> 就要省略不寫

常用HTML標籤

表格

垂直合併多列儲存格

• rowspan="2" 表示從這一列開始往下合併至下一列
• rowspan="0" 表示儲存格從這一列開始合併到最後一列的意思。

CSS屬性設定

• 基本語法

• 設定文字大小

• 設定文字粗細

CSS屬性設定

套用CSS樣式

• 簡單範例

建議使用的標籤

文字相關設定

• 顏色

• 大小

• 粗細

文字相關設定

• 裝飾

• 在區塊中對齊

text-decoration:underine

text-decoration:line-through

text-align:left

text-align:center

CSS區塊模型

CSS區塊模型

CSS區塊模型

區塊邊框

• 邊框

1. 沒有邊框

外邊距 Margin

• 外邊距為0

• 下方的外邊距為10px

背景顏色

區塊的高度與寬度

• 區塊的寬度(預設和上一層標籤等寬)

• 區塊的高度(隨內容縮放)

• 使用限制

CSS選擇器

CSS選擇器

• 區分CSS和HTML

Class選擇器

原始程式碼

Class選擇器

Class選擇器

id選擇器

id選擇器

標籤名稱選擇器

標籤名稱選擇器

CSS樣式檔案

CSS樣式檔案

• 將CSS獨立成一個檔案

在HTML的head標籤中加入

 <link rel="stylesheet"type="text/css"href="檔案路徑"/>

網頁切版核心觀念

網頁切版核心觀念

基本需求

1. 版面寬度不能超過營幕
2. 資訊重疊或無法閱讀

看看

網頁切版核心觀念

本質

• 區塊標籤為本質
• 無止境的巢狀迴圈

網頁切版核心觀念

容器

• 外層的標籤
• 同時是更外層標籤的項目

ex:綠色是黃色的容器，綠色是灰色的項目

網頁切版核心觀念

項目

• 內層的項目
• 也是更內層標籤的容器

ex:綠色是灰色的項目，綠色是黃色的容器

網頁切版

網頁切版

• 直向排列->橫向排列
• 水平對齊
• 垂直對齊

網頁切版

將容器中的項目並排

display:block

display:flex

網頁切版

寬度配置

display:flex

display:flex

flex:none;

width:50%;

flex:none;

width:50%;

flex:none;

width:100px;

flex:auto;

網頁切版

多層次結構

display:flex

display:flex

flex:設定

flex:設定

flex:設定

flex:設定

;display:flex

flex:設定

對齊方式

對齊方式

水平對齊

在容器上使用

justify-contect屬性

水平靠右

水平置中

display:flex;justify-content:end;

display:flex:justify-concent:center;

flex:none;

width:30%

flex:none;

width:30%

flex:none;

width:30%

flex:none;

width:30%

flex:none;

width:30%

對齊方式

垂直對齊

在容器上使用

align-items屬性

垂直靠下

垂直置中

display:flex;align-item:flex-end;

display:flex:align-items:center;

對齊方式

完美置中

display:flex;

justify-content:center;align-item:center;

flex:none;

width:50%;

RWD回應式設計

RWD回應式設計

在不同大小的螢幕上，使我們的網頁都能正常顯示

RWD回應式設計

電腦螢幕

手機螢幕

RWD回應式設計

RWD回應式設計

• 基本語法

@media(螢幕條件){

           套用css

}

• 範例

@media(max-width:1200px){

          螢幕寬度在1200px以下使用

}

RWD回應式設計

透過flex-wrap調整

display:flex

flex:none;wideth:50%

flex:none;wideth:50%

flex-wrap:wrap

width:90%

flex:none;wideth:50%

width:90%

RWD回應式設計

透過font-size調整

比較大的字

比較大的字

比較小的字

比較小的字

RWD回應式設計

顯示切換

• HTML程式碼

• css程式碼

<div class="computer">電腦版</div>

<div class="phone">手機板</div>

.computer{display:block}

.phone{display:none}

@media(max-width:500px){

        //螢幕小於500px

        .computer{display:none}

        .phone{display:block}

}

javascript簡介

• 主要用在網頁前端開發
• java !=javascript

javascript簡介

• 範例

<scritp>

          console.log("Hello World");

<script>

javascript簡介

• 註解(JS、CSS)

單行 //

多行 /*文字*/

• 註解(HTML)

<!--文字-->

資料

程式中最基本的運作資料

• 所有程式都是由資料所成
• 資料分成不同的形態

資料

程式中最基本的運作資料

• 所有程式都是由資料所成
• 資料分成不同的形態

資料

程式中最基本的運作資料

• 數字

• 3
• 3.14
• -3
• -3.14

資料

程式中最基本的運作資料

• 字串

• "早安"
• "HELLO"
• '早安安'

資料

程式中最基本的運作資料

• 布林值

• true
• false

資料

程式中最基本的運作資料

• 空值

• undefined
• null

變數

• 宣告

                     let 變數名稱

• 範例

        let x;

                let name;

變數

• 使用已宣告的變數名稱

 let x;

 console.log(x);

指定變數中的資料

指定變數中的資料

• 指定資料語法

let 變數名稱=資料

宣告過的變數名稱=資料

• 範例

let x;

console.log(x);

x=5;

console.log(x);

x="Hello";

console.log(x);

常數

常數

• 宣告

const 常數名稱=資料

• 範例

const x=3;

x=102;  //錯誤

運算符號

運算符號

• 算術運算
• 指定運算
• 比較運算
• 單元運算
• 邏輯運算

運算符號

• 算術運算

1. 加 +
2. 減 -
3. 乘 *
4. 除 /
5. 模 %

運算符號

• 指定運算

1. =
2. +=
3. -=
4. *=
5. /=
6. %=

運算符號

• 比較運算

1. >
2. <
3. >=
4. <=
5. ==

運算符號

• 單元運算

1. ++
2. --
3. !

運算符號

• 邏輯運算

1. &&
2. ||

輸入

輸入

• 格式

prompt(字串,字串)

• 範例

prompt("輸入一個數字","預設值")

流程控制

流程控制

判斷式:不同情況不同處理方式

• 基本語法

if(布林值){

    如果布林值為true，執行此程式區塊

}

else{

    如果布林值是false，執行此程式區塊

}

流程控制

判斷式:不同情況不同處理方式

• 基本語法

if(布林值){

    如果布林值為true，執行此程式區塊

}

else if(布林值){

    如果布林值是true，執行此程式區塊

}

else{

    如果上方都是false，執行此程式區塊

}

流程控制

迴圈:重複執行程式區塊

• while迴圈

• 基本語法

while(布林值){

    如果布林值是true，執行這個程式區塊

    執行完畢後，回到開頭在執行一次

}

流程控制

迴圈:重複執行程式區塊

• while迴圈

• 範例

let n=0;

while(n<5){

   console.log(n);

    n++;

}

流程控制

迴圈:重複執行程式區塊

• for迴圈

• 基本語法

for(初始化程式；布林值；執行){

    如果布林值是true，執行這個程式區塊

    執行完畢後，回到開頭在執行一次

}

流程控制

迴圈:重複執行程式區塊

• for迴圈

• 範例

for(let n=0；n<5；n++){

   console.log(n);

}

流程控制

迴圈指令

• break

• 範例

let n=0;

while(n<3){

    if(n==1){

        break;

    }

    console.log(n);

}

流程控制

迴圈指令

• continue

• 範例

let n=0;

while(n<3){

    if(n==1){

        continue;

    }

    console.log(n);

}

函式

函式

使用流程

1. 建立
2. 呼叫

函式

• 建立函示

function 函式名稱(參數名稱列表){

           函式內部的程式區塊

}

• 建呼叫函示

函式名稱(參數資料列表)

函式

• 建立函示

function test(){

          console.log("函式執行")

}

• 建呼叫函示

test();

test();

test();

函式

• 建立函示

function show(chat){

          console.log(chat);

}

• 建呼叫函示

show("hello");

show(3);

show(true);

函式

• 建立函示

function abc(n1,n2){

          let sum=n1+n2;

          console.log(sum);

}

• 建呼叫函示

show(3,4);

show("hello","world");

函式

• 建立函示

let 函式名稱=function (參數名稱列表){

           函式內部的程式區塊

}

函式迴傳值

函式迴傳值

1. 建立、呼叫函式
2. 參數的運用
3. 迴傳值的運用

函式迴傳值

• 結束語法

函式結束，回傳值 undifined

function 函式名稱(參數名稱列表){

    程式區塊

    return;

}

函式結束，回傳值自訂

function 函式名稱(參數名稱列表){

    程式區塊

    return 回傳值;

}

函式迴傳值

function aabcc(){

    console.log("hello");

    return;

}

aabcc();

函式迴傳值

function aabcc(n1,n2){

    console.log(n1+n2);

    return "hello";

}

aabcc(3,4);

函式迴傳值

function aabcc(n1,n2){

    let sum=n1+n2

    return sum;

}

let aaaa=aabcc(3,4);

console.log(aaaa);

物件基礎

物件基礎

• 是一種資料型態
• 可以裝資料的資料型態
• 所以我們可以說他是個容器

物件基礎

1.建立

2.使用

建立物件

• 建立

• 程式碼

new Object()

let obj=new Object();

obj

建立物件成員

• 建立

• 程式碼

物件.成員名稱=資料

let obj=new Object();

obj.x=4;

obj.y=7;

obj

x:4

              y:7

建立物件成員

• 建立

• 程式碼

物件.成員名稱=資料

let obj=new Object();

obj.x=4;

obj.y=7;

obj.show=function(){

     console.log("Hello");

};

obj

x:4

              y:7

show.function(){..}

物件基礎

• 建立

• 程式碼

物件.成員名稱=資料

let obj=new Object();

obj.x=4;

obj.y=7;

obj.show=function(){

     console.log("Hello");

};

obj

x:4

              y:7

show.function(){..}

成員非函式，稱為屬性

成員是函式，稱為方法

使用物件

• 可透過.存取物件的成員

物件.成員

• 程式碼

let obj=new Object();

obj.x=4;

obj.y=7;

odj.show=function(){

        console.log("Hello");

 };

console.log(obj);

console.log(obj.y);

obj.show();

物件方法中this關鍵字

使用this關鍵字

• 程式碼

let obj=new Object();

obj.x=4;

obj.y=7;

obj.show=function(){

        console.log( this.x , this.y );

};

obj

x:3

              y:7

show.function(){..}

使用JSON語法建立物件

使用JSON語法建立物件

• 建立

{成員名稱:資料,成員名稱:資料,....}

• 程式碼

let obj1={};

let obj2={

         x:4,

         y:7,

         show:function(){

                  console.log(this.x,this.y)

         }

};

陣列物件

陣列物件

• 利用有順序的編號來管理內部資料

陣列物件

• 建立

new Array()

or

[]

• 程式碼

let arr=[];

陣列物件

• 使用陣列的push方法

陣列.push(資料)

• 程式碼

let arr=[];

arr.push(4);

arr.push(7);

arr

0

1

陣列物件

• 取得資料

陣列[編號]

• 程式碼

let arr=[];

arr.push(4);

arr.push(7);

console.log(arr[0]);

console.log(arr[1]);

arr

0

1

陣列物件

• length屬性取的陣列長度

陣列.length

• 程式碼

let arr=[];

console.log(arr.length);

arr.push(4);

arr.push(7);

console.log(arr.length);

arr

0

1

陣列物件

• 直接將資料進[]中

[資料,資料,資料,.....]

• 程式碼

let arr=[4,7];

arr.push(3);

arr

0

1

2

HTML DOM

HTML DOM

• 每個Html標籤在JS引擎中都有對應的標籤物件，稱為Html Element
• 把Html 標籤物件串在一起，最物件結構就是Html dom

HTML DOM

HTML程式碼

網頁畫面

HTML in JS

HTML DOM

HTML程式碼

網頁畫面

HTML in JS

window

screen

div

h4

body

doucument

window 物件基本操作

window 物件基本操作

• 隨時可以用內建的window變數取得

console.log(window)

• window物件包含有用的屬性

window.innerWidth

window.innerHeight

• window物件包含有用的方法

window.pompt("輸入資料","預設值")

window.alart("彈出警告視窗")

window 物件基本操作

• screen物件是window物件的一個屬性

window.screen

• screen物間包含有用的屬性

window.screen.width

window.screen.height

window 物件基本操作

• document物件是window物件的一個屬性

window.document

可簡寫成document

• document物件包含有用的屬性

document.title;

document.body;

• document物件包含有用的方法

document.querySelector("CSS選擇器");

 body物件基本操作

 body物件基本操作

• body 物件是document 物件的一個屬性

document.body

• body物件包含有用的屬性

document.body.innerHTML

document.body.className

document.body.id

 其他標籤物件基本操作

 其他標籤物件基本操作

操作步驟

1. 取得標籤物件
2. 操作標籤物件

 其他標籤物件基本操作

1.在HTML想要操作的標籤加上id屬姓

<div id="content">文文文文 </div>

<span id="keyword">字字字字字</span>

2.在Javascript程式中利用

document.querySelector()方法取得標籤物件

let divElement=document.querySelector("#content")

let spanElement=document.querySelector("#keyword")

取得標籤物件

 其他標籤物件基本操作

<div id="content">文文文文</div>

<script>

    let divElement=document.querySelector("#content")

    divElement.innerHTML="這是一個新字";

    divElement.className="welcome";

    divElement.style.fontSize="30px";

    divElement.style.color="blue";

</script>

操作標籤物件

配合使用者點擊

配合使用者點擊

在希望被點擊的標籤上加上onclick標籤

<div id="comtent">文文文文</div>

<button onclick="change();">點點點</button>

<script>

    function change(){

    let divElm=document.querySelector("#content")

    divElm.innerHTML="這是新的字";

    divElm.style.color="blue";

    }

</script>

事件處裡的基本觀念

事件處裡的基本觀念

• 發生了一件事情
• 執行相對應的程式處裡

事件處裡的基本觀念

• 常見的事件種類

click 滑鼠點擊

mouseover 滑鼠移入

mouseout 滑鼠移出

mousedown 滑鼠按下

mouseup 滑鼠放開

事件處裡的操作方式

事件處裡的操作方式

關鍵

• 在哪個標籤上發生的事件
• 事件的種類式甚麼
• 事件對應的處裡函式

事件處裡的操作方式

註冊事件處理函式

• 基本語法 

<div 事件名稱="程式碼">標籤內文 </div>

<button 事件名稱="程式碼">標籤內文</button>

• 範例

<div onclick="change();">點點</div>

<script>

    function change(){

        document.body.innerHTML="Hello";

    }

</script>

事件處裡的操作方式

範例一

• 典籍改變標籤本身內文

<div onclick="change(this);">原原原原</div>

<script>

    function change(elem){

        elem.innerHTML="新新新新";

}

</script>

事件處裡的操作方式

範例二

• 滑鼠按住、放開同時運作的範例程式

<button>

    onmousedown="down(this);"

    onmouseup="up(this);"

>按鈕</button>

<script>

    function down(elem){

        elem.style.color="red";

}

    function up(elem){

        elem.style.color="black";

}

</script>

箭頭函式

箭頭函式

函式的核心

• 函式的本體
• 函式的參數
• 函式的回傳值

箭頭函式

箭頭函式語法

• 普通函式語法一

function 函式名稱(函式參數列表){

     函式區塊內部的程式碼

     return 回傳值

};

• 普通函式語法二

let 函式名稱=function(函式參數列表){

     函式區塊內部的程式碼

     return 回傳值

};

箭頭函式

箭頭函式語法

• 箭頭函式的基本語法

let  函式名稱=(函式參數列表)=>{

     函式區塊內部的程式碼

     return 回傳值

};

箭頭函式

箭頭函式語法

• 普通函式語法一

function add(n1,n2){

     let result=n1+n2;

     return result;

};

• 普通函式語法二

let add=function(n1,n2){

     let result=n1+n2;

     return result;

};

箭頭函式

箭頭函式語法

• 箭頭函式的基本語法

let  add=(n1,n2)=>{

     let result=n1+n2;

     return result;

};

箭頭函式

箭頭函式簡化語法

• 可簡化的箭頭函式

let 函式名稱=(函式參數列表)=>{

return 回傳值;

}

• 箭頭函式簡化的語法

let 函式名稱=(函式參數列表)=>(回傳值);

箭頭函式

箭頭函式簡化語法

• 無法簡化

let add=(n1,n2)=>{

     let result=n1+n2;

     return result;

}

• 箭頭函式簡化的語法

let add=(n1,n2)=>(n1+n2);

• 可簡化

let add=(n1,n2)=>{

     return n1+n2 ;

}

javaScript 解構賦值

• 解構：把陣列或物件中的資料拆開
• 賦值：將拆開的資料分別放入個別的變數中

陣列解構賦值

陣列解構賦值

• 傳統作法

let arr=[3,4,5];

let d1=arr[0];

let d2=arr[1];

let d3=arr[2];

• 解構賦值的語法

let arr=[3,4,5];

let [d1,d2,d3]=arr;

陣列解構賦值

• 宣告與賦值的分開

let arr=[3,4,5];

let d1,d2,d3;

[d1,d2,d3]=arr;

• 預設值

let arr=[3,4];

let  d1,d2,d3;

[d1,d2=2,d3=5]=arr;

變形

物件解構賦值

物件解構賦值

• 傳統作法

let obj={x:3,y:4};

let x=obj.x;

let y=obj.y;

• 解構賦值的語法

let obj={x:3,y:4};

let {x,y}=obj;

將物件中的資料分開賦值給變數按照物件成員名稱做對應

物件解構賦值

• 宣告與賦值分開

let obj={x:3,y:4};

let x,y;

({x,y}=obj);//不合宣告一起執行要加();

• 預設值

let obj={x:3};

let x,y;

({x,y=5}=obj);

變形

• 指定新的變數名稱

let obj={x:3,y:4};

let newx,newy;

({x:newx,y:newy}=obj);

其餘運算符號

其餘運算符號

• 運算符號: 三個點(...)
• 運用在解構賦值

陣列:把剩餘的資料包在一個新陣列中

物件:把剩餘的成員包在一個新陣列

其餘運算符號

運用在陣列結構賦值

其餘運算符號

運用在陣列結構賦值

未逐一指定名稱的剩餘值

運用其餘運算符號，包在新陣列中

• 陣列結構賦值的運用

let arr=[3,4,5,6,7];

let [d1,d2,...data]=arr;

cobnsole.log(data);  //[5,6,7]

• 限制:必須放在最後面

let arr=[3,4,5,6,7];

let [d1,...data,d2,d3]; //錯誤

其餘運算符號

運用在物件結構賦值

其餘運算符號

運用在物件結構賦值

未逐一指定名稱的剩餘值

運用其餘運算符號，包在新物件中

• 物件結構賦值的運用

let obj={x:3,y:4,z:5};

let {x,...data}=obj;

cobnsole.log(data);  //[y:4,z:5]

• 限制:必須放在最後面

let obj={x:3,y:4,z:5};

let [...data,x]; //錯誤

網址

網址

1. 創建帳號

網址

網址

.github.io

網址

網址

網址

要寫些字

上傳資料夾

網址

網址

網址

複製

網址

加上/資料夾名稱/網頁名稱