Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ノンプログラマーでも明日から使える

JavaScript 簡単プログラム

クロノス・クラウン合同会社
柳井政和
http://crocro.com/
「柳井 政和」はどんな人?
≫ クロノス・クラウン合同会社 代表社員
   2002 年に創業 現在 12 期目
≫ 著書:
   「マンガでわかる JavaScript」
   「HTML5&JavaScript 本格ゲームプログラミング」
...
対象者
≫ プログラムを書いたことがない人
≫ プログラムに挫折した人
おこなうこと
簡単なテンプレートを書き換えて
便利なミニアプリを作る
その後、解説をおこなう
作成する HTML 製ミニアプリ操作共通
1.入力欄に
  文字を入力。
2.ボタンをクリック。
3.出力欄に
  結果が出力。
ミニアプリのコードで学ぶこと
電卓1

「HTML から文字取得、出力」「変数」

文字数カウント1 「文字列」「文字列の長さ」
文字列置換1

「文字列の置換」

文字数カウント2 「条件分岐」
文字列置換2

「関数」

電卓2

「配列」...
おまけのミニアプリ
パスワード自動生成
文字列を MP3 化
まずは「プログラミング」について
Q. プログラミングが近いのはどれ?
1.学問
2.読書
3.スポーツ
A.スポーツ
なぜ?
野球をプレイせず、ルールをいくら読んでも、
野球は上手くなれない。
まずは、ボールを投げて、バットを振らないと
いけない。

プログラミングもよく似ている。
Q.プログラミングで
  体を動かすとは?
A1. 開発環境を用意して
サンプルを入手して
実行する。
A2. 少し変えてみたら
どうなるのか実験する。
サンプルを少し変えるだけでアプリができる!
プログラミングでは失敗が大切
よくあること
本を読んで分かった気になる
→本当の形とは大きく違う
→前提となる知識がないから
象は体が大きく、鼻が長い
こんな感じか?
では、どうすればよいのか?
失敗を重ねると、正しい形が見えてくる。
→分かった気になっていた形を修正する。
「全体像の想像」と「細部の確認」
の両輪で学習は進む
知識と経験で
正しい姿が!

http://www.wpclipart.com/animals/E/elephant/elephant_3/African_Elephant.jpg.html
Q.プログラミングを学習する上で
大切なことは何か?
A.失敗の効率化
・ 学習や成長は、失敗なしでは進まない。
・ 失敗をどれだけしたかが、そのまま血肉になる。
・ 失敗の効率を、最大化する努力をしなければならない。

→ プログラミングでは、失敗をいかに
効率化するかが問われる。
効率的でない例
プログラムを書く。
→動かない。
→動かないことしか分からない。
→学習が止まる。
効率的な例
プログラムを書く。
→動かない。
→エラー出力で、エラーメッセージを確認。
 「○行目で、○○のエラー」
・ その行で、なぜエラーが出るのか考える。
・ エラーが起きている命令で Web 検索する。
・ エラーの種類で Web 検索...
というわけで
効率的に成長するために
効率的に失敗できる環境を作り
どんどん失敗する。
Google Chrome コンソールの使い方
コンソールの出し方

方法1:[Ctrl] + [Shift] + [J]
方法2:[F12] で表示したあと「Console」を選ぶ

表示の見方
「console.log( )」で
出力した値...
Q.プログラミングをおこなう上で
大切なことは?
A.作業の省力化
・ 無駄なプログラムを書かないプログラマは、
  よいプログラマ。
・ すでにソフトがあれば、新たに作らず利用する。
・ すでにライブラリがあれば、新たに作らず利用する。
・ それで飽き足らない時、初めて手を動かす。
インターネット時代の
プログラミング学習
・ まず、自分で書かずに済むか調べる。
・ サンプルをいくつか入手する。
・ 上手くいかない場合は、原因を調べる。
・ 経験した失敗はメモして残す。
  できれば万人に公開する。
JavaScript 製
ブラウザで動くミニアプリ作り
用意するもの
・ Web ブラウザ:Google Chrome
・ テキストエディタ:UTF-8 形式で読み書き可能なもの
■1.電卓 (101_calc.html)
<!DOCTYPE html>
<html lang="ja">

外部 JavaScript の読み込み

<head>
<meta charset="utf-8" />
<title>電卓</title>

<script src="htt...
<style>
textarea.inOut {width: 640px; height: 150px;}
</style>
</head>
<body bgcolor="#ffffff">
<h1></h1>
<h2>入力</h2>
<tex...
ボタンを押したあとの処理
// 入力
var src = $("#srcArea").val();

// 入力

// 計算
var res = eval(src);

// 計算

// 出力
$("#resArea").val(res);...
jQuery を利用した
HTML への入出力
フォームから値を取得

$(セレクタ).val()

フォームに値を出力

$(セレクタ).val(値)

DOM から HTML を取得

$(セレクタ).html()

DOM に HTML ...
変数
値を一時的に格納する入れ物

var src = $("#srcArea").val();
「var」 → 「variable(変数)」の意味。「src」という変数を作る。
「=」 →  右の値を、左の変数に入れる。

var res =...
■2.文字数カウント (102_calc2.html)
// 入力
var src = $("#srcArea").val(); // 入力
// 計算
var res = src.length;

// 文字列の長さを取得

// 出力
$("#resArea").val(res); // 出力
...
文字列とは?
複数の文字が連なったもの

"abcd あいうえお"

「"」か「'」で囲む

"abc" 'abc'

中身が空でも文字列

""

「+」で連結可能

"abc" + "def" → "abcdef"
文字列はオブジェクト
「オブジェクト」は「プロパティ」と呼ばれる値を持つ
「.」区切りで「値」や「関数」を使える
「文字列.length」で文字列の長さが分かる
「"abc".length」→「3」

var res = src.length;...
■3.文字列置換 (301_strlrep.html)
文字列の置換
// 計算
var res = src;
res = res.replace(/n/g, "<br>n"); // 文字列置換
res = res.replace(/t/g, "tttt");

// 文字列置換

「文字列.re...
正規表現
・ 「/記号付き検索文字列/フラグ」
・ 複雑な条件で、文字を検索するための仕組み。
・ 「a.c」 →

「.」は、何か 1 文字。
「abc」「a2c」などがヒット。

・ 「a[b-y]z」 → 「[b-y]」は、「b~y」の ...
特殊文字
・ 改行 → 「n」
・ タブ文字 → 「t」
・ 他にもいくつかある。
■4.文字数カウント2 (202_strlen2.html)

<input type="checkbox" id="linebreak">
改行を数えない 
<input type="checkbox" id="space">
スペースを数え...
// 計算
var linebreak = $("#linebreak").prop("checked");
var space

= $("#space").prop("checked");

if (linebreak) {
// 改行にチ...
Boolean(真偽値)
「true」(真)と「false」(偽)の値
var space = $("#space").prop("checked");
// チェックされていれば「true」の値が
// チェックされていなければ「false」...
条件分岐(if 文)
if (Boolean の値) {
「true」の場合のみ処理
}

条件分岐(if else 文)
if (Boolean の値) {
「true」の場合のみ処理
} else {
「false」の場合のみ処理
}
条件分岐の例
var a = 10;
if (a > 0) {
console.log("a が 0 よりも大きい");
}
if (a > 10) {
console.log("a が 10 よりも大きい");
} else {
consol...
■5.文字列置換2 (302_strlrep2.html)
// 計算
var res = src;
res = markdown(res);

// 簡易マークダウン

$("#resArea2").html(res);

// HTML として出力

// 簡易マークダウン
function mar...
関数
function 関数名(引数) {
計算
return 戻り値;
}
function 関数名(引数 1, 引数 2, 引数 3) {
計算
}
・ 引数は複数可能
・ 「return 戻り値」はなくてもよい
■6.電卓2 (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
// 計算
var srcArr = src.split("n"); // 配列化
var resArr = [ ];

// 結果用配列を用意

for (var i = 0; i < srcArr.length; i ++) {
var l...
配列
var array = ["要素 0", "要素 1", "要素 2"];

// 配列を作る

var len = array.length;

// 配列の要素数「3」

var item = array[0];

// 「要素 1」...
ループ処理(for 文)
for (var i = 0; i < 繰り返す回数; i ++) {
繰り返す処理
i は「0」「1」「2」……「繰り返す回数-1」となる
配列の要素を処理するのに好都合!
}
配列を作る
var srcArr = src.split("n"); // 文字列を配列化
var resArr = [ ];

// 空の配列

ループ処理(for 文)
for (var i = 0; i < srcArr.length; ...
★繰り返す処理
var line = srcArr[i];

// 1 行取り出す

// エラー対策付きで計算
try {
line = line + " = " + eval(line);

// 計算

} catch(e) {
line...
■おまけ1.パスワード生成 (401_password.html)
入力
ABCDEFGHJKLMNPQRSTUVWXYZ
abcdefghijkmnpqrstuvwxyz
23456789

出力
6Zdic4HbKs6gDby8
PQDuE...
// 計算(16 文字のパスワードを 8 つ作成)
var arrRnd = src.replace(/n/g, "").split("");
var res = "";
for (var n = 0; n < 8; n ++) {
for (...
■おまけ2.文字列 mp3 化 (402_strToMp3.html)

  別ウィンドウで、MP3

を出力
// 計算
var enc = encodeURI(src);
var res = "http://translate.google.com/translate_tts"
+ "?tl=ja&prev=input&q=" + enc;
wind...
質疑応答
レポート課題
プログラミングは、手を動かして何ぼです!
サンプルを改造して、遊んでください!
クロノス・クラウン合同会社
柳井政和
http://crocro.com/
twitter.com/ruten
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
Upcoming SlideShare
Loading in …5
×

ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和

16,089 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/427/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和

  1. 1. ノンプログラマーでも明日から使える JavaScript 簡単プログラム クロノス・クラウン合同会社 柳井政和 http://crocro.com/
  2. 2. 「柳井 政和」はどんな人? ≫ クロノス・クラウン合同会社 代表社員    2002 年に創業 現在 12 期目 ≫ 著書:    「マンガでわかる JavaScript」    「HTML5&JavaScript 本格ゲームプログラミング」    「プログラマのためのコードパズル」など ≫ オンラインソフト:    「めもりーくりーなー」など 100 本ぐらい ≫ ゲーム開発    シミュレーション RPG、RTS など思考系が好き
  3. 3. 対象者 ≫ プログラムを書いたことがない人 ≫ プログラムに挫折した人
  4. 4. おこなうこと 簡単なテンプレートを書き換えて 便利なミニアプリを作る その後、解説をおこなう
  5. 5. 作成する HTML 製ミニアプリ操作共通 1.入力欄に   文字を入力。 2.ボタンをクリック。 3.出力欄に   結果が出力。
  6. 6. ミニアプリのコードで学ぶこと 電卓1 「HTML から文字取得、出力」「変数」 文字数カウント1 「文字列」「文字列の長さ」 文字列置換1 「文字列の置換」 文字数カウント2 「条件分岐」 文字列置換2 「関数」 電卓2 「配列」「ループ処理」
  7. 7. おまけのミニアプリ パスワード自動生成 文字列を MP3 化
  8. 8. まずは「プログラミング」について Q. プログラミングが近いのはどれ? 1.学問 2.読書 3.スポーツ
  9. 9. A.スポーツ
  10. 10. なぜ? 野球をプレイせず、ルールをいくら読んでも、 野球は上手くなれない。 まずは、ボールを投げて、バットを振らないと いけない。 プログラミングもよく似ている。
  11. 11. Q.プログラミングで   体を動かすとは?
  12. 12. A1. 開発環境を用意して サンプルを入手して 実行する。 A2. 少し変えてみたら どうなるのか実験する。 サンプルを少し変えるだけでアプリができる!
  13. 13. プログラミングでは失敗が大切 よくあること 本を読んで分かった気になる →本当の形とは大きく違う →前提となる知識がないから 象は体が大きく、鼻が長い こんな感じか?
  14. 14. では、どうすればよいのか? 失敗を重ねると、正しい形が見えてくる。 →分かった気になっていた形を修正する。
  15. 15. 「全体像の想像」と「細部の確認」 の両輪で学習は進む 知識と経験で 正しい姿が! http://www.wpclipart.com/animals/E/elephant/elephant_3/African_Elephant.jpg.html
  16. 16. Q.プログラミングを学習する上で 大切なことは何か?
  17. 17. A.失敗の効率化 ・ 学習や成長は、失敗なしでは進まない。 ・ 失敗をどれだけしたかが、そのまま血肉になる。 ・ 失敗の効率を、最大化する努力をしなければならない。 → プログラミングでは、失敗をいかに 効率化するかが問われる。
  18. 18. 効率的でない例 プログラムを書く。 →動かない。 →動かないことしか分からない。 →学習が止まる。
  19. 19. 効率的な例 プログラムを書く。 →動かない。 →エラー出力で、エラーメッセージを確認。  「○行目で、○○のエラー」 ・ その行で、なぜエラーが出るのか考える。 ・ エラーが起きている命令で Web 検索する。 ・ エラーの種類で Web 検索する。 →理解が深まる。
  20. 20. というわけで 効率的に成長するために 効率的に失敗できる環境を作り どんどん失敗する。
  21. 21. Google Chrome コンソールの使い方 コンソールの出し方 方法1:[Ctrl] + [Shift] + [J] 方法2:[F12] で表示したあと「Console」を選ぶ 表示の見方 「console.log( )」で 出力した値 ファイル名と行 エラーが起きた理由 「 ファイル名と行」は、クリックで移動可能。
  22. 22. Q.プログラミングをおこなう上で 大切なことは?
  23. 23. A.作業の省力化 ・ 無駄なプログラムを書かないプログラマは、   よいプログラマ。 ・ すでにソフトがあれば、新たに作らず利用する。 ・ すでにライブラリがあれば、新たに作らず利用する。 ・ それで飽き足らない時、初めて手を動かす。
  24. 24. インターネット時代の プログラミング学習 ・ まず、自分で書かずに済むか調べる。 ・ サンプルをいくつか入手する。 ・ 上手くいかない場合は、原因を調べる。 ・ 経験した失敗はメモして残す。   できれば万人に公開する。
  25. 25. JavaScript 製 ブラウザで動くミニアプリ作り 用意するもの ・ Web ブラウザ:Google Chrome ・ テキストエディタ:UTF-8 形式で読み書き可能なもの
  26. 26. ■1.電卓 (101_calc.html)
  27. 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. 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. 29. ボタンを押したあとの処理 // 入力 var src = $("#srcArea").val(); // 入力 // 計算 var res = eval(src); // 計算 // 出力 $("#resArea").val(res); // 出力 console.log(res); // コンソール出力
  30. 30. jQuery を利用した HTML への入出力 フォームから値を取得 $(セレクタ).val() フォームに値を出力 $(セレクタ).val(値) DOM から HTML を取得 $(セレクタ).html() DOM に HTML を出力 $(セレクタ).html(値) DOM からテキストを取得 $(セレクタ).text() DOM にテキストを出力 $(セレクタ).text (値)
  31. 31. 変数 値を一時的に格納する入れ物 var src = $("#srcArea").val(); 「var」 → 「variable(変数)」の意味。「src」という変数を作る。 「=」 →  右の値を、左の変数に入れる。 var res = eval(src); 「eval( )」 →「( )」の中の文字を、プログラムとして解釈。     計算式を入れれば、計算してくれる。 $("#resArea").val(res); 変数「res」に格納されている値を、テキストエリアに出力。
  32. 32. ■2.文字数カウント (102_calc2.html)
  33. 33. // 入力 var src = $("#srcArea").val(); // 入力 // 計算 var res = src.length; // 文字列の長さを取得 // 出力 $("#resArea").val(res); // 出力 console.log(res); // コンソール出力
  34. 34. 文字列とは? 複数の文字が連なったもの "abcd あいうえお" 「"」か「'」で囲む "abc" 'abc' 中身が空でも文字列 "" 「+」で連結可能 "abc" + "def" → "abcdef"
  35. 35. 文字列はオブジェクト 「オブジェクト」は「プロパティ」と呼ばれる値を持つ 「.」区切りで「値」や「関数」を使える 「文字列.length」で文字列の長さが分かる 「"abc".length」→「3」 var res = src.length; // 文字列の長さを取得
  36. 36. ■3.文字列置換 (301_strlrep.html)
  37. 37. 文字列の置換 // 計算 var res = src; res = res.replace(/n/g, "<br>n"); // 文字列置換 res = res.replace(/t/g, "tttt"); // 文字列置換 「文字列.replace(検索条件, 置換文字列)」 で置換。
  38. 38. 正規表現 ・ 「/記号付き検索文字列/フラグ」 ・ 複雑な条件で、文字を検索するための仕組み。 ・ 「a.c」 → 「.」は、何か 1 文字。 「abc」「a2c」などがヒット。 ・ 「a[b-y]z」 → 「[b-y]」は、「b~y」の 1 文字。 「acz」「axz」などがヒット。 ・ フラグ「g」で全置換。
  39. 39. 特殊文字 ・ 改行 → 「n」 ・ タブ文字 → 「t」 ・ 他にもいくつかある。
  40. 40. ■4.文字数カウント2 (202_strlen2.html) <input type="checkbox" id="linebreak"> 改行を数えない  <input type="checkbox" id="space"> スペースを数えない
  41. 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. 42. Boolean(真偽値) 「true」(真)と「false」(偽)の値 var space = $("#space").prop("checked"); // チェックされていれば「true」の値が // チェックされていなければ「false」の値が、変数「space」に入る // Boolean の値は、計算式でも求められる var isBig = 10 > 0; console.log(isBig); // 「true」と出力
  43. 43. 条件分岐(if 文) if (Boolean の値) { 「true」の場合のみ処理 } 条件分岐(if else 文) if (Boolean の値) { 「true」の場合のみ処理 } else { 「false」の場合のみ処理 }
  44. 44. 条件分岐の例 var a = 10; if (a > 0) { console.log("a が 0 よりも大きい"); } if (a > 10) { console.log("a が 10 よりも大きい"); } else { console.log("a が 10 以下"); }
  45. 45. ■5.文字列置換2 (302_strlrep2.html)
  46. 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. 47. 関数 function 関数名(引数) { 計算 return 戻り値; }
  48. 48. function 関数名(引数 1, 引数 2, 引数 3) { 計算 } ・ 引数は複数可能 ・ 「return 戻り値」はなくてもよい
  49. 49. ■6.電卓2 (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. 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. 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. 52. ループ処理(for 文) for (var i = 0; i < 繰り返す回数; i ++) { 繰り返す処理 i は「0」「1」「2」……「繰り返す回数-1」となる 配列の要素を処理するのに好都合! }
  53. 53. 配列を作る var srcArr = src.split("n"); // 文字列を配列化 var resArr = [ ]; // 空の配列 ループ処理(for 文) for (var i = 0; i < srcArr.length; i ++) { ★繰り返す処理 } var res = resArr.join("n"); // 配列を結合して文字列に
  54. 54. ★繰り返す処理 var line = srcArr[i]; // 1 行取り出す // エラー対策付きで計算 try { line = line + " = " + eval(line); // 計算 } catch(e) { line = line + " = " + e; // エラー時 } resArr.push(line); // 結果を追加
  55. 55. ■おまけ1.パスワード生成 (401_password.html) 入力 ABCDEFGHJKLMNPQRSTUVWXYZ abcdefghijkmnpqrstuvwxyz 23456789 出力 6Zdic4HbKs6gDby8 PQDuECi3ekF6JxhM HjAyGPAxHDAzF93j wY5ZJXimPmRuhDWA 3C5b35xGwp9EVwKx 7SqNia6reJAfdDGk qUjL45u7LSTiKwbG xyiLkSp2YwWYztDD
  56. 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"; }
  57. 57. ■おまけ2.文字列 mp3 化 (402_strToMp3.html)   別ウィンドウで、MP3 を出力
  58. 58. // 計算 var enc = encodeURI(src); var res = "http://translate.google.com/translate_tts" + "?tl=ja&prev=input&q=" + enc; window.open(res, "_blank"); // 別ウィンドウで開く
  59. 59. 質疑応答
  60. 60. レポート課題 プログラミングは、手を動かして何ぼです! サンプルを改造して、遊んでください!
  61. 61. クロノス・クラウン合同会社 柳井政和 http://crocro.com/ twitter.com/ruten

×