2014-04-01から1ヶ月間の記事一覧
実体参照 一部文字や記号は文字列として書いたつもりでもそう扱われないことがある。 そうしたものを文字として表現する時に用いる。 下記の例では「<」が「<」に、「>」が「>」に代わるものとして入力されている。 <p>これは<p>です。</p> style属性 …
スタイリング 文書をそれぞれの意味や持っている機能などでひとまとめにして整理する。 これらは区画整理が目的であって～でなければならない、ということはないようである。 <header> <h1>起業日記</h1> <nav> home profile </nav></header><article> <h2>リリース完了！</h2> <p>うれしい！</p></article><aside> <h3>このサイトについて</h3> <p>@taguc</p></aside>…
Formの基礎２ フォームを活用する基礎の続き。 選択形式のものを扱う。 <form action="survey.php" method="post"> <p> Colors: <label><input type="radio" name="color" value="red">Red</label> <input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label> <input type="radio" name="color" value="green">Green Colors…</p></form>
Formの基礎１ フォームを活用する基礎。 テキストボックス形式のものを扱う。 <form> 入力・送信用のフォームの塊を作る、actionとmethodの属性が必須。 form内部の様々なオブジェクトに入力された情報をサーバーに送信する機能を持つ。 action属性は値には情報の</form>…
画像ファイルの読み込み <img src="cart.jpg" width="500" height="283" alt="カートの写真です。" title="カートの写真"> <img> 画像ファイルを使用する、ファイルはsrc属性の値にURLを指定する。 <link>や<a>といったタグと異なりhref属性ではないことに注意。 width、height属性により画像の表示サイズを指定することができる。 画像は自動で拡大縮小され、指定しない</a></link>…
各種リンクの作製 <p>こんにちは。</p><p><a href="http://google.com" target="_blank">Google</a></p><p><a href="hello.html">Hello</a></p><p><a href="#hello2">hello 2</a></p><p>こんにちは。</p><p>こんにちは。</p><p id="hello2">hello 2 !!!</p><p>こんにちは。</p> <a> ハイパーリンクを作るタグ、href属性の値にURLを指定する。 指定する先は相対パスでも構わない。 同文書内へのジャンプを作る場合は上記の「…</a>
表の作成 まず表を作ることを<table>タグで示し内部に見出しを表す<thead>と<tbody>を用意する。 <table> <thead> <tr><th>name</th><th>2010</th><th>2011</th></tr> </thead> <tbody> <tr><td>@taguchi</td><td>200</td><td>210</td></tr> <tr><td>@fkoji</td><td>300</td><td>420</td></tr> <tr><td>@dotinstall</td><td>500</td><td>380</td></tr> <tbody>…</tbody></tbody></table></tbody></thead></table>
基本的な文章表現 文章を書き出すための基本的なタグ。 <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> 見出しを作るためのタグ、囲った</h1～6></hr></p>…
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> 囲った中にタイトルを入力する。 検索結果やブックマークなどにも表示される。 …</link></link></meta></meta>
（1）次の5人の名前と点数をオブジェクトに格納してください。添字は名前とし、上から順番に格納してください。・ Aさん 65点・ Bさん 95点・ Cさん 70点・ Dさん 30点・ Eさん 59点 var ScoreTable = {"A":65, "B":95, "C":70, "D":30, "E":59}; ここは特に…
以下の引数のうち、正の値だけ配列に格納する関数を作成し、できた配列を表示させてください。引数は1, 93, -7, 8, -54です。 まず空の配列変数を宣言する。 関数によって正の数と判断されたものは配列の末尾に追加される。 var PositiveNum = new Array();f…
10秒間のカウントダウンタイマーを作ってください。タイマーは、1秒ずつ更新してください。 前回と同様にまず onload を使い関数を呼び出す。 表示部分の500には特に意味はない。 <body OnLoad="countdown();" > <div id="timelimit">500</div></body> var num = 10;function countdown(){ var T = document.getElementById(…
結果が5種類（大吉・中吉・小吉・末吉・凶）のおみくじを作ってください。サイトにアクセスするとランダムに結果が表示されるものでOKです。 onload を用いてアクセス時にランダムに表示されるようにする。 <body OnLoad = "fortune()"></body> function fortune(){ var num = Math.floor(Math.…
15歳、20歳、8歳、59歳の入園料をそれぞれ出力しなさい。とある動物園の入園料は年齢ごとに分かれています。3歳以下無料6歳以下200円15歳以下800円15歳より上は1000円60歳以上は800円 関数を使い年齢によって入園料を表示するように整理した。 function char…
近代オリンピック(夏季)の開催年と第何回開催(第Nオリンピアード)かを出力するプログラムを出力してください。ただし、開催されなかった年は出力しないこと。開催されなかった場合もオリンピアードの回数はカウントされるので、2020年(東京)は第32回となりま…
-50から50までの数字で絶対値が10以下の数値を出力してください。 前回と同様に繰り返し処理中の条件分岐。 正と負、桁の違いで表示が見にくいので文字列長を取得して等間隔に表示されるようにした。 var num = 0;for (var i = -50; i <= 50; i++){ if (Math…
100までの偶数をページに出力してください。 ループ中にif で偶数かどうかを判断して処理。 見やすいように５つごとに改行を挟んだ。 var num = 0;for (i = 1; i <= 100; i++){ if (i % 2 == 0){ document.write(i + " "); num++; if (num >= 5){ docum…
1から100までの数字の和、2から101までの数字の和、3から102までの数字の和をそれぞれ出力してください。 for を使った繰り返し処理、その２。 基本的なことは前回と同様。 var total1 = 0;var total2 = 0;var total3 = 0;for (var i = 1; i <= 100; i++){ t…
1から100までの数字の和を出力してください。 for を使った繰り返し処理。 var total = 0;for (var i = 1; i <= 100; i++){ total += i;}document.write(total); 以前ノートにまとめた時にforループの初期化や条件文の区切りをカンマで書いていた。 だいぶ苦…
