Webページで学ぶJavaScript2013 第2回

596 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
596
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webページで学ぶJavaScript2013 第2回

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

×