ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和
•
15 likes•18,075 views
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/427/room ーーーーーーーーーーーーーーーーーーーーーーー
Recommended
More Related Content
What's hot
What's hot (20)
Similar to ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和
Similar to ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和 (20)
More from schoowebcampus
More from schoowebcampus (20)
Recently uploaded
Recently uploaded (10)
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生：柳井 政和
- 2. 「柳井 政和」はどんな人？ ≫ クロノス・クラウン合同会社 代表社員 2002 年に創業 現在 12 期目 ≫ 著書： 「マンガでわかる JavaScript」 「HTML5&JavaScript 本格ゲームプログラミング」 「プログラマのためのコードパズル」など ≫ オンラインソフト： 「めもりーくりーなー」など 100 本ぐらい ≫ ゲーム開発 シミュレーション RPG、RTS など思考系が好き
- 6. ミニアプリのコードで学ぶこと 電卓１ 「HTML から文字取得、出力」「変数」 文字数カウント１ 「文字列」「文字列の長さ」 文字列置換１ 「文字列の置換」 文字数カウント２ 「条件分岐」 文字列置換２ 「関数」 電卓２ 「配列」「ループ処理」
- 9. Ａ．スポーツ
- 17. Ａ．失敗の効率化 ・ 学習や成長は、失敗なしでは進まない。 ・ 失敗をどれだけしたかが、そのまま血肉になる。 ・ 失敗の効率を、最大化する努力をしなければならない。 → プログラミングでは、失敗をいかに 効率化するかが問われる。
- 19. 効率的な例 プログラムを書く。 →動かない。 →エラー出力で、エラーメッセージを確認。 「○行目で、○○のエラー」 ・ その行で、なぜエラーが出るのか考える。 ・ エラーが起きている命令で Web 検索する。 ・ エラーの種類で Web 検索する。 →理解が深まる。
- 21. Google Chrome コンソールの使い方 コンソールの出し方 方法１：[Ctrl] + [Shift] + [J] 方法２：[F12] で表示したあと「Console」を選ぶ 表示の見方 「console.log( )」で 出力した値 ファイル名と行 エラーが起きた理由 「 ファイル名と行」は、クリックで移動可能。
- 24. インターネット時代の プログラミング学習 ・ まず、自分で書かずに済むか調べる。 ・ サンプルをいくつか入手する。 ・ 上手くいかない場合は、原因を調べる。 ・ 経験した失敗はメモして残す。 できれば万人に公開する。
- 25. JavaScript 製 ブラウザで動くミニアプリ作り 用意するもの ・ Web ブラウザ：Google Chrome ・ テキストエディタ：UTF-8 形式で読み書き可能なもの
- 27. <!DOCTYPE html> <html lang="ja"> 外部 JavaScript の読み込み <head> <meta charset="utf-8" /> <title>電卓</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> // DOM の準備ができてから実行 $(function() { // ボタンのクリック処理を実装 $("#btn").click(function() { var src = $("#srcArea").val(); // 入力 var res = eval(src); // 計算 $("#resArea").val(res); // 出力 console.log(res); // コンソール出力 }) // タイトルを H1 タグの中に表示 $("h1").text(document.title); }); </script> DOM の準備ができてから 実行するコード ボタンを押した時の処理 （アプリの本体）
- 28. <style> textarea.inOut {width: 640px; height: 150px;} </style> </head> <body bgcolor="#ffffff"> <h1></h1> <h2>入力</h2> <textarea class="inOut" id="srcArea"></textarea><br> <br> <input type="button" value="実行" id="btn"><br> <br> <h2>出力</h2> <textarea class="inOut" id="resArea"></textarea><br> </body> </html> ユーザーインターフェース
- 29. ボタンを押したあとの処理 // 入力 var src = $("#srcArea").val(); // 入力 // 計算 var res = eval(src); // 計算 // 出力 $("#resArea").val(res); // 出力 console.log(res); // コンソール出力
- 30. jQuery を利用した HTML への入出力 フォームから値を取得 $(セレクタ).val() フォームに値を出力 $(セレクタ).val(値) DOM から HTML を取得 $(セレクタ).html() DOM に HTML を出力 $(セレクタ).html(値) DOM からテキストを取得 $(セレクタ).text() DOM にテキストを出力 $(セレクタ).text (値)
- 31. 変数 値を一時的に格納する入れ物 var src = $("#srcArea").val(); 「var」 → 「variable（変数）」の意味。「src」という変数を作る。 「=」 → 右の値を、左の変数に入れる。 var res = eval(src); 「eval( )」 →「( )」の中の文字を、プログラムとして解釈。 計算式を入れれば、計算してくれる。 $("#resArea").val(res); 変数「res」に格納されている値を、テキストエリアに出力。
- 33. // 入力 var src = $("#srcArea").val(); // 入力 // 計算 var res = src.length; // 文字列の長さを取得 // 出力 $("#resArea").val(res); // 出力 console.log(res); // コンソール出力
- 34. 文字列とは？ 複数の文字が連なったもの "abcd あいうえお" 「"」か「'」で囲む "abc" 'abc' 中身が空でも文字列 "" 「+」で連結可能 "abc" + "def" → "abcdef"
- 35. 文字列はオブジェクト 「オブジェクト」は「プロパティ」と呼ばれる値を持つ 「.」区切りで「値」や「関数」を使える 「文字列.length」で文字列の長さが分かる 「"abc".length」→「3」 var res = src.length; // 文字列の長さを取得
- 37. 文字列の置換 // 計算 var res = src; res = res.replace(/n/g, "<br>n"); // 文字列置換 res = res.replace(/t/g, "tttt"); // 文字列置換 「文字列.replace(検索条件, 置換文字列)」 で置換。
- 38. 正規表現 ・ 「/記号付き検索文字列/フラグ」 ・ 複雑な条件で、文字を検索するための仕組み。 ・ 「a.c」 → 「.」は、何か 1 文字。 「abc」「a2c」などがヒット。 ・ 「a[b-y]z」 → 「[b-y]」は、「b～y」の 1 文字。 「acz」「axz」などがヒット。 ・ フラグ「g」で全置換。
- 39. 特殊文字 ・ 改行 → 「n」 ・ タブ文字 → 「t」 ・ 他にもいくつかある。
- 40. ■４．文字数カウント２ （202_strlen2.html） <input type="checkbox" id="linebreak"> 改行を数えない <input type="checkbox" id="space"> スペースを数えない
- 41. // 計算 var linebreak = $("#linebreak").prop("checked"); var space = $("#space").prop("checked"); if (linebreak) { // 改行にチェックが入っていれば削除 src = src.replace(/n/g, ""); } if (space) { // スペースにチェックが入っていれば削除 src = src.replace(/ /g, ""); src = src.replace(/ /g, ""); } var res = src.length; // 文字列の長さを取得
- 42. Boolean（真偽値） 「true」（真）と「false」（偽）の値 var space = $("#space").prop("checked"); // チェックされていれば「true」の値が // チェックされていなければ「false」の値が、変数「space」に入る // Boolean の値は、計算式でも求められる var isBig = 10 > 0; console.log(isBig); // 「true」と出力
- 43. 条件分岐（if 文） if (Boolean の値) { 「true」の場合のみ処理 } 条件分岐（if else 文） if (Boolean の値) { 「true」の場合のみ処理 } else { 「false」の場合のみ処理 }
- 44. 条件分岐の例 var a = 10; if (a > 0) { console.log("a が 0 よりも大きい"); } if (a > 10) { console.log("a が 10 よりも大きい"); } else { console.log("a が 10 以下"); }
- 46. // 計算 var res = src; res = markdown(res); // 簡易マークダウン $("#resArea2").html(res); // HTML として出力 // 簡易マークダウン function markdown(src) { var res = src; res = res.replace(/^# (.+?)$/gm, "<h1>$1</h1>"); res = res.replace(/^## (.+?)$/gm, "<h2>$1</h2>"); res = res.replace(/^### (.+?)$/gm, "<h3>$1</h3>"); res = res.replace(/''(.+?)''/g, "<b>$1</b>"); res = res.replace(/-----/g, "<hr>"); return res; }
- 47. 関数 function 関数名(引数) { 計算 return 戻り値; }
- 48. function 関数名(引数 1, 引数 2, 引数 3) { 計算 } ・ 引数は複数可能 ・ 「return 戻り値」はなくてもよい
- 49. ■６．電卓２ （102_calc2.html） 入力 1+2 3*4 ? 5*(6+7)-8 出力 1+2 = 3 3*4 = 12 ? = SyntaxError: Unexpected token ? 5*(6+7)-8 = 57
- 50. // 計算 var srcArr = src.split("n"); // 配列化 var resArr = [ ]; // 結果用配列を用意 for (var i = 0; i < srcArr.length; i ++) { var line = srcArr[i];// 1 行取り出す // エラー対策付きで計算 try { line = line + " = " + eval(line); // 計算 } catch(e) { line = line + " = " + e; // エラー時 } resArr.push(line); // 結果を追加 } var res = resArr.join("n"); // 配列を結合して文字列に
- 51. 配列 var array = ["要素 0", "要素 1", "要素 2"]; // 配列を作る var len = array.length; // 配列の要素数「3」 var item = array[0]; // 「要素 1」を取得「0, 1, 2」と数える array[2] = "上書き 2"; // 「要素 2」を上書き array.push("要素 3"); // 新要素を末尾に追加
- 52. ループ処理（for 文） for (var i = 0; i < 繰り返す回数; i ++) { 繰り返す処理 i は「0」「1」「2」……「繰り返す回数-1」となる 配列の要素を処理するのに好都合！ }
- 53. 配列を作る var srcArr = src.split("n"); // 文字列を配列化 var resArr = [ ]; // 空の配列 ループ処理（for 文） for (var i = 0; i < srcArr.length; i ++) { ★繰り返す処理 } var res = resArr.join("n"); // 配列を結合して文字列に
- 54. ★繰り返す処理 var line = srcArr[i]; // 1 行取り出す // エラー対策付きで計算 try { line = line + " = " + eval(line); // 計算 } catch(e) { line = line + " = " + e; // エラー時 } resArr.push(line); // 結果を追加
- 56. // 計算（16 文字のパスワードを 8 つ作成） var arrRnd = src.replace(/n/g, "").split(""); var res = ""; for (var n = 0; n < 8; n ++) { for (var i = 0; i < 16; i ++) { var r = Math.floor(Math.random() * arrRnd.length); res += arrRnd[r]; } res += "n"; }
- 58. // 計算 var enc = encodeURI(src); var res = "http://translate.google.com/translate_tts" + "?tl=ja&prev=input&q=" + enc; window.open(res, "_blank"); // 別ウィンドウで開く
- 59. 質疑応答