ｼﾝﾌﾟﾙなHTML5文書
<!doctype html> <!-- このﾃｷｽﾄﾌｧｲﾙが、html文書であることを明示する。-->
<html>
<head>
<title> シンプルなHTML5文書 </title> <!-- webﾍﾟｰｼﾞのﾀｲﾄﾙ -->
</head>
<body>
<p>タグで配置した文字列でぃす</p> <!-- 文字列を配置する。-->
<script>
document.write( "JSで書き込んだ文字列でぃす" ); // この文書に、文字列を書き込む。
var hensuu1 = 4649; // 変数を宣言して、初期化する。( 数値を代入 )
document.write( hensuu1 ); // 変数の値を書き込む。
</script>
</body>
</html>
・青色の箇所は、HTMLタグです。
・赤色の箇所は、javascriptです。
・緑色の箇所は、コメントです。
・ 1行目の <!doctype html> ﾀｸﾞは決まり文句です。
・<html> ﾀｸﾞの中には、
<head> ﾀｸﾞと <body> ﾀｸﾞが配置されます。
・<head> ﾀｸﾞは、「ページヘッダ」であり、
ﾍﾟｰｼﾞが読み込まれる際に、
最初に設定しておきたいことを書くところです。
・<body> ﾀｸﾞは、「ページボディ」のことで、
ﾍﾟｰｼﾞに表示される内容をここに書いて行きます。
・<script> ﾀｸﾞは、javascript などのｽｸﾘﾌﾟﾄを書くところで、
昔は、<head> ﾀｸﾞ内に書くことが慣例となっていましたが、
最近では、ﾍﾟｰｼﾞが表示されるまでの体感速度を上げるために、
<body> ﾀｸﾞ内の最後に書くようになりました。
HTML5の基本ﾀｸﾞ
<!doctype html> <!-- このﾃｷｽﾄﾌｧｲﾙが、html文書であることを明示する。-->
<html>
<head>
<title> HTML5の基本ﾀｸﾞ</title> <!-- webﾍﾟｰｼﾞのﾀｲﾄﾙ -->
<!-- 外部のｽﾀｲﾙｼｰﾄをﾘﾝｸさせる。-->
<link rel="stylesheet" href="default.css">
<!-- 文字ｺｰﾄﾞ。( 原則的に utf-8 を指定する。) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta charset="UTF-8"> でもよい。 -->
<!-- このﾍﾟｰｼﾞで使用されている言語を明示する。( 日本語なら、ja ) -->
<meta http-equiv="content-language" content="ja">
<!-- ﾃﾞﾌｫﾙﾄの cssﾌｧｲﾙ をﾘﾝｸさせる。 -->
<meta http-equiv="default-style" content="default.css">
<!-- 検索ｴﾝｼﾞﾝに対して、ｷｰﾜｰﾄﾞを提示する。 -->
<meta name="keywords" content="ｷｰﾜｰﾄﾞ1,ｷｰﾜｰﾄﾞ2">
<!-- 検索ｴﾝｼﾞﾝに対して、このﾍﾟｰｼﾞの簡単な説明を提示する。 -->
<meta name="description" content="このﾍﾟｰｼﾞの概略">
<!-- 検索ｴﾝｼﾞﾝに対して、要求を提示する。( 無効なﾌﾞﾗｳｻﾞもある ) -->
<meta name="robots" content="noindex,nofollow">
<!-- noindex ... URL を index しないように要求する。
nofollow ... このﾍﾟｰｼﾞ内のﾘﾝｸをたどらないように要求する。 -->
<!-- このﾍﾟｰｼﾞの著者を明示する。-->
<meta name="author" content="山田太郎">
</head>
<body>
<!-- ﾘﾝｸを配置する。-->
<a href="https://www.youtube.com/" target="_blank">
別ｳｨﾝﾄﾞｩを開いて、ﾘﾝｸ先のﾍﾟｰｼﾞを表示します。</a><br/>
<!-- 画像を埋め込む。-->
<img src="http://m9.ideamans.com/images/lena.jpg"
alt="画像の代替文" title="画像のﾀｲﾄﾙ" width="100" height="100"/><br/>
<!-- ﾌﾟﾗｸﾞｲﾝにより実行されるﾏﾙﾁﾒﾃﾞｨｱﾌｧｲﾙを埋め込む。( Flash など ) -->
<embed src="wave.swf" width="100" height="100"/><br/>
<!-- ﾌﾟﾗｸﾞｲﾝが不要なものも含めて、外部のﾌｧｲﾙを埋め込む。 -->
<object data="table.html" width="100" height="100"><br/>
未対応の場合に表示される代替文
<param name="" value="" /> <!-- ﾊﾟﾗﾒｰﾀの値を渡すこともできる。 -->
</object>
<!-- 音声を埋め込む。( chrome と firefox は対応している。ﾌﾟﾗｸﾞｲﾝ不要。) -->
<audio src="http://www.ne.jp/asahi/music/myuu/wave/cat1.wav" controls>
未対応の場合に表示される代替文
</audio><br/>
<!-- preload 属性 音声を読み込んでおく。
autoplay 属性 自動再生する。
loop 属性 ループ再生する。
controls 属性 再生ﾊﾟﾈﾙを表示する。-->
<!-- ｷｬﾝﾊﾞｽ (描画領域) を埋め込む。-->
<canvas id="canvas1" style="background-color:black;"
width="100" height="100">
未対応の場合に表示される代替文
</canvas><br/>
<!-- 段落 -->
<p>
あいうえお
かきくけこ
</p>
<!-- ﾎﾞｰﾀﾞｰﾗｲﾝ -->
<hr>
<!-- 改行 -->
<br />
</body>
</html>
・webﾍﾟｰｼﾞというのは、webｻｲﾄのあるｻｰﾊﾞｰから
ﾌﾞﾗｳｻﾞへと送信されてくるものです。
・送信時の形式は、HTMLﾌｧｲﾙであり、
HTMLの文法で書かれています。
・HTMLﾌｧｲﾙ、もとい、HTMLﾄﾞｷｭﾒﾝﾄは、
要素タグ、テキスト、コメントなどで構成されています。
・そして、この要素ﾀｸﾞには、「属性」を付けることができ、
これには、各要素ﾀｸﾞ固有の情報が書かれています。
・上の例でみると、茶色で示された箇所が、属性名と、その値です。
・さて、HTML5の、目玉機能とも言えるのが、「キャンバス」です。
・従来のHTMLでは、ﾍﾟｰｼﾞ上の絵を変更することが難しく、
ｻｰﾊﾞｰに通信を行って、ﾍﾟｰｼﾞの差し替えを行っていましたが、
このｷｬﾝﾊﾞｽを使えば、ｻｰﾊﾞｰに通信をしなくても、
表示されているﾍﾟｰｼﾞ上に、絵を描くことができます。
・<canvas> ﾀｸﾞのところでは、識別用のidと、
描画領域のｻｲｽﾞを設定しておきます。
・ﾍﾟｰｼﾞへの描画処理は、javascriptで書きます。
・javascript側では、このidを指定して、ｷｬﾝﾊﾞｽを取得します。
HTML5のﾃｰﾌﾞﾙ
<!doctype html> <!-- このﾃｷｽﾄﾌｧｲﾙが、html文書であることを明示する。-->
<html>
<head>
<title>HTML5のﾃｰﾌﾞﾙ</title> <!-- webﾍﾟｰｼﾞのﾀｲﾄﾙ -->
</head>
<body>
<table> <!-- 表の開始 -->
<caption> <!-- 表のﾀｲﾄﾙの開始 -->
<details>
<summary>表のタイトル</summary>
<!-- ﾀｲﾄﾙの右端のﾎﾞﾀﾝを押すと、下記の説明文が表示される。 -->
<p>表の説明文</p> <!-- ﾃﾞﾌｫﾙﾄでは非表示となっている。-->
</details>
</caption> <!-- 表のﾀｲﾄﾙの終了 -->
<thead> <!-- 列のﾍｯﾀﾞ行の開始 -->
<tr> <!-- 1行目の開始 -->
<th></th> <!-- 行・列の見出しが交差しているｾﾙ。 -->
<th>1列目の見出し</th> <!-- 1列目の見出し -->
<th>2列目の見出し</th> <!-- 2列目の見出し -->
</tr> <!-- 1行目の終了 -->
</thead> <!-- 列のﾍｯﾀﾞ行の終了 -->
<tbody> <!-- ここからが表の内容 -->
<tr> <!-- 1行目の開始 -->
<th>1行目の見出し列</th> <!-- 1行目の見出し列 -->
<td>1行目の1列目</td> <!-- 1列目 -->
<td>1行目の2列目</td> <!-- 2列目 -->
</tr> <!-- 1行目の終了 -->
<tr> <!-- 2行目の開始 -->
<th>1行目の見出し列</th> <!--2行目の見出し列 -->
<td>2行目の1列目</td> <!-- 1列目 -->
<td>2行目の2列目</td> <!-- 2列目 -->
</tr> <!-- 2行目の終了 -->
</tbody> <!-- ここまでが表の内容 -->
<tfoot> <!-- 列のﾌｯﾀ行の開始 -->
<tr> <!-- 1行目の開始 -->
<th></th> <!-- 行・列の見出しが交差しているｾﾙ。 -->
<td>1列目の補足説明</td> <!-- 1列目の補足説明 -->
<td>2列目の補足説明</td> <!-- 2列目の補足説明 -->
</tr> <!-- 1行目の終了 -->
</tfoot> <!-- 列のﾌｯﾀ行の終了 -->
</table> <!-- 表の終了 -->
</body>
</html>
・<table>ﾀｸﾞの中には、次の4つのﾀｸﾞがあります。↓
<caption> 表のﾀｲﾄﾙ ( 説明文を表示するﾎﾞﾀﾝ付き )
<thead> ﾍｯﾀﾞ行 ( 列の見出しが表示される行 )
<tbody> 表の内容
<tfoot> ﾌｯﾀ行 ( 各列の補足説明などを表示する行 )
・さらに、下3つのﾀｸﾞの中には、次のﾀｸﾞがあります。↓
<tr> 行
・そして、その1行の中には、次の2種類のﾀｸﾞがあり、
これが各列のｾﾙとなります。↓
<td> 列ｾﾙ ( 通常版 )
<th> 列ｾﾙ ( 見出し用であり、ﾃｷｽﾄは太字 )
・ <tbody>以外の3つのﾀｸﾞは省略できます。
・行や列の中に、別の表を配置することもできます。
ﾌｫｰﾑとｺﾝﾄﾛｰﾙ
・まず、ﾃｷｽﾄｴﾃﾞｨﾀを起動して、下記のﾃｷｽﾄを貼り付け、
「form1.html 」というﾌｧｲﾙ名で保存してください。
・そして、そのｱｲｺﾝをｸﾘｯｸすると、
webﾌﾞﾗｳｻﾞが起動して、webﾍﾟｰｼﾞが表示されたはずです。
・webｻｰﾋﾞｽでは、会員登録の画面など、
ﾕｰｻﾞｰからの入力が必要な際には、
このような入力画面を表示します。
・これを「ﾌｫｰﾑ」といい、その内側には、このﾍﾟｰｼﾞのように、
ﾃﾞｰﾀ入力用のｺﾝﾄﾛｰﾙが、いくつか配置されます。
・さて、ﾕｰｻﾞｰは、入力を終えると、送信ﾎﾞﾀﾝを押します。
・このとき、入力されたﾃﾞｰﾀは、webｻｰﾋﾞｽの本体であるｻｰﾊﾞｰに送られます。
・そして、その結果として、ｻｰﾊﾞｰから、別のhtmlﾌｧｲﾙが送信されて、
ﾌﾞﾗｳｻﾞ上に表示されるのです。 ( ｱﾝｹｰﾄの集計結果など )
<!doctype html> <!-- このﾃｷｽﾄﾌｧｲﾙが、html文書であることを明示する。-->
<html>
<head>
<title>ﾌｵｰﾑと入力ｺﾝﾄﾛｰﾙ</title> <!-- webﾍﾟｰｼﾞのﾀｲﾄﾙ -->
<script>
</script>
</head>
<body>
<!-- 属性などはこちら。http://www.htmq.com/html5/input.shtml -->
<!-- 入力ﾌｫｰﾑ -->
<form action="ﾃﾞｰﾀの送信先であるｻｰﾊﾞｰのURL" method="post">
<!-- method は、送信方法で、getだと、送信先URL?入力ﾃﾞｰﾀが送信される。
post だと、入力内容だけが送信され、URLのところに入力ﾃﾞｰﾀが表示されない。-->
<!-- enctype は、送信するﾃﾞｰﾀの形式で、次のうちのいずれか。↓
application/x-www-form-urlencoded は、
「ﾌｨｰﾙﾄﾞ名=入力値」を、& でつないだ形式のﾃﾞｰﾀ。（ﾃﾞﾌｫﾙﾄ値）
multipart/form-data は、ﾌｧｲﾙ名を含むﾃﾞｰﾀ。
text/plain は、ﾌﾟﾚｰﾝﾃｷｽﾄのみ。 -->
<!-- target 属性には、ﾘﾝｸ先のﾍﾟｰｼﾞを表示するﾌﾚｰﾑを指定する。
https://helpx.adobe.com/jp/legacy/kb/222191.html -->
<!-- ｺﾝﾄﾛｰﾙに、autofocus 属性をつけると、起動時にﾌｫｰｶｽされる。-->
<!-- ﾎﾞﾀﾝ -->
<p>
<input type="button" name="button1" value="ﾎﾞﾀﾝです"/>
</p>
<!-- 画像ﾎﾞﾀﾝ -->
<p>
<input type="image" src="image1.png" alt="画像ﾎﾞﾀﾝです"/>
</p>
<!-- ﾃｷｽﾄﾎﾞｯｸｽ -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<input type="text" name="textbox1"
size="30" maxlength="20" value="入力文字列"/>
</p>
<!-- sizeは、表示する文字数。maxlengthは、入力可能な文字数。
required を付けると、必須入力。readonly を付けると、入力不可。-->
<!-- placeholder="文字列" で、背景にうすく指示ﾒｯｾｰｼﾞを表示する。 -->
<!-- type=number で、数値入力。
( 右端に、増減ﾎﾞﾀﾝが表示される。step 属性で、増減値を指定可。) -->
<!-- type=password で、ﾊﾟｽﾜｰﾄﾞ入力。-->
<!-- 日付を入力する場合は、ｶﾚﾝﾀﾞｰを表示するﾎﾞﾀﾝが右端に付く。-->
<!-- type=date で、日付入力。( 表示は、2015/12/31 値は、2015-12-31 ) -->
<!-- type=time で、時間入力。( 表示は、12:38 ) 値は、12:38 -->
<!-- type=datetime-local で、ﾛｰｶﾙ日時入力。
( 表示は、2015/12/31 12:38 値は、2015-12-31T12:38 ) -->
<!-- type=month で、年月入力。( 表示は、2015/12 値は、2015-12 ) -->
<!-- type を url email tel にした場合は、入力値の検証が行われる。
そして、その検証結果が無効である場合は、ﾃﾞｰﾀは送信されない。
( novalidate 属性を付けると、検証をOFFにできる。)-->
<!-- pattern="" で、入力可能な文字列形式を、正規表現で指定できる。-->
<!-- ｺﾝﾎﾞﾎﾞｯｸｽ ( ﾘｽﾄﾎﾞｯｸｽから選べるｵｰﾄｺﾝﾌﾟﾘｰﾄ機能が付いたﾃｷｽﾄﾎﾞｯｸｽ ) -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<input type="text" name="combobox1"
autocomplete="on" list="input_list1"/>
<datalist id="input_list1">
<option value="選択肢1">
<option value="選択肢2">
</datalist>
</p>
<!-- ﾘｽﾄﾎﾞｯｸｽ -->
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<select id="listbox1" name="listbox1" size="2">
<option value="item1" selected>選択肢1</option>
<option value="item2">選択肢2</option>
</select>
<!-- multiple 属性を付けると、複数選択可になる。-->
<!-- size 属性は、表示される選択肢の数。-->
<!-- 複数行ﾃｷｽﾄﾎﾞｯｸｽ -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<textarea id="textarea1" name="textarea1"
cols="40" rows="4" maxlength="20">初期値</textarea>
</p>
<!-- wrap 属性を soft にすると、自動折り返し + 送信ﾃﾞｰﾀに反映しない
hard にすると、自動折り返し + 送信ﾃﾞｰﾀに反映する
off にすると、自動折り返しをしない -->
<!-- ﾗｼﾞｵﾎﾞﾀﾝ -->
<fieldset name="fieldset1"> <!-- ｸﾞﾙｰﾌﾟﾎﾞｯｸｽ ( 省略可 ) -->
<legend>見出し:</legend> <!-- ｸﾞﾙｰﾌﾟﾎﾞｯｸｽの見出し ( 省略可 ) -->
<label>選択肢1</label>
<input type="radio" name="radio1" value="item1" checked="true"/>
<label>選択肢2</label>
<input type="radio" name="radio1" value="item2"/>
</fieldset>
<!-- ﾁｪｯｸﾎﾞｯｸｽ -->
<fieldset name="fieldset2"> <!-- ｸﾞﾙｰﾌﾟﾎﾞｯｸｽ ( 省略可 ) -->
<legend>見出し:</legend> <!-- ｸﾞﾙｰﾌﾟﾎﾞｯｸｽの見出し ( 省略可 ) -->
<label>選択肢1</label>
<input type="checkbox" name="checkbox1"
value="item1" checked="true"/>
<label>選択肢2</label>
<input type="checkbox" name="checkbox1"
value="item2"/>
</fieldset>
<!-- ﾌｧｲﾙ選択ﾎﾞﾀﾝ ( ﾎﾞﾀﾝの右側に、選択したﾌｧｲﾙ名が表示される。) -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<input type="file" name="file_select_button1"/>
</p>
<!-- 調節つまみ ( min で最小値を、max で最大値を、それぞれ指定可。) -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<input type="range" name="thumb1"/>
</p>
<!-- 色選択ﾎﾞﾀﾝ -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<input type="color" name="color_select_button1"/>
</p>
<!-- 進捗ﾊﾞｰ -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<progress max="100" value="50"></progress>
</p>
<!-- 横向きの棒ｸﾞﾗﾌ -->
<p>
<label>見出し:</label> <!-- ﾗﾍﾞﾙ -->
<meter max="100" value="50"></meter>
</p>
<!-- このﾌｫｰﾑの、送信ﾎﾞﾀﾝ -->
<p>
<input type="submit" value="送信"/>
<input type="reset" value="リセット"/>
</p>
</form>
</body>
</html>
javascript の基本構文
<!doctype html> <!-- このﾃｷｽﾄﾌｧｲﾙが、html文書であることを明示する。-->
<html>
<head>
<title> javascript の基本構文 </title> <!-- webﾍﾟｰｼﾞのﾀｲﾄﾙ -->
<!-- javascript -->
<script src="import.js"> <!-- 外部のjsを呼び出す。-->
</script>
<!-- javascript -->
<script> <!-- 直接書き込む。-->
var v1; // 変数の宣言。( ｸﾞﾛｰﾊﾞﾙ変数は、window のﾌﾟﾛﾊﾟﾃｨとして参照できる。)
var v2 = 1; // 数値で初期化する
var v3,v4; // 複数の変数を、同時に宣言する。
var v5 = "あああ"; // 変数を文字列で初期化する。
var v6 = "長い文は、 \
折り返せる"; // ﾊﾞｯｸｽﾗｯｼｭで折り返せる。
let v7; // ﾛｰｶﾙ変数の宣言。( ﾌﾞﾛｯｸ内で宣言した場合は、外では無効。)
const v8 =120; // 定数の宣言。
// 真偽値 true false
// 数値 100 0.01
// 文字列 "あいうえお"
// null null値
// undefined 未定義値
// NaN 無効な値 if ( isNaN( v1 ) ) return;
// 数値の文字列は、数値に変換できる。 parseInt() parseFloat()
// ( p1は文字列。p2は数記法の基数。失敗したら、NaNを返す。)
var array1 = ["山形", "富山", "岡山"];// 配列の宣言。
// = [0,1,,3] 省略した要素は、undefined になる。
var v9 = array1[0]; // 配列の要素を参照する。
// var length1 = "あいう".length; // 文字列は、Stringｵﾌﾞｼﾞｪｸﾄのﾒﾝﾊﾞが使える。
var obj1 = { namae: "太郎", nerei: 23 }; // ｵﾌﾞｼﾞｪｸﾄを初期化する。
var v10 = obj1.namae; // ｵﾌﾞｼﾞｪｸﾄのﾌﾟﾛﾊﾟﾃｨを参照する。
var v11 = typeof v2; // 変数のﾃﾞｰﾀ型名を取得する。 ( "string" "number" )
if ( v1 == true ) {} // if 文
if ( v1 != false ) {} else {} // if else 文
switch ( v1 ) { case 0: break; default: break; } // switch 文
for ( var i = 0; i < 10; i++ ){} // for 文 ( break; continue; も使える。)
for ( var cur in array1 ) {} // for each 文
while ( v1 ) {} // while 文
do {} while( v1 ); // do while 文
); // ｺﾝｿｰﾙに出力する。
var result_bool = confirm( "ﾀｲﾄﾙというか質問" ); // OKﾀﾞｲｱﾛｸﾞを表示する。
var result_text = prompt( "ﾀﾞｲｱﾛｸﾞのﾀｲﾄﾙ", "初期値" ); // 入力ﾀﾞｲｱﾛｸﾞを表示する。
function Tasu( p1 , p2 ) // 関数を実装する。
{
return p1 + p2;
}
// 関数式 ( 関数名は省略できるが、この関数内で呼び出す場合には必要。 )
var Hiku = function ( p1 , p2 ){ return p1 - p2; };
var sa = Hiku( 2 , 1 ); // 関数を呼び出す。
function TashiteWaru( p1 , p2 )
{
var v1 = p1 + p2;
// ｸﾛｰｼﾞｬ ( 関数の実装内に、別の関数を実装する。)
// 呼び出し元のﾛｰｶﾙ変数は、まだあるので使える。
return function () { return v1 / 2; }
}
// 例外処理
try {}
catch ( ex ) { throw ex; }
finally {}
</script>
<noscript>
<p>このページでは、JavaScript を使用しています。</p>
</noscript>
</head>
<body>