重新來過 - エンジニアになろう！: [六角學院] [攻略心得] JavaScript 新手 JS 地下城1F

[前言]

其實一開始看到這個題目，就知道的 JavaScript 不難(雙迴圈)，真正的難題是刻排版XD
前幾天本來已經來到一樓門口想要攻略，
但是排版的感覺整個忘光光囧
所以乖乖跑去複習 Flex，
把排版手感找回來再繼續回來挑戰。
(編按：剛好洧杰老師有在「使用 HTML、CSS 開發一個網站」新增 Flex 的DLC，
也完成了「Flex 修煉時光屋」的任務練功，
感恩老師！讚嘆老師！QAQ)

[正題-排版]

要能夠用 JavaScript 寫出來，
首先你一定要先手動將版面刻出來！
如果你連純手工的畫面都長不出來，
就不用想後面要怎麼在 JavaScript 動態產生了。

正式刻排版前一定要聽老師的話，
要先手繪排版，
大概知道版面跟裡面元素長怎樣後先在html把元素長出來。

先長陽春版的，之後再慢慢調，
像這樣：

<body>
    <div class="wrap">
        <ul class="chart-all">
             <li class="chart-block">
                <div class="show-formula">
                    <h2>2</h2>
                    <p>2x1=2</p>
                    <p>2x2=4</p>
                    <p>2x3=6</p>
                    <p>2x5=10</p>
                    <p>2x6=12</p>
                    <p>2x7=14</p>
                    <p>2x8=16</p>
                    <p>2x9=18</p>
                </div>
            </li>
        </ul>
</body>

這樣離正式的樣子還很遠，不過已經有點樣子了。

我原本想說數字2跟99乘法我想要弄成一整塊，
然後用flex wrap去換行就好，
可是我發現這樣很難設定對齊，
所以還是拆成2塊了。

像這樣：

<li class="chart-block">
                <div class="show-formula left">
                    <h2 class="show-num">2</h2>
                    <p>2x1=2</p>
                    <p>2x2=4</p>
                    <p>2x3=6</p>
                </div>
                <div class="show-formula right">
                    <p>2x4=8</p>
                    <p>2x5=<span>10</span></p>
                    <p>2x6=<span>12</span></p>
                    <p>2x7=<span>14</span></p>
                    <p>2x8=<span>16</span></p>
                    <p>2x9=<span>18</span></p>
                </div>
</li>

html有大概的樣子後，就可以動手 CSS 的部份啦！

(然後這邊我又偷偷複習了一下 SCSS 的寫法)
這邊不細述中間排版的流程了。

一個區塊排出來後，
我會故意在html上複製好幾塊看排版是不是我要的樣子，
是的話再繼續往後面走。
像這樣：

<li class="chart-block">
   <div class="show-formula left">
       <h2 class="show-num">2</h2>
       <p>2x1=2</p>
       <p>2x2=4</p>
       <p>2x3=6</p>
   </div>
   <div class="show-formula right">
       <p>2x4=8</p>
       <p>2x5=<span>10</span></p>
       <p>2x6=<span>12</span></p>
       <p>2x7=<span>14</span></p>
       <p>2x8=<span>16</span></p>
       <p>2x9=<span>18</span></p>
   </div>
            </li>
            <li class="chart-block">
   <div class="show-formula left">
       <h2 class="show-num">2</h2>
       <p>2x1=2</p>
       <p>2x2=4</p>
       <p>2x3=6</p>
   </div>
   <div class="show-formula right">
       <p>2x4=8</p>
       <p>2x5=<span>10</span></p>
       <p>2x6=<span>12</span></p>
       <p>2x7=<span>14</span></p>
       <p>2x8=<span>16</span></p>
       <p>2x9=<span>18</span></p>
   </div>
            </li>
            <li class="chart-block">
   <div class="show-formula left">
       <h2 class="show-num">2</h2>
       <p>2x1=2</p>
       <p>2x2=4</p>
       <p>2x3=6</p>
   </div>
   <div class="show-formula right">
       <p>2x4=8</p>
       <p>2x5=<span>10</span></p>
       <p>2x6=<span>12</span></p>
       <p>2x7=<span>14</span></p>
       <p>2x8=<span>16</span></p>
       <p>2x9=<span>18</span></p>
   </div>
 </li>

然後這邊說一下，我是先刻出9x9 乘法表主要的區塊(下圖左)，
後來回頭才去刻第一個區塊(下圖右)。

(小聲說：我覺得上圖右那個線條超難刻的(笑)
原本那個線條想用之前助教教過的偽元素，
但我怎樣就是無法跟X並排在一起，
所以我後來就用了很爛的方法排了XD)

[正題-JavaScript]

接著就是到 JavaScript 寫出動態產生的 9x9 乘法表囉！
前面花了很多時間刻排版，到 JavaScript 就很簡單了XD
~~幾乎是複製貼上而已~~

1.先用console.log測試一下雙迴圈寫出 9x9 乘法表有沒有問題
2.OK的話就正式進入重頭戲~
我會故意在html那邊留剛剛手刻的排版，
註解起來，方便 ~~複製貼上~~
像這樣：

             <!-- <li class="chart-block">
                <div class="show-formula left">
                    <h2 class="show-num">2</h2>
                    <p>2x1=2</p>
                    <p>2x2=4</p>
                    <p>2x3=6</p>
                </div>
                <div class="show-formula right">
                    <p>2x4=8</p>
                    <p>2x5=<span>10</span></p>
                    <p>2x6=<span>12</span></p>
                    <p>2x7=<span>14</span></p>
                    <p>2x8=<span>16</span></p>
                    <p>2x9=<span>18</span></p>
                </div>
             </li> -->

再來我真的幾乎是複製貼上XD
除了把一些剛hardcode的地方改成變數外，
其他真的只是複製貼上，頂多微調細節。
像 2x3=6
2 改成 ${i}
3 改成 ${j}
6 改成 ${i*j}
就結束了XD

for ( let i=2; i<=9; i++ ){
    // 每次都要新增li元素
    let chart_block_li = document.createElement("li");
    chart_block_li.setAttribute("class","chart-block");
    chart_block_li_HTML = `<div class="show-formula left"><h2 class="show-num">${i}</h2>`; // li裡面的HTML字串的開頭
    for ( let j=1; j<=9; j++){
        // 原本有設字元間距為 1em，如果 ixj 結果為2位數，則不要字元間距，因此有加 <span> 各別處理
        if ( (i*j).toString().length == 1 ){
            chart_block_li_HTML += `<p>${i}x${j}=${i*j}</p>`;
        } else{
            chart_block_li_HTML += `<p>${i}x${j}=<span>${i*j}</span></p>`;
        }
        // 3是切分點，為3的時候要加不同的HTML
        if ( j==3 ){
            chart_block_li_HTML += `</div><div class="show-formula right">`;
        }
    }
}

[後記：一些背不起來的語法但這關會用到]

CSS -

陰影：
box-shadow: 0px 3px 10px #D8D8D8;
文字陰影：
text-shadow: 4px 3px 0px #F0F0F0;
9x9 乘法表每個區塊的圓角設定：
border-radius: 100px 0px 30px 0px;
字元間距：
letter-spacing: 5px;

-

JavaScript -

網頁元件宣告：
let chart_all_El = document.getElementById("chart-all");
新增元件：
let chart_block_li = document.createElement("li");
chart_block_li.setAttribute("class","chart-block"); //設定元件屬性
將 li append 到 ul裡：
chart_all_El.appendChild(chart_block_li);

[程式碼]

[Codepen] 新手 JS 地下城 1F - 9x9 乘法表

重新來過 - エンジニアになろう！

2020年3月31日星期二

[六角學院] [攻略心得] JavaScript 新手 JS 地下城1F - 9x9 乘法表

沒有留言:

張貼留言

2020年3月31日 星期二

[六角學院] [攻略心得] JavaScript 新手 JS 地下城1F - 9x9 乘法表

沒有留言:

張貼留言

2020年3月31日星期二