HTML5、PHP、及び、JavaScriptの備忘録

ガイドブック

P.25

meta要素などの空要素の最後に終端スラッシュを入れているが、
XMLとして扱わないのであれば、これは特に入れる必要はない。

P.25 インラインのSVGとMathML

SVGは、ベクターグラフィックを扱うマークアップ仕様。
MathMLは、数式を扱うためのマークアップ仕様。
SVGもMathMLもXMLベースのマークアップ言語であったため、
XHTMLによるマークアップを行い、サーバからはXMLとしての
Content-Typeで送信する必要があった。HTML5では、
HTMLドキュメントの中に、直接<svg>や
<math>をマークアップできるようになった。

P.36 canvas要素のマークアップ

width属性とheight属性が指定されていなければ、
幅350px、高さ150pxがデフォルト値として適用される。

P.37

もし、canvas要素のノードオブジェクトを操作しないのであれば、 この2行のコードは、次のように1行で書いてもかまわない。

var ctx = document.getElementById("sample").getContext("2d");

P.82 Flashとの比較

Flashは全部入りの巨大なアプリケーションプラットフォームで、
SVGのようなベクター形式も、Canvasのようなビットマップ形式も扱える。
外部ファイルとの通信や、ストレージもあるし、動画や音声なども再生可能。

2010年7月現在において単純に機能面で比較すれば、
Flashの方が高機能かつ高速である。
勿論これらは開発者から見たメリットでしかなく、
利用者の視点はまた別の問題だ。

P.83 XHTMLでのHTMLとSVGの混在

XHTMLには名前空間を定義する方法が存在するので、
HTMLの名前空間とSVGの名前空間を用意することで
1つの文書中にHTMLとSVGを混在させることが可能。

ハンドブック

P.23

history.forward()　1つ先に進む（ブラウザの→と同じ）
history.back()　1つ前に戻る（ブラウザの←と同じ）
history.go(引数)　引数の数値分だけページを進める
ここで引数がプラス1の場合はforward()と同じである。
引数にはマイナス値を指定することもでき、
マイナス1の場合はback()と同じ動きになる。

P.34

ここで<div>オブジェクトにテキストを表示する手段として
ここで使用されているinnerHTMLの他にinnerTextもあるが、
innerTextの場合はFirefoxで正常に表示されない場合がある。

P.62 <marquee>タグ

P.83～P.85

P.89～P.90

P.117～P.119

<script type="text/javascript">
<!--
function pulldown(list) {
  if(list.style.display=="none"){
    list.style.display="block";
  }else{
    list.style.display="none";
  }
}
//-->
</script>

<div>
<a href="javascript:pulldown(l1)">
</div>

<div id="l1" style="display:none">

</div>

<div>
<a href="javascript:pulldown(l2)">
</div>

<div id="l2" style="display:none">

</div>

display:none
display:block

P.124～P.125 z-index

P.164 visiblityプロパティ

P.200 <param>タグ

P.209 parseInt

第2引数に基数を指定。8なら8進数、16なら16進数。

P.231, P.236, P.239, P.243

document.getElementById("result").innerHTML = out;

P.252～P.254

<table border="0" cellspacing="1" bgcolor="">

P.284～P.286

var table = document.createElement("table");
table.setAttribute("border","1");

var tr = document.createElement("tr");

  var td = document.createElement("td");
  td.setAttribute("align","center");
  tr.appendChild(td);

table.appendChild(tr);
document.getElementById("view").appendChild(table);

<p id="view"></p>

実践サンプル

P.50 ライブラリーを使わずにPNG形式で保存する

保存形式をPNGに限定すればライブラリーを使わなくても保存できる。

CanvasでつくるRPG

P.159、P.160 改行を\nに統一

// 改行を\nに統一
var script = code.replace("\r\n", "\n");
script = script.replace("\r", "\n");

P.160

document.getElementById("result").value = result;

P.170 改行を\nに統一

// 改行を\nに統一
script = script.replace("\r\n", "\n");
script = script.replace("\r", "\n");

P.171

document.getElementById("resultView").value = result;

つくって覚える

P.130 placeholder属性

入力ボックスの説明文を指定。
値が入力されていないときに
入力ボックスの中に薄いグレーで表示

P.136 LABELタグ

フォーム要素とテキストを結びつけるタグ。
フォーム要素とその項目名のテキストをLABELタグで囲むと、
テキストをクリックしたときに
フォーム要素をクリックしたときと
同じ動作をさせることができる。

P.140 required属性

テキスト入力ボックスや、ラジオボタンにrequired属性を記述すると、
そのフォーム要素は入力値が必須の項目になり、入力された値を
ブラウザーが自動的にチェックして、値が入力されていなければ
エラーメッセージを表示して送信できないようにする。

Webゲーム練習帳

P.128

ゲーム画面を描画する「canvas要素」に対して、
「onclick」時のイベントハンドラを割り当てる。

<canvas id="game_screen" width="400" 
height="400" onclick="fire()"></canvas>

ゲームプログラミング入門

P.7 Processing

setup()が最初に1回実行される。
次にdraw()が無限ループとして1秒間に最大60回実行され続ける。

void setup(){
  size(600, 600);
}

void draw(){
  background(0);
}

アプリ開発デビュー

P.7

<meta name="viewport" content="width=device-width,initial-sacale=1.0">

P.29

1997年にHTML4.0が、1999年にHTML4.01が、2000年にXHTML（Extensible HyperText Markup Language）1.0が、
2000年にXHTML1.1が発行。HTML5はHTMLの次期版であると同時に、XHTMLの次期版でもある。

P.30

HTML5はHTML4.01とXHTML1.01の後継であり、HTML構文とXHTML構文の二つを持つ。

P.82 マニフェストファイル

P.85 クロスドメイン制限

P.86 createElementメソッド

P.101 z-index

P.107 node.js

P.121 プレースホルダー

PHP。「SQLインジェクション」の脆弱性を防ぐ。

P.123

CREATE TABLE IF NOT EXISTS

P.127

インラインCSSで書いているのは誌面の都合であり、
普通にstyleタグを用いても問題ない。

P.127

CanvasはHTMLに直接書かず、createElementで作成する。
小さ目のCanvasに描画してそれをHTML5のCSS3を利用して拡大している。
小さいCanvasに描画すると、描画処理が楽になるために高速化できる。

  var canvas = document.createElement("canvas");
  doucument.body.appendChild(canvas);
  canvas.width = 320;
  canvas.height = 320;

P.142

setTimeout(関数名,ミリ秒)
指定したミリ秒後に、指定した関数が実行される。

P.157～ ベジエ曲線

quadraticCurveTo
bezierCurveTo

P.165 BOM

P.167 pageX/pageYとclientX/clientY

pageX/pageYは、スクロールしても座標が変わらない。
Canvas上のマウスの位置情報を取得するには、<canvas>要素の
左上座標(offsetLeft, offsetTop)をこれらの値から引く。

P.167 placeholder属性とrequired属性

P.168

<meta name="viewport" content="width=device-width" />

P.170 three.js

P.174 z-index

enchant勇者

P.27 予約語

P.30

P.34 while文とdo～while文

P.38 空の配列をつくるには

P.38 連想配列

「連想配列」は、文字列を添え字にする配列のこと。
var 連想配列名 = {添え字:初期値, …};

本格ゲームプログラミング

P.24

「canvas」は、JavaScriptから動的に作成して追加することも可能。
以下では、jQueryを使ってDOM操作を行っている。

var cnvs = $('<canvas width=300 height=300>').appendTo("body").get(0);

Web制作入門

P.40

#kiji{
  border:solid 2px gray;
  width:400px;
  padding:10px;
  margin:10px;
  text-align:center;
}

solid（実線）の他に、dotted（点線）、
dashed（破線）、double（二重線）など、
いろいろな種類の線を利用できる。

border:solid 10px green;
border:dotted 10px green;
border:dashed 5px green;
border:double 20px green;
border:ridge 20px green;
border:groove 20px green;

P.42

「float:left;」は、最初の要素を左側に寄せ、後ろに続く要素をその右側に回り込ませる。
「float:right;」のように指定すると、この反対になる。最初の要素を右側に寄せ、
後ろに続く要素を左側に回り込ませる。なお、floatの指定をしない場合には、要素は縦に並ぶ。

P.62 function命令

P.63 関数リテラル

関数リテラルは、宣言する時点では名前を持たないことから、
「匿名関数」または「無名関数」とも呼ばれる。

P.64

関数リテラルで関数を定義するときには、関数を呼び出すよりも先に記述しなければならない。

P.64

JavaScriptではオブジェクトと連想配列は同じもの。
連想配列は、各要素に名前（文字列）をキーにして
アクセスできる配列で、ハッシュとも呼ばれる。
連想配列の生成と初期化を行うには次のようなコードを書く。

var 変数名 = {キー名:値, キー名:値, …};

右辺の形式をオブジェクトリテラルと呼ぶ。

P.114 「isset関数」

PHP。変数が存在するかどうかをチェックする。

P.120

PHPバージョン5.3以降では、「無名関数」を使えるようになった。

P.155

「z-index」の値が大きいほど、<canvas>タグは手前に表示される。

P.164

ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

image　Imageオブジェクト
sx, sy　描画元の左上の座標
sw, sh　描画元の幅と高さ
dx, dy　描画先の左上の座標
dw, dh　描画先の幅と高さ

「超」入門

P.43

文字列にダブルクォートが含まれる確率と、シングルクォートが含まれる確率

P.46

HTML5では<script>にtype属性を含める必要がなくなった。

P.57 textContent

P.60 document.writeメソッド

今後はwriteメソッドは原則として使わない。

P.79 比較演算子

「==」は原則として使わない。

P.115 ファンクションを変数に代入

P.127 配列

角カッコ（[]）を使う。

P.133 createElementメソッド

P.134 appendChildメソッド

P.139 オブジェクト

波カッコ（{}）を使う。
{プロパティ名:「データ」または「値」}
なお、「プロパティ」と呼ぶとき、それはプロパティ名と
そこに保存されているデータのセットを指す。

P.141

プロパティのデータには、ファンクションも保存できる。
プロパティのデータが、ファンクションのとき、
そのプロパティのことを「メソッド」という。

P.146～148

Excelなどの表計算ソフトに入力するとして、
縦に並べて入力したくなる→配列
そのデータが横に並べたくなる→オブジェクト
縦横に広がる表→配列とオブジェクトを組み合わせて管理

P.150 <form>タグ

<form action="#" id="form">

P.154 <input>タグ

<input type="text" name="word">

P.162 Dateオブジェクトは初期化する必要がある

var now = new Date();

P.163 getMonthメソッド

「実際の月-1」

P.179 Mathオブジェクトのfloorメソッド

()内の数値の小数点以下を切り捨てる。

P.196 setTimeoutメソッド

ファンクションの後ろには、()をつけてはいけない。

P.244

「表示・非表示を切り替える」は、<ul>に適用されるCSSの
displayプロパティをblockにしたりnoneにしたりすれば実現できる。

P.248 toggleClassメソッド

toggleClassメソッドは、取得した要素に()内のパラメータで指定されている
クラス名がついていなければ追加、ついていれば削除

わかばWebサイト

P.7 PHP

Yahoo!やGREEといった大きなサイトを動かしている

P.48 パンくず

P.76 インデント

字下げはタブでもスペースでも可能
Googleのガイドラインでは半角スペース2つ分が推奨

P.83 空要素

brやhrやimgやinputのように、開始と終了のセットではなく、
単独で機能するタグを「空要素」という。

P.98 img要素

alt属性には、画像が表示できない場合に
代わりに表示するテキストを指定する。
alternate text（代替テキスト）の略。

P.100 header要素

head要素とは別物

P.101 footer要素

P.102 nav要素

P.113 table要素にはborder属性を設定しておくと吉

HTML5以前の仕様では、この属性はテーブルの
枠線の太さをピクセルで指定するための属性
HTML5の仕様では、属性値は「1」もしくは空("")を指定

P.118 placeholder属性

P.118 reqiured属性

P.124 カテゴリーとコンテンツ・モデル

P.158 セレクタの詳細度

!important
インライン記述
IDセレクタ #～
クラスセレクタ .～
要素セレクタ
ユニバーサルセレクタ

P.171 ボックスモデル

Webページに配置される画像や文字は、3つの層に囲われている。
内側から順に、パディング・ボーダー・マージン。
これをボックスモデルと呼ぶ。

P.178～183 フロート

floatプロパティを使うと、要素を左か右に寄せて配置できる。
このとき、後ろに続く要素は順に回り込む。

.float {
  float: none;
}

.float {
  float: left;
}

.float {
  float: right;
}

P.228 Web制作に使われている言語

Java　Twitter Evernote
Ruby　クックパッド GitHub
Python　Dropbox Instagram
Perl　はてなブックマーク mixi

P.267～P.275 SEO

入門教室

P.57 noscriptタグについて

P.67 parseIntとMath.floor

1未満を切り捨てる命令。但し、マイナスの値でMath.floorを使うと、小数部分の切り捨てが
算数や数学のルールと違って、例えば「Math.floor(-0.1)」の値は「-1」となる。

P.68 ゲーム制作で多用する%演算子

P.88 innerHTMLとtextContent

→P.135, P.144

P.102 idとclassについて

P.111 セルの隙間をなくす

セルとセルの隙間をなくすには、table要素に
border-collapseというプロパティの値を設定する。
border-collapseは何も記述しないと初期値が
separate（隙間を空ける）になっているので、
この値をcollapse（隙間をなくす）に指定する。

table {
 border-collapse: collapse;
}

P.113 <caption>表のタイトル</caption>

P.118 「===」と「!==」の意味の違いについて

P.120 window.prompt

「window.」を省略して「prompt」と略して記述することができる。

P.204 setIntervalとsetTimeoutの違いについて

setInterval命令を使うと、呼び出した関数の処理が終わらなくても、
時間が来ると再びその関数を呼び出すので、
重い処理を行う場合は不具合が生じるという定説があるが、
1秒ごとに処理を繰り返す程度のプログラムであれば、
setIntervalとsetTimeoutのどちらを用いても問題は起きない。
しかし、1秒間に10～20回の処理を行うブラウザゲームは、
より安全と言われているsetTimeout命令で処理した方がいいかもしれない。

P.211 「配列名.length」でその配列の要素数を取得できる。

P.218 this

P.244 画像を保存する方法