ドットインストール HTML入門5～6
基本的な文章表現
文章を書き出すための基本的なタグ。
<p>
段落を表し、囲った内部の文章を一段落とする。
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>こんにちは！<br>こんにちは！</p>
<p>こんにちは！</p>
<hr>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p><strong>こんにちは！</strong></p>
<h1～6>
見出しを作るためのタグ、囲った内部を見出しとして強調表示する。
hの後の数字が少なければ少ないほど大見出しとなる。
サイズ指定はスタイルシートで行いこのタグはあくまで見出しとして使用する。
打ち間違いで気付いたが、始めと終わりの数字は一致していなくても働く模様。
例えば 「<h1>こんにちは！</h3>」 という形でも普通に<h1>で囲うのと同様に作用した。
<br>
改行。
同一のコンテンツ内で改行が欲しい時に使用する。
ただ文章を改行したいだけならば別の段落にするだけで良い。
<hr>
区切りとして用い水平線として表される。
<strong>
囲った内部の重要度を高くし強調する。
入れ子状にした場合は内部がより重要なものとして扱われる。
太字で表されるが、表示としては<em>タグや<b>タグも同様である。
<ul><!-- Unordered List -->
<li>Apple</li>
<li>Banana</li></ul>
<ol><!-- Ordered List -->
<li>Apple</li>
<li>Banana</li>
</ol>
<ul>
箇条書き表示をしたい時に用いる。
囲った内部に各要素を<li>で括るようにして記述する。
<ol>
<ul>と同じく箇条書きのタグだがこちらは番号付き。
start属性の値に数字を書くことで開始番号を変えることができる。
もしリストの途中で値を変えたい場合などは<li>のvalue属性の値に書き込む。
value属性の値が指定された後の<li>に指定がない場合はその続きの番号が選択される。
ドットインストール HTML入門1～4
headで用いるタグ
headタグで囲われた部分で用いる基本的なタグ。
<meta charset="shift-jis">
<title>初めてのHTML</title>
<meta name="description" content="初めてのHTML文書です。">
<style>
p { color: red;}
</style>
<link rel="stylesheet" href="mystyle.css">
<link rel="shortcut icon" href="favicon.ico">
<title>
囲った中にタイトルを入力する。
検索結果やブックマークなどにも表示される。
<style>
スタイルシート部分。
囲った中に文書の表示規則などをまとめて書く。
<link>
外部データを読み込む際に使用する、今回はスタイルシートとアイコン。
rel属性の値に読み込むファイルが何であるかを示す。
href属性の値には読み込みのURLなどを示す。
上記のように相対パスでリンク先を表すこともできる。
<meta>
linkやtitleなどの要素以外のデータ。
charset属性であれば値に文字エンコーディングの種類を示す。
ドットインストールではutf-8を指定していたが文字化けしてしまったのでshift-jisを指定している。
name属性ではさらに細かいデータを指定しcontent属性の値に内容を示す。
descriptionは文書の説明文を表し、検索結果で表示される。
headに記述されるタグは文書の基本的な構造やパラメーターの規定となる。
１０． 配列（２）
（1）
次の5人の名前と点数をオブジェクトに格納してください。
添字は名前とし、上から順番に格納してください。
・ Aさん 65点
・ Bさん 95点
・ Cさん 70点
・ Dさん 30点
・ Eさん 59点
var ScoreTable = {"A":65, "B":95, "C":70, "D":30, "E":59};
ここは特に問題なし。
配列・連想配列は宣言の方法が複数ありそれぞれ囲いの括弧が異なることがあるため気をつけたい。
（2）
作成した連想配列をつかって
最高点と最低点の人の名前を出力してください。
for in を使ってそれぞれ要素を取り出し比較していく。
暫定のトップはAさんにしておく。
var TopScore = "A";
var BottomScore = "A";
for (name in ScoreTable){
if (ScoreTable[TopScore] < ScoreTable[name]){
TopScore = name;
} else if (ScoreTable[BottomScore] > ScoreTable[name]){
BottomScore = name;
}
}
document.writeln("最高点の人は" + TopScore + "さんで" + ScoreTable[TopScore] + "点です。");
document.writeln("最低点の人は" + BottomScore + "さんで" + ScoreTable[BottomScore] + "点です。");
ScoreTable.A と書くと要素の値である 65 を得られたが、ScoreTable.name や ScoreTable.TopScore という形では要素を得ることは出来なかった。
document.write で書き出すと undefined と表示された。
変数はオブジェクトでありあくまでオブジェクトの代用としてしか使えないということなのか。
（3）
作成した連想配列をつかって
点数の高い順に名前を並べた配列を作成してください。
新たに配列を宣言しまずは最高得点の人を入れておく。
(2)と同様に比較、かつ最後に配列に入れた人より点数の低い人のみを抽出した。
var SortName = [TopScore];
for (var i = 1; i <= 4; i++){
TopScore = BottomScore;
for (name in ScoreTable){
if ( (ScoreTable[TopScore] < ScoreTable[name]) &&(ScoreTable[SortName[(SortName.length - 1)]] > ScoreTable[name]) ){
TopScore = name;
}
}
SortName.push(TopScore);
}
TopScore は比較前に最も点数の低い人で初期化している。
（4）
上記の問題で、全員の平均点を求めてください。
for in を使っても良いのだがせっかくなので(3)で作った配列を活用してみる。
配列に入ってる人の得点を順番に加算してその人数で割った。
var AverageScore = 0;
for (var i = 0; i < (SortName.length); i++){
AverageScore += ScoreTable[SortName[i]];
}
AverageScore /= SortName.length;
document.write("平均点は" + AverageScore + "点です。");
下記は全体
続きを読む９． 配列（１）
以下の引数のうち、正の値だけ配列に格納する関数を作成し、
できた配列を表示させてください。
引数は1, 93, -7, 8, -54です。
まず空の配列変数を宣言する。
関数によって正の数と判断されたものは配列の末尾に追加される。
var PositiveNum = new Array();
function PosiSelect(num){
if (num == (Math.abs(num)) ){
PositiveNum.push(num);
}
}
PosiSelect(1);
PosiSelect(93);
PosiSelect(-7);
PosiSelect(8);
PosiSelect(-54)
for (var i = 0; i < (PositiveNum.length); i++){
document.writeln(PositiveNum[i]);
}
新しいものを配列の先頭に追加していきたいのであれば push の代わりに unshift を活用する。
空の配列の宣言は new Array(0) でも問題ない模様。
８．時間
10秒間のカウントダウンタイマーを作ってください。
タイマーは、1秒ずつ更新してください。
前回と同様にまず onload を使い関数を呼び出す。
表示部分の500には特に意味はない。
<body OnLoad="countdown();" >
<div id="timelimit">500</div>
</body>
var num = 10;
function countdown(){
var T = document.getElementById("timelimit");
T.innerHTML = num;
if (num > 0){
num--;
window.setTimeout("countdown()", 1000);
}
}
num はどこで呼び出された countdown でも同一の変数となるように関数の外部、上位で宣言する。
T に関しては num と同様に外部で宣言するとうまく動かないようなので countdown の内部で宣言した。
なぜ外部で宣言すると動かないのかはよくわからなかった。
その後に下の形に修正。
var num = 10;
function countdown(){
(document.getElementById("timelimit")).innerHTML = num;
if (num > 0){
num--;
window.setTimeout("countdown()", 1000);
}
}
何度も使う必要がない限り T の宣言はそもそも必要ではなかった。
また複数のオブジェクトに対して何度も操作を行う場合はそれぞれに対応する変数を宣言するよりも getElementById をより簡易に行える関数を用意した方が楽なように思える。
ただし処理速度としては変数を宣言してオブジェクトに対応させておく方が何度も読み込む必要がなく速いのかもしれない。
７． if文
結果が5種類（大吉・中吉・小吉・末吉・凶）のおみくじを作ってください。
サイトにアクセスするとランダムに結果が表示されるものでOKです。
onload を用いてアクセス時にランダムに表示されるようにする。
<body OnLoad = "fortune()">
</body>
function fortune(){
var num = Math.floor(Math.random() * 5 + 1);
switch(num){
case 1: document.write("大吉"); break;
case 2: document.write("中吉"); break;
case 3: document.write("小吉"); break;
case 4: document.write("末吉"); break;
case 5: document.write("凶"); break;
}
}
if文となっているが、このような単純な仕分けの場合は switch を使った方がわかりやすいのではないか。
セミコロンにより文末を表す形はこうして整理ができるので便利な反面、まだ慣れていないため打ち忘れることがある。
タイプミスによる間違いの修正には思いのほか時間がかかるためJavascriptに対応したアウトラインプロセッサを使えば多少楽になるのではないか。
６． if文
15歳、20歳、8歳、59歳の入園料をそれぞれ出力しなさい。
とある動物園の入園料は年齢ごとに分かれています。
3歳以下無料
6歳以下200円
15歳以下800円
15歳より上は1000円
60歳以上は800円
関数を使い年齢によって入園料を表示するように整理した。
function charge(age){
var price;
if (age <= 3){
price = "無料";} else if (age <= 6){
price = "600円";
} else if ( (age <= 15) || (age >= 60) ){
price = "800円";
}else{
price = "1000円";
}
document.writeln(age + "歳の入園料は" + price + "。")
}
charge(15);
charge(20);
charge(8);
charge(59);
これだけであれば price の宣言は function 内部で行うよりも外部で行っておいた方が無駄は少ない気がする。
ただしもっと複雑なプログラムになった時はこの形の方が間違いが少ないのではないだろうか。
