20210502のHTMLに関する記事は5件です。

JavaScriptの関数

関数の定義 JavaScriptの関数(Function)を定義する const addZero = function(value){ if (value > 10) { value = '0' + value ; return value; } let now = new.Date(); let seconds = now.getSeconds(); seconds = addZero(seconds); 解説します↓ const addZero = function(value){ // 定数の定義 =functionで関数として扱われる // ()は関数を適用する対象 if (value > 10) { value = '0' + value ; return value; //returnの記述は必ずする(=戻り値、返り値) } let now = new.Date(); //オブジェクトのインスタンス化 let seconds = now.getSeconds(); //それに対して秒を取得するメソッド seconds = addZero(seconds); //secondsを持たせたaddZeroを呼び出し、戻り値をsecondsに代入 という感じ。 戻り値は1つだけしか指定できないので、 複数戻り値が欲しい場合はオブジェクトを作る形で対応するらしい(やり方はまだ知らない) それから、関数の定義の仕方は funciton addZero (value){ } でもいいらしい。 (どちらかというと先述した方が一般的っぽい) ふむ〜。 戻り値の考え方と、最後の関数呼び出しで代入らへんが なんかモヤモヤとしちゃう。 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScriptで数値を操作する

本記事の内容 本記事ではJavaScriptを用いて数値に対して手を加えます。 間違い等ある場合、お手数ですがご連絡いただけますと幸いです。 Math.floor/Math.ceil/Math.round/toFixed/Math.random Math.floorは小数点以下を切り捨てるメソッド。 Math.ceilは小数点以下を切り上げるメソッド。 Math.roundは四捨五入するメソッド。 num.toFixedは指定した小数点まで表示するメソッド。 以下で実際に確認していきます。 以下コード デベロッパーツールにて表示確認 (option + command + I で表示可能。Chromeを使用していることとする。) index.html const num = 9.333333 console.log(Math.floor(num)); #9と表示される console.log(Math.ceil(num)); #10と表示される console.log(Math.round(num)); #9と表示される console.log(num.toFixed(5)); #9.33333と表示される Math.randomメソッド Math.random()*Xは指定した範囲内で数値をランダムに得るメソッド。 例えばデベロッパーツールにてconsole.log(Math.random()*3)と記述すると、0~2までの範囲で数値をランダムに表示する。では、指定した範囲で整数値を取得するにはどの様にすれば良いのか? 範囲をmin~maxの範囲で整数値を取得するとするならば、以下の式が成り立つ。 index.html Math.floor(Math.random(max+1-min))+min 順序立てて考えていく ~範囲~ 5(min)~10(max)までの範囲で整数値を取得するとする。 ・Math.random(11)で0~10までの数値をランダムに取得する。 ・しかし、今回は5~10までの範囲で考えているため、このままでは0~4までの整数値が含まれてしまう。 ・一度0~6((10+1)-5)の範囲で整数値を取得し、後からminとなる整数値を足せば良い! ・よって上記に記述した式が成り立つ(ただし、上記の式はMath.floorと記述していることから整数値を求めていることに注意)。 ※わかりにくければ、定規の様なものを意識するといいかもしれない。 最後に 最後までお付き合いいただきありがとうございました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScriptのメソッドとプロパティ

Javascriptの基礎知識 オブジェクトとメソッドとプロパティ document.write 意)画面に表示する(documentオブジェクトにwriteメソッド) JavaScriptは「.」を使って、 オブジェクトとメソッドを数珠繋ぎのように表記していく document.getElementById('ID名').innerHTML = 'あいうえお'; 意)ID名のエレメントを取得して、HTMLの内容を あいうえお に書き換える ひとつずつ解説↓ document.getElementById('ID名') documentオブジェクトに.getElementById(IDでエレメントを取得する)メソッド getElementById('ID名').innerHTML = 'あいうえお';  getElementByIdはエレメントオブジェクトというオブジェクトになり、そこに.innnerHTMLというプロパティを繋いでいる メソッドとプロパティの考え方 動きを表す → メソッド 見た目を表す → プロパティ というイメージでとりあえずOK innerHTMLはHTMLのinner、つまりHTMLの中身(内容)を表すプロパティ 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

POSTリクエスト、isset・empty関数を用いた、フォームから受け取ったデータに返り値を表示

フォームで入力したデータを返り値を表示させるまでをまとめてみました。 同じ箇所で詰まっている人のヒントになれれば幸いです。 下の画像のように、入力フォームに名前と年齢を入力し送信ボタンを押すことで「年齢を入力してください」が「XXさんはXX歳です」と表示、または年齢が120歳以上なら「エラー」を表示される処理を実装していきます。 処理の全容 index.html <!DOCTYPE html> <html lang = “ja”> <head> <meta charset = “UTF-8”> <title>GET・POST練習</title> </head> <body> <h1>データの送信</h1> <form action="index.php" method="post"> <label>名前</label><input type="text" name="name"><br/> <label>年齢</label><input type="number" name="age"><br/> <input type="submit" value="送信"> </form> </body> </html> index.php if(empty($_POST["age"])){ if ($_POST["age"] == "") { echo "年齢を入力してください"; }; }elseif(isset($_POST["age"])){ if ($_POST["age"] < 120) { echo $_POST["name"] . "さんは" . $_POST["age"] . "歳です"; } else { echo "エラー"; } } index.html側のコード実装 <label>名前</label><input type="text" name="name"><br/> <label>年齢</label><input type="number" name="age"><br/> <input type="submit" value="送信"> labelタグで○○○とすることで入力フォームの左横にある「名前」「年齢」のフォームの項目を表示できます。 inputタグでとすることで入力フォーム(長方形部分)を作成できます。 inputタグ内のtype="○○○" とすることでフォームの各種の型を設定できる。ここでは、名前のフォームで直接手入力で行う"text"、年齢のフォームでは▲▼で数字を合わせる"number"としています。 nameで"name"、"age"としているのは、後のphp側のコード実装でPOSTメソッドを使う際に合わせて用います。 index.php側のコード実装 index.php if(empty($_POST["age"])){ if ($_POST["age"] == "") { echo "年齢を入力してください"; }; }elseif(isset($_POST["age"])){ if ($_POST["age"] < 120) { echo $_POST["name"] . "さんは" . $_POST["age"] . "歳です"; } else { echo "エラー"; } } 大枠のif文のelseifの前後の処理それぞれ分けて解説していきます。 if文のelseifの前の処理 index.php if(empty($_POST["age"])){ if ($_POST["age"] == "") { echo "年齢を入力してください"; }; この部分は、冒頭の画像にあった「年齢を入力してください」と表示させる際の処理です。 ここで用いるempty関数とは、引数に与えた変数や配列の中身が空であるか否かを確認する関数です。 この関数は、変数の値が0あるいは空、NULLである場合はTRUEを、それ以外である場合はFALSEを結果として返します。言い換えれば、存在しない場合や値がない場合にTRUEと返すものがempty関数です。 次にPOSTメソッドですが、これは入力した内容をサーバー(データベース等、ここの場合index.php)へ送るために用います。 具体的な処理として、メッセージボディ(入力フォーム)に入力した情報を記述してリクエストしサーバーへ送ります。このメッセージボディは、URLと異なり情報は残らないので比較的セキュリティの高く、ユーザー名やパスワードなど第3者に知られたくない情報はPOSTメソッドを用いて行います。 類似のものとしてGETメソッドというものがありますが、こちらはリクエストラインにクエリストリングとして、入力した情報を付与してサーバーへ送り、POSTメソッドよりも比較的セキュリティの低い情報を扱う際に用います。 これらを踏まえて処理を解説していくと、「年齢」のフォームに入力したものの引数「age」をPOSTメソッドでindex.php側へ送り込み、empty関数とif文を組み合わせて「もしageに存在しない場合・値がない場合はTRUE」という条件式を作ります。TRUEだった場合に何を返すかについては、インデントを下げたところにさらにif文で「もしageに値がない場合は『年齢を入力してください』を出力」という条件式を作ります。これにより、「年齢を入力してください」と表示させています。 if文のelseif以降の処理 次にelseif以降の処理の解説です。 index.php }elseif(isset($_POST["age"])){ if ($_POST["age"] < 120) { echo $_POST["name"] . "さんは" . $_POST["age"] . "歳です"; } else { echo "エラー"; } } 先ほどの「もしageに存在しない場合・値がない場合はTRUE」という条件式において、何かしら値がありempty関数がFalseと判断した場合、こちらの処理が実行されます。 ここで用いるisset関数とは、変数が宣言されている(値がある)こと・nullとは異なることを確認する関数です。 これらを踏まえて同様に処理を解説していくと、 isset関数を用いて「もしageに何かしら値がある場合・nullとは異なる場合はTRUE」とし、 TRUEだった場合の返すものとして一段下げたインデントにIf文を作り「もしageが120以下なら、引数nameを用いて『nameさんはage歳です』、そうでない場合は『エラー』と返す処理ができます。 こうして、入力フォームに名前と年齢を入力し送信ボタンを押すことで「年齢を入力してください」が「XXさんはXX歳です」と表示、または年齢が120歳以上なら「エラー」を表示される処理完成します。 以上になります。 説明不備・間違った解釈などありましたら、ご教授のほどお願いします。 参考 empty関数について:https://blog.codecamp.jp/programming-php-empty-howtouse POSTメソッドについて:https://qiita.com/7968/items/4bf4d6f28284146c288f#%E7%AC%AC3%E7%AB%A0-post%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 isset関数について:https://www.php.net/manual/ja/function.isset.php
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

META 要素で Set-Cookie が使えなくなった

HTML Standard では次のように定義されています。 4.2.5.3 Pragma directives Set-Cookie は Non-conforming ですが、最近の Chrome, Firefox では使えません。 テスト用の HTML ファイル meta_test.html <!DOCTYPE html> <html lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=UTF8"> <meta http-equiv="Set-Cookie" content="key1=good;SameSite=None;Secure"> <TITLE>Met Test</TITLE> <script type="text/javascript"> document.cookie = "aa=hello;SameSite=None;Secure" document.cookie = "bb=みかん;SameSite=None;Secure" document.cookie = "cc=メロン;SameSite=None;Secure" console.log(document.cookie) </script> </head> <body> May/02/2021<br /> </body> </html> これを、FireFox でアクセスすると Chrome でアクセスすると
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む