【php入門⑤】フロント側（javascript）できることをサーバ側（php）で行う必要があるのか～類似処理で確かめる～
【今回の内容】
以下の参考書を使用しながら学習を行っていたのが、いくつかサンプルを作成する中で疑問がでてきました。
【疑問】
フロント側（javascript）できることをサーバ側（php）で行う必要があるのか
【結論】
・ユーザの操作によって処理が変わる場合は、javascript側。
・ユーザの操作が関係なく処理を行う場合は、php側。
なのかなーというのが、まだまだphp入門したての初心者の見解。
学習する中でまた変わっていくかもしれませんが、、
今回は以下の類似する処理結果を目指して実際にjavascriptとphp側でかいてみますー
・今月の残り日を選べるプルダウン
・簡易な入力チェック
#結果として、違うスクリプトで処理結果がほぼ同じようなものが作成できたので
ちょっとおもしろかったです。
【事例】
事例１ 現在の日付を取得してプルダウン作成
php側
<?php /*今日の日付から残りの日付を表示*/ $month=date('n'); echo "<select>"; for($i=date('j');$i<date('t');$i++){ echo "<option>".$month."月".$i."</option>"; } echo "</select>";
javascript側
<html> <head></head> <body> <select id="select1"> </select> <script Language="JavaScript" type="text/javascript"> window.onload=pl_date(); function pl_date(){ <!--現在日数の取得--> var nowDate=new Date(); var nowMonth=nowDate.getMonth(); var nowDate=nowDate.getDate(); <!--残り日数の取得--> var nowDate2=new Date(); nowDate2.setMonth(nowDate2.getMonth()+1); nowDate2.setDate(0); var lastDate=nowDate2.getDate(); <!--プルダウンの生成--> var select1=document.getElementById("select1"); for(var i=nowDate;i<=lastDate;i++){ var newOption=document.createElement("option"); newOption.value=nowMonth+"月"+i+"日"; newOption.appendChild(document.createTextNode(nowMonth+"月"+i+"日")); select1.appendChild(newOption); } } </script> </body> </html>
事例２ 入力チェック（半角数字かどうか判断する）を行う
php側
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <body> <form action="./testForm.php"method="post"> <span>電話番号</span><input type="text" name="input4"> <input type="submit" value="送信"> </form> </body> </html>
<?php $tel=(htmlspecialchars($_POST['input4'],ENT_QUOTES)); if(is_numeric($tel)){print ($tel);} else{print "半角数字で入力してください";} ?> </body> </html>
javascript側
<html> <head></head> <body> <input type="text"name="tex" id="input" value="" >適当な文字を入力してください<br> <input type="button" value="確認"onclick="serch()"><br> <script Language="JavaScript" type="text/javascript"> function serch(){ var str=document.getElementById("input").value; var pattern=/^[0-9]+$/; var result=str.match(pattern); if(!result){alert("半角数字を入力してください");} } </script> </body> </html>
