Copyright Asial Corporation All Rights Reserved 1 Copyright

で学ぶはじめてのプログラミング Copyright © Asial Corporation. All Rights Reserved.

第 1章アプリ開発入門 Copyright © Asial Corporation. All Rights Reserved. 2

第 1章アプリ開発入門 Monacaのアカウント登録 Copyright © Asial Corporation. All Rights Reserved. 3

Monaca のアカウント登録第 1章 1) 教育版公式サイト URL にアクセス https: //edu. monaca. io/ Copyright ©

第 1章アプリ開発入門 Monaca ダッシュボードとプロジェクト Copyright © Asial Corporation. All Rights Reserved. 7

第 1章アプリ開発入門プログラムを記述する Copyright © Asial Corporation. All Rights Reserved. 11

プログラムを記述する第 1章 Monaca IDE n IDE(Integrated Development Environment)は統合開発環境の意味メニューバープロジェクトパネルエディターデバッグパネル Copyright

プログラムを記述する第 1章 Java. Script で簡単な命令を実行させる n HTML内にJva. Scriptを記述する方法 └ <script> で囲まれた部分に記述 <script> alert("こんにちは");

第 1章アプリ開発入門 Monaca デバッガーの利用 Copyright © Asial Corporation. All Rights Reserved. 20

第 2章 HTML入門 Copyright © Asial Corporation. All Rights Reserved. 23

第 2章 HTML入門 HTMLとは Copyright © Asial Corporation. All Rights Reserved. 24

HTMLとは第 2章 HTML（Hyper Text Markup Language）とは n マークアップ言語の１つ n 文書をタグで囲んで記述 Copyright © Asial

第 2章 HTML入門 <body>タグ内に記述するタグの種類 Copyright © Asial Corporation. All Rights Reserved. 31

第 2章 HTML入門リンク Copyright © Asial Corporation. All Rights Reserved. 35

第 2章 HTML入門実習 Copyright © Asial Corporation. All Rights Reserved. 38

第 2章【実習】リンクリンクの配置 <body> <a href="https: //edu. monaca. io/">Monacaへ</a> </body> Copyright © Asial

第 2章【実習】相対パスによるリンク実行結果 Copyright © Asial Corporation. All Rights Reserved. 42

第 2章 HTML入門画像の表示 Copyright © Asial Corporation. All Rights Reserved. 43

第 2章 HTML入門実習 Copyright © Asial Corporation. All Rights Reserved. 45

第 2章【実習】画像準備 n 画像ファイル「monaca. jpg」を確認実習 n imgタグを追記 <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="monaca. jpg"> Copyright

第 2章【実習】画像実行結果 Copyright © Asial Corporation. All Rights Reserved. 47

第 3章 CSS入門 Copyright © Asial Corporation. All Rights Reserved. 48

第 3章 CSS入門 CSSとは Copyright © Asial Corporation. All Rights Reserved. 49

CSSとは第 3章 CSS（Cascading Style Sheets）とは n HTML文章を装飾するための技術 n 色やサイズなどを変更できる n カスケーディングという特徴がある Copyright ©

CSSとは第 3章 CSSをHTMLファイルに読み込む方法（外部ファイル） n linkタグを記述 n href属性でパスを指定する文法　CSSファイルの読み込み <link rel="stylesheet" href="CSSファイルのパス"> n 例

第 3章 CSS入門セレクタの種類 Copyright © Asial Corporation. All Rights Reserved. 55

第 3章 CSS入門実習 Copyright © Asial Corporation. All Rights Reserved. 57

第 3章【実習】タグセレクタ実習 n 2章のプロジェクトを開く n cssフォルダ内のstyle. cssを編集 a { font-size: 30 px;

第 3章【実習】タグセレクタ実行結果 Copyright © Asial Corporation. All Rights Reserved. 59

【実習】IDセレクタ第 3章実習 n index. htmlのaタグにID属性を付与 <a href="https: //edu. monaca. io/" id="target">Monacaへ</a> n

【実習】IDセレクタ第 3章実行結果 Copyright © Asial Corporation. All Rights Reserved. 61

第 3章【実習】クラスセレクタ実習 n index. htmlのaタグにクラス属性を付与 <a href="new. Page. html" class="bright">次の画面へ</a> n style.

第 3章【実習】クラスセレクタ実行結果 Copyright © Asial Corporation. All Rights Reserved. 63

第 3章 CSS入門プロパティの種類 Copyright © Asial Corporation. All Rights Reserved. 64

プロパティの種類第 3章 marginとpadding n どちらも余白の幅を指定するプロパティ n marginはborder(枠線)の外側の余白 n paddingはborderの内側の余白要素 margin padding 内容内容内容内容内容内容

第 3章 CSS入門実習 Copyright © Asial Corporation. All Rights Reserved. 69

第 3章【実習】サイズや位置を指定するプロパティ実習 n style. cssを編集 img { width: 30%; border: solid 3

第 3章【実習】サイズや位置を指定するプロパティ実行結果 Copyright © Asial Corporation. All Rights Reserved. 71

第 4章 Java. Script入門 Copyright © Asial Corporation. All Rights Reserved. 72

第 4章 Java. Script入門 Java. Scriptの書き方 Copyright © Asial Corporation. All Rights Reserved. 73

Java. Scriptの書き方第 4章 scriptタグの中に記述する <script> alert("こんにちは"); </script> 外部ファイルに記述する <script src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="Java. Script ファイルのパス"></script> Copyright

第 4章 Java. Script入門データの扱い方 Copyright © Asial Corporation. All Rights Reserved. 79

第 4章 Java. Script入門実習 Copyright © Asial Corporation. All Rights Reserved. 83

第 4章【実習】今日は何日？実習 n index. htmlのbodyタグ内を編集 n index. htmlのscriptタグ内を編集 Copyright © Asial Corporation.

第 4章【実習】今日は何日？結果 Copyright © Asial Corporation. All Rights Reserved. 85

第 4章【実習】今日は何日？実習 n index. htmlのscriptタグ内を編集 <script> // 日付に関する命令を使えるようにする var date = new

第 5章条件分岐 Copyright © Asial Corporation. All Rights Reserved. 88

第 5章条件分岐 if文 Copyright © Asial Corporation. All Rights Reserved. 89

第 5章条件分岐実習 Copyright © Asial Corporation. All Rights Reserved. 93

第 5章【実習】今日は日曜日？実行結果 Copyright © Asial Corporation. All Rights Reserved. 95

第 5章条件分岐多方向分岐 Copyright © Asial Corporation. All Rights Reserved. 96

第 5章条件分岐実習 Copyright © Asial Corporation. All Rights Reserved. 99

第 6章関数 Copyright © Asial Corporation. All Rights Reserved. 101

第 6章関数関数 Copyright © Asial Corporation. All Rights Reserved. 102

第 6章関数実習 Copyright © Asial Corporation. All Rights Reserved. 105

第 6章【実習】関数の練習実行結果 Copyright © Asial Corporation. All Rights Reserved. 107

第 6章関数引数がある関数 Copyright © Asial Corporation. All Rights Reserved. 108

第 6章関数実習 Copyright © Asial Corporation. All Rights Reserved. 110

第 6章【実習】引数を受け取る関数の練習実行結果 Copyright © Asial Corporation. All Rights Reserved. 112

第 6章関数戻り値がある関数 Copyright © Asial Corporation. All Rights Reserved. 113

第 6章関数実習 Copyright © Asial Corporation. All Rights Reserved. 115

第 6章【実習】戻り値を返す関数の練習実行結果 Copyright © Asial Corporation. All Rights Reserved. 117

【実習】西暦を和暦に変換する関数の定義と利用実行結果 Copyright © Asial Corporation. All Rights Reserved. 119 第 6章

第 7章イベント Copyright © Asial Corporation. All Rights Reserved. 120

第 7章イベント Copyright © Asial Corporation. All Rights Reserved. 121

第 7章イベント実習 Copyright © Asial Corporation. All Rights Reserved. 124

第 8章 DOM Copyright © Asial Corporation. All Rights Reserved. 127

第 8章 DOM Copyright © Asial Corporation. All Rights Reserved. 128

第 8章 DOMとは n DOM（Document Object Model） n Java. ScriptでHTMLの各要素にアクセスする仕組み DOM が利用可能になるタイミング n ブラウザがHTMLを読み込んだ後

第 8章 DOM HTML要素へのアクセス n document. get. Element. By. Id()命令を利用文法　要素へのアクセス document. get. Element.

第 8章 DOM 要素の内容変更 n inner. HTMLにより内容を変更できる文法　内容の変更 document. get. Element. By. Id("ID 値").

第 8章 DOM 実習 Copyright © Asial Corporation. All Rights Reserved. 132

第 8章 DOM 要素の属性変更 Copyright © Asial Corporation. All Rights Reserved. 134

要素の属性変更第 8章要素の属性変更 n inner. HTMLのかわりに属性名を指定文法　属性の変更 document. get. Element. By. Id("ID 値").

要素の属性変更第 8章スタイル属性変更 n style属性のプロパティを指定文法　スタイルの変更 document. get. Element. By. Id("ID 値"). style.

要素の属性変更第 8章スタイル属性変更 n style属性のプロパティを指定例　要素の外側余白を 20 px に設定 document. get. Element. By.

第 8章 DOM 実習 Copyright © Asial Corporation. All Rights Reserved. 138

第 9章フォーム Copyright © Asial Corporation. All Rights Reserved. 140

第 9章フォーム Copyright © Asial Corporation. All Rights Reserved. 141

フォーム第 9章文法　テキストボックス <input type="text"> 例　テキストボックスの記述 <input type="text" value="テスト"> Copyright © Asial Corporation.

フォーム第 9章文法　チェックボックス <input type="checkbox"> 例　チェックボックスの記述 <input type="checkbox" checked> Copyright © Asial Corporation.

フォーム第 9章文法　ドロップダウンメニュー <select> <option value="選択肢の値">表示する選択肢</option> … </select> 例　ドロップダウンメニューの記述 <select> <option value="1">AAA</option> <option

第 9章フォーム実習 Copyright © Asial Corporation. All Rights Reserved. 146

第 10章いろいろな演算子 Copyright © Asial Corporation. All Rights Reserved. 148

第 10章いろいろな演算子 Copyright © Asial Corporation. All Rights Reserved. 149

第 10章いろいろな演算子実習 Copyright © Asial Corporation. All Rights Reserved. 155

第 11章配列 Copyright © Asial Corporation. All Rights Reserved. 157

第 11章配列配列 Copyright © Asial Corporation. All Rights Reserved. 158

第 11章配列実習 Copyright © Asial Corporation. All Rights Reserved. 163

第 12章繰り返し Copyright © Asial Corporation. All Rights Reserved. 165

第 12章繰り返し Copyright © Asial Corporation. All Rights Reserved. 166

第 12章繰り返し実習 Copyright © Asial Corporation. All Rights Reserved. 169

Slides: 171

Download presentation

第 2章【実習】画像準備 n 画像ファイル「monaca. jpg」を確認実習 n imgタグを追記 <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="monaca. jpg"> Copyright

CSSとは第 3章 CSSをHTMLファイルに読み込む方法（外部ファイル） n linkタグを記述 n href属性でパスを指定する文法　CSSファイルの読み込み <link rel="stylesheet" href="CSSファイルのパス"> n 例 <link rel="stylesheet" href="css/style. css"> Copyright © Asial Corporation. All Rights Reserved. 52

【実習】IDセレクタ第 3章実習 n index. htmlのaタグにID属性を付与 <a href="https: //edu. monaca. io/" id="target">Monacaへ</a> n style. cssにIDセレクタを利用したスタイルを記述 #target { color: red; } Copyright © Asial Corporation. All Rights Reserved. 60

第 3章【実習】クラスセレクタ実習 n index. htmlのaタグにクラス属性を付与 <a href="new. Page. html" class="bright">次の画面へ</a> n style. cssにクラスセレクタを利用したスタイルを追記 . bright { background-color: yellow; } Copyright © Asial Corporation. All Rights Reserved. 62

第 4章【実習】今日は何日？実習 n index. htmlのscriptタグ内を編集 <script> // 日付に関する命令を使えるようにする var date = new Date(); // 年、月、日の取得 var year = date. get. Full. Year(); var month = date. get. Month() + 1; var day = date. get. Date(); // 日本の表記にする var today = year + " 年" + month + " 月" + day + " 日"; document. writeln(today); </script> Copyright © Asial Corporation. All Rights Reserved. 87

第 8章 DOMとは n DOM（Document Object Model） n Java. ScriptでHTMLの各要素にアクセスする仕組み DOM が利用可能になるタイミング n ブラウザがHTMLを読み込んだ後 n Java. Scriptの書き方に夫が必要 n loadイベントなどを活用する Copyright © Asial Corporation. All Rights Reserved. 129

要素の属性変更第 8章要素の属性変更 n inner. HTMLのかわりに属性名を指定文法　属性の変更 document. get. Element. By. Id("ID 値"). 属性名 = "属性値"; 例　画像を「flower. jpg」に切り替える document. get. Element. By. Id("target"). src = "flower. jpg"; Copyright © Asial Corporation. All Rights Reserved. 135

要素の属性変更第 8章スタイル属性変更 n style属性のプロパティを指定例　要素の外側余白を 20 px に設定 document. get. Element. By. Id("target"). style. margin = "20 px"; 例　要素の背景色を青に設定する document. get. Element. By. Id("target"). style. background. Color = "blue"; Copyright © Asial Corporation. All Rights Reserved. 137

フォーム第 9章文法　ドロップダウンメニュー <select> <option value="選択肢の値">表示する選択肢</option> … </select> 例　ドロップダウンメニューの記述 <select> <option value="1">AAA</option> <option value="2">BBB</option> <option value="3">CCC</option> <option value="4">DDD</option> </select> Copyright © Asial Corporation. All Rights Reserved. 145