【基礎】HTML・JSの参考リンク・小ネタ等

HTML

超基礎

• 内部リンクの貼り方

タグ

<fieldset>タグ

フォームの入力項目をグループ化する際に使用する。 グループの先頭には、<LEGEND>～</LEGEND>で入力項目グループにタイトルをつけられる。

<legend>タグ

<FIELDSET>タグでグループ化されたフォームの入力項目にタイトルを付ける。<FIELDSET>～<FIELDSET>内の先頭に1つだけ記述する。

<form action="aaa.cgi" method="post">
<fieldset>
<legend>個人情報</legend>
お名前：<input type="text" name="name" size="20">
メール：<input type="text" name="mail" size="40">
</fieldset>
<fieldset>
<legend>ご感想</legend>
満足度<br>
<input type="radio" name="manzoku" checked>いいと思う<br>
<input type="radio" name="manzoku">まあまあ<br>
<input type="radio" name="manzoku">ふつう<br>
<input type="radio" name="manzoku">あんまり<br>
<input type="radio" name="manzoku">よくないと思う<br><br>
一言どうぞ<br>
<textarea rows="3" name="S1" cols="40"></textarea>
</fieldset>
<input type="submit" value="送信">
</form>

<label>タグ

フォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素。 これによりチェックボックスやラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができる。

<pre>タグ

<PRE>タグはPreformatted Text（整形済みテキスト） の略。<PRE>～で囲まれた範囲のソースに記述されたスペース・改行などを、そのまま等幅フォントで表示する。

JavaScript

超基礎

• 演算子
• JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
• 要素を指定する
• 配列→文字列、文字列→配列

フォームの活性/非活性の切替

selectObject.disabledプロパティ

<input type="radio" name="pattern" value="0" onclick="regularActive()" checked="">
<input type="radio" name="pattern" value="1" onclick="regularActive()">

function regularActive(){
  radio = document.getElementsByName('pattern');

  if(radio[0].checked) document.getElementById('regular').disabled = true;
  else if(radio[1].checked) document.getElementById('regular').disabled = false;
}

window.onload = regularActive;

イベント処理

イベント処理

ハンドラ	タイミング
onClick	要素やリンクをクリックした時
onChange	フォームの要素の選択、入力内容が変更された時
onLoad	ページや画像の読み込みが完了した時

JavaScriptでもPHPでも値の加工ができる場合

場面

DBではdatetime型だが、デザインの都合でJS側ではdateとtimeを分けている。
dateのみクライアント側で変更があり、DBを更新したい場合、dateとtimeの結合はJSとPHPのどっちでやるのがいいのか。

対処

JS。クライアント側の都合（デザイン）でdateとtimeを分けているのだから、それらを結合するのもクライアント側の仕事。
そのほうが、DBのAPIもすっきりする。（PHP側で結合処理を行うとAPIが冗長になる。）

JQuery

参考URL

• jQueryの基礎
• セレクタ指定方法
• box, radio, selectboxの値の取り方
• HTMLの要素にclassを追加・削除する方法
• jquery.cookie
  • jQueryで簡単にcookieが扱えるようになる。
• その場編集を可能にする

チェックボックスにチェックを入れる

nameがcheckboxの場合

$('input[name="checkbox"]').prop("checked",true);

propを使うのがいいらしい。

セレクトボックスで選択されたテキストを取り出す

$('[name=alphabet]').change(function() {
    // 選択されているvalue属性値を取り出す
    var val = $('[name=alphabet]').val();
    console.log(val); // 出力：ABC
    // 選択されている表示文字列を取り出す
    var txt = $('[name=alphabet] option:selected').text();
    console.log(txt); // 出力：えーびーしー
});

(参考)
セレクタ指定時に option:selected を追加する。
$(this).text() で取り出そうとすると、すべてのテキストを取り出してしまう。

attr : ①要素に属性を同時に設定する、②要素を取得する

例①

$("img").attr({ 
      src: "/images/hat.gif",
      title: "jQuery",
      alt: "jQuery Logo"
    });

すべてのimgタグに{}内の属性を設定する。

例②

var hoge = $("#foo").attr("class");

idがfooの要素のclassを取得する。
複数ある場合は空白で区切られる。（たぶん）

append :各要素にコンテンツを追加する

例

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");

結果

I would like to say: Hello

$.each : 配列の要素がなくなるまでループ

$.each(配列, function(index, elem) {
  ……配列要素に対する任意の処理……
})

• index
  • インデックス番号
• elem
  • 要素値

例

$(function() {
  // 処理対象のオブジェクト配列
  var members = [
    { name: '山田理央', age: 17, sex: 'female' },
    { name: '鈴木真琴', age: 24, sex: 'male' },
    { name: '佐藤健一', age: 45, sex: 'male' },
    { name: '木下奈美', age: 29, sex: 'female' },
    { name: '天童赤根', age: 35, sex: 'female' }
  ];

  // 配列membersを順に処理
  $.each(members,
    function(index, elem) {
      // 年齢が40以上のメンバーが見つかったところで出力停止
      if (elem.age >= 40) { return false; }
      // メンバー情報を「名前（年齢）」の形式でリストに整形
      $('<li></li>')
        .append(elem.name + '（' + elem.age + '）')
        .appendTo('#result');
    }
  );
});

ajaxを使ってPOSTすると500 Internal Server Errorがでる時の対処

ajaxを使っているファイルにcsrf-tokenを使う。

<meta name="csrf-token" content="{{ csrf_token() }}" />

<script type="text/javascript">
$.ajaxSetup({
        headers: { "X-CSRF-TOKEN": $.cookie("csrf-token") }
});
</script>

Bootstrap3

参考URL

• 基本テンプレート

グリッドシステム

縦方向に画面を分割して要素を配置できる。参考

Datepickerの使い方

カレンダーから日付指定できるやつ。参考