Your SlideShare is downloading. ×
Webページで学ぶJavaScript2013 第2回
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Webページで学ぶJavaScript2013 第2回

248
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
248
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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