---
# System prepended metadata

title: HTML5網頁程式設計
tags: [上課筆記, 蘇怡仁, HTML5網頁程式設計]

---

# HTML5網頁程式設計
###### tags: *`上課筆記` `HTML5網頁程式設計` `蘇怡仁`*

[TOC]

## 第一次上課筆記 2020/3/3
:::success
* 老師請假
* 俊維上課 簡單HTML5介紹
:::
## 第二次上課筆記 2020/3/10
:::success
* 課程教學
    * HTML
    * HTML5
    * JavaScript
* 平時分數 - 30%
* 期中考 - 30%
    * 上機考
* 期末考 - 40%
    * 交Project
:::
:::info
* HTML5
    * TAG 為主軸
    * 其實就是文字檔，用TAG來排版
    * 副檔名有
        * xxx.htm
        * xxxx.html
        * xxx.xml

* 網頁
    * 內容 -> 知識工程 -> knowlage
### HTML (Hyper Text Markup Language)

* HTML 1.0
    * 單方面釋放資訊
        * 沒有互動性
    * Web Server Site
        * IP+Port  稱為 Socket
        * port通常為80
        * 通訊協定Http:
        * 透過通訊協定-> 找到Server-> 找到Server上的資料 

    * 透過Browser
        * 定義: 解譯的程序
        * 透過解析語法來改變呈現方式
        * 聲光 影像 排版
    * Clien對Server發出Request
        * 對Server提出要求
    
* HTML 2.0
    * 新增互動
        * 可以修改資訊、可以留言等
        * 社群服務
:::
:::info
* ### 5G
    * 應用需求 
:::
:::info
### HTML
* TAG裡可以放 Attribute 屬性
* 粗體文字 <b>粗體</b>
* 斜體文字 <i>斜體</i>
* 底線 <u>底線</u>
* &lt; ==&lt==是小於< &gt; ==&gt==是大於>


### Google
* 搜尋引擎-被超連結最多的網站排名前面
:::
## 第三次上課筆記 2020/3/17
:::success

```htmlmixed=
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>HTML8</title>
    <style>
        .tb{
            border:3px #cccccc solid;
        }
        tr{
            
            border:3px #cccccc solid;
        }
        td{
            
            border:3px #cccccc solid;
            text-align: center;
        }
        td:hover{
            background: aquamarine;
            
        }
        td:active{
            color: blueviolet;
        }
        td::selection{
            color: blueviolet;
        }
        td:nth-child(n+3)::first-letter{
            color:saddlebrown;
            font-size: 30px;
        }
        /* tr>td{
            
            color:saddlebrown;
            font-size: 30px;
        } */
        td:hover{
            color: blueㄎ;
        }



    </style>
</head>


<body>

    <div id="vdata" class="">
        <table class="tb">
            <!--排序功能加此 class="tablesorter"-->
            <caption style="background: black; color: #FFFFFF">
                陳品郎108學年第二學期加退選階段課表 &nbsp;&nbsp;&nbsp;&nbsp;
            </caption>
            <thead>
                <tr style="background: black; color: #FFFFFF">
                    <th>節次</th>
                    <th>起訖時間
                    </th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                    <th>日</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td width="5%" align="center">晨</td>
                    <td width="12%" align="center">07：10~08：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">1</td>
                    <td width="12%" align="center">08：10~09：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%" rowspan="2">人與自然(D0607)<br>張賢盛</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">2</td>
                    <td width="12%" align="center">09：10~10：00</td>
                    <td width="12%" rowspan="3">資訊安全攻防(L0730)<br>王調榮</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%" rowspan="3">Python 程式設計(L0725)<br>林承穎</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">3</td>
                    <td width="12%" align="center">10：10~11：00</td>
                    <td width="12%" rowspan="2">民主與法治(DB134)<br>曹金增</td>
                    <td width="12%"rowspan="2">資訊人生涯規劃 (L0721)<br>陳毓璋</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">4</td>
                    <td width="12%" align="center">11：10~12：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">午N</td>
                    <td width="12%" align="center">12：10~13：00</td>
                    <td width="12%" style="background:chocolate ;letter-spacing : 50px" colspan="7"> 吃飯時間</td>
                 
                </tr>
                <tr>
                    <td width="5%" align="center">5</td>
                    <td width="12%" align="center">13：10~14：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%" rowspan="2">進階英文(二)(L0526)<br>朱淑霞</td>
                    <td width="12%" rowspan="3">軟體工程 (L0725)<br>陳智勇</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">6</td>
                    <td width="12%" align="center">14：10~15：00</td>
                    <td width="12%"></td>
                    <td width="12%" rowspan="3">HTML5網頁程式設計(L0725)<br>蘇怡仁</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">7</td>
                    <td width="12%" align="center">15：10~16：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">8</td>
                    <td width="12%" align="center">16：10~17：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">傍E</td>
                    <td width="12%" align="center">17：10~18：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">A</td>
                    <td width="12%" align="center">18：20~19：10</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">B</td>
                    <td width="12%" align="center">19：15~20：05</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">C</td>
                    <td width="12%" align="center">20：10~21：00</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
                <tr>
                    <td width="5%" align="center">D</td>
                    <td width="12%" align="center">21：05~21：55</td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                    <td width="12%"></td>
                </tr>
            </tbody>

        </table>
        <hr>
    </div>


    <form action="" method="get">
        <!-- 表單傳送方式為GET -->
        <fieldset>
            <!-- 將底下的元素框起來 -->

            <label>姓名: <input type="text" name="name" size="30" maxlength="50" required></label><br>


            <p> 性別:<br>
                <label><input type="radio" name="comeback" value="yes" />男</label>
                <label><input type="radio" name="comeback" value="no" />女</label>
            </p>
            <p>
                <label for="hear-about">食物:</label>
                <select name="hear" id="hear-about">
                    <option value="web">蘋果</option> <!-- //select下拉式選單的選項 -->
                    <option value="friend">香蕉</option>
                    <option value="shop">榴槤</option>
                    <option value="other">其他</option>
                </select>
            </p>
            <label><input type="range" name="comeback" value="no" /></label>
        </fieldset><br>
    </form>
</body>

</html>
```


* ![](https://i.imgur.com/iW0fV9C.png)

:::
## 第四次上課筆記 2020/3/24
:::success
```htmlmixed=
<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        p{
            color:red !important; /*第一優先權*/
        }
        p{
            color:blue; /*第三優先權*/
        }
    </style>
</head>
<body>
    <!--第二優先權-->
    <p style="color:azure">hi</p>
</body>

</html>
```

```htmlmixed=
<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        :root{
            --primary-color:red; 
        }
        p{
            color : var(--primary-color);
        }
        
    </style>
</head>
<body>
    <!--第二優先權-->
    <p>hi</p>
</body>

</html>
```

* posstion 
    * relative 


```htmlmixed=
<!DOCTYPE html>
<html lang="zh">

<head>
    <style>
        .box{
            position: relative;
            width:400px;
            height:400px;
            top:0;  
            left:30%;
        }
        .box1{
            background-color:red;
            width:150px;
            height:150px;
            left:30px;
            position: absolute;
            top:30px;
            z-index: 2;
        } .box2{
            background-color:blue;
            width:150px;
            height:150px;
            top:40px;
            z-index: 3;
            left:10px;
            position: absolute;
        } .box3{
            background-color:yellow;
            width:150px;
            height:150px;
            top:15px;
            z-index: 1;
            left:15px;
            position: absolute;
        }
        p::first-letter{
            color:blue;
            font-size:30px;
        }
        p::after{
            color: saddlebrown;
            content:"我在前面";
        }
        p::before{
            color:aqua;
            content:"我在後面";
        }
        p:hover{
            color:greenyellow;
        }
        .vdiv::selection{
            color:darkgreen;
        }
        .bdiv{
            color: rgba(105,105,105,0.3);
            text-shadow : 5px 5px 10px #000000;

        }
        .cdiv{
            text-align: center;
        }
        a{
            color: red;
            text-decoration : none;

        }
        a:visited{
            color:blue;text-decoration : none;

        }
        input:focus{
            background-color:#67676767;
        }
        .ABCdiv{
            margin:40px;
            width:500px;
            height:500px;
            background: linear-gradient(to right, yellow , green);
		

            box-shadow : 5px 5px 10px 10px #000000;
        }
        .ABCdiv:hover{
            margin:40px;
            width:500px;
            height:500px;
            background:#666666;
            background: linear-gradient(to left, yellow , green);
            box-shadow : 5px 5px 10px 10px #FFFFFF;
        }
    </style>
</head>
<body>
    
</body>
    <p>s16113220</p>
    <div class="vdiv">反白我，我會變色</div>
    <div class="bdiv">我好像有點透明 還有點陰影</div>
    <div class="cdiv">只有我會置中</div>
    <label for="tid">我是:label</label>
    <input id="tid" type="text" placeholder="文字文字">
    <a href="##">我是A連結 變色後為藍色</a>
    <div class="ABCdiv"></div>
    <div class="box">
        <div class="box1" ></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</html>
```
* ![](https://i.imgur.com/JSgnctm.png)

:::


## 第五次上課筆記
:::success
* display : none; ==區塊消失==

* visibility : hidden; ==區塊不會消失== 
:::
## 第七次上課筆記
:::success
* 第九週 期中考 => 上機考
* 期末考 => project
* ==VScode 可以自訂自己的快捷鍵==
    * 檔案-> 喜好設定-> 使用者程式碼片段
        * 可以設定 例:css javascript
        ```	"flex" : {
		"prefix" : "quickFlex",
		"body":[
			"display:flex;",
			"justify-content:center;",
			"align-items:center;"
                ]
    
        ```
        * 在外面打上quickFlex就可以直接呼叫出程式碼

* 取得 class
* classList.add
* className

* querySelector 只會抓一個
* querySelectorAll 可以抓全部


* document.createElement("")
* img.height=100
* 抓子元素
    * childNode 舊方法
    * children 
* parentNode 抓父元素
* previousSibling 舊方法
* e.preventDefault(); 可以擋原本要做的事情
```htmlmixed=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="abtBtn">創建圖片</button>
    <button class="abBtn">往後添加項目</button>
    <button class="insertBefore">指定添加項目</button>
    <button class="remove">刪除添加項目</button>
    <button class="changeColor">改變文字顏色</button>
    <div class="abc">
    </div>
    <p class="pTag">123</p>
    <ol class="ol">
        <li><span>Hi</span></li>
    </ol>
    <input type="text" class="txtInput">
</body>
    <script>
        p=document.querySelector(".pTag");
        const abcDiv=document.querySelector(".abc");
        i=0;
        const a=document.querySelector(".abtBtn").addEventListener("click",function(){
            for(j=0;j<5;j++){
                const score=document.createElement("img");
                score.src="https://picsum.photos/200/300?random="+i++;
                console.log(score);
                abcDiv.appendChild(score);
            }            
        });
        const b=document.querySelector(".abBtn").addEventListener("click",()=>{
            const li=document.createElement("li");
            li.innerHTML="inner";
            ol=document.querySelector(".ol");
            ol.appendChild(li);
            
        });
        const c = document.querySelector(".insertBefore").addEventListener("click",()=>{
            const li=document.createElement("li");
            li.innerHTML="inner";
            ol=document.querySelector(".ol");
            al=window.prompt("輸入要加入的地方");
            li.innerHTML="inser";
            // console.log(al.text);
            ol.insertBefore(li,ol.children[al]);

            console.log(ol.children);
        });
        const d = document.querySelector(".remove").addEventListener("click",()=>{
            ol=document.querySelector(".ol");
            al=window.prompt("輸入要加入的地方");
            ol.removeChild(ol.children[al]);
            

            console.log(ol.children);
        });
        
        const e = document.querySelector(".changeColor").addEventListener("click",()=>{
            ol=document.querySelector(".ol");
            ol.style.color=window.prompt("輸入要加入的地方");
            
        });
    </script>
</html>
```
:::
## 第八次上課筆記-2020/04/21
:::success
* 期中考
    * 在家刻版
    * 5題
    * 版 20%

* 期末考
    * 一定要用到css javascript
    * 盡量用自己的東西
    * 不要用別人的套件

* 段落

* async await promise
* 解決非同步 同步的問題

```htmlmixed=
<p>樹德
<span>科技大學</span>
</p>
<hr>
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

-webkit-box-reflect: below -12px linear-gradient(transparent,rgba())
user-select:none

animation:bounce 1s ease-in-out infinite
animation-delay:calc(0.1s * var(--i));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .painter{
            -webkit-box-reflect:below -10px linear-gradient(transparent,rgba(0,0,0,0.2));
            font-size:30px;
            user-select: none;
            
        }
        .painter span{
            display: inline-block;
            /* color:#fff; */
            /* font-size:2em; */
            text-transform: uppercase;
            animation: baunce 1s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--i));
            color:var(--z);
        }
        .painter:hover span {
            animation-play-state: paused;
        }
        @keyframes baunce {
            0%{
                transform: translateY(0px);
            }20%{
                transform: translateY(-20px);
     
            }50%,
            100%{
                transform: translateY(0px);

            }

        }
    </style>
</head>
<body>
    <div class="painter">
        <span style="--i:1 ; --z:#FF00FF">s</span>
        <span style="--i:2">1</span>
        <span style="--i:3">6</span>
        <span style="--i:4">1</span>
        <span style="--i:5">1</span>
        <span style="--i:6">3</span>
        <span style="--i:7">2</span>
        <span style="--i:8">2</span>
        <span style="--i:9">0</span>
        <span style="--i:10">.</span>

    </div>
</body>
</html>

```


:::

## 第十周上課
:::success
### 期末考
* 要做一個word報告
    * 動機 預期目標
    * 用了哪些技術
        * 原有功能 說明
        * 規劃、 修改功能
        * 環境、硬體、軟體、瀏覽器、資料庫、架構
    * 功能&畫面 說明
    * 學到什麼?
        * 心得


:::
:::success
## loacalStorage
* 新增資料
    * localstroage.setItem("user",""); 
        * 第一個參數為key
        * 第二個是資料
* 取得資料
    * localstorage.getItem("user");
        * 可以取得要取的key
## json
* jsonL={"name":"123","phone":"456"}
    * 取 jsonL.name 
* {["name":"123","phone":"456"],["name":"456","phone":"789"]}
    * 取 jsonL[0].name



## sessionStorage



:::
## 第十一周上課筆記
:::success
### RWD的寫法

```htmlmixed=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    @media(max-width:579.99px) {
        .box {
            background-color: #666666;
            width: 80%;
            margin: 0 auto;
        }


        #p1,
        #p2,
        #p3,
        #p4 {
            display: none;
        }

        #p1 {
            display: block;
        }
    }

    @media(min-width:579px) and (max-width:767.99px) {
        .box {
            background-color: #999999;
            width: 80%;
            margin: 0 auto;
        }


        #p1,
        #p2,
        #p3,
        #p4 {
            display: none;
        }

        #p2 {
            display: block;
        }
    }

    @media(max-width:1199.99px) and (min-width:768px) {
        .box {
            background-color: #337733;
            width: 80%;
            margin: 0 auto;
        }


        #p1,
        #p2,
        #p3,
        #p4 {
            display: none;
        }

        #p3 {
            display: block;
        }
    }

    @media (min-width:1200px) {
        .box {
            background-color: #67eaca;
            width: 80%;
            margin: 0 auto;
        }


        #p1,
        #p2,
        #p3 {
            display: none;
        }

        #p4 {
            display: block;
        }
    }
    </style>
</head>

<body>
    <div class="box">
        <p id="p1">我會在579以下的時候顯示喔</p>
        <p id="p2">我會在579以上767以下的時候顯示喔</p>
        <p id="p3">我會在767以上1199以下的時候顯示喔</p>
        <p id="p4">我會在1200的時候顯示喔</p>
    </div>
</body>

</html>
```

* 阻止表單送出
* ![](https://i.imgur.com/4qiQsuk.png)

:::

## 第十二周上課
:::success
* 圖片的素材
    * https://unsplash.com/
    * http://pngimg.com/
    * https://www.pngfuel.com/
* GIF
    * https://www.freepik.com/stories
* 刻網站的版
* icon標籤
    * https://fontawesome.com/start
    * https://www.flaticon.com/

* 建議網站
    背景圖 https://unsplash.com/t/nature
    去背物體圖 http://pngimg.com/imgs/animals/bear/ 
    去背物體圖2 https://www.pngfuel.com/
    動畫圖 https://stories.freepik.com/
    前端版面練習 https://www.freepik.com/free-photos-vectors/story 
    https://fontawesome.com/ 
    https://www.flaticon.com/ 

* 物件名稱縮寫
    * 變數名稱與key一樣可以直接寫變數
* 物件解構賦值
    * ```templateData={name:"123",mail:"124",sex:123}```
    * ``` let {name,mail,sex} = templateData;```
* 陣列解構賦值
```htmlmixed=
    const mobileBrands = ['A','B','C']
    const [one,two,three] = mobileBrands;
```
* 展開語法
    
```htmlmixed=
    const mobilePhone = {
        name: "mobil phone",
        publishedYear:"2019"
    }
    const smartPhone ={
        ...mobilePhone,
        name:"Apple",
        os:"ios"
    }
```
* 箭頭函數
```htmlmixed=
    const sayHello = name =>{
        console.log(`Hello${name}`);
    };
    sayHello("Wei");
    
    const sayHello =name=>console.log(`hello ${name}`);
    sayHello("hi");

```
* 高階函數
    * filter
```htmlmixed=
    const StudentData=[
        {name:"wei",score:"100"},
        {name:"we",score:"90"},
        {name:"i",score:"70"},
    ];
<!--    看一下資料  -->
    const filteScore = StudentData.filter(student =>{
        console.log(student);
    });
<!--   新寫法   -->
    const filterScore=studentData.filter(student => student.score>=60);
```

* 高階函數
    * Map
```htmlmixed=
    const students = studentData.map(student=>{
        console.log(student);
    });
    const filterScore=studentData.map(student => student.name);
```
* 取得自訂屬性值
    * for of
    * forEach
    * for in ==沒有什麼用到==
```htmlmixed=
const forin=document.querySelectorAll(".forin");
for(const f of forin){
    console.log(f);
}

forin.forEach(test=>{
    console.log(test);
});

```
* 自定義變數
```htmlmixed=
<style>
    .forin::before{
        content:attr(data-num);
    }
</style>
<div class="forin" data-num="1">
</div>
<div class="forin" data-num="2">
</div>
<div class="forin" data-num="3">
</div>
```

:::

## 第十三週
:::success
* [台幣匯率兌換](https://api.exchangerate-api.com/v4/latest/TWD)
* [隨機使用者訊息](https://randomuser.me/api/)
```htmlmixed=
fetch("https://randomuser.me/api/")
.then((res) => res.json())
.then((data) => console.log(data));
```

```htmlmixed=
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background-image: url("images/background2.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .contentDiv {
            width: 500px;
            height: 600px;
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            margin: -300px 0 0 -250px;
            background-color: white;
            border-radius: 10px;
        }

        .imgDiv {
            text-align: center;
            width:100%;
            height:250px;
            position:relative;
            /* background-color: blueviolet; */
            margin-top:10px;
        }
        .img{
            border-radius: 999em;
            background-color: black;
            position:relative;
            padding:5px;
            
            width: 160px;
            height: 160px;
        }
    </style>
</head>

<body>
    <div class="contentDiv">
        <div class="imgDiv"><img class="img" src="" alt=""></div>
        <div class="informationDiv"><p>Name:</p></div>
        <div class="informationDiv"><p>Gender:</p></div>
        <div class="informationDiv"><p>Country:</p></div>
        <div class="informationDiv"><p>Phone:</p></div>
        <div class="informationDiv"><p>Email:</p></div>
    </div>
    <script>
        const newUser = [{
                name: "Adam",
                money: 5000
            },
            {
                name: "Tom",
                money: 15000
            },
            {
                name: "John",
                money: 60000
            }
        ]
        fetch("https://randomuser.me/api/")
            .then((res) => res.json())
            .then((data) =>{
                const d =  data.results[0];
                const {picture,name} = d;
                const inDiv=document.querySelectorAll(".informationDiv");
                const imgDiv=document.querySelector(".img");
                
                imgDiv.src=picture.large;
                inDiv[0].innerHTML=`<p>Name:${name.first+" "+name.last+" "+name.title}</p>`;
                inDiv[1].innerHTML=`<p>Gender:${data['results'][0]["gender"]}</p>`;
                inDiv[2].innerHTML=`<p>Country:${data['results'][0]["location"]["country"]}</p>`;
                inDiv[3].innerHTML=`<p>Phone:${data['results'][0]["phone"]}</p>`;
                inDiv[4].innerHTML=`<p>Email:${data['results'][0]["email"]}</p>`;
                console.log(data['results'][0]);
            });
        // console.log(fetch("https://randomuser.me/api/"));
    </script>
</body>

</html>
```
:::
## 第十四週
:::success
* canvas ==網頁遊戲==
* [ngen](http://ngen.io/)
* [threejs](https://threejs.org/)
* easeljs
* [icon](https://fontawesome.com/v4.7.0/icons/)
* [隨機使用者](https://randomuser.me/api)
* map sort 

reduce
:::