Webページで学ぶJavaScript2013 第2回
36
Webページで学ぶ JavaScript 2013 第2回 tyage@KMC 5/28
description
Transcript of Webページで学ぶJavaScript2013 第2回
Webページで学ぶJavaScript 2013 第2回
tyage@KMC5/28
前回のでぶ！
● 数値● 文字列● 配列● 変数● 真偽値● if● switch
お、覚えてる？
今日のでぶ！
● for● while
今日のでぶ！
● for● while● Webページに触れよう！
ではいくぞー！
forを使おう
”for文（フォーぶん）はプログラミング言語において条件が真の間だけ与えられた文の実行を繰り返すというループを記述するための文である。 ”（from Wikipedia）
for (初期化; ループの継続条件; カウンタ変数の更新) {処理
}
？？？
forを使おう
使い方①：1 ~ 100を表示する
for (i = 1; i <= 100; ++i) {console.log(i);
}
++i は i = i+1 の省略形（--i は i = i - 1）
初期化
ループの継続条件
カウンタ変数の更新
処理
forを使おう使い方②：配列の要素を全部表示する
shinpro = ["C#", "プロコン", "JavaScript", "ゆるみん"];for (i = 0; i < shinpro.length; ++i) {
console.log(shinpro[i]);}
どんどんいくぞー！
whileを使おう条件が真の間だけ処理をする
while (ループの継続条件) {処理
}
簡単だね
whileを使おう
使い方①：1 ~ 100を表示する
i = 1;while (i <= 100) {
console.log(i);++i;
}console.log("done!");
whileを使おう使い方②：配列の要素を全部表示する
shinpro = ["C#", "プロコン", "JavaScript", "ゆるみん"];i = 0;while (i < shinpro.length) {
console.log(shinpro[i]);++i;
}
ここまで
● 様々な値や変数、制御構文、ループ文をやりました
● JavaScriptの基礎がだいたいわかったのではないでしょうか
ここから
● Webページをいじっていきます● Webページの仕組みについて学ぼう● Webページって何？とかはいらないよね・・・？
Webページの中身を見る
● KMC内部サイト● https://www.kmc.gr.jp/● 右クリック→ページのソースを表示● 「HTML」が表示されます
もっと便利なツールが
● 右クリック→要素の検証● 実はコンソールからタブ切り替えでいける
例えば、文字を変えてみる
● 変えたい文字の上で要素の検証● 文字をダブルクリックして変更● お手軽ツールです！
HTMLHyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）、略記・略称：HTML（エイチティーエムエル）とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。（from Wikipedia）
HTMLHTMLはほぼ全てのWebページで使われています。（HTMLが書かれているのがWebページと言ってもいいレベルに）
「<」から始まり「>」で終わるHTMLタグを記述して、構成していく。HTML要素は入れ子にできます！
基本テンプレ
<html><head>
<!-- ヘッダ情報 --></head><body>
<!-- 文書内容 --></body>
</html>
head要素
<head>タグで記述する
Webページのヘッダ情報を記述する
見えない情報を書くことが多い
title要素
<title>タグで記述する
head要素内に記述
ページのタイトルを記述します
Chromeだとタブにタイトルが表示されるよね
KMC内部ページのタイトル変えてみよう
body要素
<body>（ｒｙ
ページの内容を記述します
スライド間に合いませんでした！！！！！！！！！！！
えーと、いろいろな要素があるので実際に見て行きましょう。知らない要素に出会ったら、ぐぐるといいよ例：検索「html pre」
参考資料ページ
● http://www.htmq.com/● https://developer.mozilla.
org/ja/docs/Web/HTML/Element● http://www.w3.org/wiki/HTML
Goooooooogle
出てきた要素
● html● head● title● body● p● br● img● h1, h2, h3, h4, h5, h6● div● a
お疲れ様でした
● 次回は来週です
スライド補足
● 以下は、当日間に合わなかったスライドを補足したものです
● HTMLの要素で、スライドがなかったものを追加してあります
スライド説明のなかった要素
● html● head● title● body● p● br● img● h1, h2, h3, h4, h5, h6● div● a
html要素
タグ：<html></html>意味：文書の基点であり、すべての要素の親となる要素例：<html lang="ja">
<head>...</head><body>...</body>
</html>
p要素
タグ：<p></p>（終了タグ省略可）
意味：paragraph（段落）を表す要素例：<p>一段落目</p><p>二段落目</p><p>三段落目</p>
br要素
タグ：<br>意味：break（改行）を表す要素例：HTMLでは<br>br要素を使うことで<br>改行を挟むことができます<br>
img要素
タグ：<img>意味：image（画像）を表す要素例：<img src="http://kmc.gr.jp/banner.png">
h1〜h6要素
タグ：<h1></h1>〜<h6></h6>意味：heading（見出し）を表す要素
数字が小さいほど重要な見出しである（h1が最上位の見出しとなる）例：<h1>タイトル</h1><h2>サブタイトル</h2>
div要素
タグ：<div></div>意味：division要素をグループ化したいが、適切な要素がない場合に使われることが多い例：<div id="content">
<p>hogehoge</p></div>
a要素
タグ：<a></a>意味：anchorハイパーリンクを指定する要素例：<a href="http://kmc.gr.jp/">KMC</a><a href="http://google.com">
<img src="http://google.com/logo.png"></a>
