Recommandé
Contenu connexe
Similaire à ABC 第2回スライド
Similaire à ABC 第2回スライド (20)
Plus de Sawada Makoto
Plus de Sawada Makoto (6)
ABC 第2回スライド
- 2. アジェンダ 1. ABCとは 2. 対象範囲 3. なにができるようになるの？ 4. スケジュール 5. HTMLとは？ 6. 課題 7. 参考サイトの紹介 8. 質問・アンケート
- 4. ２回目の範囲 • CSSによるレイアウト CSSを使ったレイアウトの方法をまなびます。 • プログラム入門以前 プログラムの基礎をまなびます。 • JavaScript入門 ブラウザ上で動作するプログラミング言語 JavaScriptについてまなびます。
- 8. ボックス①まずはひとつ。 レイアウトの基本は、ボックス（箱）をつくること。 組み合わせでレイアウトを作る！ BOX HTML <div id="box"> </div> CSS #box { width: 400px; height: 400px; }
- 9. ボックス②組み合わせ。 ヘッダー サイド バー メイン よくある左のレイアウトだと、 ４つのボックスの組み合わせ！ 1. 全体 2. ヘッダー（グローバルメニューなど） 3. サイドバー（カテゴリや新着記事な ど） 4. メイン（記事の内容など）
- 20. プログラミングとは？ 簡単にいうと、 「〇〇のときに、〇〇のことをしてほしい」 とコンピュータに対してお願いをすることです。 ただし、プログラムはある決まった構造に従う必要が あるのに注意です。
- 30. なにができるの？ もはやなんでもできますが、代表例だけ。 • お問い合わせフォームで、入力されていないものが あれば、赤字で入力を促す • スライドショー（カルーセルといいます） • 非同期で画面を更新できる （GmailやGoogleMapでリロードされていないの に気づきましたか？）
- 35. 別ファイルに書く方法 使いどころ！ 複数の画面で利用する場合や、速度を重視したい場合 使い方 jsファイルを用意し、 scriptタグにそのファイル名 を記載する index.html app.js
- 36. 文法とかはさておき、どうなるか見てみよう① // 時間の表示！ document.body.innerText = new Date(); HTML HEAD BODY BODYの中身を現在の時間に しろ！っていう命令になる document = HTML
- 37. 文法とかはさておき、どうなるか見てみよう② // １秒おきに背景色を変える！ // 色：赤、緑、青 var colors = ['red', 'green', 'blue']; setInterval(function() { document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length + 1)]; console.log("!"); }, 1000); 色の数分だけ、ランダム！
- 39. 変数とは 変数とは、一時的にデータを格納する箱みたいなもの。 「箱」 // 変数 var name = “Yamada Taro”; // 変数（推奨） let name = “Yamada Taro”; // 定数 const name = “Yamada Taro”; name
- 40. 配列とは 配列は、複数の値を扱うためのしくみ。 「箱」 // 配列 let colors = ['red', 'blue', 'green']; // colors[0] = = 'red' // colors[1] = = 'blue' // colors[2] = = 'green' 0 1 2
- 43. if①条件分岐 使い方 if ([条件式]) { // 処理 } 役割 条件によって処理を分ける。 let age = 20; if (age >= 20) { // 20歳以上なら！ } 演算子 意味 == 等しい != 等しくない < より大きい <= より大きい、または等しい > より小さい >= より小さい、または等しい さんぷる 比較演算子
- 44. if①条件によって分岐する。 もし～だったら、やることを変えたいということがあると思 います。 たとえば、 朝だったら、「おはよう」 お昼だったら、「こんにちは」 夜だったら、「こんばんは」など。
- 46. if③コードで表してみる。 // コード const now = new Date().getHours(); if (now => 5 && now < 12) { console.log("おはよう"); } else if(now => 12 && now < 17) { console.log("こんにちは"); } else { console.log("こんばんは"); } 解説 現在の時間を取得。 5-12時は朝とみなし、 「おはよう」 12-17時は昼とみなし、 「こんにちは」 それ以外は、 「こんばんは」
- 47. for①繰り返し 使い方 for ([初期化子]; [終了条件]; [最後の式]) { // 処理 } 役割 繰り返す。 さんぷる
- 48. 関数①同じことは一か所で。 使い方 function 関数名(引数1, 引数2…) { // 処理 } 役割 処理に対して、名前をつけることで繰り返し呼べるように する。 さんぷる
- 50. クリックされたら背景を変えてみる。 <button type="button" id="button" onClick="changeColor()"> 押してみると…? </button> // JavaScript function changeColor() { document.body.style.backgroundColor = 'yellow'; } HTML JavaScrip t
- 52. DOMとは② HTMLが読み込まれると、HTMLはツリーで表現され ます。 HTML HEAD BODY TITLE LINK H1 DIV P A DIV P DOMのイメージ
- 53. ツリーのイメージ 親 子 子 孫 孫孫 孫 フィボナッチ数列や、家系図などと同じイメージ。
- 54. DOMをブラウザで見ると。
- 56. DOM④IDでアクセス 使い方 document.getElementById(対象のID); 役割 指定したIDのDOMオブジェクトを取得する。 さんぷる 読込完了時(onload)に、 文字を変更
- 57. 課題 挑戦してみよう！