jsx 重點

1、jsx 是html like的js語法擴充, 很像html，只是寫在js file，透過complier轉成一般js


2、jsx語法可以在任何js語法可以出現的地方出現，可以存入變數，可以傳遞給函數…


3、jsx 只能有一個最外層元素，以html比喻就是最外層標籤不能有其他sibling，這很好達成，有需要的時候只要在最外層包上一層div即可


4、當jsx語法超過一行時，需用中括號 ( ) 包起來


5、雖然jsx和html語法幾乎一樣，但還是有不同的地方:

class:
在jsx裡面要用className而不能用class，這是因為jsx會轉譯為js，而class是js的保留關鍵字

當jsx render時className就會自動轉為class屬性

self-closing element:
例如<img />, <input />這類標籤，在html "/" 反斜線可加可不加，但在jsx則是必須加，否則會出現錯誤

event listener attribute:
html語法掛載事件handler的屬性名稱是全小寫，例如onclick、onmouseover，而在jsx則是使用camelCase，例如onClick、onMouseOver，然後指定function時記得用 { } 而不是 "" ，因為是jsx語法

lists:
當一個jsx標籤中包含多個li元素時，在某些情況下，需使用jsx專有的key屬性給予唯一的值以確保排序順序的正確性，否則可能產生預期之外的排序結果，需使用key的情況如下:
1、當lists元素需記憶狀態時，例如是否有打勾
2、當lists元素順序可能被打亂時，例如搜尋結果可能是隨機排序的，而你希望他保有一致性

如果不確定是否該使用key，那就都用吧，無傷大雅
語法如下:
<ul>
  <li key="li-01">Example1</li>
  <li key="li-02">Example2</li>
  <li key="li-03">Example3</li>

</ul>


6、在jsx標籤中的js語法會被視為文字，想要在jsx標籤中注入js語法，只要用大括號 { } 將js語法包起來即可，但有一個限制是不能注入(inject) if條件式到jsx語法中，可在外部處理if判斷，或是改用三元條件式或是自觸發函數、或是&&運算
原因及範例請參考: FB官方文件 、 &&運算範例

當注入js語法在jsx標籤中，注入的js和其他js是在同一個環境中，意思是在jsx外宣告的變數，可以在jsx裡面存取


7、你可以不使用jsx，jsx實際上會轉譯為js

var h1 = <h1>Hello world</h1>;

會轉譯為以下的js語法

var h1 = React.createElement(
  "h1",
  null,
  "Hello, world"

);

所以如果你想，你可以不使用jsx語法


8、在jsx中inline style寫法為:

<div style={{ color:'purple', width: '300px'}}></div>

在jsx中設定inline style屬性的方式是傳遞一個js物件做為設定依據

當你在jsx中注入js，而且注入的內容僅僅只是一個物件表示式，那很自然的就會是以兩個大括號結束

外層大括號代表注入js，內層大括號則是js的物件定義符號，所以兩個大括號並非表示什麼特殊語法，只是容易讓人誤以為有特殊意義

如果你是另外定義一個物件再傳入，就會像下列這樣

const styles = {
    color: 'purple',
    width: '300px'
};

<div style={styles}></div>

所以要記得的是在jsx中設定inline style屬性的方式是傳遞一個js物件做為設定依據


9、在正規js中，style屬性名稱都是小寫，並用"-"連接，但要注入jsx中的style屬性物件，屬性名稱是用camelCase方式定義，如下例:

一般js的style設定物件屬性名稱語法:
{
    background-color: 'purple',
    width: '100px'
}

要注入jsx inline style的物件屬性名稱語法:
{
    backgroundColor: 'purple',
    width: '100px'

}

10、在正規js中，style屬性值都是以文字表示，而在jsx 的style定義物件中，屬性值若是以數字表示，則預設單位是"px"，但一樣可以用一般js的方式表示，jsx只是提供一個方便的處理方式，如下例:

一般js:
{
     font-size: '30px',
     height: '100vh'
}


jsx inline style 屬性值:
{
     fontSize: 30,
     height: '100vh'

}

何謂sql injcetion 以及 xss 跨站攻擊

sql injection 還有 xss 都是利用網站對使用者輸入的資料未針對特殊字元做處理的漏洞，注入惡意指令在sql查詢字串或是html語法上

sql injection

假設登入驗證使用者輸入的帳號密碼直接查詢資料庫，有查到就通過

登入驗證是以下這一串sql指令
 SELECT * FROM `memberdata` WHERE m_username = '使用者輸入的帳號' and m_passwd ='使用者輸入的密碼';

假設資料庫中有一筆資料帳密都是'admin'

下面這段是正常登入，使用者輸入帳號:admin , 密碼: admin

1、SELECT * FROM `memberdata` WHERE m_username = 'admin' and m_passwd ='admin';

但改成下面這樣也可以登入, 或說也可以查到一筆admin的資料

2、SELECT * FROM `memberdata` WHERE m_username = 'admin' # and m_passwd ='';

只要在帳號處輸入 admin'#    不用密碼即可登入

可以把1、2的指令在phpMyAdmin上run看看，都能查到一筆admin資料

因為 #字號 把後面的 and m_passwd = .......註解掉了，那段等於沒有，所以條件變成只查帳號符合的

xss 攻擊

然後 如果你在帳號欄位輸入  <script> alert('我不是文字，是會執行的js碼'); </script>
然後在php檔案裡面 echo $_POST['userName'];  它不會印出文字，而是執行js程式碼
(實際上不會執行，因為內建有預防，可以按f12看訊息)

現在假設有一個網站是可以回文的，回文會被存入資料庫，每個使用者連到該頁面都會把歷史回文列出來

假設某個使用者在回文裡面輸入 <script> alert('this is demo.');</script>，那其他人拜訪該頁面時，就會執行該程式碼，看到彈出視窗顯示 'this is demo.' 訊息，<script>標籤裡面如果改成惡意程式碼，那就…
利用使用者信任該網站，透過該網站攻擊該網站的使用者，跨站攻擊的函意似乎是這樣


預防方式都是對使用者輸入的資料做特殊符號處理，像是' , " , <, > 等等的

例如:

sql injection 用 addslashes 函數 http://php.net/manual/en/function.addslashes.php

xss 用 htmlentities 函數　http://php.net/manual/en/function.htmlentities.php

PHP 面試考題 輸出費氏數列與質數

//費氏
//==========================
$pre1 = 1;
$pre2 = 0;

function fib($pre2, $pre1, $n)
{
    if ($n < 2) echo $n;
    else {
        $cur = $pre1 + $pre2;
        echo $cur;
        $pre2 = $pre1;
        $pre1 = $cur;
    }
    if ($n < 10000) {
        echo ',';
        fib($pre2, $pre1, ++$n);
    }
}

fib($pre2, $pre1, 0);

//質數
//============================

echo "1";
echo ",2";
for($i=1; $i<=100; $i+=2){

    for($j=2; $j<$i ;$j++){
        if($i%$j ==0) break;
    }
    if($j==$i) echo ",$i";
}