xor

I've got a feeling that how a computer should be in the future. Anyway it's not near to reach your level, but it's not so far, I think. Oh, am I serious that I'll reach your level?
…コンピュータのあるべき未来が分かりました。確かにそんな気がします。

投稿: alarky | 2011年6月19日 (日) 22時38分

テレビが死につつあるように現行のインターネットも近い将来死ぬでしょう。

テレビでナイターを中継しなくなったように現行のホームページは風化するでしょう。

だって、つまんないんだもん。

投稿: みなみ | 2011年6月20日 (月) 08時45分

http://jp.techcrunch.com/archives/jp20111228strongly-flavored-internet/
Tech Crunch は、あまりついていけないけど、この岩谷さんの意見は、一読の価値大有り！だと思います！

投稿: alarky | 2012年1月 2日 (月) 20時15分

またまた、Tech Crunch で、
新しい情報を、ゲットです！

Code Year

これなら、あなたも、僕でも、出来るかも？

元の情報ページは、

岩谷さん翻訳によるこのページだ！

投稿: alarky | 2012年1月 4日 (水) 22時52分

話題沸騰？
あの？Codecademy 日本語版に、トライしました。
もちろん本当の、コーディングは、このリンクで！
　　// 登録してください！

間違いも多々あると思います。
指摘していただけるとありがたいです。

　　なお、この プログラム/ウェブサイト は、
　　Java ではなく、
　　JavaScript のためのようです。
　　この2つの類似点は、名前のみで、
　　基本的には、違う言語です。
　　ただ、個人的に、JavaScript も、知りたい！
　　もちろんこの知識は、Java 学習時にも、
　　大いに役に立ちます！

このサイトで、実際学習してみて、これは、本で言うなら、
高橋麻奈さん著の、「やさしいJava」の、アプリ編って、感じですか、分かりやすいです！

理解/翻訳 できないが、重要ではなさそうなところは、パスしました。

// コンセプト
　プログラミングを学びましょう/コードの書き方を覚えましょう :　Codecademy で学ぶことは、プログラミングを覚えるのに、一番簡単なやり方です。対話式のインターネットを通して、楽しく！また、友達と一緒に勉強することも出来ますよ。
　ウェブサイト、そしてもっと... :　Codecademy で学びましょう！その過程で、ウェブサイトや、ゲーム、アプリ を、作っていきます。

【Lesson1:　Getting to Know You, Part 1】
＜1. What's your Name?＞
やあ、まず、お互いを、紹介しましょう！
　　* あくまで、コードを書く話です。
あなたの名前は？"ライアン" のように、名前の両側に引用符「''」を付けて、タイプしてください。(右の灰色のエリア、「＞ 」の後ろに！)

＜2. The long and short of things＞
よく出来ましたね。では、あなたの名前の文字数は？引用符をつけたあなたの名前の最後に、「.length」と、タイプして、調べてください！

私の場合は、"Ryan".length'' です。

＜3. Getting Old＞
よく出来ました。いくつか算数を！
　　* math は、数学だが、「2+2」が、数学とはいえないと思う。実際に、よほど高度な、プログラムでなければ、数学の意味的理解は必要でも、技術的な理解は必要ないと思う！プログラマには！特に、最近の言語において。数学は、言語自体が、解決策を、持っているようだ。多分...。　例えば乱数、スロットマシンに出てくる数字は、ランダムだが、知っている必要のあるのはそのことのみで、そのランダムな数は、言語のライブラリが計算してくれる。乱数(ランダムな数)を、求める公式なんか知らなくてもいいのだ。

プログラミングを使って、計算が出来ます。2+2は、そのまま、2+2。さあ、試して！

＜4. Numbers and More＞
どうなったか見ましたか？コマンドラインから、四則演算が出来ます。
この辺りのことを、もう少しやってみましょう。お望みなら、(右の画面を使って) 「*」で掛け算、「/」で割り算が出来ます。

＜5. Messing Up＞
画面出力が上手くいかないなら、コマンドラインの中で、どんな「引用符」も使わないで、あなたの名前をタイプしてみてください。
　　* 言っていることが、分からない、自分の、Firefox では、何の問題も起こらなかった？(誤訳かも？)

【 Lesson2 Confirm or Deny】
＜1. Confirm or Deny＞
楽しみなこと:　あなたが学んでいる、JavaScript と呼ばれる、プログラミング言語は、ウェブで、一番人気なんです。

JavaScript で、応答のあるプログラムを作るためのひとつの方法を学びましょう。右のコンソール画面をクリックし、「Enter」キーを押して、始めてください。

＜2. Create Your Own＞
たった今あなたが見たものは、確認のための、ウィンドウです。これを使って、サイトを見ている人たちに、選択してもらうようにすることが出来ます。あなた自身で作るには、「confirm("確認用のメッセージ");」と、タイプし、「Enterキー」を、押してください。今すぐどうぞ！
　　* 確認用メッセージ　・・・　日本語もOKだった、「今すぐ、再起動しますか？」などでしょう。

＜3. Alert!＞
また、警告ウィンドウを表示することも出来ます。では、「alert("警告！");」と、タイプしてみましょう。

【 Lesson3　変数 】
＜1. Forgetful＞
前回、あなたは、ここにあるコンソールウィンドウの中で、あなたの名前をタイプしました。しかし、セーブはしてませんね。「変数」がこれを解決します！「変数」は、「値・あたい」をセーブし、後で使うための方法なのです。

"名前"の話をしてるので、「変数」の名前を、「myName」って呼ぶことにしましょう。

しかしその前に、「変数」を、「宣言」しなければなりません。何が起こるか見るために、宣言なしで、「myName」とタイプして、アクセス/メモリを確保　してみて下さい。
　　* 「宣言」すると言うことは、コンピュータ側の視点では、値のためのメモリを確保すると言う意味合いがある。

＜2. Memory＞
これは、前に、引用符なしのあなたの名前で、Enterキー を、押したときと、同じエラーです。引用符がないので、プログラムは、変数だと判断したのです。しかし、変数なのに、「宣言」されていないので、エラーになったのです。

この問題を解決するために、「var」という言葉を使って、「変数」を、宣言してください。

「var myName;」と、タイプしてみましょう！＜そして、Enterキーを、押す＞

＜3. Declare it!＞
よく出来ました。あと、あなたのすることは、あなたのそれぞれの値に対して、1度、宣言すればいいのです。

しかしまだ今のところ、「myName」には、何も代入されていません。さあ、コンピュータに聞いてみてください！「本当の、私の名前/myName は、何ですか？」 「＝」を使って、変数に、値を指定することが出来ます。例えば、もし、あなたの名前が「ライアン」なら、「myName = "ライアン";」と、タイプしましょう。値の両側に、引用符を忘れずに！

＜4. I Remember Now＞
今や、あなたが、「myName」と、タイプすれば、コンピュータは、何のことか分かっています。では、「myName」とタイプしてみましょう。あなたの名前が、表示されるはずです。

＜5. Let's Try That Again＞
たった今、2つのステップで、あなたの名前をコンピュータに、保存しました。しかし、あなたはまた、時間を節約して、たった1ステップで、同じことが出来ます。

新しい変数「lastName」に、値を保存してみましょう。前やったやり方を使って、一行で、このように、すべてを、書きましょう。　・・・　「var lastName = "あなたの名字"; 」

＜6. Bring it Back＞
「lastName」は、「変数」ですが、「"name"」のような文字列は、「リテラル」です。「変数」は、「リテラル」と同じように扱えます。

例えば、さっき「"Ryan"」の長さを調べたように、「変数 lastName」が、何文字か調べられます。やり方を、覚えてますか？

ヒントを見る:　聞いてくれてありがとう！文字列の長さを調べるには、「.length」を、その変数や文字列の後にタイプするだけです。

＜7. CaSeS ＞
「変数」について、もう1つ言いたいことがあります。「人間にとっては同じ意味でも」、どうタイプするかは、大きな問題です。「変数・myName」と「変数・MyName」は、「コンピュータにとっては」、違うのです。
　　* my と My は、違う！

「myFullName」と言う名前の新しい変数を、あなたの名前と名字を、値にして/代入して、作ってください。

ヒント:　「myName」は、「MyName」や「my_name」とは違うことを忘れないでください！

【 Lesson 4 Numbers n' Strings 】
＜1. Which Number? ＞
じゃあ、「数字」についてはどうですか？「文字」についての保存方法はやりましたね、では、同じことを「数字」でやってみましょう。

変数を宣言して、「number」と名づけた「変数」の「値」を、「42」に、設定してみましょう。

ヒントを見る:　宣言して、1行で変数を設定するために、「var 変数名 = 数字の値;」と言う形でタイプします。variableName は、「変数名」です。variableValue は、あなたが設定したい「変数の値」のことです。この練習問題では、「変数名」は「number」、「変数/数字 の値」は「42」です。

＜2. Playing With Numbers＞
あなたが数字を使って出来るクールなことをいくつかやってみましょう。例えば割り算のように、すべての計算が出来ます。

さっきの「number」を、2 で、割ってみましょう。割り算には、「/」を、使います。

ヒントを見る:　「変数 number」を、'数字' を使うように、やってください。「number/2」で、Enterキー。

＜3. Modulo＞
また、剰余算のための「%」を使って、「割り算の余りを数」を求められます。

例えば、「42÷10」の余りを計算できます。「number % 10」を、やってみましょう。

ヒントを見る:　すでに習ったようにします。「number」を、あなたが普通の「数字」を扱うようにすれば、OKです。

＜4. String Cheese＞
「数値データ」と同じように「文字データ」を扱えます。どんな「文字データ」も、「文字列」と言うデータタイプです。すべての「文字列」は、「引用符」で囲みます。

「myString」と言う変数を作って、「"hello"」と言う文字列を代入し、「;」と、タイプして下さい。
　　* 「;」は「。」と、同じように、文の終わりの合図です。

ヒントを見る:　変数の宣言と値の設定は、「var 変数名 = "文字列"; 」のように簡単に出来ます。

＜5. Substrings＞
文字列の部分を抽出できるか見てみましょう。例えば、"hello" から "he" を抜き出したいかもしれない。"he" は、"hello" の部分文字列という言い方をします。部分文字列を抜き出すためには、ある文字列に対して、substring()メソッド を、使います。

想像して下さい、、それぞれの文字の左側に、「マーカー」があることを。"hello" から "he" を、取り出すために、「h」の左側にある「マーカー:0」からはじめて、最初の「l」の左側にある「マーカー:2」で、終わります。その部分文字列を抜き出すために、「"hello".substring(0,2);」と、タイプして下さい。では、やってみましょう。
　　* 実際には見えないが、見えるとすると　・・・　0^h 1^e 2^l 3^l 4^o　と言うことだ。

＜6. Saving your substrings＞
今度は、あなたの名前から、最初の3つの文字を取り出しましょう。

上の、「substring()メソッド」を使って、「three」と言う名前の変数に、保存できるでしょうか。

！前に保存したあなたの名前の変数は、もうメモリにはありません！　・・・　前のレッスンのメモリは、残らない設定になっていると言うこと、でしょう。

ヒントを見る:　あなたが前練習したように、ここでも、「substring(スタート位置, 終わりの位置)メソッド」を、使いましょう。

解答例:
＞ var three = "alarky".substring(0,3);
＞ three
==＞ ala

＜7. Search and Destroy＞
文字列の中から、選んで、置き換えることも出来ます。ここでは、クラシック的な "hello world" を、"goodbye world" に、replace()メソッドを使って、置き換えてみましょう。

replace()メソッド では、置き換えられる文字列と、置き換える文字列を、入力します。この例では、「"hello world".replace("hello", "goodbye");」のようにします。

このメソッドを使って、"hello earth" を、"hello world"にして見ましょう。

＜8. UpperLowerCase＞
前回、大文字であるか小文字であるかは、プログラミングにおいて如何に重要であるかということについて話しました。

文字列に対して、toUpperCase()メソッド、toLowerCase()メソッド が、あります。それは、文字列の中のすべての文字を、大文字が小文字に変換します。

文字列を、すべて大文字に変えてみましょう。

すべて大文字にするためには、「.toUpperCase()」を、その文字列の後につけるだけです。忘れないで下さい、大文字であるか小文字であるかは、大きな違いです。

【Lesson5　Editor and Arrays　・　The console's not the only game in town.】

＜1. More!＞
今までのところ、あなたがやったすべては、コンソール画面で、1行のみのプログラムでした。しかし、プログラミングは、それよりずっと複雑で、数千行もありえます。
　　* 大げさだ！あり得るだけだ！

ここでは、テキストエディタを使ってはじめましょう。

優秀なプログラマは、プログラムが何をやっているかを、コメントしておきます。彼らは、それぞれの一行に、2本のスラッシュをつけて、書きます。その2本線のスラッシュは、コンピュータが、プログラムとして読まないことを保証します。
　　// コメントを、ここに書く、改行したら、新たに、
　　// を、書かなければならない！

そのコメントが分かるか見て、その指示通りにコードを書きなさい。
// declare and set the variable named "today" to today's weekday name
宣言、そして、"today" と言う変数に、何曜日か設定する。

ヒントを見る:　ここでは、"today" と言う変数を宣言してください。思い出して、それは、「var today = ??...?? ; 」です。

＜2. What's That?＞今まで学習したのは全部、一つの値しか持っていません。しかし、順番どおり整理された値のリストを保存しなければならなくなったら？配列と言うデータ構造を、使います。

その編集者は今、「numbers」と言う名前の「配列」を持っており、値の要素は、「1,4,6」です。(どのように値が設定されているか、コンソール画面を見て下さい。　・・・　var numbers = [1, 4, 6]; )　ある特定の値にアクセスするには、「配列の名前」と「その位置、つまりインデックス」が、必要です。(インデックスは、「0」から始まるので、注意！　・・・　「1」ではないということ！)　配列、numbers から、4を取り出すために、「numbers[1]」と、書いてください。

コードを書いてください。そのコードは、その配列の3番目のメンバーを、「six」と言う変数の値に、設定します。

ヒントを見る:　この練習問題のために、新しい変数を宣言してください。　・・・　var six = ~　・・・　そして、「numbers[2]; 」によって取り出される配列の値を、その変数に、代入して下さい。覚えておいてください！― 配列のインデックスは、1 ではなく 0 から始まります！

＜3. Making Your Own＞
今度はあなたが作る番です。前回作った形式で、「numbers」と言う配列を作ってください。そして「1,2,3」という数値を、セットしてください。

ヒントを見る:　このコードで、配列が出来ます。　・・・　''var numbers = [1, 2, 3]; ''

＜4. Not My Way or the Highway＞
配列の作り方は、一通りではありません。ここに、私たちが、「days」という、あなたのための配列を作りました。

インデックス 0,1,2 に、それぞれ、月曜日、火曜日、水曜日 を、セットしてください。

初めての配列のために、サンプルを、示します。インデックスに設定するために、「配列名[インデックスナンバー] = "文字列"； 」という形式に、従ってください。

ヒントを見る:　ここでは、値を入れる前に、その配列を宣言しておきましょう。上/コンソール画面 の例を見て下さい。　・・・　var days = [];

・・・続く、予定。

投稿: alarky | 2012年1月 9日 (月) 07時02分

早速、間違いを見つけてしまいました。訂正いたします。

Lesson4 ＜8. UpperLowerCase＞の所です。

＜訂正前＞
文字列に対して、toUpperCase()メソッド、toLowerCase()メソッド が、あります。それは、文字列の中のすべての文字を、大文字　　X ⇒ が　　小文字に変換します。

＜訂正後＞
文字列に対して、toUpperCase()メソッド、toLowerCase()メソッド が、あります。それは、文字列の中のすべての文字を、大文字か小文字に変換します。

・「が」を、「か」にして下さい。

投稿: alarky | 2012年1月 9日 (月) 07時28分

補足:
Codecademyの、
Getting Started with Programming の、リンクを、忘れてました。
ここ！

投稿: alarky | 2012年1月 9日 (月) 07時37分

【Codecademy 日本語版】つづき
Getting Started with Programming　＋　
FizzBuzz コース

前回の説明不足:
　右の画面のうち、上が、エディタ＜テキストエディタ＞で、下が、コンソール画面です。
　自分も、実際に、JavaScript を、やったことがないので、今気づきました。
　テキストエディタの、右下の部分の説明
　　versions　・・・　Default code　・・・　デフォルト＜元に戻す＞　・・・　それ以外の時間にも戻れます。
　　Run　・・・　プログラムの実行
　テキストエディタの右上の部分　＜[ Lesson | Scratch Pad ]＞
　　Scratch Pad で、自分ひとりでコードを書くことが出来るか試せます。
　＜注意！＞なるべく日本語は避けましょう！
　　いろいろ理由はありますが、・・・僕は2つしか思いつかないけど、・・・一つには、JavaScript、言語自体が使っている演算子など「＞など」は、全角文字は、ありえないからです。基本的に、英語が元になっているので、全角文字は、使いません。もし、上手くプログラムが実行されなかったら、全角文字を使っていないか、疑ってみてください。日本語を使える部分もあるのですが、「ローマ字」を使ったほうが、間違いがなくていいと思います。また、このブログでは、例えば、リンクを示すコードの、「＜」などの半角文字が、表示されないような仕様になっているので、その場合、全角文字を使っていますが、実際のコードでは、半角文字かもしれないので、ドラッグして、コピーする際は、気に留めておいて下さい。
【 Lesson6:　What If? 】
＜1. Intro to If＞
　　　今までのところ、プログラムの基本を学びました。ところで、もし、そのプログラムの実行に、何かの条件を満たすことが必要だったら？、、「if文」を使って、簡単な例をやってみましょう！

　　　次のことに気をつけてください：　「=」は、「変数」を「宣言」するとき(そのとき、変数に値を 設定/代入 するとき)、しかし、「===」は、ある変数の値と比べてみて、「同じもの/identical」か「等しいこと/equal」を、調べるために、使います。
　　　　* identical　・・・　(adj) equal in every respect / どの観点から見ても、同じ

　　　すでに、その *エディタ の中にある例題コードでは、「変数 number」が最初に宣言され、「値 10」が、割り当てられています。「number」の「値」は、7 ではないので　・・・　if(number === 7)＜もし(ナンバー　等しい　7)＞　・・・　、、"You typed a 7!"＜console.log のメッセージ＞ は、決して表示されないのです。(「if文」の条件が満たされていない.)
　　　　* 右の画面のうち、上が、エディタで、下が、コンソール画面だ！

　　　最初の行の、「変数 number」の、「値」を変えてください。そうすると、if文は、「true/条件を満たす」ことになります。何が起こるかコンソール画面を見てください！

　　　ヒントを見る:　「number」の「値」を見て、「if文」の中での条件に一致することを確かめてください。　・・・　一致するようにしてください！
// 解答例:
　// エディタ画面　　
var number = 7;
　　// 10　⇒　7　にする！
　　// ! 半角文字で、入力してください !
if( number === 7 ) {
console.log( "you typed a 7!" );
}
　// コンソール画面
you typed a 7!
// That's correct! Next Exercise

＜2. Or Else ...＞
　　　「if文」は、ちょっとした クールな/いかした/かっこいい ことが出来ます。ですが、「else/でなければ」 と一緒に使えば、さらにクールです。「変数 name」に、応答する 「if else 文」を、書いてみましょう。なまえ「name」が、「Sam」であれば、『あなたの名前はサムです』と、応えてくれます。

　　　if/もし「Sam」でなければ、(つまり、「else/でなければ」だ。) コンピュータは、違う「応え/応答」を用意しています、『サムではありませんよ』 のように。あなたのために、「if/else文」の枠組みを用意しました。「else文」を書くところに「console.log()メソッド」を、書いてください、、何が起きるでしょうか？
　　　　*メソッド は、関数 と同義で、使います。

　　ヒントを見る:　「変数 name」の値は、「Annie」になっています。なので、(「Sam」ではないので)「if文の条件」を決して満たしません。よって、「else文」へ、ジャンプします。
解答例
// エディタ画面
var name = "Annie";
if (name === "Sam") {
console.log("Your name is Sam!"); }
else {
console.log("Oh, your name is cool!");　// ここ！
};
// コンソール画面
Oh, your name is cool!
　// That's correct! Next Exercise

＜3. Prompting＞
　　　さて、if/else の、ユーザの名前を得る アクション/動作 を見てみましょう。では、ユーザがあなたに言う名前を、変数 name に設定します。

　　　ユーザの名前を聞くためには、「prompt("what's your name?")」と、タイプして下さい。そして、prompt()メソッド によって現れるウィンドウに、変数nameの値/要はあなたの名前 を、入力すると、コンソール画面はどうなるでしょう。

　　　＜大幅に、和訳を言い換え＞あなたの名前が、偶然にも「Sam」でなければ、prompt()メソッドが実行されて、現れるウィンドウによって「What's your name?」と、聞かれます。そのためには、name変数 に、あなたの名前を値として設定してください。コードの枠組みはすでに、タイプ済みです。結果をコンソール画面＜右下の画面＞で確かめてください＜Run-実行ボタン をクリック＞。
　　　　
● 解答例:
// エディタ画面
var name;
// Prompt for the user's name here.
name = "alarky";　// ここ、2-1！
if(name === "Sam") {
console.log("Your name is Sam!");
} else{
console.log("Your name isn't Sam!");
prompt("What's your name?");// ここ、2-2！
};

// コンソール画面
Your name isn't Sam!
==> alarky
　That's correct! Next Exercise

*「prompt("What's your name?");」を、書く位置に気をつけてください！
「else文内　・・・　else{　ここ　}」 に書かないと、
もし、あなたが本当に「Sam」でも、「What's your name?」と、
聞かれてしまいます。

　　　ヒントを見る:　「変数 Prompt_no_Kotae」 に、「prompt()メソッド の応え」 を、設定してましょう。「var Prompt_no_Kotae = prompt("Please enter your name!");」とします。
　　　　*日本語は、使わないほうが、いい。理由は、ちょっと複雑なので、パス。ローマ字なら、OK!!
使い方の例：　・・・　*ここは、パスしてもいいでしょう。次のレッスンで使い方は分かります。
　// 左上のボタン「Scratch pad」を、使ってみましょう。
// 左、エディタ画面
var name;
var Prompt_no_Kotae = prompt("Please enter your name!");
if(Prompt_no_Kotae === "Sam") {
console.log("Your name is Sam!");
} else{
console.log("Your name isn't Sam!");
prompt("I don't know you. Please write your name, again!");
};

// コンソール画面
　// Please enter your name!　に、「Sam」と入力したとき
Your name is Sam!

　// Please enter your name!　に、「alarky」と入力したとき
Your name isn't Sam!
==> alarky

＜4. Otherwise...＞
　　　もう1つ条件を付け加えたかったら？ちょっとゲームを、、1～10 の間の数を当てるという。 ― "Guess what number I'm thinking of between 1 and 10!" / 1から10で、私は何を思っているでしょうか？― 。 「7」を想像したらあたりです(if文 の条件に当てはまる) ― "You got it!" / 正解！― 。「6」を想像したら、「1つだけ離れている」ことを教えてあげましょう。― "Close! Try guessing a little higher." / 終り！もう少し大きい数字を想像してみて。― (これが、「else if 文」の、条件に当たります・・・「6」の入力、「if 文」の条件を満たさなかったとき、実行されます。)

　　　ほかの数字を想像していたら、間違ってますよと言われます。― "You were way off! Sorry..." / 答えから離れてます、残念！― (else文)。では、「6」が入力されたとき、右上のエディタに、何を書き加えたらいいか、分かるかな？(else if 文 を、直します)

　　　ヒントを見る:　if/else 文を、直しなさい。

答:
else if ( ここ ) に＜5行目＞、「number === "6"」を、書き加えます。

＜5. All Equals Are Not Equal＞
　　　前回、異なるタイプの「= 演算子」があることを、注意しました。「=」と「== / ===」は、違うことを、覚えておいて下さい。「=」は、ある変数に、値を 割り当て/設定し、一方、「== / ===」は、値同士が等しいかを、調べます。「==」は、JavaScriptで、「奇妙な行い」# をするので、「===」を、使ったほうが、ほとんど場合、こちらを使うべきでしょう。
　　　　*#奇妙な行い　・・・　*数値と文字列を比較したときに、== 演算子や != 演算子が暗黙の型変換を行うのに対し、=== 演算子や !== 演算子は数値と文字列は常に異なるものと判断します。　・・・　Java では、文字列は、String「オブジェクト」で、数値は、「プリミティブ・タイプ」なので、もともと同じではないが(Java5以降のことは知らないが)、「"123"」 と、「123」では、文字列と、数値なので、違うということだ！ここでは、数値と文字列を区別する「===」を、たいていの場合、使うべきだといっている。

　　　この練習問題を実行してみましょう(右下の「Run」を、クリック)。最初「変数word」は「"this"と言う文字列」が代入されています。「word === "that"」を、正しくするために、コードを訂正しましょう。そうすれば、「console.log()メソッド」が、実行されます。

解答:
「var word = "this";」を、「var word = "that";」に、変えてください。

＜6. Inequality＞
　　　「=」以上に、あなたは、「値」を、調べることが出来ます。下記の記号を、「if文、else if文、else文」 の中で、同じように使えるのです。それは、「＞(より大きい)、＜(より小さい)、!==と!= (等しくない)」です。

　　　もし、「より大きい/より小さい か、同じ」 という演算子が必要なら、後ろに、「=」 をつければいいのです。こんなふうに、「>=」。

　　　右上のコードを、直してください。console.log()が、実行されるように。そうすれば、「変数number」が、5 より大きかったら、「your number is greater than 5 / 5より大きな数字です」と、5より小さかったら、「your number is less than 5 / 5より小さいです」と、応えます。

　　　ヒントを見る:　「＞」は、「値」の左側が、右側より大きいかを、チェックします。「＜」は、同様に、左側のほうが、小さいかをチェックします。「5 ＜ 3」は、「false/偽/いつわり」で、「5 ＞ 3」は、「true/真/正しい」ということになります。

解答　・・・　3箇所訂正してください。
var number = prompt( "pick a number between 1 and 10!" );
if( number === "5" ) {　// ここは、言及されていないが、prompt()メソッドで入力される値は、「数値」ではなく、「文字列」のようだ。なので、「"」で、数字を囲んでおきましょう！　3-1　・・・#
console.log( "your number is 5" );
}
else if (number > 5) {　// ここ！　3-2
console.log( "your number is greater than 5" );
}
else if (number < 5) {　// ここ！　3-3
console.log( "your number is less than 5" );
}
　*#しかしだ、今までの説明になかったが、「＞」演算子は、比較するとき、自動的に、型変換して比較していると言うことになるのだ。変数か、値のどちらかを、文字列か、数値に変換していると言うこと。JavaScriptを、完璧にマスターするつもりなら、覚えておいたほうがよさそうだ。

＜7. Dot Your I's and Cross Your T's＞
　　　あなたのコードを、正しい記号を使って、正確にきれいに書くことは、本当に大切です。それで、ずっと読みやすくなります。例えば、「if/else文」では、こうです！
　　　if ( 条件 ) {　コード　}　のように！
　　　　*問題の答は、これをよ～く見れば分かります。

　　　prompt()メソッドによる、インプットボックス に、「yes」と入力すれば、「I like you too!」 と、コンソール画面に表示されるように、エディタのコードを今訂正してみてください。(メッセージを確認してください。)

　　　ヒントを見る:　1つは「= 記号」、「{ }」記号の置く場所が2箇所、「( )」記号の置く場所で2箇所、間違いがあります。「=」は、値の変数への代入に、一方「===」は、2つの値が等しいかを確かめるために使うことを、覚えておいて下さい！

答
var response = prompt("Do you like me?");
if (response === "yes") {　// ここ！
console.log("I like you too!");　// ここ！
}　// ここ！
　// 計5箇所直します。

【Lesson7　Bringing It Up (and Down)】
＜1. +1＞
　　　「数値」の「変数 i 」を、「インクリメント演算子 ++」をつかって、1つずつ、増やすことが出来ます。　・・・　「i++」と、書きます。

　　　「変数 i 」を宣言した後、「i++ 」を、2回実行すれば、「i is equal to 2」を、コンソール画面に表示できます。このプロセスは、2行で行ってください。さあ今やって見ましょう。

　　　ヒントを見る:　さあ、2行に分けて繰り返してタイプして下さい。それぞれ同じく「i++; 」とするだけですよ。

答:
var i = 0;
i++;　// ここ！　2-1
i++;　// ここ！　2-2
console.log( "i is equal to " + i );

＜2. -1＞
　　　「変数 i の 数値」を、「デクリメント演算子 -- 」を使って、1つずつ減らすことが出来ます。　・・・　「i-- 」と、書きます。

　　　最初に、変数i の値を、2 に、設定した後、「i-- 」を、2回書いて、i の値を、0 にセットしてください。

　　　ヒントを見る:　前と同じように、変数 i を、初期化した後(変数 i を宣言し、数値 2 を、代入する)、「i-- 」を、2回書いて、i を、0 にしてみましょう。

答:
var i = 2;
i--;　// ここ！　2-1
i--;　// ここ！　2-2
console.log( "i is equal to " + i );

＜3. A Little Bit Faster Now＞
　　　「for文/forループ」と呼ばれる、新しい「構文」を紹介しましょう。この構文を使えば、上でやったことを、もっと簡単に出来ます。この「ループ」では、「i++ 」が、2回実行されます。
　　　　* loop/ループ　・・・　(名詞)〔コンピュータ〕ループ《終了の条件が成立するまで繰り返されるプログラムの反復処理部分；その一連の命令》∥ exit from a loop / ループから出る.

　　　　「イテレータ i 」は、0からスタートするが(普通 0 に初期化する)、「for文」の { ... } を、1回実行するごとに、「1」増えていきます。この例では、「i ===2」になった時点で、「i ＜2」が、「false/偽/誤り」になるので、繰り返しは、ストップします。
　　　　　*「イテレータ/反復子 i 」　・・・　実体は、JavaScript に於いて、ただの「変数」だが、コンピュータの世界では、「i 」を使うのが、慣習 に、なっている。もちろん、「i 」を使う必要がないが、使ったほうが、分かりやすい。

　　　「forループ/for文」の、構造を、下に示します。

　　　for ( 初期設定/初期化;　条件を満たしているかチェック;　{...}実行後「1」増やす ) {
　　　　// 条件を満たしている間繰り返される処理
　　　}
　　　　*実行「後」を、チェック！

　　　右のコードを実行して、コンソール画面を見ると、「forループ」がどのように、「変数 i」 を増やしていくかが、分かります。

答:　ただ、右のエディタの「Runボタン」をクリックするだけですが、5行目を、以下のように、変更すると、コンソール画面を見たとき、このコードの流れが、よりよく分かると思います。
// エディタ画面
var i;
for (i = 0; i < 2; i++) {
console.log("i is now equal to " + i);
}
console.log("i no imano ataiha, " + i);　// ここを、ローマ字に書き換えた！
// コンソール画面
i is now equal to 0
i is now equal to 1
i no imano ataiha, 2

＜4. Down Down Down ＞

　　　さて、あなたの番です！さっきやったようにして、今度は、2 を、0 に、してみましょう。今度は、「for の後の ( ... ) 」、「... 」を、さっき習ったことを応用して、埋めてみて下さい。

　　　正確に、「forループ」の構文を使ってください！ちょっと混乱しているようだったら、ヒントか、一つ前の プラクティス/例/練習問題 を、見て下さい。

　　　ヒントを見る:　2回、「forループ」を、繰り返します。こんなコードを、書くと思います。　for ( i = 2;　i ＞0;　i-- ) {　}。

答:
// エディタ画面
var i;
for (i=2; i > 0; i-- ) {　// ここ！
console.log( "i is now equal to " + i );
};
console.log( "i noataiha, " + i );　// ここは、オプション！
// コンソール画面
i is now equal to 2
i is now equal to 1
i noataiha, 0　// 上のように書き換えるとこうなります。

【Lesson8　While You Wait 】
＜1. Keep It Going ＞
　　　ちょうど「forループ」が、1回以上コードを実行できたように、「whileループ」も、同じことを、1回以上、実行できます。

　　　「forループ」と同じように、「whileループ」も、「繰り返すための条件」が、必要です。それは、ループの中をコードが実行されるたびに、判定します。「条件」が、「true/真/正しい」の間は、ループ内のコードは、繰り返されます。

　　　コードを実行させて、「whileループ」がどのように、変数 i を、0 から 2 へ、増やしていくかを見て下さい。

答:　「Run」ボタンを、クリックして、どのように実行されているか、考えてください。

＜2. Take a While ＞
　　　さて、あなたの番です！

　　　「hello」を、2回コンソール画面にプリントする「whileループ」コードを書くために、前回の練習を、お手本にしてください。右のエディタにすでにあるコードを使って、はじめましょう！

　　　ヒントを見る:　ここでは変更するところが2箇所あります。まず、変数が、実行されるごとに増えるようにして下さい。また、2回だけ実行されるような条件が必要です。

答
// エディタ画面
var i = 0;
while (i < 2) {　// ここ！　2-1
console.log( "hello" );
i++　// ここ！　2-2
};
// コンソール画面
hello
hello

＜3. Not So Fast ＞
　　　(まず、右のコードを見て下さい。そして、2行目の、「&& 」は、その両側とも、「true/真/正しい」のときに、初めて、「true」です。)
　　　右のコードの「whileループ」は、その条件のために、決して実行されません。つまり、「変数 times」が、0 なので、「times ＞ 0」は、「false/偽」であり、結局、「times > 0 && times < 3」は、「false」になります。

　　　ループの条件が満たされなければ、コードは、完全に無視されます。

　　　　今このコードを実行させて、「the loop ran」が決して、記録されないことを、確かめてください。

答:　「Run」をクリックするだけ！試しに、「var times = 1;」としてみると、実行されるのが、分かります。

＜4. Do It ＞
　　　もし、ループを少なくとも1回は、実行するようにしたければ、「do/whileループ」を使いましょう。「do/whileループ」は、while の条件が、true/真 であれ、false/偽 であれ、それにはおかまいなしに、少なくとも1回は、そのコードが、実行されることを保証します。

　　右のエディタに書かれた、「do/whileループ」が、4回繰り返されるように、while の、条件を設定してください。

　　ヒントを見る:　「変数 i 」が、0 から 4 まで、増えるようにします。つまり、「i 」が、4 になったとき、「do/whileループ」は、止まるのです。

答:
// エディタ画面
var i = 0;
do {
console.log("This is iteration " + (i + 1) + ".");
i++;
}
while(i < 4);　// ここ！
// コンソール画面
This is iteration 1.
This is iteration 2.
This is iteration 3.
This is iteration 4.

これにて、『Getting Started with Programming 』コース、終了！

引き続き、『FizzBuzz 』コースの始まりです！

【Lesson1　Fizzing and Buzzing 】

? Fizz Buzz って?
●遊び方:
プレイヤーは円状に座る。最初のプレイヤーは「1」と数字を発言する。次のプレイヤーは直前のプレイヤーの次の数字を発言していく。ただし、3で割り切れる場合は 「Fizz」（Bizz Buzz の場合は 「Bizz」）、5で割り切れる場合は 「Buzz」、両者で割り切れる場合は 「Fizz Buzz」 （Bizz Buzz の場合は 「Bizz Buzz」）を数の代わりに発言しなければならない。発言を間違えた者や、ためらった者は脱落となる。
●ゲーム例
ゲームは、以下のとおりに発言が進行する。
　1, 2, Fizz, 4, Buzz, Fizz, 7, 8, Fizz, Buzz, 11, Fizz, 13, 14, Fizz Buzz, 16, 17, Fizz, 19, Buzz, Fizz, 22, 23, Fizz, Buzz, 26, Fizz, 28, 29, Fizz Buzz, 31, 32, Fizz, 34, Buzz, Fizz, ...
＜1. Easy as 1, 2, 3 ＞
　　　「FizzBuzz」は、1 から 20 までを数える子供のためのゲームです。簡単でしょ？
　　　　*ゲームの詳細は、上の説明を見て下さい。

　　　概要です:　「3」で割り切れる数を言う代わりに、「Fizz」と言います。「5」の時は 「Buzz」、「3と5」の両方で割り切れるときは、「FizzBuzz」と言うのです。

　　　「1, 2, Fizz, 4, Buzz ...」てな感じです。

　　　console.log()メソッドを使って、はじめましょう。1 から 20 まで、すべての数をコンソール画面に出力してください。

　　　だけど、順番に表示されないように！― もっと、すばらしい方法を見つけてくれ！

　　　ヒントを見る:　「forループ」を試して下さい。「forループ」の「{ ... } 」の中で、文/コマンド の、終りのしるし「; 」を、忘れないで下さい。

答:
var numbers = 0;
for (i = 0; i < 20; i++) {
numbers++;
console.log(numbers);
}
// コンソール画面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
That's correct! Next Exercise

＜2. Fizz＞
　　　ワンダフル！今や私たちは、数え方は分かってます。では、ゲームを始めましょう！

　　　3 で、割り切れたら、「Fizz」と、出力されるようにして下さい。

　　　そうでなければ、そのまま出力です。

　　　ヒントを見る:　(Fizzになるには、) 「3」が、「1~20」の中で、余りなしで割らなければなりません。「余り」についての扱いは、「here/ここ」を、クリックしてください！

答:
// エディタ画面
var numbers = 0;
for ( i=1; i<=20; i++) {
numbers++;
// if the number is divisible by 3, write "Fizz"
if (numbers % 3 === 0) {
console.log("Fizz");
}
// otherwise, write just the number
else {
console.log(numbers);
}
}
// コンソール画面
1
2
Fizz
4
5
Fizz
7
8
Fizz
10
11
Fizz
13
14
Fizz
16
17
Fizz
19
20
That's correct! Next Exercise

＜3. Buzz＞
　　　あなたは、このチュートリアルを通して、大きくなってます。とってもてきぱきしてるに違いありません。「Fizz」は、ゲットしました。「Buzz」を、加えてみましょう。

Show hint:　You can handle more than two options with an else if statement. Get a reminder here.
　　　ヒントを見る:　「else if 文」で、2つ以上の、他の 選択/アクション/動き/ を、扱えます。それについては「here/ここ」を、参照してください！

答:
// エディタ画面
// Add an else statement in case the number is divisible by 5.
// for the numbers 1 through 20,
for (i=1; i<=20; i++) {
// if the number is divisible by 3, write "Fizz"
if ( i % 3 === 0 ) {
console.log("Fizz");
}
// if the number is divisible by 5, write "Buzz"
else if ( i % 5 === 0) {
console.log("Buzz");
}
// otherwise, write just the number
else {
console.log(i);
}
}
// コンソール画面
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
Fizz
16
17
Fizz
19
Buzz
That's correct! Next Exercise

＜4. FizzBuzz＞
　　　あなたは、fizz すること、buzz することを、同時に、上手く、やってます。

　　　しかし、「15」の位置を、見て下さい。「Fizz」って言ってますね。でも、3 でも、5 でも、割り切れるので、「FizzBuzz」でなきゃだめですね。しまった！

　　　この特別な場合をチェックするために、あなたのコードに、もう1つの「if文」を、加えましょう。

　　　ヒントを見る:　「if文」を、「if文」の中に書くことが出来ます。これを、「nesting/ネスティング」と言います。

答:
// エディタ画面
for (i=1; i<=20; i++) {

if ( i % 3 === 0 ) {
if ( i % 5 === 0) {
console.log("FizzBuzz");
} else {
console.log("Fizz");
}
}

else if ( i % 3 === 0) {
console.log("Fizz");
}

else if ( i % 5 === 0) {
console.log("Buzz");
}
// otherwise, write just the number
else {
console.log(i);
}
}
// コンソール画面
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
That's correct! Next Exercise

＜5. Never Gonna Stop＞

　　　1 ~ 20 までの、FizzBuzz は、クールだ、、でも、もっとクールなのは？それは、1 ~ 100 までの、FizzBuzz だ！？

　　　あなたの、FizzBuzz プログラムを、1 ~ 100 まで、実行されるように、修正してください。

　　　あなたが、本当に、クールになりたかったら、あなたが宣言した変数を、100 になるように、あなたのプログラムの最初のところへ、設定してください。そうすれば、あなたは簡単に、友達に、「FizzBuzzソリューション」で、驚かすことが出来るでしょう。あなたが、たとえものすごく大きな数字を選んでもです。

答:　<4. の、FizzBuzz の、1行目を、「i <= 100 」に、変えるだけです。
// コンソール画面
for (i=1; i<=100; i++) { 　// ここ！

if ( i % 3 === 0 ) {
if ( i % 5 === 0) {
console.log("FizzBuzz");
} else {
console.log("Fizz");
}
}

else if ( i % 3 === 0) {
console.log("Fizz");
}

else if ( i % 5 === 0) {
console.log("Buzz");
}
// otherwise, write just the number
else {
console.log(i);
}
}
// コンソール画面
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz
Fizz
37
38
Fizz
Buzz
41
Fizz
43
44
FizzBuzz
46
47
Fizz
49
Buzz
Fizz
52
53
Fizz
Buzz
56
Fizz
58
59
FizzBuzz
61
62
Fizz
64
Buzz
Fizz
67
68
Fizz
Buzz
71
Fizz
73
74
FizzBuzz
76
77
Fizz
79
Buzz
Fizz
82
83
Fizz
Buzz
86
Fizz
88
89
FizzBuzz
91
92
Fizz
94
Buzz
Fizz
97
98
Fizz
Buzz
That's correct!

// FizzBuzz　・　Lesson1ここまで。

つづく、予定。

投稿: alarky | 2012年1月15日 (日) 22時08分

〔Codecademy ・日本語版〕　・・・　つづき！

岩谷さんへ、
いつもこのブログを使わせていただいて、ありがとうございます。
コメントというよりは、自分の趣味を展開している状態ですが、
やっぱり、岩谷さんのブログ内のほうが、
自分のコンピュータに対する態度を、正しく表現できそうで、安心できるのです。
本当に、いつもありがとうございます。

ものすごく少ないかもしれませんが、読んでいる方へ、
もし質問がありましたら、応えられる保証は出来ませんが、コメントしてください。その場合、コース名、Lessonナンバー、見出しナンバーとタイトル、
例えば、「コース:Functions in JavaScript、　Lesson1:Defining Functions、　＜2．Function＞」 のようにして下さい。それ以外の質問は、多分パスしますので、悪しからず。

今回は、こなす量が多すぎて、第2週、すべてクリアできるか、？？？、まあでも、たとえ半年遅れでも、僕自身、楽しい、おもしろい！ということで、最後まで、やりきる「つもり」でいます。

あと、前回、日本語を避けるべきと、書いたのですが、
コメントについては、大いに日本語を使ってください。
　　// 以下に書く
　または、
　　/*　複数行のコメント */　つまり、
　　/*　コメント１　
　　　 　コメント２
　　　　 ・・・
　　*/
　のように、書きます。
コメント内は、コンピュータは無視します！
それにコメントは、分かりやすくするために書くのですから。

あとひとつ！文字列「"文字列"」も、文字化けしない限り、OKです。
それ以外は、やめた方が、無難です。

僕も、この件に関して、よく分からない/完全に説明できないので、どうしても知りたい方は、
調べてください。でも、今の時点では、大きな問題ではないですよね。

表記について、「タブ/tab　・・・　■」とします。
　　// 「しかく」を、変換しています。
そうすれば、を、「半角空白文字4つ など」に、置換すれば、
コピーしたコードを、実行できるからです。
このブログでは、タブ/tab は、たいていの部分、トリムされるのですが、
見た目に、分かりやすくするための工夫として考えました。

「メソッド」および「関数」は、「なになに()/xxx()」で、表記します。　・・・　「() 」を付けると言うこと。

『Functions in JavaScript 』コース
　// function　・・・　関数

【Lesson 1 ・Defining Functions 】
　// 関数の定義

＜1. Introduction＞
　「関数」は、ある実行を、再利用するために、いわゆるセーブされた、コードの塊(かたまり)だ。何度でも、利用できるから便利なんだ。「関数」を定義するために、変数を宣言したときのように、「var」という言葉を使います。
　　*JavaScript に於いて、「関数」と「メソッド」は、別なようです。なので、標準的な使われ方に合わせようと思っています。また、「関数」と「メソッド」の違いは、まだ僕も分かりません。おいおい分かってきたら、そのことについても触れていこうと思っています。

　1行目を見て下さい。「hello」と言う名の「関数」を定義しています。この関数は何をするんでしょうか？3行目が、私たちに教えてくれます。console.log()を使って、「i am saying hello」と、コンソール画面にプリントするのです。

　でも、ここでやめちゃ～何も起こりませんよ。「hello関数」を「呼ば」ないと。6行目で、hello()関数 を呼んでいるのを見て下さい。この意味は、hello()関数 の中の、「すべてのコード」を、実行してください、と言っているのです。＜言い換えれば、hello()関数 の中の 「{」~ 「}」に書かれてあるコードを全部実行すると言うことです。＞
　　*　・・・　もっとも、この例は、1行しかないので、関数にする意味を疑ってしまいますが。あくまで、説明のためです、でも、2行になっていたほうが、分かりやすいような気はするけど。

　それで、1回だけ呼んでみると、「i am saying hello」が、コンソールに1回だけプリントされるという結果になるでしょう。

　では、問題です。「i am saying hello」を2回プリントされるようにして下さい。

　ヒントを見る:　6行目の、「hello関数」の「呼び出し」を、見て下さい。もう一回呼べば、上手くいくかも？

　覚えましょう！:　2行目の 「//」 の後の文は、コードが何をやっているかを、普通の言語/言葉/英語/日本語/など で、説明している、いわゆる/ただの＜しかし大切な習慣です＞、「コメント」です。
　コンピュータは、(本来動くべき)コードたちに、影響を与えないよう、無視します！

解答例:　7行目に、hello();　を、追加するだけ、です。

＜2. Function＞　・・・　関数/機能/働き/作用/効用
　よく出来ました。「関数」は、JavaScript では、『function 』という、「予約語/キーワード」を使って定義されます。引き続き、
　　1. 「(　)　・・・　丸括弧 」が、来ます。次のLesson2 ＜5. Parameters＞で、どんな風に使われるかを説明しています。
　　2. 波括弧の中に、アクション＜関数のふるまい＞が、書かれます。 ・・・　{ アクション/関数のふるまい }
　　3. セミコロン・・・「; 」・・・について:　{ 関数のふるまい × ~回 } ~回の 文/アクション、一つ一つの後に、「; 」を付けて下さい。　そして、中括弧を閉じた後に、付けます。　・・・　{ アクション01;　アクション02;　...　アクション09;　... };　。
　　　*予約語　・・・　変数名や関数名、またオブジェクト名として使用してはいけない、言葉/a word/単語。

　「関数」を「定義」する際の「上記のルール」は、絶対です。コンピュータは、タイプミスや、スペルの間違いなど＜キーワード/予約語＞は、ぜ～ったいに、大目には見てくれません。コンピュータには、融通が利かないのです。

　アリスは、「hi 」という名前の関数を使って、コンソール画面に、「hi 」と、プリント/表示 しようと、何回もトライしてみました。しかし、上手くいきません。

　アリスに彼女が書いた「関数」のどこが間違っているかを、教えてあげてください。上記の「1. ~ 3. のルール」は、ちゃんと守ってますか？タイプミスやスペルミスは？コードを修正して、動くようにしてください。

　ヒントを見る:　その関数がどう見えるべきか/あなただったらどう書くか 書いてみてください。それで、あなたのコードと彼女のコードを見比べてください。

解答例:
var hi = funtcion () {　// 1行目
　// ファンクション・function のスペルミス
function が正しい！

《ちょっと解説》
function は、予約語/キーワード
なので、スペルミスは、許されません。
もし、「"hi"」 を、「"hai"」 としても、
プログラムは動きますが、
逆に、間違いは、見過ごされたままです。
すべての間違いが、チェックされるわけではありません。
それは、いわゆる「バグ」です。
もっと、しつこく言うと、コンピュータにとっては、「バグ」ではなく、
人間側から見ると、「バグ」になるのです。

＜3. My first function＞
　あなた、進歩してますよ。今ままでの学習で、あなたは、「関数」の「定義」のやり方、そして「呼び出し方」を、知ってるはずです。

　「myFirstFunction/私が最初に作った関数」を定義して、その関数に、あなたの名前を、コンソール画面にプリントさせて下さい。
　　console.log("yourName/あなたの名前");　　、を使います。

　最初に、「関数/myFirstFunction」を定義し、
　次に、「関数」を「呼び出し」、実行してください。

　ヒントを見る:　最初に構文を思い出すために、そのコードを手書きで書いてみましょう。あなたに「関数」の構文を思い出してもらうために、ここに！何にもしない関数！「empty/空っぽ」を示します。
　　『var empty = function () {}; 』

解答例:
// エディタ画面
var myFirstFunction =function(){
■console.log("YourName");
};
myFirstFunction();
// コンソール画面
YourName
　// That's correct! Next Exercise

＜4. Fix me!＞
　あなたの「初めての関数」を、絶対忘れないで！

　あら残念、ボブがいなくなっちゃった。まだ「関数」を、覚えてないのに！右のエディタに、大きなコードの塊(かたまり)があります。その大きさはちょっと、すごいですね/引いちゃいますね＜実行される「量」に対してのコードが大きすぎるという、ブラックユーモアな感じ＞。10~14行 のコードが、18~22行 でも、繰り返されてますね＜テキストエディタに、コードをドラッグして、コピーしたのを貼り付けて見たほうが、見やすいでしょう、JavaScript用の設定にすれば、色分けもしてくれる、これはちょっと調べる価値がありますよ、EmEditor は、僕はまあベスト＞。「関数」を使えば、全体をもっとシンプルに出来ます。

　その繰り返しの部分では、何をしていますか？「name」「firstLetter」「fullName」という変数が使われています。最初の文字を、大文字にして、「fullName」に、代入しています。
　　*〔コードで解説〕
1行目:　var fullName = "";
　// 中身のない、文字列＜空文字列＞を、宣言。
2行目:　var name;　// 変数の宣言
3行目:　var firstLetter;　// 変数の宣言
8行目:　prompt();　// Getting Started with Programming ≫ Lesson 6 ＜3. Prompting＞を、参照してください。ここで何を促しているかは、「あなたの、名前(ファーストネーム)を、「小文字」で、入力してください。ローマ字で入力してください。」です。ひらがなや、漢字でも、プログラムは動きましたが、僕には、アルゴリズムを説明できません。
11行目:　firstLetter = name.substring(0,1);
　// 「マーカー」0~1、つまり、最初の文字のみを、返します。
12行目:　name = firstLetter.toUpperCase() + name.substring(1);
　// 早い話が、最初の小文字を大文字に変えています。詳細は、まず、さっきの「firstLetter」の値である、名前の最初の文字を、大文字に変えています＜toUpperCase()＞。それに名前の最初の文字を取り除いた文字列を、足しているのです＜substring(スタート位置,終わりの位置)で、「終りの位置」がない場合、スタート位置以降のすべての文字列を返します、つまり、最初の文字を取った名前＞。ここで、文字を、足すことなんか出来る？と言う疑問をもつ人も、多いと思いますが、出来るようですね。ちなみに、Java でも、文字列は、「特別扱い」されていて、足し算できます。しかし、引き算ってのは聞いたことがないな？試してみたらどうでしょうか。掛け算、割り算も、出来たらいいのに？自分でそういう関数を作れば、もちろんあり得ます。あっ、でも、文字列の割り算って何？
13行目:　fullName = fullname + " " ＋name
　// これを書き換えると、
　// '''' + " " ＋「名前の最初の文字が大文字、後が小文字」
　// つまり、fullName の、値は、「□Xxxx...」です。□は、半角空白文字は、目に見えないので、「イメージのつもり」です。
16行目:　prompt();　// 「あなたの名字をすべて小文字で入力してください。ローマ字で。」
18~20行目:　11~13行目とコードは全く同じ。
24行目:　「(And your full name is:)したがって あなたの フルネームは:□Xxx...□Yyy...」ということですね。

　さて、あなたにはやって欲しい事が、た～くさんあります。
　　1) 「fixName function definition should go here : 「fixName」と言う関数の定義を、ここから書きはじめる」の下、7行目から、書いてください。
　　2) 「繰り返されるコード(10~14行目のコード) 」を、コピーして、関数の、「実行内容/{ }の中」に、貼り付けてください。＜コピーのやり方は、グーグルなどで、検索してください＞
　　3) そして、もう、「その繰り返されるコードのかたまり」は、不要です。2つとも消しましょう。
　　4) それぞれの、「name = prompt("名前の入力を促す呼びかけ"); 」の後に、あなたが今書いた、fixName()関数を、置いてください。

　これは、同じコードを何度も何度も書くよりも、効果的だということを、示したんです。やったね！

　ヒントを見る:　「fixName 関数」を、2回呼びます。それぞれの、name = prompt("..."); の後に、1回ずつです。効果的に、同じコードのかたまりを2回繰り返すために、fixName()を呼び出しているのです。
　　*この例では、コードの量は、余り違わないのですが、効果的なのは、分かりますよね。例えば、出席者全員に、入力してもらうと言うようなプログラムの場合などなど。

　注意：　関数が書かれている行では、何も起きません！起きるのは、「注文」があって初めて、実行されるのです。　・・・　関数の呼び出しがなければ、実行は、ないと言うこと。

解答例:
// エディタ画面
var fullName = "";
var name;
var firstLetter;
/*
fixName function definition should go here.
*/
var fixName = function(){
■/***** Begin repeated code block *****/
■firstLetter = name.substring(0, 1);
■name = firstLetter.toUpperCase() + name.substring(1);
■fullName = fullName + " " + name;
■/***** End repeated code block *****/
};

name = prompt("Enter your first name (all in lower case):");
fixName();

name = prompt("Enter your second name (all in lower case):");
fixName();

console.log("And your full name is:" + fullName);
// コンソール画面
And your full name is: Bob Marley

　// That's correct!
　// You've completed this lesson! Start the next one.

【 Functions in JavaScript ≫ Lesson 2　】
＜1. Ahoy matey! ＞
　今度は、「変数」を、関数の「中」に持ってきましょう。

　先週、私たちは、変数の宣言、値の変数への 割り当て/代入 を習いました。

　変数「greeting」を宣言し、値を、「"Ahoy" 」にして下さい。
　　*greeting　・・・　(名) 挨拶; 挨拶のことば; 挨拶状（相手に手紙などで送る）　　|　　ahoy　・・・　(間) おおい, 呼ぶときや挨拶するときに使う言葉（海事）

　ヒントを見る:　「var」は「関数の定義」、「変数の宣言」で、使います。変数に値を代入するとき、「=」と「===」のどちらを使いますか？

　「Getting Started with Programming コース」のリンクです、復習したい方はどうぞ。

解答例:
// エディタ画面
var greeting = "Ahoy";
// コンソール画面
　// That's correct! Next Exercise

＜2. Thou shalt greet＞
　あなたは、確かに、変数を、「宣言しました」。そして、関数を、定義するとします。関数は、「前に」宣言された変数を利用できます。

　実際に、関数は、関数が呼ばれる「前に」宣言した変数は、なんでも、使うことが出来るのです。と言うことは、「変数」はなにも、「関数を定義する前に」宣言されている必要はないのです。「関数」が呼び出せれる、直前でもいいのです。

　右側のエディタ画面には、前回のエクササイズで宣言した変数「greeting」があります。

　あなたのための、課題/ミッション が2つあります。

　1つ目、「greet」という名前の関数を定義し、「greeting」の値を、コンソールに表示してください。

　2つ目、その関数を呼び出してください。

　ヒントを見る:　この関数の、本体/ボディー( {　ここ　} ) には、「console.log(greeting); 」が、含まれます。

　関数の「呼び出し」を忘れないで！

解答例:
// エディタ画面
var greeting = "Ahoy";

var greet = function() {
■console.log(greeting);
};

greet();
// コンソール画面
Ahoy
　// That's correct! Next Exercise

つづく、多分、明日のミッドナイトに、アップするでしょう。

投稿: alarky | 2012年1月22日 (日) 00時05分

〔Codecademy ・日本語版〕　・・・　つづき！

＜3. Domesticate＞
　いい調子ですよ。

　「関数」の外で宣言された変数は、「グローバル変数」で、一度宣言したら、そのプログラムの中の「どこからでも」アクセスできます。
　　*グローバル　・・・　global　・・・　(形容詞)〔コンピュータ〕広域の, 大域の, グローバルな, 地球的な, (プログラム・ファイルなどの)全域にわたる [関する].

　右上の、3行目から始まる「greet関数」を見て下さい。その関数の中で、「ふたたび」、「greeting変数」を、宣言していますね！・・・5行目。

　問題はです、、「greet関数」を、呼び出したとき、コンソール画面に表示されるのは、どっちの変数だと思います？

　同じ名前の「greeting変数」ですが、コンソール画面に表示されるのは、「グローバル変数」の「"Ahoy"」それとも、「ローカル変数」の「"hello"」？　その理由は、分かりますか？

　「greet関数」を、呼んでみて下さい、さて、コンソール画面に出力されたのは？

　ヒントを見る:　関数を呼ぶためには、「ペアの丸カッコを後ろに従えた」関数の名前を使ってください。　・・・　greet()
　　*ペアの丸カッコ　・・・　「( )」です。

解答例：
// エディタ画面
greet();　// 最後に付け足すだけです。
// コンソール画面
Hello
　// That's correct! Next Exercise

＜4. Sometimes change is bad＞
　見ましたね、"Ahoy"ではなく、"Hello"を！なぜなら、「greet関数」は、その中のコードの、「ローカル変数」に、アクセスしているのですから。「greet関数」を、呼び出せば、その関数の中のコードが実行されるのです。その関数の中では、2つのコードが実行されます。

　a) ローカル変数 greeting を宣言し、値に、"Hello"を、代入します。
　b) コンソール画面に、その ローカル変数 の値を、出力します。

　ここで疑問が1つ起こります。「ローカル変数 ・greeting」に、"Hello" という値を代入したことによって、「グローバル変数」の値を変えたことになるのか？

　greet関数を、呼んだ後、10行目にコードを書いて、コンソール画面に、「グローバル変数 ・greeting」を、出力してください。そして何が出力されるかよく見て下さい。

　ヒントを見る:　覚えてますね！コンソール画面に出力するには、「console.log() 」を使います。「( ) 」内に、渡したものは、なんでも、プリント/出力 します。

解答例:
// エディタ画面
var greeting = "Ahoy　・　グローバル変数";

var greet = function () {
■// Local greeting variable.
■var greeting = "Hello　・　ローカル変数";
■console.log(greeting);
};

greet();
console.log(greeting);
// コンソール画面
Hello　・　ローカル変数
Ahoy　・　グローバル変数
　// That's correct! Next Exercise

＜5. Parameters＞
　「関数」は、いろんなものを渡せる「引数」を、含めてもかまいません。「引数」は、「関数」に対して、投入する ''材料/素材'' だと考えられます。その引数は、関数の中で、あたかも、「ローカル変数のように」振る舞います。予約語/キーワード function の後の、丸カッコ/( ) の中に、渡しましょう。

　引数は、本当に、効果的です。いろんな引数を使って、あなたは、それを材料にした処理することができるのです。ここでは、誰の名前でも、引数にして、「やあ、～さん」と、あいさつできます。

　1行目に、「sayHelloTo 関数」があります。そして、#文字列の変数# name を、引数 として受け取ります。この関数の処理は、2行目のコードが、その変数 name の値の文字列 へのあいさつを、コンソール画面の中にプリントします。
　　#どこにも、変数が、文字列だという保証はないのに、オリジナルの文で、文字列/string だと言っている。スクラッチパッドで、試しに、引数に数値「5」を、渡して実行してみた。そうしたら、「Hello 5」と、答えてくれた。どこかで文字列に、変数の種類の変換がなされたと言うことだと思うが、Java とか知っている人が、変数の宣言時に、タイプ/変数の種類 を、宣言してないのを、なんかなじめないと思うかもしれません。僕もそうですが、とにかく、コンティニュー/continue/続けれ ば、分かってくると思いますので、今は、棚上げしておきましょう！

　5行目で、「sayHelloTo 関数」を、呼び出しました。sayHelloTo の後の「( ) 」の中に、すでに何かがあるのが分かりますね。これが、「引数」なのです。それは、あり得る引数のひとつに過ぎません。ここでは、引数として、私の名前を渡したのです。

　問題です、6行目に、あなたに、やあって、呼びかける、つまり、「Hello "あなたの名前"」って、コンソール画面に出力する、コードをタイプして下さい。そうするためには、その関数を呼び出し、引数としてあなたの名前を渡して下さい。

　ヒントを見る:　まず、関数の名前をタイプします。そして、引数を渡すために、引数と一緒に、丸カッコをタイプして下さい。

解答例:
// エディタ画面
var sayHelloTo = function (name) {
■console.log("Hello " + name);
};

sayHelloTo("Amjad");
sayHelloTo("alarky");
// コンソール画面
Hello Amjad
Hello alarky
　// That's correct! Next Exercise

＜6. Recap＞の予告　・・・　次回は、アクセスできない変数に、アクセスしようとして、エラーが起きると言う話です。「グローバル変数」と「ローカル変数」の理解に役立つと思います。

続きは、来週末に、アップする「予定」です。

投稿: alarky | 2012年1月22日 (日) 23時49分

Codecademy,　JapaneseVersion,　it's continued.

＜6. Recap＞
前のエクササイズで、「グローバル変数」と「関数の中のローカル変数」を、宣言しました。そのエクササイズで、次のことが分かります。

《復習:　＜4. Sometimes change is bad＞でのコード》
// エディタ画面
var greeting = "Ahoy　・　グローバル変数";

var greet = function () {
■// Local greeting variable.
■var greeting = "Hello　・　ローカル変数";
■console.log(greeting);
};

greet();
console.log(greeting);

// コンソール画面
Hello　・　ローカル変数
Ahoy　・　グローバル変数
// That's correct! Next Exercise
《復習、ここまで。》

　1. 「グローバル変数」は、そのプログラムの中ならどこからでも、アクセスできる。

　2. 「ローカル変数」は、それが宣言されている関数内でのみ、アクセスできる。

「アクセスできる」と言うのは、変数を使える、場所/アドレス を、参照できることです。
　*もっと具体的な話では、{ の中 } に、アクセスするためには、一工夫必要だが、グローバル変数にアクセスするのは、簡単ということ。「{ 」と「} 」の間は、「例えば、ナンバーキーのついた箱」 の中だと考えてみたらどうでしょう。すくなくとも、アクセスするひとつの方法は、それを含む関数の呼び出しでしたよね。

アクセスの「しやすさ」は、変数の「スコープ」によって決まります。例えば、グローバル レベルでアクセスできる変数は、グローバルな「スコープ」を、持っていると言い、プログラムのどこからでもアクセスできます。
　*スコープ/scope　・・・　直接、変数にアクセスできる範囲のこと。

ローカルなレベルのアクセスをもった変数のスコープは、ローカルな範囲、つまり、その変数がある、関数の中になります。そして、直接的には、その関数の中で使われます。
　*なんか回りくどい説明だが、関数の中で宣言されている、変数は、「ローカル変数」と言い、「スコープ/アクセス範囲」 も、その中だ、と言うこと。

コードとコメントを注意深く、隅々まで読んで、次のレッスンに進むために、そのコードを実行してみてください。

「グローバル変数」と「ローカル変数」の違いを、理解したと思ったら、(結果を予想しつつ、) コードを実行してください。どうして、「ReferenceError/参照エラー」が、現れるのでしょうか？
　*参照エラー　・・・　ReferenceError　・・・　目的の変数が、ありません！、、と言っています。
20行目で、「変数myName」を、コンソール画面に、プリント/出力　したがっています。しかし、「myName」は、ローカル変数で、グローバル変数ではありません。「myName」には、greet()関数の中でしか、アクセス/参照 出来ないのです。それが、コンソール画面での、コンピュータの「発言/文句/警告/注意」、「myName is not defined　:　myName は、(この場合,グローバル変数として) 定義されていません」 の、理由です。

解答例/と言うよりコードの解説:
// エディタ画面　　　　// 文字記号のみ変更しました。
/* Start global variable ^greeting^ scope */
// 「グローバル変数 greeting」の「スコープ」はじまり.
var greeting = "Ahoy";

var greet = function () {
■/* Start local variable ^greeting^ scope */
■// 「ローカル変数 greeting」の「スコープ」はじまり.
■var greeting = "Hello";

■/* Start local variable ^myName^ scope */
■// 「ローカル変数 myName」の「スコープ」はじまり.
■var myName = prompt("Input your name: ");

■console.log(greeting + " " + myName);

/* End local variables ^myName^ and ^greeting^ scope */
// 「ローカル変数 myName と greeting」の「スコープ」終り.
};

greet();

// This will produce a ^ReferenceError^ since we are out of the ^myName^ variable scope.
//// 「変数 myName」のスコープの「外」で、それを呼び出しているので、「ReferenceError」になるでしょう。
console.log(myName); // オリジナルでの、20行目。　エラーの原因、この行の頭に、「// 」と、タイプすれば、このコードは、実行できます。　・・・　これを、「コメントアウト」と言います。

// コンソール画面
ReferenceError: myName is not defined
// 参照エラー: myName は、定義されていません。
// やはり、JavaScript でも、コンピュータのメッセージは、不親切ですね。理由などは、詳細を知らないので、控えさせてください。
That's correct!You've completed this lesson! Start the next one.
// OK!　このレッスンは、終了です。次へ、Let's go！

今回は、少ないですが、ここまでです。
もはや、本来のレッスンペースに追いつくのは、無理そうですが、
遅らせながらも、続ける「予定」です。
う～ん、あまりたとえはよくないですが、今の僕にとって、Codecademy を止めるのは、タバコを止めるのより難しそう！例えばの話。

次回は、ウイークエンド＆スタート に、アップの「予定」です。
Codecademy自体の人気を考えたら、少しは、読んでいらっしゃる方がいると思います。Let's enjoy!

投稿: alarky | 2012年1月29日 (日) 10時29分

Codecademy is the most comfortable way to learn how to write codes. Just write your dream and imagination!

今回、訳していて思ったのは、英語を、余りに忠実に訳すと　・・・　言うほど正確に自分ができるかどうかは別として　・・・　日本語として、分かりにくいので、思い切って、「意味＜結局何が言いたいのか＞中心」で訳すことにしました。こういう考えに至った根本は、岩谷さんの「ビートルズ詩集」の、はじめにORおわりに　の部分を読んで、「あっ、そうなんだなあ」と思ったことが、第一因です。、、、土台が、英語的感覚のない、日本語/日本人　に、「パーフェクトな翻訳」など、ありえません！　また、この文章自体、たまに、ユーモアやジョークもありますが、目的は、JavaScript の、理解と習得ですからね。
あと、気をつけようと思うのは、Java のことを、あ～だ、こ～だ 言うのは、やめようと思います、、言いたいけど、話が紛らわしくなるだけで、前向きな話にはならなさそう、またここで言うことではなさそうです。

【Section 3 : Return 】
＜1. Introduction ＞
関数は、値を受け取ることも出来ます。そして、「返し値」のために、それを使います。
　◎ 返し値　・・・　「戻り値」と言う言い方のほうが多いが、それは、プログラマが「意図的」に返すのだから、「返し値」と言う言い方のほうが、しっくりくるので。「用語」ってのは、ぜ～ったいに、直した方がいいものが、多々ある。絶対的に、このことに関しては、自信を持って言えるが、今はそんなことを言っている場合じゃないわ。

''たいていの場合''、関数は、「引数」というものを、加工/計算　して、「返し値」にするために、取り込むのです。その、''たいていの場合''は、「返し値」を、ゲットするために、関数を呼び出します。

このセクションのポイントは、「リターン/return」と言う「キーワード」です。このキーワードは、関数の中で、使われます。「何がしかの値」を、「返す」ときに使われるのです。

例として、右のエディタを見て下さい。この「identity function / そのまんまお返しします 関数」は、その名の通り、「引数」と「返し値」の値が、同じです。覚えましょう！、、「引数」とは、目的の「返し値」を、ゲットするために、使う値です。
　◎ 仮に引数として、「お気に入りの服」を、「クリーニング関数」に入れたら、ピカピカになって返って来ますし、「シュレッダー関数」に、もし間違えて入れてしまったら、ボロボロになって返って来ることでしょう。　・・・　フィクションです、一応注。この手のフィクションは、よくありますので、真剣に考えないでね。

何か適当な数字を、引数として渡して、「identity function」を、呼んでください。その「identity function / そのまんまお返しします関数」は、何を返す？

ヒントを見る:　関数を呼び出すために、「( ) 」を後に従えた、関数の名前を書いてください。（例:　関数の名前( )　）
関数に引数を渡しましょう。（例:　関数名(1 などの数字)　）

解答例:
// エディタ画面
identity(2);

＜2.Square ＞
プログラム用の言語ではなく、普通の言い方では、「自乗/２乗 する事」を、「正方形の面積を求めなさい」とか、「自乗する」のように言います。

普通の言語のように、JavaScript も、ひとつの言語であり、それを表現する方法を持っています。そして「２乗する」するためには、関数を使います。

右エディタ画面の「identity()関数」を、関数の書き方の参考にして、「square()関数」を、定義してください。あなたは、「引数を２乗した数」を返すコードを、書かなければなりません！

ヒントを見る:　「x 」の２乗は、「x * x 」です。そして、その値を返すために、「return キーワード」の後ろに、(JavaScript用の) 文や値を、書いてください。

解答例:
// エディタ画面
var identity = function (x) {
■return x;
};

var square = function(x) {　//ここから
■return x * x;
};■//ここまで。

square(3);　// 実行例、オプション

＜3. More on return ＞
関数を、「処理/加工 する方法の定義」だと考えてください。その一連の処理では、「引き取り」があり、「お返し」があります。また、「return キーワード」は、関数の中に書かれているコードの処理を終える方法だと考えましょう。

ボブは、「identity()関数」を、分かってなく、いつでも「1 」が、返されるように定義してしまいました。そこへ、アリスがやって来て、その関数を直そうとしました。しかしながら、彼女は、「return キーワード」が、どんな風にコードの中ではたらくのかを知らなかったので、相変わらず、その関数は、「1 」を返しています。

アリスとボブのために、「identity()関数」を、その関数の引数自身が返されるように、直して下さい。

ヒントを見る:　要らないコードがあるかも！

解答例:
// エディタ画面
var identity = function (x) {
// return 1;　　// ←のように、コメントアウトするか、削除する。
return x;
};

identity(4); // 確認のため。

＜4. Branch and return ＞
１行目から始まっている「isOdd()関数 / 奇数ですか? 関数」は、「n 」を引数とし、「boolean / ブーリアン・タイプ」の「true か false」を、返します。「はい/true」と返せば、奇数で、「いいえ/false」と返せば、奇数ではありません。
　◎ ブーリアン/boolean　・・・　変数の１つで、true/真、false/偽 という値があります。

「isEven()関数 / 偶数ですか? 関数」を、定義して下さい。同じく「n 」を、引数とし、偶数かどうかを、「ブーリアン/boolean」で、返します。

console.log()メソッドも、同様に使い、「isOdd()関数」を「isEven関数」に、変えてください。

「isOdd()関数」を、見本にして、書き換えましょう。「if-else文」が使われていることを、お見逃しなく！
「%演算子/剰余演算子」について、忘れてしまっていたら、「here/ここ」をクリック。

解答例
// エディタ画面
//var isOdd = function (n) {
// if (n % 2 === 0) {
// return false;
// } else {
// return true;
// }
//};

// 元の関数をコメントアウトし、　・・・　そのまま残すのは、後々見づらいと思うから。
// コードの意味を考えながら、まねて、書いてみるのが、簡単な方法です。
var isEven = function(n) {
■if (n % 2 === 0) {
■■return true;
■} else {
■■return false;
■}
};

console.log(isEven(1));■■// Odd ⇒ Even、３行とも。
console.log(isEven(2));
console.log(isEven(999));

// コンソール画面
false
true
false

＜5. The lost numbers ＞
さて、私たちが学習した「配列/array」と「ループ/loop」の両方を、使うときがやってきました。

１行目で　''失なわれたナンバー''を、含む / 0 からスタートして順番が欠けた　「lost 配列」が、定義されています。２行目で、変数「count」が宣言され、「lost 配列」 の長さが、割り当てられます。その長さは、「6」です。
　◎ 「.length」　・・・　文字列の長さ、配列の長さを調べられる。他にも調べられるものが１つあったが、まだ未学習なので不明です。これはですね、いったいメソッドか関数かと言われても、なんで()が、ないのかと言われても、? です。使い方を、丸暗記しましょう！

「isLost()関数」を使って、ある数が、''失われたナンバー'' か、そうでないかを調べます。

「forループ」を使って、「lost配列」を、ループしましょう。「forループ」に関して、復習したい方は、「exercise」を、クリックしてください。リンクへ、ジャンプします。

「forループ文」の難しいところは、for の後の「( ) 」の中に、何を書いたらいいかですね。

「変数 n 」、「ブーリアン・タイプの変数、true/false 」を、使って、「isLost関数」の定義を完成させて下さい。この関数は、「lost配列」において、''失われている数値か?'' を、教えてくれます。

ヒントを見る:　「forループ」の、「for 」の後の、「( ) 」には、次に説明する、a), b), c) が、入ります。
　　a) 初期化式　・・・　i = 0;
　　b) 条件を満たしているかチェック　・・・　配列の、すべての「インデックス」を、調べるために、変数「i 」の、値を変化させながら、コードを反復実行します。そのとき「i 」の値が、条件をまだ満たしているかを調べるのです。また、「インデックス」は、「0 」スタートです。この仕組みは、よ～く復習しておいて下さい。

「lost[0] 」の値が、配列lost の、一番最初のメンバーである数字です。＜ここでは、4 です＞　「lost[5] 」が、６番目の数字です。＜42 ＞　そして、私たちが「forループ」でやりたいことは、「引数 n 」が、lost[0] から始まって、lost[5] までの間に、在るのかを、調べたいのです。つまり、「i < 6 」のとき、ループするのを、止めなければいけません。　・・・　変数 count で、長さを調べています。
　　c) 「i 」の値を増やすことが、必要です！　「i++ 」が、3つ目に書くべきことです。

解答例:
// エディタ画面
var lost = [4, 8, 15, 16, 23, 42];
var count = lost.length;

var isLost = function (n) {
■for (i = 0; i < count; i++) {■//ここ！
■■if ( n === lost[i]) {
■■return true;■//ここ！
■■}
■}
■return false;■//ここ！
};

if ( isLost(12) ) {
■console.log('12 is a lost number');
}

if ( isLost(16) ) {
■console.log('16 is a lost number');
}

// コンソール画面
16 is a lost number

『Functions in JavaScript ≫ Section 4 』

<1. Function calls as values>
関数の呼び出し時、その返し値は、その関数呼び出しの、ひとつの結果となり得ますが、その結果の値を、JavaScript のコードの中で使われる１つの値のように、扱うことも出来ます。　・・・　値を返す以外の役割を持つ関数もあるので、「ひとつの結果」だ。

右のエディタの、「if文」を、見て下さい。数値 4 を、引数とした「quarter()関数」の結果と、数値 1 とを、比べています。
　　？＜If you look at the if statement on your right.　・・・　帰結節のない、if文(英語として)、ググっても、見つけられなかった？会話では、ありうるんでしょう。または、「if statement 」と、韻を踏んでいるのか？＞

「if文」が、条件を満たす/trueを返す　ために、引数の数値の 4分の1 を返す＜つまり、関数の中で、「return hikisuuNoSuuti/4; 」が書かれている＞、「quarter()関数」を、宣言してください。そして、コンソール画面に、「The statement is true. : if文の条件は正しい。」を、プリントさせて下さい。(console.log()を、使いましょう)

ヒントを見る:　引き数を一つ持つ関数です。コードの内容は、returnキーワード を使うこと、そして、引き数を 4 で、割って下さい。

解答例:
// エディタ画面
// Define quarter here.　・・・　ここに、quarter()関数を、定義します。
var quarter = function(HikisuuNoSuuti) { // ここ！
■return HikisuuNoSuuti/4; // ここ！
}; // ここ！

if (quarter(4) === 1) {
■console.log("The statement is true.");
} else {
■console.log("The statement is false.");
}

// コンソール画面
The statement is true.

・・・つづく、明日も、アップの予定です。時間は遅くなります。

投稿: alarky | 2012年2月 5日 (日) 00時11分

Codecademy is the most comfortable way to learn how to write codes. Everyone would write codes in the near future!

＜2. Cube ＞
よくやったね！

ではでは、今度は、「cube()関数/立方体(3乗)関数」を、定義してみてください。何でもいいのである数字を引数にとると、その「キューブの体積/3乗」を返すような関数です。

解答例:
// エディタ画面
var cube = function(ippen) { // ippen　・・・　一辺 (立方体の一辺　・・・　ローマ字　・・・　x や a とかにするより、後から見たとき思い出しやすいのだ、具体的な名前の方が！)
■return ippen * ippen * ippen;
};

// 関数の実行テスト
cube(5);

// コンソール画面
==> 125

＜3. Squares n' cubes ＞
ナイスクリア！

さて、今度は、ある関数を、ほかの関数の中でどんな風に使うのかというのを、お見せしようと思います。

例えば、3乗することについてですが、3乗することは、その数字を、2乗した数字にかけることと同じだ、言うことが出来ます。
　◎ to cube ...　―　副詞用法、　(to) multiply it ...　―　名詞用法((口語))、　という解釈で、和訳を考えました。

「cube()関数/3乗する関数」を、そのコードの中で、「square()関数/2乗する関数」を呼び出し、それを、3乗するためのステップの1つとして使うような関数に変更して下さい。

ヒントを見る:　「square()関数」を、「cube()関数」の一部として呼び出すとき、引き数を渡さなければいけませんよ。

解答例:
// エディタ画面
var square = function (x) {
■return x * x;
};

var cube = function (x) {
// return x * x * x;
//　上記をコメントアウトし、書き換える。
■return square(x) * x;
};

cube(6);

// コンソール画面
==> 216

＜4. What not ＞
いいね、いいね！

今や、僕らは、ニーズがあれば、どんな所でも、、たとえ違う関数の中であろうと、関数を使えるようになりましたよね。

ここに、「isMultipleOfThree()関数/3の倍数ですか? 関数」を、定義しました。引数の数値が、3の倍数なのかをチェックします。

「isNotMultipleOfThree()関数/3の倍数ではないですか? 関数」は、前のとは、反対のことを調べます。それで、「isMultipleOfThree()関数」を、利用して、定義したのですが、、、なんか変？

「isNotMultipleOfThree()関数」を、「isMultipleOfThree()関数」と反対の働きをするように、直して下さい。サービスヒントです、、「一文字」を使うだけ。

ヒントを見る:　2つの関数の関係は？正反対のことを調べていますね。つまり、「でない ! もう一方の関数」ですね。
　◎ 今までには、習ってませんよ !

覚えましょう！　・・・　「でない ! 」にするには、「! 」を、使います！

解答例:
// エディタ画面
var isMultipleOfThree = function (x) {
■return x % 3 === 0;
};

var isNotMultipleOfThree = function (x) {
■return !isMultipleOfThree(x); // ここ！
};

// テストしてみます。
isNotMultipleOfThree(7);

// コンソール画面
==> true

＜5. Even is not odd ＞
「セクション３ ＜4. Branch and return ＞」の、「isOdd()関数/奇数ですか? 関数」と、「isEven()関数/偶数ですか? 関数」を、覚えてますか？

もう一度、そのコードをここで書いてほしいのです。でも今回は、「! 」を、使ってください。そして一方の関数を利用して書くのです。

最初に、「isOdd()関数」を、定義して下さい。そして、その関数を使って、「isEven()関数」を、定義して下さい。

「isOdd()関数」を定義するには、、a) b) を、よく読んでくださいね。

　　a) 「%,剰余演算子」を使います。
　　b) 「if-else文」を、書きます。

解答例
// エディタ画面
var isOdd = function(number) {
■if(number % 2 === 0) {
■■return false;
■} else {
■■return true;
■}
};

var isEven = function(number) {
■if(!isOdd(number)) {
■■return true;
■} else {
■■return false;
■}
};

// Check a number in real time!　・ リアルタイムにチェック！
isEven(prompt("Would you input a number you guess now?")); // 今思った数字を入力して下さい。

// コンソール画面
==> false

『Functions in JavaScript ≫ Section 5 ・Understanding parameters 』

＜1. Let there be more! ＞
私たちはすでに、関数の中で、ローカル変数を定義できること、そして、関数の引数にどうやって変数を渡すかについて、学んできました。
　◎ 何が言いたいのか、今一不明だ。多分、変数を「定義」すると、わざわざ言っていることから、関数の返し値を、変数として使うことを、学んだと言っているのでは、と思う。

今度は、「関数の引数について」、もっと接近してみましょう。はい、もちろん、「複数の引き数を取る」ことについてです。1つの関数に、いくつかの引き数を取ることが出来るのです。これによって、私たちは、例えば、「a*a」や、「a*a*a」、つまり、「2乗や3乗」とかより、もっともっと、いろいろなことが出来るようになるのです。

まず、「area()関数/長方形の面積を求める関数」を定義することからはじめましょう。area()関数は、「length / l /縦」と、「width / w / 横」を引数に取り、四角形/長方形 の面積を返します。

私は、すでに、area()関数を、定義しておきましたよ。ただし、中身は空っぽですが。「w / 横 」「l / 縦 」の、2つの引き数を取ります。

返し値を、記述して、この関数定義を完成させて下さい。

ヒントを見る:　area()関数の引数「w, l 」を掛け算した、「w * l 」を、返すために、「return」キーワードを、使えばよかったんでしたね。

解答例:
// エディタ画面
var area = function (w, l) {
■// We should return the product of w and l.
■■// 「w と i の 生成物/結果/面積」を、返して下さい。
■return w * l;
};

area(prompt("yoko"), prompt("tate"));

// コンソール画面
==> 72　// 8 × 9　を、実行しました。

つづく、ウィークエンドとスタートに、アップの予定です。

投稿: alarky | 2012年2月 5日 (日) 23時05分

Codecademy・日本語版、
もっと先に進んでいるページを見つけました。

"Codecademyでプログラミングを勉強する"

で、グーグルで検索してみてください。
「"」を、両側につけたほうがすぐに見つかります。よ～く、捜してください。ほとんど翻訳されているようです。

　僕は、個人的には、続けますが、ちょっとした編集をしてまで、投稿する価値が、あまりなさそうなので、投稿は止めにしました。
　もし、リクエストがあれば、自分が終わっている分に関しては、投稿します。
　少しでも、プログラミング、コードを書くことの楽しさが伝わっていれば、と思います。
　また、もし、今のような、Webサイトがなくなれば、再開します。

投稿: alarky | 2012年2月10日 (金) 23時51分

Hi Alice and Bob! 、っと、いきなりボケが、こけてしまいましたが、
あのですね、、自分で、続きをやった後、先日紹介した、Webページを見たのですが、
英語の理解は正しいと思うし、Codecamey の、Webページのプリントもあって、見やすいし、最初は、文句なしだなあと思ったんですが、
「ヒントを見る/Show Hint 」が、ないのは、まあ、あんまり、関係ないとしても、「解答/解答例 」がないのは、多少は、Java とか知ってる自分でも、結構ムズい時があるのに、全くの初心者に、分かるかなあ！と思ったのです。やっぱり、ペースは、亀さんがライバル！な感じですが、
まあ、投稿する価値は、あるだろうなあ！
と、思ったわけで、たった二日後に、復活を決めてしまいました。
それで、前回紹介したページは、もし、つまずいたりしたときや、分からなかったとき、自分がですが、参考にしようと思ってます。
もちろん、そのページで、先に進める人は、どんどん先に進んでください。

本当は、もっとアクティブなページを作りたいけど、
例えば、レンタルサーバーを借りて、Tomcat とか、動かせば出来るのかな？？？　大体この、Codecademy の、JavaScript コースを卒業するときには、どの程度のことが出来る？？？
HTML も、覚えなきゃいけないと思ういし、基本だけの地味なページなら、まあそれほど難しくないと思うけど。まあ、あくまで、これは、例えばの話なので、期待はしないで下さい。

今回も、大きな前進はありませんが、この日本語版を試してほしいと思います。
今回で、関数の基本が、終わります。次回は、その復習です。明日までには、、少しは、、続きを投稿する「予定 」です。
また、どうぞよろしく。

＜2. Divisibility ＞
思い出してください、「isMultipleOfThree()関数/3の倍数ですか? 関数」を。その関数は、引数「x 」が、3の倍数であるかをチェックし、true または、false を、返します。

さて、ちょっとレベルの高い、関数に変更してみましょう。ある数「x 」が、ある数「y 」　の倍数か?/割り切れるか?＜同じことです＞　を調べる関数です。

では、"問題です"。右のエディタに書かれている、「xはyでジャスト,割りきれますか? 関数 / isDivisible()関数」を完成させて下さい。割り切れるときは、「true 」でなきゃ、「false 」を、返すようにして下さい。

ヒントを見る:　「剰余演算子: % 」を、使って下さい。返した値が「0 」であれば、ジャスト、割り切れるということです。

解答例:
// エディタ画面　・・・　スクラッチパッドでしか、うまく動かない？レッスン画面では、正解かどうかを調べるための機能が、逆に邪魔をしているのかもしれない？？？
var isDivisible = function (x, y) {
■if (x % y === 0) {
■■console.log("return true;");
■■return true;
■} else {
■■console.log("残念、割り切れません！");
■■return false;
■}
};

isDivisible(prompt("X"), prompt("y"));

// コンソール画面
return true;
==> true
残念、割り切れません！
==> false
.
.
.
＜3. Power ＞
ここに、もうちょっと複雑な関数があります。数学の「べき乗」をつかった「power()関数」を、覚えましょう！4 までパワーアップする、2 は、2 が、「基数」で、　「パワー: 4 」です / 4 を返します。

コードを、注意深く見て下さい。そして、実行して、次のレッスンに進みます。注意すべきは、
　　a) 引数は何ですか？
　　b) ループでやっていることは？
　　c) 引数に、「2 と 2 」を渡して、「power()関数」を呼び出すと、何を、返してくれるのでしょうか？
あなたは、何を予想しました？

解答　・・・　「Run 」を、クリック！　・・・　コードを、理解して下さい。
.
.
.
＜4. Recursive: Part 1 ＞
今まで、「関数」、「引数」、「if/else文」について習ったことを、まとめて使ってみましょう。if/else文を使って関数を書くには、たくさんの ステップ/手順 がありますので、落ち着いてやっていきましょう。

"Q"　まず、引数として、「基数」と「指数」を取る「power()関数」を定義しましょう。さしあたって、{　} 内は、空にして置きましょう。

解答例:
// エディタ画面
var power = function(base, exponent) {

};
.
.
.
＜5. Recursive: Part 2 ＞
さて、「基数/base 」について見てみましょう。

「指数/exponent 」が、「0 」の時は、「いつも」「1 」です。これは、掛け算の基本です。
　　◎「かけ算」の世界では、「１からスタート」です。ａが何にもかけてなくて、つまりａが０個かけてあって、これを「ａの０乗」と言って、「１」とします。

"Q"　前回のレッスンで、あなたが定義した power()関数 に、「指数/exponent にあたる引数」が「0 」かどうかをチェックする「if文」を書いてください。　もしそうであれば / 0 であれば、　掛け算の基本に従って、「1 」を、返しましょう。

ヒントを見る:　「指数」が「0 」であることをチェックするには、「= 」と「=== 」、どっちを使う？

解答例:
// エディタ画面
var power = function(base, exponent) {
　if (exponent === 0) {
■■return 1;
■}
};
.
.
.
＜6. Recursive: Part 3 ＞
さて、今度は、 一般的な場合 / 指数-exponent が 0 でない時　について考える番です。前回では、指数/exponent が、0 の時についてやりましたね。今回は、「0 でない時」の 機能/やり方/コード がほしいのです。

「基数」を、 べき乗するために/パワーアップするために、 「指数/exponent　引く/マイナス/-　1 」回、大きくなったその数を、「基数/base 」に、掛けていきます。
　　◎ 大きくなったその数　・・・　「0乗」の時は、 「1 」で、、「2乗 ＜基数が 5 の場合でやってみる＞」の時は、「25 」です。。　これを、その「基数/base 」に、掛けることになります。　例えば、「5 の 1乗」は、「1 / 5 * 0　⇒　5 * 1 」で、5 になります。　・・・　基数:5 になってからは、「指数　マイナス　1　・・・　つまり、0 」で、1回も　掛け/*　てませんね、、、「5 の 3乗」は、「1 / 5 * 0　⇒　5 * 1　⇒　5 * 5　⇒　5 * 25 」で、125 ですね。　・・・　基数:5 になってから、「5 * 5　と　5 * 25 」と、「指数　マイナス　1 」回の、「3 - 1　・・・　2 」回、掛けています。

"Q"　前回のレッスンで書いたコードの後に：　すでに、「base/基数、exponent/指数 」を引数とした、power()関数を定義していますね。次に、「指数/exponent が 0 の時には、1 を返す if文」を、書きました。さて、問題です。3つ目として、基数のべき乗を返す、else文 を書いて下さい。　・・・　＜前の文、引用＞　「基数」を、 べき乗するために/パワーアップするために、 「指数/exponent　引く/マイナス/-　1 」回、大きくなったその数を、「基数/base 」に、掛けていきます。

ヒントを見る:　if/else文 を、思い出すためには、「here/ここ 」をクリック！

解答例:
// エディタ画面
var power = function(base, exponent) {

■if (exponent === 0) {
■■return 1;
■} else {
■■var bekijou = 1;
■■for(i = 0; i < exponent; i++) {
■■■bekijou = base * bekijou;
■■}
■■return bekijou;
■}
};

console.log( power(prompt("base/kisuu"), prompt("exponent/sisuu")) );

// コンソール画面
1048576
　// base/kisuu　・・・　4、　exponent/sisuu　・・・　10　の時。
.
.
.
＜7. Recursive: Part 4 ＞
コードが正しいか調べるために、テストをしなければいけません。その関数が、私たちが意図したとおりの結果を計算するかチェックするために、テストコードを書いてみましょう。

サンプル・コード:　console.log(power(2,4) === 16);

コンソール画面には、「true 」と、プリントされるはずです。もし、「false 」だったら、あなたが書いた関数には、どこかに間違いがあるはずです。

上のコードは、基数が 2 、指数が 4 、を引数として渡したとき、16　になるか/と等しくなるか　をチェックすることによって、正しく動いているかを調べるためのものです。私たちの関数が正しいだろうと、確信を得るための１ステップなのです。
　　◎ このレベルのプログラムはともかく、普通は、パーフェクトだとは、なかなか言えないでしょう。ウィンドウズなんかいつでも、バグの修正のために、アップデートしていますよね。

"Q"　最低3回は、(違う 基数、違う 指数、そして違う 返されるべき値 で、) あなたの関数をテストしてください。私たちはただ、その関数が、正しくはたらくことを確かめたいために、その数回のテストを行うのです。

ヒントを見る:　このレッスンで、「That's correct !　/　よく出来ました ! 」 と、言ってもらうためには、最低３回はテストをしないといけませんよ。１回じゃ不十分です、悪いけど。

解答例
// エディタ画面
// 下記のように、値を変えて、最後の３行に、書いてみよう。
console.log(power(1, 4) === 1);
console.log(power(4, 10) === 1048576);
console.log(power(5, 3) === 125);

// コンソール画面
true
true
true
That's correct!　You've completed this section! Start "another course" or experiment with "Codecademy Labs".

つづく、予定。

投稿: alarky | 2012年2月12日 (日) 08時40分

Codecademy is the most comfortable way to learn how to write codes. I wish everything we want to learn was like this!　// エキサイト翻訳で訳したら、完璧に翻訳してくれました。

『Review of Functions in JavaScript ≫ Section 1　Introducing Functions 』　・・・　関数の復習です！　・・・　大事です、コードも普通の言葉だと思って、何度も書いてなれることが、大事です。　・・・　たとえ理解しても、土台を、ガチガチに固めておかないと、その上の応用部分は、なかなか根付いてくれません。

＜1. Defining a function ＞
JavaScript に於ける、関数は、 コードのかたまり/{ ... * たくさん回 }　の前に、「function(引数s) 」を書いて定義しましょう。
　　◎ 引数s　・・・　引数の複数形　・・・　複数の引き数を取れる　　|　　つまり、宣言まで含めると
　　　　　var aruKansuu　=　function(引数s) {コードs};
　　　　　　　// 早い話は、こうです。

(上の説明と重なりますが、) 引数は、「( ) 」の中に、 アルゴリズム/実行コード　は、「{ } 」の中です。　・・・　「; 」は、付ける習慣が大事です。　・・・　文法的に間違っていなくても、思わぬバグを生む原因になるようです。　・・・　他にも、いわゆる「落とし穴」はあるようですが、いつか、僕/あなた が、本格的に書けるようになれば、そういったトピックに触れる機会は出てくるでしょう。今の段階では、そこまで考えるのは、かえって、「障害」になるような気がします。

"Q"　右のエディタの最初に、「cube()関数」で使うために、「square()関数」があるのが分かりますよね。「cube()関数」を、完成させて下さい。そして、「7の3乗」を求めるために、それを使って下さい。「cube()関数」を完成させるためには、「square()関数」を、利用して下さい。

ヒントを見る:　覚えてません？、「3乗」とは、ある数字を、その数字自体で3回　掛け/*　たものです。　例えば、「5の3乗」は、「5*5*5 / 5×5×5 」 または、「125 」です。引数「x 」を受け取り、その3乗を返す、「cube()関数」を修正してください。

解答例：
// エディタ画面
// Accepts a number x as input and returns its square　・・・　引数「x 」、2乗を返す。

var square = function(x) {
■return x * x;
};

// Accepts a number x as input and returns its cube　・・・　引数「x 」、3乗を返す。
var cube = function(x) {
■return x * square(x);
};

cube(7);

// エディタ画面
==> 343
That's correct!You've completed this section!　Start the next one.
.
.
.
『Review of Functions in JavaScript ≫ Section 2　Understanding Parameters 』
// 引数の復習です。

＜1. A function with two parameters ＞
関数は、引数を、持たなくてもいいし、複数持つことも出来ます。これらの引数は、「関数マシーン」の、「口」に入れるもの、だと考えてください。(おっと、xxx が、出てくるわけじゃなくて、) あなたがこのマシンを使って、「素敵なもの/あなたの欲しいもの/目的物」が、「出口/返し値」から出るようにして下さい。

そのmultiply()関数は、2つの引き数を取り、その掛け算の結果を返すと言う、ごくごく平凡な関数です。

"Q"　では、体積の求め方を知っていますか？問題です。「volume()関数/体積を求める関数」の定義を完成させて下さい。

ヒントをみる:　思い出してください。体積は、「横の長さ × 縦の長さ × 高さ/height 」です。

解答例:
// エディタ画面
var multiply = function (x, y) {
■return x * y;
};

multiply(2, 5);

var volume = function (w, l, h) {
■return w * l * h;■// w - 横、l - 縦、h - 高さ
};

volume(2, 3, 4);

// コンソール画面
==> 24
■// しかし、何で、「multiply(2, 5); 」は、実行されない？　まあ、いずれ分かるでしょう、多分。
.
.
.
＜2. Parameter Names ＞　引数の名前について
ちょうど数学のように、関数はたくさんの引き数を取れます。そして、(区別する必要があるので) 関数を定義するとき、それぞれの引数に名前を与えます。例えば、私は今、「cube()関数」の、1つの引数に、「x 」と、名づけました。

しかしながら、「関数を呼ぶときには」、引数の名前は知らなくてもいいのです。そのことを実際に見てみましょう。さあ、cube()関数 の引数の名前を「x 」から「n 」に変えてみてください。
　　◎ つまり、関数を呼び出すときには、「引数の名前は使わない！」と言うことです。

さて、もちろん、その名前を使うべき、関数内の変数名も、変えなくてはいけませんよ、、、「return x * x * x; 」を、「return n * n * n; 」に、しなければならないと言うことです。
　　◎ 最初から代わっていません？　・・・　2012/02/12 現在.
　　◎ コードを書くときは、変数の名前は、覚えておかなければいけません、、ので、、覚えやすい名前がいいと思います。

この変更で、「cube(5); 」と、関数を呼び出したとき、何の影響もないことを確かめるために、コードを実行してみてください。同じ結果を返すはずです。

解答例：
// エディタ画面
// 変数名「x 」の場合
var cube = function (x) {
■return x * x * x;
};

cube(5);

// もう一度全部、変数名を書き換えて実行したほうが、分かりやすいでしょう。　・・・　変数名「n 」の場合
var cube = function (n) {
■return n * n * n;
};

cube(5);

// コンソール画面
==> 125　// どちらも同じ結果です。
.
.
.
＜3. Argument Types, part 1 ＞　引数の型について、part1
たった今、引数の名前は、関数の呼び出しに関しては、関係ないことを調べました。また、JavaScriptでは、(Java のような、型に　シビアな/厳しい/うるさい　言語と違って、) 関数を定義するときに、型を、きっちり決める必要がありません。

これはどういう事かと言うと、「誰か」が、「あなたの関数」を呼び出すとき、その「誰か」は、彼/彼女 が渡したい どんな「型」の、変数でも、渡してしまうことができるのです... 「数値」、「文字列」、「配列」などなど。

このことは、プログラムの奇妙なふるまいを起こしかねません。もし、あなたの作った関数が、例えば、cube()関数 のように、「数値」だけに、正しくはたらく関数だとしたら、その関数に、「文字列」を渡して、呼んだら、奇妙な結果になるでしょう。

それを調べるために、右のエディタのコードを、そのままで、実行してみて下さい。「NaN 」ってのが、返されるのが分かりますね。それは、「not a number / 数字ではありません」と言う意味です。「文字列」を、「return x * x * x; 」と言うコードで、自身を、3回掛けようとした時、その値を返す事態が、発生したのです。
　　◎ 一応「NaN 」を、調べてみました。　・・・　NaN は Not a Number という意味で、 数値に変換しようとしてできなかった場合に取られる値です。これは数値型です。特殊な値。

解答例:
ただ、「Run 」を、クリックして実行してください。何が返されるのか、コンソール画面を見てください。
.
.
.
＜4. Argument Types, part 2 ＞　引数の型, part2
さて、たとえ引数が、正しい 型/タイプ でなくとも、関数の呼び出しで、必ず、「数値タイプ」が、返されるように、したい！

それを実現するには、渡された引数のタイプを、調べる必要があります。もし、それが「数値」でなかったら、その値に掛け算すべきではないでしょう。そのときは、ただ、「0 」を、返すようにしましょう。

それが実行されるのを見るために、2行目を、コメントからはずしましょう。(「// 」を、削除する)

解答例:
2行目の「// 」を、削除して、
「if (typeof(x) != 'number') return 0; 」が、実行されるようにして下さい。
　　◎ typeof　・・・　演算子、オペランド(演算対象/operand)の、データ型を取得.　・・・　このコードでの使われ方を覚えるのが、マスターする近道だと思います。
　　◎ if文の、{　} が、ない、、なくてもよい場合もあるようだが、僕は、バグの原因にならないように、付けたほうがいいと思うが？こんな風に。
　　　　　// if (typeof(x) != 'number') {
　　　　　// ■return 0;
　　　　　// }

また、ウィークエンドに、アップの予定です。ごきげんよう。

投稿: alarky | 2012年2月13日 (月) 00時00分

・今回から、「＜小見出し ＞」も訳すことにしました。前は、「一筋縄ではいかないタイトル名！」だったので、パスしていましたが、なるべく、トライしてみます。

前回の間違いを見つけました！
『Review of Functions in JavaScript » Section 2 　Understanding Parameters 』
＜3. Argument Types, part 1 ＞　引数の型について、part1
たった今、　～省略～　きっちり決める必要がありません。

これはどういう事かと言うと、「誰か」が、「あなたの関数」を呼び出すとき、その「誰か」は、彼/彼女 が渡したい どんな「型」の、引数＜X:　変数＞でも、渡してしまうことができるのです... 「数値」、「文字列」、「配列」などなど。
// 「変数」を、「引数」に変えてください。お詫びして訂正いたします。

・今回は、「Project/アプリの作成」があったので、ついつい、粘って訳しましたが、まあ、初心者用のアプリは、こんなもんでしょうね。　とても、実用的だとは、言えませんが、しかし、実用的なアプリを、作るためには、大切な練習だと思いました。明日も、アップして、「関数関連の基本」は、終わりたいと思っています。

《Section 3　Local Variables 》　ローカル変数　
＜1. Parameters are local to the function ＞　引数は、関数のパーツだ。― つまり、ローカル変数
引数は、大きな目で見れば、変数です。(引数は、変数であるともいえます / 引数は、変数の一種です)　以前のレッスンで見てきたように、「変数である引数」の「名前」は、「関数の中で」使われます。そしてその「引数値」は、その関数を呼び出したとき、使うことが出来るようになります。
　　◎ 引数値　・・・　value that was supplied by the call to the function　・・・　関数の呼び出しで供給される値

今、右エディタの「console.log()」を呼んだら、「変数 w 」は、関数の外でも有効ですか？これをテストするために、まず、右のコードを、「Run 」をクリックして実行してください。あなたは、「ERROR: w is not defined　・・・　エラー:　「w 」は、定義されていません」 って、コンソール画面に表示されるのを見るはずです。それの意味するところは、「変数 w は、volume()関数の中で、2 に、設定されました。でも、volume()関数の '外' では、決して、定義はされてはいませんよ。」と言うことです。

事実、1行目の「var w = 15; 」を、コメント記号を削除して右のプログラムを実行すると、volume()関数 の外にある 変数 w は、volume()関数の引数で、同じ名前を持っている、変数 w に、なんら影響を受けないのが、分かるでしょう。その2つの変数は、全く、違う変数なのです。

1行目のコメントを削除して、「Run 」をクリックし、コードをもう一度実行してください。　・・・　実行するだけで、次のレッスンに進みます。ローカル変数の理解がこのレッスンのねらいです。
.
.
.
＜2. Additional local variables＞　追加された、ローカル変数 area
関数において、引数の他に、追加のローカル変数が、必要だったらどうします？(例えば、途中の経過を　知りたいとき/使いたいとき/持つために　。 )
　　◎ 参考:　問題を定義しておきながら、その方法は、示されていません。僕だったら？、、返し値を、配列にして、その中に、「area 」の結果を含めれば、いいと思うが。　var AreaAndVolume = [area, area * h];　そして、return AreaAndVolume;　そして、console.log(volume(2,3,4));　の結果は、[ 6, 24 ]　と、なりました。　さらに、area の値を表示するには、console.log( (volume(2, 3, 4))[0] );　とします。　もっとスマートな方法もきっとあるでしょう？　また、これは、あくまで参考なので、今の時点では、気にしなくてOK。

右にある volume()関数 の中に、そんなローカル変数の例があります。変数 area は、ローカルです。なぜなら、volume()関数 の中でしか、見ることができません。(visible　・・・　(形容詞)目に見える　・・・　ここでは、たとえで、アクセスできること)　さらに、volume()関数 が、呼ばれた後、まだ、変数area は、その関数の外では、定義されていません！そして、エラーを引き起こす原因となる－area に、アクセスしようとしています。

このエラーを見るために、現状のまま、「Run 」をクリックして、コードを実行してください。

では今度は、6行目の、コメントを削除して、グローバル変数である 変数 area を、宣言 & 定義 してください。(var area = 36; )　(そして、実行してください。)　グローバル変数area が、定義されましたが、volume()関数は、「2 * 3 」で、「6 」にセットされた、ローカル変数area を使って、「24 」という結果を表示します。
　　◎ そのWebページの、数値「42 」は、「24 」のプリントミスだ。

// コンソール画面
24
36
That's correct!　Next Exercise
.
.
.
＜3. Getting it wrong (Side-effects) ＞　var をつけることの意味:　落とし穴にはまらないために！
さて、ちょっとだけ変えた volume()関数を見てみましょう。違いは分かりますか？

今度は、「var 」が、「area 」の前にタイプされていませんね。さあ、コードを実行してください。どんなことに気づきますか？

もはや、変数area は、そのvolume()関数が持っている、ローカル変数ではありません。そして、volume()関数が呼ばれたとき、引数によって、「6　・・・　2 * 3 」に、グローバル変数として、セットされます。今度は、console.log() によって、表示されるのは、そのセットされた「6 」ということになります。
　　◎ Instead, area has become 6 when the function has been called, as the area is set to 2 * 3 = 6 when volume is called.　・・・　として、解釈。

volume()関数の外の、変数area は、グローバル変数で、どこからでも参照できます。ある関数のちょっとした修正、つまり、「volume()関数の中での area 」の前にある「var 」を、取ってしまうことは、「副作用」を、引き起こします。(var を取ることは、ローカル変数が、グローバル変数に変更させられることを意味する)　そして、たいていの場合、それは避けたいことでしょう。

まず、そのまま、「Run 」をクリックして、その問題が起こるのを見てください。(グローバル変数が、36 から 6 に、変更されること)　それから、volume()関数の中で、「var 」を、area の前に付けて、(var area = w * l; ) 元あったように戻してください。(前のレッスンのように)　これで、その volume()関数内の area は、ローカル変数です。

// コンソール画面
24
36
That's correct!　You've completed this section!　Start another course or experiment with Codecademy Labs.
.
.
.
『JavaScript ≫ Functions ≫ Projects　New York, New York 』
さあ、今まで覚えた事を総動員させて、移動した距離と、乗車した時刻によって、タクシーの運賃を算出するプログラムを作りましょう！

＜1. Hailing a Taxi ＞　タクシーを止めよう！
すべてのタクシーの初乗り運賃は、2ドル50セントです。
　　◎ 100セント = $1　です。

"Q"　「baseFare変数」を宣言し、「2.5 」に、セットしましょう。

ヒントを見る:　「$type/ドルタイプ」なんて言う変数の型はありませんよ。なので、「baseFare 」変数に、値を　セットするときは/代入するときは/割り当てるときは、 $2.5 なんてしないでね。( X:　$ baseFare = 2.5;　　/　　X:　var baseFare = $2.5; )　宣言のやり方は、「ブルーの文字の Variable Lesson 」を、クリックして、復習してください。

// 解答例、エディタ画面
var baseFare = 2.5;
.
.
.
＜2. Make it Functional ＞　関数を完成させよう！
さあ、関数を完成させましょう！
"Q"　「taxiFare()関数」に、「変数baseFare 」を、「返し値」として、 設定/定義　しましょう。

ヒントを見る:　関数のことは、まだ今一覚えきっていない？　だったら、もう一回復習です。ブルーの「Functions in JavaScript lesson 」を、クリックして、リンクへジャンプ。

// 解答例、エディタ画面、「return baseFare; 」を、実行コードとして、taxiFare()関数に加える。
var taxiFare = function () {
■return baseFare;
};
.
.
.
＜3. Where To? ＞　お客さん、どこまで行きやしょう？
タクシー料金は、1マイルごとに、2ドルずつ上乗せされます。ということで、「距離」を考慮して計算しましょう。

引数「milesTraveled/移動したマイル」を使って、あなたの taxiFare()関数 が、移動した距離数を、受け取るようにしましょう。

「taxiFare変数/タクシー運賃変数」は、「初乗り料金　＋　マイルあたりの料金×何マイル」で、総額が算出されるはずですね。

ヒントを見る:　タクシー費用は、以下の式で、計算しましょう:
　　費用　=　初乗り料金 + 何マイル*1マイルあたりの料金
JavaScriptでの、足し算、掛け算のやり方は、ここをクリック。 ― Arithmetic Exercise/算数のコード
.
.
.
// 解答例:
// エディタ画面
// add a parameter called milesTraveled to the function taxiFare　・・・　「milesTraveled引数」を、taxiFare()関数 のパーツに！
var taxiFare = function (milesTraveled) {■// ここ！
■var baseFare = 2.50;
■var costPerMile = 2.00;

■// calculate cost using baseFare, milesTraveled, and costPerMile　・・・　baseFare/初乗り料金、milesTraveled/移動したマイル数、costPerMile/1マイルの料金　を使って、タクシー代を計算する。
■var cost;
■cost = baseFare + (milesTraveled * costPerMile);■// ここ！
■return cost;
};
.
.
.
＜4. After Dark ＞　深夜料金はどうするの？
タクシー料金は、時間で変わります。― 深夜料金を、運転手に支払うのです。午後8時から、一律　0.5ドル/50セント　が、追加料金として加算されます。そして、午前6時なるまでそのルールが適用されます。

"Q"　あなたの「taxiFare()関数」に、2つ目の引数「hourOfDay/タクシーに乗った時刻」を、追加しましょう。深夜料金が適用される時刻には、0.5ドルを、追加しましょう。その時刻は数値として、「0~23 」に、限定されます。

次の手順で考えましょう！
　　a) 2つ目の引数、「hourOfDay/タクシーに乗った時刻」を、追加しましょう。
　　b) 11行目から、実行コードを書き始めましょう。if/else文を、使います。あなたが欲しいのは、加算される深夜料金のコードです。深夜料金は、午後8時 (8 は含まれます) から始まり、午前6時 (6 は含まれません) の間です。
　　「or/または」をどうやって、コード化する？　「|| 」を、使って下さい。
　　　　◎ ||　・・・　左右の式のどちらかが、true の場合は、true。　　例：「100 === 100 || 1000 === 500 」は、true。

ヒントを見る:　「hoursOfDay/引数：タクシーに乗った時刻」は、0~23 を、記憶しておく変数です。0 は、深夜0時 で、23 は、午後11時 です。
　　◎ XXam, XXpm は、なんか曖昧だが、24時間制で、考えましょう。
確認です、追加料金は、「>=20 」か、「<6 」で、発生します。
なので、「(hoursOfDay >= 20 || hoursOfDay < 6) 」と言うことですね。
if/else文 の復習は、ここをクリック。― If/else Lesson
「return 」キーワードを使うことを、お忘れなく！

// 解答例:
// エディタ画面
// add a parameter called hourOfDay to the function　・・・　2つ目の引数、「hourOfDay/タクシーに乗った時刻」を、追加しましょう。
var taxiFare = function (milesTraveled, hoursOfDay) {■// ここ！
■var baseFare = 2.50;
■var costPerMile = 2.00;
■var nightSurcharge = 0.50; // 8pm to 6am, every night　・・・　午後8時から、午前6時まで、毎晩.

■var cost = baseFare + (costPerMile * milesTraveled);
■
■// add the nightSurcharge to the cost starting at 8pm (20) or if it is before 6am (6)　・・・　午後8時から適用される深夜料金を加える。また、午前6時より前でも。
■/*　ここから */
■if(hoursOfDay >= 20 || hoursOfDay < 6) {
■■cost = cost + nightSurcharge;
■}
■/* ここまで */
■return cost;
};

// 以下、オプション、prompt()を使う！
taxiFare(prompt("何マイル乗りましたか?"), prompt("乗った時刻は?"));
.
.
.
＜5. You've Arrived At Your Destination ＞ 着いた！お幾らですか？
もうこんな遅い時間になってしまった、会社は、家までのタクシー代を出してくれるそうだ。

"Q"　あなたが書いた、「taxiFare()関数」を、(少し変わっているではないか?) 使って、「5マイル、午前2時 」を引数とし、「tripCost変数/タクシー代変数」に、値を代入してください。

ヒントを見る:　関数の引数の使い方を復習するには、ここをクリック！― Understanding Arguments Lesson

解答例:
// エディタ画面
// use taxiFare to set tripCost to the cost of your ride covering 5 miles at 2 am in the morning　・・・　taxiFare()関数 を、使って、「5マイル、午前2時 」を引数とし、「tripCost変数/タクシー代変数」に、値を代入してください。
var tripCost;

// calculates taxi fare based upon miles traveled and the hour of the day in military time (0-23).　・・・　「移動したマイル数」「0時から23時/乗った時刻」に基づいて、タクシー代を計算する。
var taxiFare = function (milesTraveled, pickupTime) {
■var baseFare = 2.50;
■var costPerMile = 2.00;
■var nightSurcharge = 0.50; // 8pm to 6am, every night　・・・　午後8時から、午前6時まで、毎晩.

■var cost = baseFare + (costPerMile * milesTraveled);

■// add the nightSurcharge to the cost if it is after 8pm or before 6am　・・・　午後8時から、午前6時前までに、タクシーに乗ったのなら、深夜料金を加える。
■if (pickupTime >= 20 || pickupTime < 6) {
■cost += nightSurcharge;■// 「cost = cost + nightSurcharge; 」と同じです。
■}

■return cost;
};

tripCost = taxiFare(5, 2);■// ここ！
console.log(tripCost);■// オプション

つづく、明日また、アップする予定です。

投稿: alarky | 2012年2月19日 (日) 05時12分

『JavaScript ≫ Functions ≫ Projects　　Time Trials 』
　　　記録との戦い
今年はオリンピックの年です。そこで、誰がオリンピック代表になるかを決める、プログラムを書いて見ましょう。「プリミティブ/基本型」「関数」「配列」「ループ」を使いますよ。
　　◎1　変数　と　データ　―　どこが違う？
　　　　　まず、変数は、値を入れる「容器/入れ物」
　　　　　それに対して、データ　と言った場合、値そのものについて、言及して/言って　いる。
　　◎2　ではでは、区別する必要があるの？あるとは思えませんね、ここまでの話では。これから話すことは、予習になってしまいますが、「心の準備」をしておくと、この先、分かりやすいと思うので、ちょっと触れておきましょう。　まず、データ と言ったら、値そのものについていっていることは、明らかでしょう、そして、データ型　と言えば、「種類」について話しているのです。　問題は、「容器－変数」と「値自身のこと－データ」の違いです。容器/入れ物 か?　値そのもの か?　です。
　　◎3　"変数" には、 「基本型」　と　「参照型」がある！
　　　　　基本型/プリミティブ　・・・　その「入れ物」の中は、「値そのもの」が、入っています。
　　　　　参照型　・・・　実は、この中には、「値」は、入っていないのです。ではでは、何が入っているのでしょう？、、、0.3秒考えてください！... 答は、「どこに、値があるか、つまり、 アドレス/まあ住所みたいな」　です。例えば、プログラムで使うアドレスとは、違いますが、アドレスの例をあげると、あなたのお気に入りの写真データ、例えば、「おっきー01.jpg 」は、「Cドライブの、マイピクチャーの、お気に入りの写真フォルダ」が、アドレスかもしれません。絶対なくせないデータは、バックアップドライブの、Dドライブの、「大事なデータ_2012-0219 」フォルダに、入っているでしょう。　話がそれましたが、参照型に入っているのは、「アドレス」なのです。　変数と言う名前からして、データそのものと勘違いしやすいのですが、「変数」は、値を入れる「入れ物」です。
　　◎4　基本型、参照型には、どんなデータ型がある？
　　　　　基本型　・・・　数値型/number、文字列型/string、真偽型/boolean、特殊型/null,undefined
　　　　　参照型　・・・　配列/array、オブジェクト/object、関数/function
　　◎5　予習になってしまいましたが、一回は、 理解して/目を通して　おきましょう。またそのことが出てきたときに復習すればいいと思います。　えっとですね、このことは、と～ても大事なことなのです。　あなたが、将来、クールなプログラムを書けるかの一つは、このことを理解しているかに掛かっているといっても言い過ぎではないでしょう！ぐらい大切なことです。
　　◎6　! 大事な追加事項 !
　　　　　JavaScript では、基本型が、参照型に化ける !
　　　今書いたことを確認のために、グーグルで調べたところ、例えば、文字列は、基本的には、基本型なのに、時に、参照型に化けるそうだ！　・・・　その話は、実際にこの、Codecademy に、登場したとき考えましょう！　・・・　しっかし、こんな　文法/言語仕様　... ぶつぶつ、、、しっかしですね、JavaScript は、今、 人気ナンバー1　なのは、間違いなさそうです！
.
＜1. Roll call ＞
　　　そうそうたる顔ぶれ！
では、「基本データ型」を、実用的に扱うには、どうしたらいい？

これから、陸上競技で、わがチームに貢献してくれそうなランナーたちを、コーチが、管理/把握 しておくためのプログラムを作ります。

まず、prompt() を使って、ランナーたちの名前を知りましょう。

"Q1"　1. var runner = prompt("あなたの名前をタイプして登録してください");　・・・　①prompt()を使う　②"What's your name?"と聞く　③変数runner/変数ランナー に、名前データをセットする　④varで、宣言する

"Q2"　2. if文 の中に、条件を書いてください。そこで、変数runner/変数ランナー に割り当てられた 値/value の長さが、「0 でない」事を確かめます。

ヒントを見る:　prompt() の使い方は、ここで―Prompting。　まず、変数runner を、宣言してください。「= 」の後に、prompt("質問") を、タイプします。「; 」も、お忘れなく！

文字列から、長さを、ゲットするために、または、文字列を含んだ変数から≪変数は、入れ物ですね≫、長さをゲットするために、「.length 」を、使います。　例えば:
　　　　　変数名.length　あるいは、
　　　　　"文字の列".length　です。
　　◎ 「.length 」について、調べました。メソッドではなく、「プロパティ」だそうです。今の時点では、「使い方が分かれば、OK 」でしょう。　・・・　ここからは、さっきの予習の続きです。少し解明してきた。　・・・　グーグルで、見つけたページによると、
　　　　　Javascript は String プリミティブと String オブジェクトを自動的に変換するので、String プリミティブである文字列上で String オブジェクトのあらゆるメソッドを呼ぶことができます。JavaScript は String プリミティブを一時的な String オブジェクトに自動的に変換してから、そのメソッドを呼び、そのあと、その一時的な String オブジェクトを捨てます。例えば、文字列リテラルから生成された String プリミティブ上で、String.length プロパティを使うことができます。 ・・・　と、言うことらしい。この説明は、結構分かりやすいのでは、、まあ、Codecademy の オブジェクト/Object を、学習するとき、改めて考えて見ましょう。
　　◎ ついでに、このリンクの情報は、かなり信用できそうです！　ここです !

解答例:
// エディタ画面
// 1. prompt for name　・・・　prompt()で、名前をゲット。
var runner = prompt("あなたの名前をタイプして登録してください");■// ここ！
// 2. write condition to ensure runner is not empty　・・・　変数runnerの値の長さが0でないことを確かめるために、条件を書く。　// ↓の「( ) 」の中！
■if (runner.length !== 0) {
■■console.log("Welcome to the Olympic tryouts, " + runner);
■} else {
■■console.log("Name cannot be blank.");
■}

// コンソール画面
Welcome to the Olympic tryouts, alarky
　// ようこそ、オリンピックのオーディションへ, alarky
Name cannot be blank.
　// 名前がないはずは、ないです！

＜2. Tally race times ＞
　　　レースタイムの平均値は?
想像してください、カール・ルイスがメンバーだって。近頃では、超早いとは言えませんが。今、カールの、5レースにわたる記録を示すリストが欲しいとします。リストをJavaScript で、保存するにはどうする？もっちろん、配列ですね。右のエディタに、「raceTimes配列/レースタイム配列」を、作っておきました。そして、カールの5つのレース記録をリストにしました。
　　◎ a runner Carl Lewis　・・・　the でなく a ってことは、同姓同名の、カール・ルイスと言うことでしょう。

"Q"　今回の私たちの目標は、カールの記録の、平均値を、求めることです。これが、最終的に、ランナーたちが、チームに入るのに十分な選手かどうかを決定する方法になります。

このエクササイズでは、配列の中にある、たくさんの数値の平均を求めるために、forループ を使う方法を、示します。

1. forループ を使う前に、「totalTime変数/レースタイムの合計変数」を宣言し、値 0 に、設定しましょう。

2. forループ の中で、 「今までのレースタイムの合計 / totalTime変数の値」　と　「新しく加えるべきレースタイムの値 / raceTimes配列 i 番目の要素 / raceTimes[i] 」　を、 足したものと、、 等しくなるように、、 totalTime変数　に、 値を代入するようにします。

3. あなたのコードの最後の部分では、「averageTime変数/平均タイム変数」に、「totalTime変数/レースタイムの合計変数」を、「raceTimes.length/レースタイム配列の要素の数」で、割った値を、代入します。

4. 「averageTime変数/平均タイム変数」の値を、コンソール画面に、プリントしてみましょう。今回は、averageTime変数を、宣言し、値を代入したら、ただ、「Run 」を、クリックしてOKです。

ヒントを見る:　forループの中の、「totalTime変数/レースタイムの合計変数」は、「totalTime + raceTimes[i] 」の値が、代入されるようにしてください。

変数を割ることは、数値を割るのと、全く同じようにしてください。たとえ、変数が、文字列型/string であったとしても。これに関しての復習は、ここで―Numbers n' Stings。
　　◎ Dividing variables is just like dividing numbers if the variable is of the string data type.　⇒　Dividing variables is just like dividing numbers ｅｖｅｎ if the variable is of the string data type.
　　　　　if の前に、even が、入らないと意味が通らない！そしてそのことの実験は、「Codecademy の Labs 」で、試しました。
　　　　　　　// エディタ画面
　　　　　　　// var moji = "15";
　　　　　　　// var i = moji/5;
　　　　　　　// console.log(i);
　　　　　　　
　　　　　　　// コンソール画面
　　　　　　　// 3

＜4. Calculating averages with a function ＞では、console.log()は、必要ありません。なのでここでもそうです。この先、この結果を、コンソール画面に出力する予定はありません。

// 解答例:
// エディタ画面
var raceTimes = [12.2,11.8,12.5,10.9,11.1];
var totalTime = 0;■// koko ! --- 1.
for ( i = 0; i < raceTimes.length; i++ ) {
■totalTime = totalTime + raceTimes[i];
}■// Ueno, 1gyou !

var averageTime;■// koko !
averageTime = totalTime / raceTimes.length;■// koko !

つづく。　もっと進みたかったけど、ここまでです。また来週、アップの予定です。ごきげんよう。

投稿: alarky | 2012年2月20日 (月) 00時32分

Codecademy、続きです。いや～、まいっちんぐでした。ツー・イクスペンシブ/too expensive な、サイ本/O'reillyのJavaScript第5版(2006) の eBook を、買ってしまいましたよ。でも、「ctr + F 」で、簡単に検索できるので、この先重宝するかもしれないけど(英語版は、10thEditionまであるが、調べるだけで、日が暮れそうなので、日本語版にしました)。なんで、まいっちんぐなのか、と言うと、
えっとですね、半分ぐらいは、忘れてしまったけど、一つは、＜4. Calculating averages with a function ＞で、forループ の後に、「var averageTime = totalTime / raceTimes.length; 」とすると、自分の「Firefox 」では、その12行目の「黄色△の ! 」に、マウスのカーソルを当てると、「'totalTime' (is) used out of scope / 変数totalTimeが,スコープの外で使われています」って、文句を言われる。
のでので、もう「サイ本」を買って、調べてみると、JavaScript に於いて、「スコープ」は、関数内か? プログラム全体か? のみで、決定されると書いてあるではないか !　つまり、2通りしかなく、{ブロック} で、スコープが、区切られるわけではないのだ。
なのに、エラーマークで、課題クリアが出来ません。
ためしに、(あんまり使い勝手がよくない)InternetExplore で、やってみたところ、何も問題は起こらなかった。　・・・　関係ないけど、GoogleChrome は、インチキ？コードカデミー日本語版変更 プログラム/アドオン を入れたら、もう、Codecademy は、使えなくなってしまった。
まあ、当分は、I.E.のお世話になりそうだ。
早く、バグの少ない、Linux を使えるようにならなきゃな。
今は、分からないことにぶつかったとき、
ものすごく時間が掛かりそうな気がして...まだ、使う気には、なれません。

＜3. Calculating totals with a function ＞
　　　関数を使って、ランナーひとりひとりの記録の合計を算出します。
カールは、今リタイヤしてしまいました。しかし、弾丸より早い、もとい、のように早い、やる気満々の若者たちがいるようです。右のエディタで分かるように、3人の挑戦者がいます、、カルロス/Carlos, リュウ/Liu, ティモシー/Timothy です。いま、彼らの名前を、「配列の変数名」として使い、その「配列の要素」には、各5回のタイム記録データを、 セットしました/割り当てました　。

私たちは、たくさんのランナーを抱えているわけですが、それぞれ各ランナーの「平均タイム」を、求めたいと思っています。だけど、前のレッスン(2.Tally race times)でやったように、それぞれのランナーごとにコードを書くってのは、いささかうんざりです。

さて今回は、「関数」を書くのに、うってつけの機会です。関数を使えば、それぞれの配列に、同じコード処理をするのは簡単です。

今すぐに、各ランナーたちの、平均タイムを求める前に、それぞれの選手の、 記録の合計/トータルタイムを、 計算することにしましょう。平均タイムは、次のレッスンで求めることにします。

1. 「calculateTotal()関数/すべてのレースタイムを合計する関数」を定義して下さい。引数として、「raceTimes配列/レースタイムの配列」を、引数に取ります。

2. 関数の中で、「totalTime変数/レースタイムの合計時間変数」を、宣言し、「forループ」を使って、配列にあるそれぞれのレースタイムを順に　加えて/足して　いきます。

3. 関数の最後の行では、「return 」を使って、「totalTime変数/レースタイムの合計時間変数」を、返してください。

「Run 」をクリック、「Liu/リュー」の、全記録の合計が、コンソール画面に、プリントされます。

ヒントを見る:　引き数を含めた関数の書き方は、ここ！― Understanding Parameters 。

関数の中で、値を返すコードを書くには?　「Return 」をクリックして、思い出してください。

// 解答例
// runner times
var carlos = [9.6,10.6,11.2,10.3,11.5];
var liu = [10.6,11.2,9.4,12.3,10.1];
var timothy = [12.2,11.8,12.5,10.9,11.1];

// declare your function calculateTotal here
var calculateTotal = function (raceTimes) {
■// ue, honbun 1.
■var totalTime = 0;
■■// var totalTime;
■■■// dato, NaN wo,kaesu!
■for (i=0; i < liu.length; i++) {
■■totalTime += liu[i];■// totalTime = totalTime + liu[i];
■■■// ue no 3gyou, honbun 2.
■}
■return totalTime;
};
var liuTotal = calculateTotal(liu);

console.log(liuTotal);

// コンソール画面
53.6
.
.
.
＜4. Calculating averages with a function ＞
　　　関数を使って、各ランナーの、平均タイムを求める　
　　　　// 2. Tally race times　との、違い？　関数を使っていることです。
　　　　// 重大な誤訳でもないけど、間違えていました。＜2. Tally race times ＞において、「ヒントを見る/Show hint 」の一番最後の文です。
　　　　☆原文　・・・　For part 4 of the instructions, console.log is not needed as we are not printing anything in the console!
　　　　☆解剖/構文&品詞分析　・・・　(For part 4 of the instructions), -(console.log)- +(is not needed)+ (as -~we~- +~are not printing~+ @~anything~@ ((in the console)) )!　・・・　(副詞句)、((サブ副詞句))、-(S)-、+(V)+、@(O)@、-~サブS~-、+~サブV~+、@~サブO~@　・・・　as ― (接続詞)~なので;~と平行して　|　be Ving ― 近い予定を表す
　　　　☆誤訳　・・・　＜4. Calculating averages with a function ＞では、console.log()は、必要ありません。なのでここでもそうです。この先、この結果を、コンソール画面に出力する予定はないのです。
　　　　☆訂正後　・・・　＜4. Calculating averages with a function ＞で、プリントするので、ここでは、プリント/コンソール画面出力 までは、行いません。
　　　　　　// お詫びして、訂正いたします。

関数を使って、リュー選手の記録の合計タイムを算出するのは上手くいきましたね。でも、本当の目的は、各ランナーの記録の平均タイムを、算出することです。これこそが、オリンピックに出場できるかを決めるものですね。それでは、その平均タイムを算出できるような、より完璧な関数を書いてみましょう。

「forループ」の中での、「totalTime変数/レースタイムの合計時間変数」の、宣言の仕方をよく見てください。前のレッスンのコードを、書き換えたのです。リファクタリングとは、関数の　機能は変更せず/結果としての動作は変更しないで、 コードを整理し、より効率的な動きになるようにする事と言えます。さて、あなたはどうしてここで、「|| 」が使われているか分かりますか。つまりどのように機能しているかということが、分かりますか？
　　◎ refactoring　・・・　リファクタリング　・・・　早い話、書き換えること　・・・　だが、お互いのコードが、関係しているのがふつうなので、1つの変更は、プログラム全体に影響を与えかねない。ので、このことに関して、1つの　体系/哲学/方法論　が、出来るぐらいやや複雑な話でもある。
　　◎ 「|| 」　・・・　この演算子のここでの使い方は、まだ習っていない。　・・・　論理値(true/false)でないオペランド(計算すべき値)に対しては、『「値がない」値』を、左から　パスして/とばして/使わないで　『「値がある」値』に　ぶつかったとき/当てはまったとき　その値　を返します/になります。

1. 「calculateAverage()関数/ランナーの平均タイムを求める関数」の中で、「averageTime変数/平均タイム変数」を宣言してください。

2. 私たちが欲しいのは、ランナーの記録の配列から、関数の forループ の中で渡した値の平均値が、 セットされている/代入されている　「averageTime変数/平均タイム変数」です。Understand?/アンダースタンド？/分かりますか？

3. console.log()を使って、引数が、「timothy配列/ティモシーのレース記録のリスト,配列」である「calculateAverage()関数/ランナーの平均タイムを求める関数」の結果を、コンソール画面にプリントしましょう。

ヒントを見る:　配列各データの平均値は、すべての 要素/値 の合計を、要素の数/値の数 で、割ったものです。＜2. Tally race times　レースタイムの平均値は? ＞ での、「averageTime変数/平均タイム変数」を、求めた方法を確認してみましょう。「raceTimes配列/レースタイムの配列」である「引数」には、数値の配列　が,代入されます/を,格納します/を,セットします。そこで、「.length/lengthプロパティ」を使って、いくつの数値が入っているかを調べます。

関数呼び出しの結果を、コンソール画面にプリントする方法は、ここで、実演されました/やってますよ。― 「Functions in JavaScript 」 の 「Return 」を、クッリクして。

forループ の中で使われている「|| 」 ! 、何か? 　早い話が、『 「変数totalTime 」が、値を持っていたら、ランナーの記録の配列の「新たな要素であるタイム」を加えて、「変数totalTime 」に、再格納/代入 します。「変数totalTime 」に、値がまだ、格納/代入 されていなければ、「値がない」と言うことになるので、そのときは「0 」を、代入/セット します。』、と、少しも早い話ではないが、そういうことです。

解答例:
// エディタ画面
// runner times　・・・　各走者の記録の配列
var carlos = [9.6,10.6,11.2,10.3,11.5];
var sarah = [10.6,11.2,9.4,12.3,10.1];
var timothy = [12.2,11.8,12.5,10.9,11.1];

var calculateAverage = function (raceTimes) {
■for ( i = 0; i < raceTimes.length; i++ ) {
■■var totalTime = (totalTime || 0) + raceTimes[i];
}
// assign variable averageTime　・・・　averageTime変数に値を格納する.
■■var averageTime; // honbun 1.
■■averageTime = totalTime / raceTimes.length; // honbun 2.
■return averageTime;
};

// write the result of your function call ｕｓｉｎｇ console.log()
■// 関数の呼び出し結果を,console.log()を使って,コンソール画面にプリントする.
console.log(calculateAverage(timothy)); // honbun 3.

// コンソール画面
11.7

また、明日アップの予定です。

投稿: alarky | 2012年2月26日 (日) 02時27分

Codecademy,　続き.

＜5. Did I make the team? ＞
　　　あなたが、チームを作ったのですよ？　これから話すクールな方法で？　知らなかった？
みんなが一番知りたがってるのは、誰がこのチームを作ったかって事ですね？私は知っていますよ。あなたが、メンバー探しにどんなに熱心なのかって事を。では、さっそく、そのまさにメンバーを見つけるための 関数 を、書いてください。

ではでは、「isQualified()関数/あなた適任あるか? 関数」を書いて、その関数に、引数「averageTime変数/記録の平均値変数」 を、渡しましょう。このレース記録の平均タイムが、決め手なんですね。

実は、適任かを決めるのは簡単で、平均タイムが、11.5 秒より早ければ、合格、じゃなきゃ、おあいにく様です。

1. if/else文 ですね。平均タイムが、11.5 秒か、それよりも遅ければ、コンソール画面に、「お疲れ様です、次回はがんばってください。」、、早かったら、「ようこそわがチームへ、Mr.ボルト君！」と、プリントするようにしてください。

2. コードの終りの部分で、「isQualified()関数/あなた適任あるか? 関数」を、2回呼び出してください。最初のコードの引数値は、「11.3 」、次のコードには、「12.1 」です。― その値は、平均タイムです。

ヒントを見る:　「変数averageTime/平均タイム変数」を、if文 の中で使います。それを、「>= 11.5 」と比べてください。

計算のための「演算子/operator 」についてもっと知りたかったら、ここ ― Primitive Course 。

関数を呼ぶには、「関数名(引数); 」、、たったこれだけです。引数値、11.3、12.1 で、それぞれ関数を呼んでください。

解答例
// エディタ画面
var isQualified = function(averageTime) {
■if (averageTime >= 11.5) {
■■console.log("Close, but you didn't make the cut.");
■} else {
■■console.log("Welcome to the team, speedy!");
■■■// 最初、「! 」がないだけで、クリアできなかった、何と。
}
};

isQualified(11.3);
isQualified(12.1);

// コンソール画面
Welcome to the team, speedy!　・・・　ようこそわがチームへ、Mr.ボルト君！
Close, but you didn't make the cut.　・・・　お疲れ様です、次回はがんばってください。
.
.
.
＜6. All together now! ＞
　　　今まで書いたコードを、みんな一緒に！
さてさて、とうとう決める ! 時が来ましたね。今まで書いたコードを、ひとまとめにしてみましょう。Carlos/カルロス、Liu/リュー、Timothy/ティモシー が、合格するかは、あなたが作った関数が、知っています。

"Q"　コードの中には、各ランナーのレースタイム記録がありますね。また、完全に定義されていない「isQualified()関数/あなた適任あるか? 関数」も、あります。あなたは、足りない部分だけ補ってください。

1. 「calculateAverage()関数」を、＜4. Calculating averages with a function >でやったのと同じようにして、完成させて下さい。

2. 「isQualified()関数(適任か?)」中で、「averageTime変数(記録の平均値)」に、引き数を「runner(記録の配列) 」とした「calculateAverage()関数(平均値を求める)」が返した値を、セットしてください。
　　◎ 僕は、スコープが違う変数を、同じ名前にしたくなかったので、「averageTime2 」としました。今の時点では、やりすぎ?　・・・　一応、それは、別解と言うことにしましょう。スコープについては、Codecademy のレッスンとは別に、ちょっとした解説を、後述します。参考程度に見ておくといいと思います。

3. コードの最後の部分で、「isQualified()関数/あなた適任あるか? 関数」を呼んでください。引数は、「liu/リュー」と「timothy/ティモシー」、つまり、彼らの記録の配列が引数です。

4. 「Run 」をクリック！あなたが書いた、ビューティフルなコードが実行されますよ。
　　◎ Scratch Pad を使って、何も見ないで、書けたら、あんたは、偉い！最初は、見ながら、何回か書いて理解したら、挑戦するといいと思います。とても効果的な練習方法だと思います。

ヒントを見る:　calculateAverage()関数 が、返すのは、averageTime変数 ですよ。つまり、ランナーの記録の配列データを受け取って、平均タイムを返すのです。

「isQualified()関数」の中で、if文 の前に、「averageTime変数」に、値を代入しなければいけませんよ。それは、平均値を求める関数から、ゲットできます。　・・・　calculateAverageTime(runner)　・・・　引数の runner変数 には、記録データの配列を、格納/セット します。― つまり、calros や liu や timothy です。

最後の2行で、 isQualified(liu);　と、 isQualified(timothy);　を、実行します。　あなた適任あるか? 関数　を、実行するのです。

もし、どうしたらいいのか迷ったら、このレッスンの、 パーツ/一部/準備　とも言える、ちょっと前のレッスンに戻って、すべての変数が、あるべき場所に在り、正しい構文を伴っているか、確認してください。OK なら今度は、「スペルミス/書き間違い」や「大文字にすべきところはないか?」などを、チェックしてください。しばしばそういったちょっとした小さなミスが、上手く動かない原因になりがちです。

// 解答例　・・・　まあ、普通はこのパターンか?
// Runner times
var carlos = [9.6,10.6,11.2,10.3,11.5];
var liu = [10.6,11.2,9.4,12.3,10.1];
var timothy = [12.2,11.8,12.5,10.9,11.1];

// Define the function calculateAverage
■// calculateAverage()関数を定義する.　ここを見る:＜4. Calculating averages with a function ＞
var calculateAverage = function(raceTimes) {
■for (i = 0; i < raceTimes.length; i++) {
■■var totalTime = (totalTime || 0) + raceTimes[i];
■}
■var averageTime = totalTime / raceTimes.length;
■return averageTime;
};

var isQualified = function (runner) {
■// Assign the variable averageTime　・・・　averageTime変数に値をセット.
■var averageTime = calculateAverage(runner);
■if ( averageTime >= 11.5 ) {
■■// Times greater than or equal to 11.5 are too slow
■■■// 11.5秒より遅いのは,遅すぎです.
■■console.log("Close, but you didn't make the cut.");
■} else if ( averageTime < 11.5 ) {
■■// An average time of less than 11.5 can join the team
■■■// 平均タイムが,11.5秒を切ったら,チームに入れます.
■■console.log("Welcome to the team, speedy!");
■}
};

// Call the function isQualified on liu and timothy
■// liu と timothy の は,チームに入れるか?
isQualified(liu);
isQualified(timothy);

// コンソール画面
Welcome to the team, speedy!
■// ようこそ,Mr.ボルト君!
Close, but you didn't make the cut.
■// 残念!

// 別解例:
// Runner times
var carlos = [9.6,10.6,11.2,10.3,11.5];
var liu = [10.6,11.2,9.4,12.3,10.1];
var timothy = [12.2,11.8,12.5,10.9,11.1];

// Define the function calculateAverage
■// calculateAverage()関数を定義する.　ここを見る:＜4. Calculating averages with a function >
var calculateAverage = function(raceTimes) {
■for (i = 0; i < raceTimes.length; i++) {
■■var totalTime = (totalTime || 0) + raceTimes[i];
■}
■// 変数に「1 」を付ける.　averageTime2 とは,スコープが違う.
■var averageTime1 = totalTime / raceTimes.length;
■return averageTime1;
};

var isQualified = function (runner) {
■// Assign the variable averageTime　・・・　averageTime2 を定義する.
■var averageTime2 = calculateAverage(runner);■// ここ！
■if ( averageTime2 >= 11.5 ) {
■■■// averageTimeに,2を,付ける。averageTime1とは,スコープが違うから。
■■■// 大体やね～,同じ名前を使うことが,信じられない,と思うけど?
■■■// ☆ JavaScriptのスコープは,
■■■// 1. プログラム全体　2. 関数の中 ☆　の,2種類.
■■// Times greater than or equal to 11.5 are too slow
■■console.log("Close, but you didn't make the cut.");
■} else if ( averageTime2 < 11.5 ) {
■■// An average time of less than 11.5 can join the team
■■console.log("Welcome to the team, speedy!");
■}
};

// Call the function isQualified on liu and timothy
isQualified(liu);
isQualified(timothy);

// 別解 2:　しかし、このパターンが、一番いいのでは、
// averageTime変数を、グローバル変数にすれば、一番分かりやすい、と、思う。

// averageTime変数を,グローバル変数として扱う,パターン.
var averageTime;

// Runner times
var carlos = [9.6,10.6,11.2,10.3,11.5];
var liu = [10.6,11.2,9.4,12.3,10.1];
var timothy = [12.2,11.8,12.5,10.9,11.1];

// Define the function calculateAverage
var calculateAverage = function(raceTimes) {
■for (i = 0; i < raceTimes.length; i++) {
■■var totalTime = (totalTime || 0) + raceTimes[i];
■}
■averageTime = totalTime / raceTimes.length;■// varは,付けない
■return averageTime;
};

var isQualified = function (runner) {
■// Assign the variable averageTime
■averageTime = calculateAverage(runner);■// varは,付けない
■if ( averageTime >= 11.5 ) {
■■// Times greater than or equal to 11.5 are too slow
■■console.log("Close, but you didn't make the cut.");
■} else if ( averageTime < 11.5 ) {
■■// An average time of less than 11.5 can join the team
■■console.log("Welcome to the team, speedy!");
■}
};

// Call the function isQualified on liu and timothy
isQualified(liu);
isQualified(timothy);
.
.
.
◎JavaScript における、変数のスコープについて、考えましょう。

☆ JavaScrpt での スコープ/scope について
以下が、それを調べるための、実行コードと、出力画面です。
★ポイント★
JavaScript に於けるスコープは、2種類です。
　1. プログラム全体　－　グローバル変数
　2. 関数内のみ　－　ローカル変数

// エディタ画面
var onajika = "no.0";
■// 関数内で,onajika が,宣言されない限り,
■// この onajika は,プログラムのどこでも,有効です.

var kannsuu1 = function() {
■var onajika = "no.1";
■■// onajika は,kannsuu1 内で,宣言.
■■// よって,スコープは,kannsuu1 内のみだ.
■return onajika;
};

var kannsuu2 = function() {
■return onajika;
■■// onajika は,宣言されていないので,
■■// グローバル変数と同じ値.
};

var chigaimasuKa = function() {
■console.log(onajika);
■console.log(kannsuu1());
■console.log(kannsuu2());
};

chigaimasuKa();

console.log("------");
onajika = "no.x";
■// グローバル変数 onajika の値を,上書き.

chigaimasuKa();

// ●問題:　さて、コンソール画面に出力される値は?

// コンソール画面
no.0
no.1
no.0
------
no.x
no.1
no.x

ここまでで、アップします。続きは、来週の予定です。やっと、関数の基本が終わりました。
だんだん早く訳せるようになるつもりでは、ありましたが、内容もだんだん難しくなっていきますね。
まあ、気を落とさないで、続けます。また、来週！

投稿: alarky | 2012年2月26日 (日) 20時27分

最近、岩谷さんに、怒られてしまいましたが、それで、ちょっと反省すべき点に気づきました。訳し方についてなんですが、ちょっと、作者の思惑以上に、 デコレート/追加/歪曲も　があるかも。 もし自分の意見があるなる「注釈」として加えるべきですね。
ただ、説明の部分に関しては、こちらは、直接的なメッセージでない、日本語と言うハンディキャップがあると思うので、言葉の補足はありでしょう。
考えても見てください。この、JavaScript が、ジャバスクリプト だったら。
つまり、日本語のプログラミング言語だったらと言うことですが。
日本語だったら、本当に、見やすくて、ある程度なれた人にとっては、
自分の、考えを、ただ、書きつづれば、
それが、コンピュータで実行されるわけですよね。
すばらしいなあ！と、僕なんかは思ってしまうんですが。
ビューティフル !

さて、今回、Codecademy/コードカデミーの、コース一覧表にのっとって進めていくつもりでしたが、
1. 早く Object を知りたい。
2. スコープが、２つのみと言うことは、オブジェクトまでやると、大雑把に全体が見えそう。
3. いつまでたっても先に進めなさそう。
4. 4つ目は、if/else文で説明しますと、
　　●もし● (Javaコースがある　&&　コードカデミーでだ) {
　　　　えっ、それをやらないなんて考えられません。
　　} ●そうでなかったら● {
　　　　コードカデミーの、JavaScriptコースを、続けます。
　　　　　　// もちろん、JavaScript も、好きですが。
　　}
と言うことで、そのことも考えると、大まかなことは済ませたほうが、いいと思ったこともありまして。

P.S.　えっ、結局本格的に、オブジェクトの学習を始めるのは、来週からみたいです。

『Introduction to Objects I 』
　　　Objects I　// オブジェクト パート1
　　　今までの復習

＜1. We've come a long, long... ＞
　　　長かったね～

もし、「黄色の△マークの中に ! がある」 が、右エディタの左側、ちょうど、行の番号の隣ですが、それが出現していても、無視してください。 ただし、それが、「はじめからそうなっているときは ! 」です。それは、私たちが、君たちに課題として提示したこれから完成させていくコードです。これはCodecademy方式なので、覚えておいてね。Thanks!!

コードの、一番最小の部分においては、(オブジェクトではなく)　基本型/primitive datatypes/プリミティブ/primitives　です。3つの「基本型データ」は、もう私たちは使っていますよ。
　●Strings/strings/ストリング・タイプ　―　「"/' 」によって囲まれている　文字列/いくつかの文字　―　「"こんなふうです"」 または 「'こんなふうも'」
　●Numbers/numbers/数値　―　83792/数字 、　ただし、"83792" や "123" は、文字列です。要注意です！
　●Booleans/booleans/論理値　―　「true/真/正しい」か「false/偽/真でない」ことを示す、「返し値」です。
　　◎ 最初から、 参照タイプ/オブジェクト　は、存在し得ないのは、少し考えれば、分かりますよね。例えば、お好み焼き(オブジェクト)は、最初からありません。キャベツや小麦粉(材料/プリミティブ/基本型)は、絶対必要です(あの、好みの話をしているんじゃないですよ)。　話が少し飛びますが、純粋なオブジェクト指向言語ってのが、あるそうですが、そのオブジェクトの一部は、プリミティブなのに、オブジェクトの振りをしているだけです。　まだ、オブジェクトの話が出てきていないのに、何ですが、ここでの　趣旨/言いたいこと　は、オブジェクトは、基本型データが、集まって出来ていることを、私たち、読者に、予感させようとしているようです。

私たちは、比較演算子については学習済みですね(例えば、>, <=, !== など)。比較演算子で、とても重要なことは、いつも、「比べること/比較」が、実行されること。言い換えると、Boolean値(true/false) が、返されると言うことです。
　　◎...[that (any time) -(comparisons)- +(are made)+], [ｔｈａｔ -(a Boolean value)- +(is returned)+].

右のエディタに、長くて、へんてこな、コードがありますね。それは全体で、Boolean値を、返します。(言い換えれば、コード全体で、true か false です。)

このコードは、何を返しますか。

"Q"　変数 answer を、宣言し、その式の返す、Boolean値 を、代入してください。最初に書いてあるコードを、削除して、あなたが書いたコードを実行してください。
　　◎実際には、削除せず、加えればいい。
　　◎ +(Assign)+ (to it) @(the Boolean value that the expression evaluates to)@.　―　目的語が超長いので、後に来ている。

ヒントを見る:　「||/OR/論理和演算子」によって分けられている、それぞれの 式 に、注目してください。3つの一回り小さな 式 がありますね。先ずそれらの 式 が、それぞれ、何を返すか、です。それから、その3つの Boolean値 を、使って、コード全体の　値/Boolean/boolean/trueかfalse　を、決定してください。
　　◎ ..., then +(use)+ @(them ｔｈａｔ use the three Booleans)@ and ...　:　use ― (vt)を,働かせる/行使する/使う
　　◎ 論理和演算子（||）は、前のオペランドと後ろのオペランドのどちらか一方が true であれば、true を返します。両方のオペランドが true である場合も、true を返します。これ以外の場合、すなわち両方のオペランドが false の場合に、false を返します。
　　◎ 右エディタのコードは、true || true || true と、言うことですね。

その3つの小さな コード/式 に対して、次の質問に答えてください。
　● 「3×90 / 3*90 」は、270 ですか？
　● [[! / 反対は?]] (false [[&& / 両側trueでtrueだ]] ( [[反対は?]]false) )　// && ― Logical AND
　● 「bex 」を、全部大文字にすると、「BEX 」になりますか？
　　◎ 「式」「コード」「文」と言う言葉には、実は、明確な区別があります。が、その区別が、大きな問題になるとは、思えないので、僕は、だいたい、何でも、「コード」と書いています。とにかく、必要を感じるまでは、何でも、「コード」って、書いていくつもりです。　まあ、気になる方もいらっしゃるでしょう。調べてみました。簡単に説明します、が、深入りはしていません。その「心」は、完全に分かっていないので。文は、「有意義な処理を表す単位」(var a = 5 + 7;)　それで、式はその部品(5 + 7)、コードは、「プログラム片」です。　なので、「コード」って言えば、一番無難ですね。

「|| 」について、　1つ目の値　||/OR/または　2つ目の値　||/OR/または　3つ目の値　の、いずれかが、true であれば、全体の評価は、true です。そして、変数 answer には、true が、セット/代入 されます。

解答例
// エディタ画面、「var answer = 」を、書いて下さい。
var answer = (((3 * 90) === 270) || !(false && (!false)) || "bex".toUpperCase() === "BEX");
console.log(answer);■// オプション
.
.
.
＜2. Through the hard times... ＞
　　　苦しいときもあったよな~

私たちは、データを、 セーブする/取っておく/保存しておく　2つの方法を知っていますね。そうです、「変数」と「配列」です。私たちは、後から、値を使いたくなる時のために、変数に、値を、 格納/セット/代入　するのです。たとえば、文字列や、数値をです。

配列は、データを保存すると言う点で、変数と全く同じです。違いは、配列が多数の値を、保存できるのに対して、変数は1つだけです。

配列の各値にアクセスするために、「[ ] 」を、使います。また、配列のインデックスは、「0 」スタートだと言う事を、覚えておいて下さい。(言い換えれば、「ある配列/AruHiaretu 」の最初の値を、「変数,最初の値/saisyonoAtai 」に代入するには、 var saisyonoAtai = aruHairetu[0];　です。)

"Q"　右のエディタに書かれてある「8の倍数配列/multiplesOfEight配列」を見てください。そして、8の倍数として当てはまらない　要素/値　を、見つけてください。

6行目の、「var answer = multiplesOfEight[X] % 8 !== 0; 」の、「変数answer 」の値に、「boolean値,true 」が、代入されるように、「インデックスX 」の値を、置き換えて下さい。

ヒントを見る:　配列のインデックスは、0 から、始まります。こんな風に考えて下さい。― インデックス・ナンバーは、その　要素/値　の「左側にある値の数」と、一致します。と言うことは、[8,16,24,32,40,58] において、最初の要素 8 は、左側に値が、「0個」なので、インデックスは、[0] です。もっと言えば、要素 24 は、左側に、8,16 と、２つの値があるので、インデックスも、同じく [2] となります。

// 解答　・・・　「X 」を「5 」にするだけ。
　　// しかし、どうも考えすぎてしまったようだ。以下が、最初考えた答。クリアは出来ます。まあ、参考までに見ておいて下さい。

// やりすぎ、解答例:
// エディタ画面

// Here is an array of multiples of 8. But is it correct?
■// ここに、8の倍数の配列があります、が、ほんとに正しい?
var multiplesOfEight = [8,16,24,32,40,58];

// Test to see if a number from the array is NOT a true
■// 配列のある数値が、「8の倍数でない」事を確かめる。
// multiple of eight. Real multiples will return false.
■// 8の倍数だったら、「false」を返す。
// これを使う !　・・・　var answer = multiplesOfEight[X] % 8 !== 0;
■// しかし、このまま使うと、正しいコードなのに、クリアできない???
■// var answer;　として、グローバル変数にしないと、クリアできない。
■// Codecademy自体の、正解判別システムに、問題があるのかもしれない、2012/03/03。
■■// そして、答が正しくなくても、前回正しいと、正しいと判別するときがある。
■■■// それには、ブラウザを再起動すればよさそう。

var answer;
■// ここで、宣言しないと、クリアできない?　何故?
var DoredesuKa = function() {
■for (X = 0; X < multiplesOfEight.length; X++) {
■■answer = multiplesOfEight[X] % 8 !== 0;■// ここ!　宣言は終わっている。
■■if (answer === true) {
■■■return console.log("発見 ! " + multiplesOfEight[X] + " は, 8 の倍数ではない !");
■■} else if (X === (multiplesOfEight.length - 1) ) {
■■■return console.log("すべての値は,8の倍数です.");
■■}
■}
};

DoredesuKa();

// コンソール画面
発見 ! 58 は, 8 の倍数ではない !
.
.
.
＜3. ...And the good! ＞
　　　そしていい時もあったよね!

あなたはよく、FizzBuzz で、遊んだそうですね。　「FizzBuzzソリューション」のプログラム化には、２通りの方法があります。
　　◎(日本にはないぞ、ルールは、前回説明済み、または、ググって下さい。ここは、前のコードを利用して、手を抜こう。)
　　◎ -(We)- +(heard)+ @(a lot)@ (of [ｔｈａｔ you enjoyed FizzBuzz] ).　　// [名詞 (句/節)]

ほとんどの人が、初めてこのコードを書こうとした時、「Logical AND / 論理AND 」を表す「&& 」を、使ったでしょう。ここでは、 ネスト/nesting/入れ子/多重構造　の、if文 を、使ってみましょう。

もし、悩んでたら、ここを、もう一度復習してください ― FizzBuzz Project ― ここをクリックです。

"Q"
1. 1 ~ 20 を、コンソール画面にプリントする。
2. ルール
　● 数字が 3 で割り切れるときは、Fizz と、出力.
　● 5 で割り切れるときは、Buzz と、出力.
　● 3 と 5 の両方で割り切れるときは、FizzBuzz と、コンソール画面に　出力/プリント　する.
　●それ以外の場合は、そのまんまの数字を、プリント.

ヒントを見る:　
　1. console.log()を使っている、forループ を、使おう。
　2. 「3 でも 5 でも 割り切れる数値」を、ゲットするために、 多重構造/2重構造　の、if文/条件文 を、使おう。ここ 「conditionals 」を、クリックして参考にするといいかもしれないよ。
　3. あなたが、どこに、ネストされた、if文 を置いたらいいかに、助言をしますと、、、まず最初の if文 は、3 で割り切れることを、チェックしますよ。それから、その if文 の中で、if文 を使って、5 で割り切れることをチェックすればいいのです。

解答例:
for (i=1; i<=20; i++) {■// i が,1~20のとき,調べる.
■if ( i % 3 === 0 ) {■// 3で割り切れるか?
■■if ( i % 5 === 0) {■// しかも,5で割り切れるか?
■■■console.log("FizzBuzz");
■■} else {■// 3では,割り切れる.
■■■console.log("Fizz");
■■}
■}■
■else if ( i % 5 === 0) {■// 3では,割り切れないが,5で割り切れるか?
■■console.log("Buzz");
■}
■else {■// そうでなければ、そのまんまの数字をプリント。
■■console.log(i);
■}
}

// コンソール画面
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
.
.
.
＜4. I have to celebrate you baby ＞
　　　switch文 ! です.
.
.
＜＜　switch文 で、スイッチング ! ＞＞
あっ、気になっていた、項目です。重複してそうなレッスンをとばしたのはいいけれど、「switch文 は、やってないなあ！」と思っていましたが、これで、オブジェクトの項目が終わると、JavaScript の、一番基本的な部分は、ほぼ、カバーしているような気がします。あくまで、基本部分で、また、気がするだけですが。しかし、「現在(2012/03/04)の課題」の要点は、ほぼ終わるでしょう。

まず、「David Flanagan著『JavaScript 第5 版』（オライリー・ジャパン発行）」 から、の転用です。(本書にも、部分的な転用は、許可しますとありました。Thanks ! )

引用,ここから ~
　switch文 の書式は、以下に示すように if文 とよく似ています。

switch(#①－expression/式) {
　　statements/文
}

　しかし、switch文 の完全な書式を示すとなると、もっと複雑になります。コードブロック内のさまざまな場所に、「case:」という書式の caseラベル を記述します。switch文 が実行されると、#①－expression の値を求め、その値に一致する caseラベル を探します。一致する caseラベル があれば、その caseラベル の後ろに続く最初の文からコードブロックを実行します。一致する caseラベル がなければ、「default: 」という特別な caseラベル を探し、もしあれば、後ろに続く最初の文からコードブロックを実行します。一致する caseラベル もなく、default:ラベル もなければ、そのコードブロックをスキップします。switch文 を言葉で説明するのはかなり大変です。むしろ実例で説明するほうがわかりやすいでしょう。

switch(n) {
　　case 1: // n == 1 の場合、ここから開始する。
　　　　// コードブロック#1 を実行する。
　　　　break; // ここで中断する。
　　case 2: // n == 2 の場合、ここから開始する。
　　　　// コードブロック#2 を実行する。
　　　　break; // ここで中断する。
　　case 3: // n == 3 の場合、ここから開始する。
　　　　// コードブロック#3 を実行する。
　　　　break; // ここで中断する。
　　default: // case1~3 が成立しない場合、
　　　　// コードブロック#4 を実行する。
　　　　break; // ここで中断する。
}

　上記のコードで、それぞれの case句 の最後にキーワード break があることに注意してください。break文 が実行されると、最も内側のループ または switch文 が、直ちに終了します。
　switch文 の case句 は、実行すべきコードの「開始点」を示すだけで、「終了点」は示していません。したがって、break文 を省略すると、expression の値に一致した caseラベル の後ろにあるコードブロックから処理を開始し、コードブロックの終わりまで一連の文を処理していきます。このようにcaseラベルを次々に処理していくほうがよい場合もまれにはありますが、通常は switch文 の各 case句 の最後に、break文 を記述することをお勧めします。
　なお、関数内に switch文 を記述する場合は、break文 の代わりに return文 が使えます。どちらでも switch文 を終了できます。
~ 引用、ここまでです。

// switch文の例　by alarky
// エディタ画面
var switching = function(x) {
■if (x > 10) {
■■console.log("問題外 ?!");
■} else if (x == 0) {■// 「=== 」 では、バグる.　疑問,保留中.　多分,x は,stringだ.
■■console.log("冗談ですか?");
■} else if (0 < x && x <= 5) {
■■for (i = 1; i <= x; i++) {
■■■switch (i) {
■■■■case 1:
■■■■■console.log("switch");
■■■■■break;
■■■■case 2:
■■■■■console.log("文");
■■■■■break;
■■■■case 3:
■■■■■console.log("で, ");
■■■■■break;
■■■■case 4:
■■■■■console.log("スイッチ");
■■■■■break;
■■■■case 5:
■■■■■console.log("イング ! ,　5 です.　当たり !");
■■■■■break;
■■■}
■■}
■} else {
■■console.log("残念 ! , 数字が大きすぎです.");
■}
};

switching(prompt("スイッチングするには、何回? 数字を入力して下さい !"));

// コンソール画面
冗談ですか?

switch

switch
文
で,
スイッチ

switch
文
で,
スイッチ
イング ! ,　5 です.　当たり !

残念 ! , 数字が大きすぎです.

残念 ! , 数字が大きすぎです.

問題外 ?!

問題外 ?!
// switch文についての補足、ここまで。
.
.
このエクササイズでは、タイプすべき、「映画のタイトル」と「レビュー/批評/評論」が、大量にあります。あなたは、これって、コーディングのレッスン?、タイピングのレッスンじゃないの? って思うかもしれませんね。
　　◎ しかし、マウスでドラッグして貼り付ければ、それほどでもないかも?!

しかし、大量の　場合/「caseｓ 」/ケース　を扱うのには、理由があるのです。もし、このデータに対して、if/else文 で、コーディングしたら、非能率的で、分かりづらくなりそうです。「conditionals 」 ― このリンクで、私たちは、それに代わるものとして、何を習いました?

あなたは、例えば、映画のDVDコレクションを持っているとして、それぞれの映画に対して、あなたの批評文を割り当てる、コードを、書きたいとします。(◎何のために? 僕にも分かりません、、、とにかくそういう設定に納得してください。僕の前のコードにしても、こういう今一飲み込めないフィクションはよくあります.)　明らかに、下記の批評文は、それぞれ映画に対して特有のものですね。(◎特有のものか、どうかはともかく、下記の訳は、難しい ! 、パスさせていただきます.)　下記に、「映画のタイトル」と「その批評文」があります。前習った何かの構文を使って、コードを完成させましょう。
● 対応させるべき、 映画のタイトル　と　批評文.
　"Matrix" - "good trip out"
　"Princess Bride" - "awesome date night movie"
　"Welcome to America" - "Amjad's favorite"
　"Remember the Titans" - "love the sports"
　"Why do I look like I'm 12?" - "The Ryan and Zach story"
　"Fighting Kangaroos in the wild" - "Token Australian movie for Leng"」

「映画のタイトル」 を 引数 に取り、その情報に基づいた、「批評文」を返す「getReview()関数/批評文はどれだ?関数」を使いましょう。もし、上のリストにない映画のタイトルが、引数として渡されたら、「I don't know!/ない! 」を、返して下さい。

ヒントを見る:　「if ~ else if ~ else 」で、コーディングは可能です、が、それは、 あんまりよくないでしょう/スパゲッティー・コードみたいですね　。　多数の 筋書き/アルゴリズム や、いろいろな 引数 がある状況では、switch文 を、使いましょう !
　　◎ comes　・・・　(名詞)comingｓ　と、解釈.　・・・　たくさんの引数.
　　◎ スパゲッティコード　・・・　処理の流れや構造を把握しにくく、修正や機能の追加が困難なプログラム.　・・・　ここでは、そこまで大げさではないけれど。

関数の定義を書いているのですから、「return 」キーワードを、使いましょう！
　　◎ switch文 であっても、関数内であれば、上記の「break; 」ではなく、return は、使えます。その方が、書きやすいでしょう。

返す批評文が正しくなるよう、確実に書いて下さい。

// エディタ画面
var getReview = function (movie) {
■switch (movie) {
■■case 'Matrix':■// 「' 」でも 「" 」でも, どちらでも,文字列を表せる.
■■■return 'good trip out';
■■case "Princess Bride":
■■■return "awesome date night movie";
■■case "Welcome to America":
■■■return "Amjad's favorite";
■■case "Remember the Titans":
■■■return "love the sports";
■■case "Why do I look like I'm 12?":
■■■return "The Ryan and Zach story";
■■case "Fighting Kangaroos in the wild":
■■■return "Token Australian movie for Leng";
■■default:
■■■return "I don't know!";
■}
};

console.log(getReview(prompt('どの映画の批評文が,見たいですか?')));

// コンソール画面
I don't know!
　That's correct! Next Exercise
good trip out
　That's correct! Next Exercise
.
.
.
＜5. I have to praise you like I should! ＞
　　　よくやったね、私もね !
　　　　　◎ I have to praise you like I should ｂｅ ｐｒａｉｓｅｄ.　かな?

ここまで、乗り切れておめでとうと言いたい !　私たちは、あなたが、私たちのレッスンを楽しみ、JavaScript の、コーディングを、すいすいとこなしていることを、願っています。

まだ私たちには、あなたをわくわくさせる、いくつかの　コード/エクササイズ　がありますよ。あなたは、その発表を、もう待てないよね。

"Q"　もうあなたに、 Objects/オブジェクト　を覚える準備が出来ているのなら、コンソール画面に、「I'm ready for Objects! / 準備OK ! 」と、プリントしてください。

ヒントを見る:　私たち Codecademy/コードカデミー は、悪ふざけが好きなんですよ。でも、ちょっと違うのは、私たち特有のギャグって事かな。最初のジョークは、コンピュータお宅のジョークかも。だって、それは、コードの中だから。そしてしかも、「バットマン」を知ってないと面白くないよね。だけどさ、実はそのギャグは大好きなんだ、そして君に受けることを、期待してるんだ !　このコードをコピーして、 Scratch Pad/エディタの右上当たりに注目　に、貼り付けて、実行してみて !　―　Array(16).join( 'hero'-1) + "Batman";　―　結果は、こうです。
　NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNBatman

コードにジョークを含めるのは、もうやらないと約束します。それより、もっと、ジョークを、[send feedback] の中に、書き込んでくれないかなあ。待ってます、よろしく !

// エディタ画面
// any topics you want us to review, email contact@codecademy.com
■/// 何か、復習して欲しいことがあったら、contact@codecademy.com まで、eメールください。
// if you want to see the winning joke for this week, see the hint!
■/// 今週の、ベストジョークは、「ヒントを見る/show hint 」の、中です。
// if you think you have a better joke, send it in!
■/// もっと面白いジョークがあったら、「send feedback 」してね !

console.log("I'm ready for Objects!");■// ここ!

また、来週！(予定で～す)

投稿: alarky | 2012年3月 4日 (日) 14時16分

コードカデミー、続きです。
さて、いよいよ、オブジェクトの作成です。
決して簡単ではないと思います。僕なりに一生懸命書きましたが、分からなかったら、しつこく、ググったりして納得して欲しいと思います。
自分でも、知らないことばかりでした。しかし、その分、JavaScript で、出来ることが増えるのを、期待したいです。

『Introduction to Objects I ≫ Section 2 』
「What's an Object 」
　　　オブジェクトⅠ・ セクション2　　オブジェクトって?

＜1. Intro ＞
　　　さあ、Object/オブジェクト を作りましょう.

今までは主に、2つのデータタイプ、「数値」と「文字列」を、扱ってきました。

このレッスンでは、3つ目のタイプ(他にも多少やりましたが,まずは,一番大事なことから覚えましょう.ほかの事-NaNとか-は,とりあえず,忘れましょう.)、オブジェクト/Object に、焦点を当てていきます。このデータタイプは、ちょっと複雑ですよ。オブジェクトは、現実の世界の出来事を、表現できます。例えば、「誰か、あなたとかあなたの好きな人とか」、や「銀行口座」などです。an-object/Object/ある事柄,物　に、あなたにとって重要な全部の情報を、詰め込みましょう。
　　◎ ここで、気をつけるべきは、と言うか、当たり前のことなんですが、その出来上がったオブジェクトは、「作者」の、独断と偏見に満ち満ちた、「オブジェクト」だと言うことです。まあ、ちょっと大げさでしたが。例えば「カー/car 」オブジェクトなら、ある人は、「性能」に目をつけるでしょうし、ある人は、「燃費」が、ポイントかもしれませんし、またある人は、「色と形」などでしょう。とにかく「作者」によって出来上がるオブジェクトは、さまざまだ、と言うことです。そして、「性能、燃費、色、形、さまざまなオプション」をとりいれ、だれもがまあ、納得いきそうな、オブジェクトは、一般的に、誰もが使う、「有名オブジェクト」でしょう。もっとも、一般的な「カーオブジェクト」は、聞いたことありませんが。　　例えば、「Stringオブジェクト」は、「超有名な」オブジェクトですね。
　　◎ ここで、僕も含めて、まず、オブジェクトについて、わかりずらいなあ～、と思う事として、車、パソコン、テレビなど、具体的に想像しやすいものは、すぐなじめると思いますが、オブジェクトには、「形に出来ないもの、頭の中での考え、抽象的なこと」もある、と言うことです。なので、「Stringオブジェクト」も、オブジェクトなのです。　　僕としては、機能的な違いはありませんが、
　　　　　「具体オブジェクト」
　　と、
　　　　　「concept/概念/抽象的 オブジェクト」
　　の、
大きく、2種類のオブジェクトがあると、もっと一般的に言われていてもいいぐらいだと思いますが。　　この考えを、頭においておくと、後々、「Error/エラー オブジェクト」なんてのが出てきても、『何だこれは、一体どこに、形があるんだ！』なんて、思わなくても、いいと思います。

さて、どうやって オブジェクト を作る?　変数や関数で宣言したように、ここでも、まず、「var 」で、「宣言/～を作りますよ ! / ～と言う名前で作りますよ ! 」と、タイプです。続けて、「オブジェとの名前」です、それから、「= 」とタイプします。　　それから、それから、「{ 」で始めましょう。　それから肝心な中身を、書きます。　最後は、「}; 」で、OK です。
　　◎ つまり、 　var aruObject = { // 中身 };　　ですね。

"Q"　「bob/ボブ君オブジェクト」を、「中身/情報 は無し」で、作ってください。

ヒントを見る:　変数を作ったように、オブジェクトを作れます。中身が空っぽのオブジェクトはこうです。
　　　var karakaraObject = { };
この問題での、オブジェクトの名前は、「bob 」ですね。

// 解答例:
var bob = { };
.
.
.
＜2. Properties ＞
　　　あなたのプロフィールは?

オブジェクトの中に含めるそれぞれの「情報/値/要素」は、「property/プロパティ」と言います。プロパティを,あるオブジェクトの「整理ラベル/値はどんなものかの説明」のようなものだと思って下さい。オブジェクトを作る時、それぞれの プロパティ には、「名前」を付けます。その後に、「: 」を付け、その後に、「値」が来ます。例えば、「Bobさんについて,オブジェクト/Bob's object 」が、「彼は,34歳です. 」と言うことを、示すには、「age(年齢): 34 」とすればいいのです。
　　◎ 「property/プロパティ」は、 あなたにとって/オブジェクトの作者にとって　そのオブジェクトに必要不可欠だと思われる、 要素/構成部品　です。

「age(年齢) 」は、Bobさんオブジェクト の、プロパティ/property です。そして「34 」は、その プロパティ の「値」です。複数の プロパティ を書くときは、『コンマ/, 』で、区切ってください !　最後のプロパティには、『コンマ』を、付けないで下さい !

"Q"　私に関するオブジェクトを、右エディタ上に作りました。それと同じように、あなたの「年齢」「住んでいる国」について　表現している/説明している　「Meオブジェクト/私についてのオブジェクト」を、作ってください。

ヒントを見る:　「Spencerオブジェクト/スペンサーさんObject 」を真似て、Meオブジェクト を作ってください。あなたの 年齢/age、住んでいる国/country についてです。

2つの プロパティ の間には、「コンマ/, 」を忘れないでね !

// 解答例:
　// 今回から、■ マーク の使用はやめようと思います。
　// 見づらいな、やっぱり。
　// もし、コピーして使いたい場合、テキストエディタの、
　// 「全角空白表示」と言う機能を、使って下さい。
　// 自分のエディタが、対応していなかったら、
　// グーグルで、捜してね。
　// そして「全角空白文字/全角スペース」を、
　// 「Tab文字」か「半角空白文字」に、置換してください。
　// ★ ただ、出来るだけ/ほぼ絶対、タイプすべきです。★
　// 苦手な方は、Googleで、「タイピングソフト」を、
　// 捜してください。
　// 2つとも、フリー/タダ でも、たくさんあるでしょう。
var Spencer = {
　　age: 22,
　　country: "United States"
};

// make your own object here called Me
　　/// あなたについてのオブジェクトを作ってください。
var Me = {
　　age: 50,
　　country: "Japan"
};
.
.
.
＜3. Accessing Properties ＞
　　　プロパティに,アクセスしよう.

今や、私たちは、プロパティ を含んだオブジェクトの作り方を知っているわけですが、実際の使い方はどんな風なのかを見てみましょう。

右エディタの、「bob/Mr.Bobオブジェクト」と「susan/スーザン/Ms.Susanオブジェクト」を見てください。この例では、これらのオブジェクトは、「name/名前」と「age/年齢」の2つの「プロパティ」を、持っていますね。

これら2つのオブジェクト作成後、私たちはそのオブジェクトのプロパティ　に,アクセスする/の,値をゲットする　ためのコードを加えました。そして、「bobオブジェクト」の「プロパティ name/名前」の「値」"Bob Smith" を、グローバル変数「name1 」に、セット/保存/セーブ しました。10行目のところです。

"Q"　Mr.Susan/スーザンさん の名前と年齢にアクセスし、エディタに書かれてある グローバル変数/name2,age2 に、その値を、セーブ/保存 して、このエクササイズを終えましょう。13行目、14行目のコードの、残りの部分を書いて下さい。

ヒントを見る:　「var name1 = bob.name; 」の詳細,何をやっているか?
　1. グローバル変数 name1 の,宣言.
　2. ある値を、この name1 に、セットする。
　3. その値とは、「bob.name 」です(言い換えれば,Bob氏オブジェクト の プロパティ・name にセットされている値です.)。

上記と同じ 3つのステップ を手本として、変数name2,age2 の、残りの部分を完成させましょう。

// 解答例:
var bob = {
　　name: "Bob Smith",
　　age: 30
};
var susan = {
　　name: "Susan Jordan",
　　age: 25
};
// here we save Bob's information
　　/// 私たちは,ここに,Bob氏の情報をセーブしました.
var name1 = bob.name;
var age1 = bob.age;
// finish this code by saving Susan's information
　　/// スーザンさんの情報をセーブするよう,
　　/// 以下のコードを完成させる.
var name2 = susan.name;　　//ここ !
var age2 = susan.age;　　// ここ !

// オプション
console.log("Susan's name is " + name2 + ".");
console.log("Susan's age is " + age2 + ".");

// コンソール画面
Susan's name is Susan Jordan.
Susan's age is 25.

◎ これで、「length 」は、プロパティ と言う謎が解けた、と言うか、思い出しました。
　つまり、
　文字列の　長さ/length　は、
　文字列と言うオブジェクトの、
　プロフィール/プロパティ/所有物　だ。
.
.
.
＜4. Accessing Properties, Part 2 ＞
　　　プロパティにアクセス、パート2.

前のエクササイズ(＜3. Accessing Properties ＞)で、「ドット・マーク/ . 」を使って、プロパティに、アクセスしました。2人とも、いい名前だったでしょ。つまり、「ObjectName.PropertyName / オブジェクトの名前 . プロパティの名前」 で、プロパティ に、アクセス出来ます(例えば、bob.name)。
　　◎ いい名前だったでしょう。　・・・　そんなの、エディタを見れば分かるわと、思ったあなた！、いまひとつ理解していませんね。つまりですね、長いコードで、もう名前を忘れてしまったとしても、このコードで、アクセスできると言うことです。　例えば、「.length 」で、文字列の長さや、配列の長さ　に,アクセスできるのも/を,ゲットできるのも　、これと同じ仕組みなのです。

「ドットマーク/ . 」に加え、「角カッコ / [ ] 」でも、目的の/ゲットしたい プロパティ の 値 に、アクセス出来ます。この場合はこうです、、、「ObjectName["PropertyName"] / オブジェクトの名前["プロパティの名前"] 」。　「プロパティの名前」を、「" 」で囲むことを、お忘れなく !

右のエディタにある例は、「dog/わんわんオブジェクト」です。「[ ] 」を使って、「わんわんオブジェクトの 品種/species プロパティ」にアクセスして、変数species(◎同じ名前なので,超注意 ! )に、どうやって セット/セーブ しているかを、よ～く見て下さい、、、8行目です。

"Q"　「品種プロパティ/species 」の例と同様にして、また、「[ ] 」を使って、その dog/わんわんオブジェクト の、「プロパティ weight/体重, age/年齢」 を、「グローバル変数(プロパティと同じ名前です) weight/体重, age/年齢」に、セーブ/保存 して下さい。

ヒントを見る:　「[ ] 」を使って、どうやって、オブジェクトの プロパティ の 値 を、取り出しているかを、8 行目を、参考にして下さい。あなたのコードは、それととてもよく似ているはずですよ。

// 解答例:
// Take a look at our next example object, a dog
　　/// 私たちの次のサンプルオブジェクトは,「dog/わんわんオブジェクト」です.
var dog = {
　　species: "greyhound",
　　weight: 60,
　　age: 4
};

var species = dog["species"];　// これが,見本です!
// fill in the code to save the weight and age using bracket notation
　　/// 「[ ] 」を使って,weight/体重 と age/年齢 を,セーブしてください。
var weight = dog["weight"];　　// ここ！
var age = dog["age"];　　// ここ！

// オプション
console.log(species);
console.log(weight);
console.log(age);

// コンソール画面
greyhound
60
4
　That's correct! Next Exercise
.
.
.
＜5. Another Way to Create ＞
　　　違うやり方で,オブジェクトを作ろう.

さっきは、オブジェクトリテラルを使って、オブジェクトを作りましたね、、、つまり、「{ } 」を使うこと、そしてその中に、プロパティ を定義するやり方です。
　　◎ オブジェクトリテラル とは、ゼロ個以上のプロパティ名とそれに結びつけられた値のペアのリストであり、「波括弧 {　} 」 でくくられているもの。

「{ } 」を使わず、オブジェクトを作るもう一つの方法は、キーワード「new 」を、使うことです。つまり、constructor/コンストラクタ/建築担当者 を使って作る方法です。

「new 」キーワードの後に、「Object() 」を、後に続けて書き、「空っぽのオブジェクト」を、作ってみましょう。一般的な構文はこうです:
　　　var objectName/オブジェクトの名前 = new Object();

「空っぽのオブジェクト」を作った後は、「プロパティ」とその「値」を、満たしましょう(原文では,「properties and labels 」だが、labels ではなく、values でしょう.)。どうやって?　私たちがどうやっているかを、「オブジェクトbob 」を、作っているところで、見て下さい。私たちは、「bob.name 」として、「オブジェクトbob 」の、「プロパティ・name 」を、設定しています。　そしてそれに、何がしかの値を、格納/セーブ/代入 しているのです。この方法と、「オブジェクトsusan1 」で、設定する方法とを、見比べてみて下さい。(「name: "Susan Jordan", 」のところ.

「オブジェクトsusan1 」を、よ～く、観察してください。そして、「{ } 」を使った、定義の方法を、チェックしておきましょう。

"Q"　コンストラクタ を、使った方法で、「オブジェクトsusan2 」を、作成してください。そして「オブジェクトsusan1 」と同じ プロパティを、設定してください。

ヒントを見る:　「new 」キーワードを、次の、2段階の手順のうちに、含めてください。
　1. 空っぽのオブジェクトを、作成してください。2行目で私たちがやった方法を参考にして下さい。(var bob = new Object(); )
　2. プロパティ は、2つあります。(name, age)

// 解答例:
// Our bob object again, but made using a constructor this time
　　/// また「Bob氏オブジェクト」です.でも今回は,コンストラクタを使ってます.
var bob = new Object();
bob.name = "Bob Smith";
bob.age = 30;
// Here is susan1, in literal notation
　　/// ここに,「オブジェクトsusan1 」があります. オブジェクトリテラルを使っています.
var susan1 = {
　　name: "Susan Jordan",
　　age: 24
};
// Make a new susan2 object, using a constructor instead
　　/// 「オブジェクト susan2 」を,コンストラクタを使って,作ってください.　以下が,答.
var susan2 = new Object();
　　susan2.name = "Susan Jordan";
　　susan2.age = 24;

// オプション
console.log(susan2.name + ", age:" + susan2.age);

// コンソール画面:
Susan Jordan, age:24
　　That's correct! Next Exercise
.
.
.
＜6. Putting it all together ＞
　　　このセクションで学んだことのまとめ.

今や、私たちは、2通りの オブジェクト の作り方、さらに、プロパティ の扱い方も、学びましたね。みんなまとめて、使ってみましょう。

"Q1"　まず、オブジェクトリテラルを使う方法で、snoopyオブジェクト を、作りましょう。オブジェクトリテラル を使ったやり方は、唯一、「{　} 」の中に、プロパティ と 値 を、コロンで分けてペアにするという、やり方です。そしてそのペアは、コンマで区切られます。
　　◎ オブジェクトリテラルを使ったやり方の、テンプレートは、改行してない例の方が、分かりやすい:
　　　　// カンマの打ち方が、自然に見えるので.
　　　　　var reiObject = { iti: "one", ni: 2, san: "san"};
　　◎ 空オブジェクトの作り方:
　　　　　var karaObject = { };　　または、 　var karaObj = new Object();

"Q1"　「snoopyオブジェクト」は、2つの プロパティ があります。"beagle"(ビーグル) と言う、品種を表す文字列が値の「species 」と、10 という数値が値の「age 」です。

"Q2"　そして、「buddyオブジェクト」を作ってください。5歳の、golden retriever / ゴールデンレトリーバー です。「コンストラクタ＜Object()は,コンストラクタの一つ＞」を、使いましょう。この方法では、キーワード「new 」を、使います。そして、空のオブジェクトを作りましょう。それからそれから、「. /ドット」を使って、プロパティ(5歳のゴールデンレトリーバー)を、設定してください。

ヒントを見る:
　snoopy:
　　1. 「{ 」で、はじめます。
　　2. プロパティとその値をタイプして下さい。
　　3. 終りは、「}; 」です。
　buddy:
　　1. new を使って、空のオブジェクトを作りましょう。
　　2. 「. 」を使って、プロパティに値を設定します:　「このオブジェクト.プロパティ名 ＝値; 」
　　　　◎ つまり、 buddy.プロパティ名 = 値(数値や"文字列");　です。

// 解答例:
// help us make snoopy using literal notation
　　/// オブジェクトリテラルで,作りましょう.
// Remember snoopy is a "beagle" and is 10 years old.
　　/// スヌーピーは,ビーグルで,10歳です.
var snoopy = {
　　species: "beagle",
　　age: 10
};

// help make buddy using constructor notation
　　/// コンストラクタ,Object()を使って下さい.
// buddy is a "golden retriever" and is 5 years old
　　/// buddyは,ゴールデンレトリーバーで,5歳です.
var buddy = new Object();
　　buddy.species = "golden retriever";
　　buddy.age = 5;

// オプション
console.log("snoopy(" + snoopy.species + "), age-" + snoopy.age);
console.log("buddy(" + buddy.species + "), age-" + buddy.age);

// コンソール画面
snoopy(beagle), age-10
buddy(golden retriever), age-5
　　That's correct! Next Exercise
.
.
.
＜7. More Practice Making Objects ＞
　　　最後に、もう1回作りましょう.

ナイス、クリア！もっと熟達するために、好きな プロパティ で、もう1つ オブジェクト を作りましょう。

「BMWオブジェクト」を、3つの プロパティ で作って下さい。「cost/費用、"too much"/高すぎ」、「speed/スピード、220 」、「country/生産国、"Germany"/ドイツ」です。

ヒントを見る:　＜2. Properties ＞の、「オブジェクトSpencer 」を見て下さい。ここで作るオブジェクトは、同じやり方です。ただ、プロパティ と 値 が違う点を除いては。

あなたが、オブジェクトリテラルを使って作るつもりなら、定義するためには、「= 」の代わりに、「: 」を使って下さい。そしてそのオブジェクトの中で、「, / コンマ」で、プロパティ を、区切ってください。

// 解答例、もう一つのやり方もあります―ヒントを見る で、チェック.
// エディタ画面
var BMW = new Object();
BMW.cost = "too much";
BMW.speed = 220;
BMW.country = "Germany";

// オプション、コンソール画面の出力に、注目 !
console.log(BMW);

// コンソール画面、オブジェクトリテラルだ !
{ cost: 'too much', speed: 220, country: 'Germany' }
　// このコピーが、もう1つのやり方に利用できる。
　　That's correct!

それでは、また、です。

投稿: alarky | 2012年3月11日 (日) 08時43分

コードカデミー/Codecademy、続きです。
わたくし事で、アップ量が少なくなることもありますが、
奇跡 / Java && コードカデミー　が起きない限り、
やる気はなくなりませんので、どうぞよろしく。

ところで、こんなことをいまさらって感じですが、
★ JavaScript のよさ、が、分かってきました。
なにしろ、とりあえず、インターネット/Webページ/ブラウザ(この言い方が一番適当)で、
　　　すぐに実行できる！
HTML の基本さえ分かれば、OK でしょう！
HTML は、難しくやろうと思えば、かなりそうでしょうが、
思いっきり　手を抜けば/超基本的なことに的を絞れば　、
すぐに覚えられるでしょう。
または、サンプルコードのコピーを利用すれば、
覚える必要さえないでしょう。まあ理解は必要でしょうが。
他の言語は、言語以外の知識を覚えるのが、
結構大変そうです。
コードカデミー/Codecademy でも、いずれ、HTML については、
サポートすると思われます。

とは言え、僕は、現時点では、ちょっと見えてきた程度なので、
もっと分かったら、続きを書きたいと思っています。

また、どれほどのことが、出来るのかと言う点で、
劣るのではないかと言う疑問もありますが、
しかしですね、
何しろ、ブラウザで、プログラムを動かす方法としては、
他の言語では、かなり勉強しなくてはならないのに比べたら、
もう、ダントツの手軽さでしょう。

また、この、ページの最初の岩谷さんの文章で、
　　　たとえば
　　　HTTPプロトコルのサーバとクライアント間に関しては、
　　　HTTPで可能なプログラミングしか意味がない。
って、おっしゃってますが、
早い話、僕も含め、みなが一般的に、
インターネットって言っている、
ブラウザによるページのための、
(だから、それは、普通に言うインターネットのことです.)
プログラムが、圧倒的に、一番使われている/実用的である
と言うことです。

であれば、JavaScript が、人気を得つつあると言うのも
/人気があると言うのも、
(人気と言っても、実際の使用率とか、支持されている率
とか、いろいろな側面があるので、
正確には、よく分かりませんが。)
納得できる話でしょう。

実際には、レンタルサーバーを借りて、
(有名なところの方が、安全で、便利だと思います.)
すぐに使えるのではないでしょうか?
JavaScript は、ブラウザによって、動かないこともあると聞きますが、
今の普及度を考えれば、すぐに過去の話になりそうです。
まあ、僕は、今は、コードカデミーに、没頭するつもりなので、
実際には、よく分かりませんが、
興味のある人は、調べる価値大有りです。

またまた、だんだん高度なものに
ステップアップできるのも素晴らしいです。
HTML や、他の技術と組み合わせて、
かなり素敵な、インターネットページが出来そうです。
何しろくどいですが、
まず、スタートが、ダントツに簡単で、
少しづつ、高度なことが覚えられると言うのが、
最高のメリットだと思います。

ついでに言えば、JavaScript の構文は、
Java の構文と、酷似/そっくり/とても似て います。
Java を、覚えるのもずいぶん楽になるでしょう。
そして、JavaScript が、高度に扱えるようになったころには、
あなたは、コンピュータの知識も、かなり身についているでしょう。
それは、また違うことを覚えるために、大いに役に立つはずです。
と言うことで、JavaScript は、今最も、旬な言語かもしれません。
(今　・・・　現在は、インターネット≒ブラウザ なので。)
・
・
・
『Introduction to Objects I ≫ Section 3 』
「A Method to the Madness 」
　　　オブジェクトⅠ・ セクション2　　恐怖のメソッド !　/　さっすがメソッド ! / 素晴らしいメソッド !　
　　　　　(◎ 恐怖　･･･　関数と比べて、オブジェクトに関連付けられているメソッドは、「C言語プログラマ」とっては、恐ろしい、ライバルかも！)

＜1. Function Review ＞
　　　関数の復習

ここでは、
「method/メソッド/
(目的達成の)方法/(何かをゲットする)手法」
に、焦点を当てます。
method/メソッド は、オブジェクト指向/OOP 言語においては、オブジェクトに関連付けることに意義があります。(◎ちょっと意訳し過ぎかも.)　オブジェクト指向/OOP は、私たちが、後で、力を入れて取り組むべき大事な事柄です。
　　◎ 一つ疑問が解決した、、、関数とメソッドの違い、、、関数は、それだけで独立した「めそっど/やり方」と言えそうだ。一方、メソッド/method は、Object/オブジェクト に、関連付けられた、やり方だ。その「心」は、一つには、すぐにどんなメソッドかを連想できることです。例えば、「howToCook()/調理法/作り方」がただの関数なら、、、例えばの話ですが、、、「生クリームとイチゴ」を、ホットケーキの上にのせて、お菓子を作ろうとした場合、「ホットケーキの作り方関数/howToCook()関数」を、使うつもりが、実は、「お好み焼きの作り方関数/howToCook()関数」だった場合を想像してみてください。普通は在りえない料理ですね！？　まあ、ここでオブジェクトが活躍するわけです。簡単ですね。「ホットケーキオブジェクト」の「howToCook()メソッド/調理法メソッド」を、呼べばいいわけですよ。少なくとも、今の(学習)時点のメソッドに関する大きな特徴の一つは、これです！
　　◎ つづき、、、ただ、JavaScript に、関数が何故あるのか、「ちょっとした事」を「すばやく」やるためかな？、、、どっちがいいのか? 一長一短なのか? 分かりませんが、JavaScript には、「彼」なりの「哲学」がありそうです。
　　◎ オブジェクト指向/OOP　・・・　と言っても、いろんな 側面/メリット があると思います。一言で言えば、プログラムを「より、スマートに/スッキリと、分かりやすく、修正も簡単で... 忘れました.」のようなことですが、つまり、一言では言えません。　さらに、今や、ほぼ当たり前のプログラミング手法なので、「オブジェクト指向を理解する」という言い方自体、ちょっとナンセンスなような気もします。もう、どちらかと言えば、「うんざり」です。今やほぼ当たり前の手法だと思われるので、僕のように、Java しかやったことのないような人とか、初めてやる人に、「オブジェクト指向」と言う「はっきり意味が決まっていない/何通りにも取れる」ことばを使うのは、話が紛らわしくなるだけのような気がします。「オブジェクト『指向』(という言い方)が何ぼのもんじゃい！」と思っていて、OK だと思います。

「メソッド/method 」は、「関数/function 」と、似ています。「メソッド」へ行く前に、さらっと関数を、思い出して見ましょう。「関数」は、
　function
と言うキーワードの後に続けて:
　1. 「( ) / 引数なしのカッコ 」 または 「(1つまたは、いくつかの引数) 」
　2. 「{ 実行コード/関数の仕事/行われること }
　3. 「; 」最後にセミコロンを忘れずに !
　　　◎ 最近「ドットインストール」と言う「Webページ」を見つけて、違う関数の定義方法を見つけましたが、なにも、今、覚えることは、ないような気がします。最初は、出来るだけ少なく完全に覚えた方が、得策でしょう。慣れてきたときには、あんなの覚えるのは、へのかっぱ、かもしれません。　　「ドットインストール」についての感想は、「予習、復習」には、最適だと思いました。僕は、「タイプする/実際にコードを書く」ことが、何より上達の近道だと思います。プログラミング上達には、「理解する側面」より、「慣れる側面」の方が大きいような気がします。

そして、関数を呼ぶとき、「引数の変数」に、「引数の値」を、セットするために、それを渡すことも出来ます。
　　◎ 「( ) 」の中に、値や変数をおくこと。
　　　　　　　// 例えば、　aruKansuu(1, "あ");

例えば、2行目の、「square()関数/2乗関数」は、「x 」を引数とし、「x の 2乗/自乗 」を、返します。

"Q1"　「multiply()関数/掛け算関数」を定義しなさい。「x, y 」を引数とし、「x * y / x × y 」 を、返します。

"Q2"　「( ) 」の中に、2つの引き数を渡して、あなたの作った「multiply()関数/掛け算関数」を呼んで下さい。

ヒントを見る:　「multiply()関数/掛け算関数」を書くために、「square()関数/2乗関数」を手本としてください。2つの引き数を、「( ) 」の中で、「, / カンマ」で区切って、書いて下さい。

関数を呼ぶには、関数の名前のあとに、「(渡したい引数) 」を付けるだけですよ。例えば、「square()関数/2乗関数」で、「2の2乗」を求めたかったら、
　　　square(2);
とするだけです。

// 解答例:
// Accepts a number x as input and returns its square
　　/// 「x 」を引数とし,自乗/正方形の面積 を,返す.
var square = function (x) {
　　return x * x;
};

// Write the function multiply below
　　/// 「掛け算関数」を書いて下さい.
// It should take two parameters and return the product
　　/// その関数は2つの引き数を取り,掛け算の結果を返します.
　　　　/// ◎ 縦,横を引数とし,面積を返すと言う設定にする.
var multiply = function(tate, yoko) {
　　return tate * yoko;
};

var x = prompt("縦の長さは? ");
var y = prompt("横の長さは? ");
console.log("面積は,　" + multiply(x, y) + "　です.");

// コンソール画面
面積は,　121　です.

// 基本解答例:
// Accepts a number x as input and returns its square
var square = function (x) {
　　return x * x;
};

// Write the function multiply below
// It should take two parameters and return the product

var multiply = function(x, y) {
　　return x * y;
};

multiply(2, 3);

それでは、また！

投稿: alarky | 2012年3月18日 (日) 12時35分

今日は、ちょっとした、「ニュース」があります。前々からうわさには聞いていましたが、コードカデミー/Codecademy の、問題を作成して、それを「アップロード」できるようになりました。
しかしです、それはかなりの、JavaScript の知識と、英語力がないと出来ないんじゃないかと、思ってました。
が、ちょっと苦労しましたが、割合簡単に出来そうです。
ただ、やはり、
英語の知識なのか、JavaScript の知識なのか、コンピュータの知識なのか ?
よく分かりませんが、まだ、大きな欠点があります。
「正解判別システム」の方法が、理解できません。
よって、右側の『エディタ画面』には、『解答例』を、書くことにしました。
それで、問題をクリアする際は、本物の
「英語の正規版」
で、コードをタイプするよう、
よろしくお願いします。

でも、コードもフルカラーになって、僕はうれしいですね。

それと、ここでは、難しくて、自信の余り無い英文とかについて、書いていきたいと思っています。

早速ですが、
Introduction to Objects I » Section 3
A Method to the Madness
2. So What's a Method?
の、最後の＜ヒントを見る＞からですが、

Remember, to call functions that take parameters we include them in parentheses.

最初は、「we include 」の前に関係代名詞の省略だと思ったのですが、そうすると、「them 」が浮いてしまいます。
それで、分からなくなってしまいました。
それで、次のように解釈しました。

+(Remember)+ ^1 , ^ @(to call [functions] ＜that take ^2 parameters we include ^2 、^ them in parentheses＞ )@.
　　+(S)+
　　@(O)@
　　[名詞]
　　＜形容詞節＞
　　^1 ― 無くてもいいでしょう！
　　　　// 強調のためだと思う.
　　^2 ― 同格のカンマ
　　　　// parameters と.

と考え、直訳としては、

私たちが含める引数、つまり、「() 」の中に入っているものをもつ関数を呼び出すことを思い出してください。

と、考えましたが ?。

ただ、ここは、もし、誤訳でも、JavaScript の理解の妨げにはならないと思います。

では、また！
明日も、アップロードするつもりです。

P.S.　肝心なリンクは、ここ ! です。

投稿: alarky | 2012年3月24日 (土) 23時48分

コードカデミー/Codecademy アップデートしました。
もっと進みたかったけど、
また、いろいろ言うべきこともあったけど、
また、今度にします。

それと、英文解釈についての、詳細は、ここ ! に、あります。

アップデートしたページのリンクは、ここ ! です。

それでは、また！

投稿: alarky | 2012年3月26日 (月) 02時21分

さて、今日のアップデートは、11. ＜6.0　Make Your Own Method ＞　自分でメソッドを作ってみる からです。

「正解判別システム」については、
　1. Yes/No クエスチョン
　2. 1.～4.などからの正解選択問題
　3. キーワードを正確にタイプする問題など
に、関してはクリアできましたが、、、
完璧にマスターするのは、? です。

今日、このコードカデミーのシステムを使っての、他のプロジェクトなどを、考えてみましたが、実行できるかは、今の進み具合を考えても、発表できるかは、分かりません。がしかし、やってみたいとは思っています。

それでは、また。
また明日ぐらいに、アップロードするつもりです。

投稿: alarky | 2012年4月 1日 (日) 01時47分

さて、今回も、オブジェクト に関する続きです。
今回は、ちょっと、見えてきましたね。
何がって言うと、

　　関数　―　メソッド　―　コンストラクタ

が、つながっていることです。

そのことに関しては、今日アップロードした中に、書きました。

後もう一つ、
関数の定義のもう一つの方法について触れておきました。
構文の仕組みは、理屈では、理解できない部分が残りましたが、そもそも理屈の問題ではないのかもしれないし、そうであったとしても、まあ、丸暗記すればいいと思います。

まだ、終わった量は、全体の何と、10分の1 位だと思いますが、
この、コードカデミー/Codecademy は、同じことでも繰り返してやることを重視しているような気がします。
それで、内容的には、それなりの量を覚えているような気もします。
ただし、このコードカデミーも重視しているように、何度もやることが、大切なので、
　　100%クリア
を目指して、がんばりましょう。

では、また。

投稿: alarky | 2012年4月 1日 (日) 23時50分

コードカデミー / Codecadmy の問題作成機能で作ったページが、
「レイアウト分解 & 色落ち」だ。
その原因は ?!
せっかくそれなりに見栄えよく、分かりやすく作ったつもりだったので、ちょっとがっくりです。
お手数おかけしますが、まだ、学習していない方は、
最レイアウトして下さい。
.
.
// こんな感じです。
　　// 「Enter キー」、「Delete キー」使用.

// 訂正前
■ 「メソッド/method 」は、「関数/function 」と、似ています。「メソッド」へ行く前に、さらっと関数を、思い出して見ましょう。「関数」は、　function と言うキーワードの後に続けて:　　1. 「( ) / 引数なしのカッコ 」 または 「(1つまたは、いくつかの引数) 」　　2. 「{ 実行コード/関数の仕事/行われること } 」　　3. 「; 」最後にセミコロンを忘れずに !　

// 訂正後
■ 「メソッド/method 」は、「関数/function 」と、似ています。「メソッド」へ行く前に、さらっと関数を、思い出して見ましょう。「関数」は、
　function と言うキーワードの後に続けて:
　　1. 「( ) / 引数なしのカッコ 」 または 「(1つまたは、いくつかの引数) 」
　　2. 「{ 実行コード/関数の仕事/行われること } 」
　　3. 「; 」最後にセミコロンを忘れずに !　
.
.
まあ、面倒ですが、
ぼくが、fontタグや、
改行コードを、入れて作ったのに比べれば、
全然楽ですよ (＠Д＠；

やはり、何もかも、自分でコントロールできる、
Webページの作り方を、覚えるべきだとつくづく思いました。

そんなわけで、今度始まった、
コードカデミーの、HTML & CSS ですが、
これが、ちょっとどころか、なにしろ、
素晴らしい。
現実問題として / すぐに始めることが出来るのが、 素晴らしい。

オブジェクトの基本まで、終わると、
JavaScriptの「基礎」は、
ほぼ、おわりそうです。

ので、そこが終わったら、
しばらくは、Webコースの方に集中したいと思っています。
なにしろ、それが無くては、
JavaScript も、「存在場所」が、無いわけですし。

そして、半年後や、1年後、
コース・リニューアルなどで、
今までのコースが、
変更されたら、
せっかく訳した、
日本語も、すべてではないけど、
「死んで」しまいますね。
今回の、「レイアウト分解 & 色落ち」イベントで、そんな気持ちも余計にプッシュされたようです。

このWebに関しては、
こんなに、学習しやすい環境も、
めったに無いと言うことで、
「ペースに遅れないで着いていく」
ことを、目標にして行こうと思ってます。
あの、前もそうは思っていたんで、
あくまでも、目標ですが。
　　// ジョークなど含んだ、タイトルの和訳は、
　　// すぐにピンと来なかったら、
　　// もうパスします.
　　// それは、それなりに楽しいけど...
　　// 他にも、パスできそうなところは、
　　// パスですね！
　　// 本文も、
　　// ポイントだけまとめるつもりです.
　　// すぐに訳せないのは、
　　// 書き換えもあり.
　　　　// HTML の、記事とか.

JavaScript に関しては、
もし、コースが、リニューアルなどされても、
基本知識は、覚えたので、
今度は、自分なりの展開で、進めようとは、今は思っていますが、読者の方も、それは、同様でしょう。
もし、独習するなら、
個人的には、
「オライリー Head first JavaScript (日本語版あり) 」
が、僕はいいと思いますが。
　　// ただし、これを、Webページ化 するのは、
　　// 問題ありそうです。
　　// 例えば、オラクルの「Javaチュートリアル」
　　// などは、「問題」には、なりにくそうだが。
　　// 分かりますよね、著作権です。
　　// 誰かに、「著作権は本当に正しいのか?」
　　// って本を書いてもらいたいわ。

それでは、今日のリンクは、「ざ～っと HTML & CSS を 見てみましょう」です。

近いうちにまたアップロードします。

投稿: alarky | 2012年4月 7日 (土) 16時02分

今日は、目標どおり、コードカデミーの、「Webコース」は、すべて、終わらせました。
ただ、まだ、ちょっとまとめるのに、時間が掛かりそうです。出来るだけ早く、「Webコース」に関しては、アップロードするつもりです。

今日は、ここで、ちょっと、スクリプト言語の、「Ruby 」について、言いたいことがあったのですが、ちょっと、やってみたくなったので。

しかし、今のところ、憶測だけなので、止めときます。さらに、Java と JavaScript と Ruby の「性格 / キャラ / ・・・」について、自分なりに考えたことも言いたかったのですが、まだ分からないことの方が多いので、止めとくべきだと思ってやめます。

一つだけ、Ruby について言いたいのは、この言語を作ったのは、日本人だと言うことです。つまり、かなり充実した、classライブラリのドキュメントなどが、あるのではないかと思われることです。つまり、メソッドの使い方や、何をするためのclassなのかが、分かりやすいと言うことです。

今日のアップロードは、昨日と同じリンクです。そこから、続きをたどってください。「プロジェクト」も、同じリンクに書くつもりです。

それでは、また。

投稿: alarky | 2012年4月 8日 (日) 23時22分

今日、気づいたんですが、何と、自分の作った問題は、publicアクセス でなく、privateアクセス だった。セクション３から。つまり、セクション３からは、自分にしか見られないのだ。「not published 」に、なっていたので、自分のパスワードが登録していないブラウザで開いてみて、初めて分かったのです。

まず、何故か?

よくない可能性として、Codecademy が、勝手に問題を使ったのを、嫌がっているのかもしれない。確かに、自分の作った問題が、違う言葉で公開されると、本当に正しく訳されているのだろうか? と、不安になるのは確かでしょう。
後、考えられるのは、Codecademy は、「解答」は、公開しない方針なのかもしれない。僕がかまわないと思っても、この点に関しては、やはり、Codecademy の考え方を尊重すべきですね。

それで、公開できないようにされたのかもしれません。

それで、要点だけを、ここで、書かせていただこうかとも思ったのですが、右エディタの画面に、日本語をつけられないとか、「＜」と「＞」の、半角文字が使えないとかで、悩んでいましたが、

もう自分でオリジナルの問題を作って、Codecademyで、公開しようと思います。僕自身も、コードカデミーを続けるので、たくさんの時間を割くことは出来ないかもしれませんが、とにかくそうしようと思います。

勿論問題を作るといっても、コードカデミーで習ったことで、そのレッスンを参考に作るつもりです。また、Webコース に関しては、全く「正解判別システム」がわかりませんし、JavaScriptコースは、選択問題か、キーワードを入力する問題ぐらいしか出来ないので、「問題というより、解説」みたいな感じになるかもしれません。

まあ、それで、少しでも、プログラムやコンピュータの楽しさに目覚めてくれる人がいたら、やりがいもあると、僕は思っています。

出来れば、来週、何か問題を、コードカデミーに提出しようかと思っています。

では、また。

投稿: alarky | 2012年4月 9日 (月) 22時35分

自分で、試行錯誤しながら、問題を作ってみて、わかりました。

すべての問題を「publicアクセス / 誰でも見られる」にする方法が。

つまり、全問題をクリアできるようにして、クリアすればよかったようです。

どうして分かったのかというと、「問題編」「解答編」に問題を分けて作ったのですが、「解答編」だけ、「publicアクセス」になっていたので、「なんだ、そういうことか！」ということでした。

作る方としても、たくさんページを作りすぎると、「管理できない！」ので、これからは、統一しようと思います、がですね、そうすると、「左ページ」に、HTMLコードを書くことになり、「一瞬で、HTMLページを再現する」という、「超素晴らしい」システムを、利用できません。

それは、コードカデミー の、ページの「Webコース」の[HTMLタブ]に、コードを、貼り付けて、[Resultタブ]で、見るようにして下さい。

そんなこんなで、結局、本物の、コードカデミーと比べたら、「３分の一ぐらいのパワーダウン？」ですが、まあ、とにかく、がんばってみます。

あんまり、やっても意味が無いなと思い出してしまったら、止めるかもしれませんが、

ひょっとして、何かいい方法を思いつくかもしれません。

まあ、どうなるか分かりませんが、今日まとめたところのリンクを紹介します。

学習すべき順番で紹介します。

１．ざっと HTML & CSS ・ １

２．ざっと HTML & CSS ・2　解説編

３．ざっと HTML & CSS ・2&3 解答編

４．ざっと HTML & CSS ・ 3　解説編

です。

あと、JavaScriptコースの方は、Webコースが、終わったら、オブジェクトの、続きをやるつもりです。

今のこところあくまで予定ですので、申し訳ありませんが、中止になることもありえます。今は、続けるつもりではありますが、先のことは分かりませんので、悪しからず。

では、また。

投稿: alarky | 2012年4月15日 (日) 17時08分

新しい、アイデアを思いついたので、try してみようと思ったのですが、「We're sorry, but something went wrong. ...　/　すみませんが、なにかおかしい ... 」つまり、何処かでバグが発生中なのでしょう。もし、自分のコンピュータが悪いのだとしたら、再インストールしかないかも。

この先どうなるか分かりませんが、しかし、今まで投稿した分で、JavaScript with HTML に関して、基本的なところは、理解していただけたと、自分では思っています。

JavaScript学習のWebページについては、考えもありますが、よく考えは変わるし、誰であろうと、先のことは分からないものです。そのことをここで言うのは、避けるべきでしょう。

では、また。

投稿: alarky | 2012年4月22日 (日) 11時06分

今、新しいアイデアを試そうと思って、もう一度、コードカデミーで、問題を作成しましたが、、、アイデアというのは、「コードカデミー・ゲーム」の「攻略本ならぬ、攻略Webページ」です。
しかし、全部クリア ( 「ざっと HTML & CSS ・ 2&3　解答編 » Section 4」に無理やりの方法で) させたにもかかわらず、 publicとして / 誰でも見られるように　アップロードできません。
また、やり直しですが、もうめげてしまいました。
Codecademy の全部のページを調べるような英語力も、気力もありませんので、
ここに直接、攻略、つまり「解説」を、書いていこうと思います。
Codecademy を、大方クリアした際には、自分のWebページが出来るようになったら、いいなあ～と思っていますが。
そして、JavaScript だけで、作るのが、もし物足りなかったら、「Ruby 」の「学習」ページを、作ってみたいなとも思っていますが、あくまで、★予定/今の希望★ です！

では、さっそく、前回アップロードしたつもりであった『Introduction to Objects I　・・・　by Spencer de Mars の 「4. Construction Juction 」』から、始めたいと思います。
再アップロードが遅れましたことをお詫びいたします。
また、HTML & CSS コースは、「オブジェクトI(ひょっとしてⅡ)」終了後、最初から、再開したいと思います、その方が学習しやすいと思いますので、ただ、「問題をクリアする形式」にしないことは、大きな欠点です。つまり、学習される方の、大きな忍耐力が必要でしょう。コードカデミーが、リニューアルされないことを祈りましょう(翻訳が死んでしまうので)。それしかないですね。
・
・
・
Construction Junction　オブジェクトのメンバー全員集合！　リメイク版
＜1.0　The Object Constructor ＞ 組み立て屋

// 右エディタコード
　　//<pre>タグを使っても、上手く表示されないので、直接コピーしただけでは、このコードは、有効ではありません。そのことについては、前の投稿で触れています。
// here we make bob using the Object constructor
　　// bob/ボブさんオブジェクト を,
　　// Object()コンストラクタを使って作ります.
var bob = new Object();
bob.name = "Bob Smith";
// add bob's age here and set it equal to 20
　　// プロパティに age/年齢 を,加えます.
　　// 20歳です.
// ! ここにコードを入れます !

// オプション
console.log(bob);
　　// { name: 'Bob Smith', age: 20 }
　　　// コンソール画面の表示.
・
・
◎ 特別ミニミニ対談　

　　ゲスト:　コンストラクタの KON さん　

　　そして、JavaScript名人の JS さん　

[KON さん]　わたくしこと「コンストラクタ関数」は、オブジェクトの、組み立て屋です.　私は、Special な関数です、なんたって、オブジェクトを作るのですから。　

[JS名人 さん]　何言ってんだ、べらんめ～、お前の正体は、ただの『関数』じゃねえか?　

[KON さん]　それを言っちゃ～おしめーよ！

　　◎本当は、キーワード「new 」で、 誰でも / どんな関数でも、オブジェクトを作れる　・・・　意味のあるオブジェクトが出来るかは別ですが。

■ 私たちは、「コンストラクタ / constructor 」については、「セクション1(◎2 だったような?) 」で、触れました。キーワード「new 」を使って、オブジェクト を、作ったときです。「コンストラクタ」を使うのは、オブジェクトを作るためなのです。

■ bob = new Object();

の意味は、

　　1.　「コンストラクタObject() 」を使って、「新しいオブジェクト」を作ります。

　　2.それを、「変数bob 」に、代入しています。

「Object()コンストラクタ」は、「JavaScript言語」に、最初からあります。そして、「プロパティ も メソッド も無い オブジェクト」を、組み立てます。

　　◎ コンストラクタ　・・・　「コンストラクタ関数」とも言う.

■ つまり、「コンストラクタ Object() 」を使って、オブジェクト を作るということは、どういうことかと言うと、　オブジェクト に プロパティ を加える時「毎回毎回」コードを書かなきゃならないってことです。今までも、ず～っとそうやって来ましたよね。　復習のために、私たちは、Object()コンストラクタ を使って、「bob / ボブさんオブジェクト」を作り、プロパティ 「name / ボブさんのフルネーム」を、設定しておきました。　

"Q" 最後に、「bob / ボブさんオブジェクト」の、「age / 年齢 プロパティ」を「20 」に設定して、仕上げて下さい。

"ヒント"
3行目の、

　　bob.name = "Bob Smith";　

を、案内役にして、「age / 年齢プロパティ」を設定して下さい。つまり、「bob.name 」の代わりに、「bob.age 」を使い、その プロパティに、「20 」を、 セット / 代入　すると言うことです。
・
・
・
＜1.1　The Object Constructor　解答例 ＞

// 右エディタ画面.　再登場ですが、何回も読むことは、いいことだと思います。
// here we make bob using the Object constructor
　　// bob/ボブさんオブジェクト を,
　　// Object()コンストラクタを使って作ります.
var bob = new Object();
bob.name = "Bob Smith";
// add bob's age here and set it equal to 20
　　// プロパティに age/年齢 を,加えます.
// 20歳です.
bob.age = 20;

// オプション
console.log(bob);
　　// { name: 'Bob Smith', age: 20 }
　　　// コンソール画面の表示.
・
・
・
どこが、答 かを入れ忘れましたが、考えてみたら、その方が勉強になりますよね。
とりあえず、テストとして、アップロードします。
では、また近いうちに！

投稿: alarky | 2012年4月28日 (土) 15時14分

・
・
・
＜◎ 1.2　関数、メソッド、コンストラクタ　何が違うの? ＞
いろいろ調べた結果、
結論から言うと、「同じ / (違う) 」です。
しかし、「同じ」と言うと、正確には「違う」ので、
何が、「同じ」で、何が、「違う」かと言うことがポイントですね。
僕が分かっている範囲で、説明します。

『同じこと』　
　● 構文
左辺の　書き方/意味　が、違う場合もありますが、「基本的な構文である、右辺は同じ」です。
『違うこと』　
　● 関数　・・・　JavaScript において、さまざまな「仕事 / アクション」をするための 基本 であり、「メソッドにもなれば、コンストラクタにもなる」.　
　● メソッド　・・・　オブジェクトのメンバーである関数、「関数」を「関連付けて」メソッドにすることも出来る.
　● コンストラクタ　・・・　基本的に関数です.　「オブジェクトを組み立てる目的」を強調するために、最初の文字を「大文字」にすることが、推奨されている.　また、「返し値」は、「不要」です.　ただ、付けたらどうなるのかは不明 ?　思いつく範囲で、「実験」しました。下のエディタ画面が、そのメモです。
・
・
// エディタ画面
// 実験 1
var Kon = function() {
　return "0";
};

var Kon_01 = new Kon();

console.log(Kon_01);

/*　コンソール画面
{}
*/

// 実験 2
var Con = function() {
　// return "0";
　　// コメントアウト.
};

var Con_ii = new Con();

console.log(Con_ii);

/*コンソール画面
{}
*/

/*　この実験のコメント
あんまり、よく分からなかったが、
「成果」は、一つだけありました。
それは、「返し値のある関数」に、
「new 」を使っても、エラーが出なかったことです。

ここで、結論を言うのは、
ちと早いと思われますので、
控えておきます。
*/
・
・
・
＜2.0　Custom Constructors ＞　カスタマイズされたコンストラクタ

// エディタ画面
function Person(name,age) {
　this.name = name;
　this.age = age;
}

// Let's make bob and susan again, using our constructor
　　/// ボブさんオブジェクト, スーザンさんオブジェクトを,
　　/// Person()コンストラクタを使って,もう一度作ってみましょう.
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);
// help us make george, whose name is "George Washington" and age is 275
　/// ジョージさんオブジェクトを作るのを手伝って下さい.
　/// name: "George Washington"
　/// age: 275
// ! ここに書く !
// オプション
console.log(george);

/* コンソール画面
{ name: 'George Washington', age: 275 }
*/

// ここまで.
・
・
■ しかしながら、オブジェクトを作るたび、毎回毎回 プロパティ を、そのオブジェクトの中に、追加していくってのは、ちょっとうんざりですね。毎回そのうんざりさせる「Object()コンストラクタ」を使う代わりに、自分で、「コンストラクタ(関数) 」を作ることも出来るのです。

■ そのやり方では、私たちが、オブジェクト を作った時にはもう、オブジェクト の プロパティ は、 組み込まれている / 設定されている　のです。つまり、「空っぽの」オブジェクトを作る Object()コンストラクタ の代わりに、すでに プロパティ を持っている コンストラクタ を作ることが出来ると言うことなのです。

■ このことを実際に見てみましょう。line 1-4 (1-4行目) に、「Person() / 誰かのコンストラクタ」があります。この コンストラクタ は、「誰かの」 オブジェクト を作ります。nameプロパティ と ageプロパティ　を定義 / を設定 / に代入　するために、キーワード this が使われていることに注目してください。そしてその「Person() / 誰かのコンストラクタ」は、「プロパティ name と age 」を、「与えられた / 渡した 引数」に、設定します。
　　◎0. line 1-4 を、見てみましょう。
　　　　 function Person(name,age) {
　　　　　　this.name = name;
　　　　　　this.age = age;　 }　　// ; (セミコロン)がない !
　　　　　　　　◎1. this.name と name について　 this.name と name は、全く違う「名前」です。「グローバル変数」と「ローカル変数」が、たまたま同じ名前になって、区別が分かりづらいのとは、全く事情が違います。まあ、確かに、ちょっと勘違いしそうですが。
メソッドの場合を思い出して見ましょう。
　「bob.setAge(x); 」　と
　「susan.setAge(y); 」
の、 年齢設定メソッド　が、別物であったように、(違うオブジェクトのメンバー)
　this.name　は、 明示的に / 明らかに　オブジェクトに関連付けられています。
　だから、「ローカル変数name 」と「何かのオブジェクトのプロパティである this.name 」とは、
　「全く違う名前」　
と言うことになるのです。
　　◎2. 「関数」もう一つの定義方法について
　上のエディタ画面は、「コンストラクタ」定義ですが、ここでついでに、「関数」のもう一つの定義方法を、覚えてしまいましょう !　実は、同じなのです。
ただ、コンストラクタ の場合には、Person のように、最初の文字を、「大文字」にして、この 関数 を作った目的は、「コンストラクタ」として使うためだと言う事を分かりやすくするのが、「慣例 / ならわし / 文法的な決まりではないが皆が共通して使う方法」です。
　なので、普通 関数 の定義をする時は、その 関数 の名前を、「小文字」ではじめると言うことです。　それで、その作り方の説明は、毎度お世話になっている「オライリー,JavaScript,第5版」からの引用とさせていただきます。
　 === 引用ここから ===
関数を定義するには function文 を使用します。function文 の書式は次のとおりです。
　　● 先頭にキーワード function を記述します。
　　● その後ろに関数の名前を指定します。
　　　　　// コンストラクタとして使う場合,
　　　　　// 大文字で始める.
　　● その後ろに引数を「括弧 ( ) 」で囲んで指定します。引数が複数ある場合は「カンマ , 」で区切ります。引数は省略可能です。
　　● 関数の本体を構成する文を「中括弧 { } 」で囲んで指定します。「{ } 内の文」は、「セミコロン ; 」で終えます。
　 === 引用ここまで ===　
★ そして、注意すべきは、
　「定義の最後」に、セミコロンがありません !
　ここは、「この形式での」「関数定義」は、
　　　最後にセミコロンが付かない !
と、「丸暗記」しましょう。
　この定義方法の比較については、次のエクササイズに入る前に、そのための エクササイズ を設けます。

■ そして、私たちは、この「Person() / 誰かのコンストラクタ」を使って、おなじみの「bob / オブさんオブジェクト」と「susan / スーザンさんオブジェクト」を、ほんの1行ずつ書くだけで作ることが出来ました。　「line 7-8」を、見て下さい。　いったん コンストラクタ を作ってしまえば、「誰かのオブジェクト」を作る時、「プロパティ name / 名前 と age / 年齢」の 値 を、コンストラクタ に、引数 として、渡すことが出来るので、より簡単に、「その人のオブジェクト」を、作ることが出来るのです。

"Q"　では、Person()コンストラクタ を使って、「george / ジョージさんオブジェクト」を作ってみましょう。
　彼のフルネームは、"George Washington"
　そして、年齢は、275　歳だ。

"ヒント"　「line 7-8」を、ガイドにして、「line 10 」に、「george / ジョージさんオブジェクト」を作りましょう。　　　"George Washington" と 275　は、「正確に」タイプして下さいね。
・
・
・
＜２.１　Custom Constructors　解答例 ＞

// エディタ画面
function Person(name,age) {
　this.name = name;
　this.age = age;
}

// Let's make bob and susan again, using our constructor
　　/// ボブさんオブジェクト, スーザンさんオブジェクトを,
/// Person()コンストラクタを使って,もう一度作ってみましょう.
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);
// help us make george, whose name is "George Washington" and age is 275
　/// ジョージさんオブジェクトを作るのを手伝って下さい.
　/// name: "George Washington"
　/// age: 275
var george = new Person("George Washington", 275);

// オプション
console.log(george);

/* コンソール画面
{ name: 'George Washington', age: 275 }
*/

// ここまで.

では、また。

投稿: alarky | 2012年4月28日 (土) 17時05分

つづきです.

＜Ｘ.ｘ　関数の定義方法は、2通りあります ＞

// エディタ画面
// 今まで習ってきた、関数の定義方法です。
var getMenseki_1 = function (tate, yoko) {
　　// getMenseki　・・・　「ゲット面積」です。
　return tate * yoko;
};　　// 「 ; セミコロン」が、あります !

console.log(getMenseki_1(2, 3));

// 今までとは違う、関数の定義方法ですが、
// よく見かけますので、覚えておいて損はありません。
function getMenseki_2(tate, yoko) {
　return tate * yoko;
}　// 「 ; セミコロン」が、ありません !

console.log(getMenseki_2(3, 4));

/* コンソール画面
6
12
*/
// エディタ画面ここまで。
・
上の例を見てください。
「書き方/構文」が、違うだけですね。
使い分けは、まだ分かりませんが、
書く量/タイプする量　が、少ない分
「getMenseki_2()関数」の方が、
今まで出てきたような、プログラムに関しては、多分楽でしょうね。
・
・
・
ここからは、今日始めてやりました。
なんか結局、最初のパターンに逆戻りですね。

まあ、でもWebページを、マウスでドラッグして、テキストエディタなどに貼り付け、ディスプレイ/モニタ 上の、Webブラウザの横に、配置してみるといいんじゃないでしょうか？

＜3.0　Try it out!＞　あなた自身が作ったコンストラクタは,もっと便利になるでしょう！

■ 今度は、もう一つ違う例を見てみましょう。もちろん、あなたにも作ってもらいますよ。まず、右エディタコードの line1-4 を、見て下さい。「age/何歳か」と「color/三毛猫,ぶち,などなど」を設定できる「Cat()/ねこちゃんコンストラクタ」を作っておきました。

■ どうして、この コンストラクタ は、ビューティフル/クール なんでしょう？それはですね、今私たちが、「Catオブジェクト」を、作ろうとした時、とても「簡単」に、「age/何歳か」と「color/どんな色の猫」かを、設定できるからなのです。

■ つまり、「Object()コンストラクタ」を、使って、「毎回毎回」「Catオブジェクト」を作るたびに、「age/何歳」と「color/色」を、設定しなければならないのと比べると、ずっと使いやすいくて便利なのです。

"Q"　ではでは問題です。line7 からスタートしている「ワンちゃんコンストラクタ/Dog() 」に、あなたが思いつくどんな「プロパティ」でもかまいません。 ---　何歳か・名前・品種・鳴き方、あなたが思いつくもの何でも　---　それを、「プロパティ」として、「Dog()コンストラクタ」を、完成させて下さい。　お手本は、「猫ちゃんコンストラクタ/Cat() 」です。

"Hint"　こんな感じですね。
function Dog (^引数) {
　　// ^プロパティにしたい引数の変数名
　this.プロパティ = 引数(変数);
}
　　◎ 2012-04-28 この時点では、最後に「; 」がありますが、この　方法/構文　では、付けたら間違いです。
・
・
・
＜3.1　Try it out　解答例 ＞
// エディタ画面
function Cat(age, color) {
　　this.age = age;
　　this.color = color;
}

// make a Dog constructor here
function Dog(howToBark, name) {
　　this.howToBark = howToBark;
　　this.name = name;
}

catyDog = new Dog
　("「にゃわん」と吠える",
　"ロールオーバーベートーベン");

console.log(catyDog);

// コンソール画面
{ howToBark: '「にゃわん」と吠える', name: 'ロールオーバーベートーベン' }
・
・
・
＜4.0　More options ＞　もっと、プロパティを加えてみよう！

// 初期状態のエディタ画面
function Person(name,age) {
　this.name = name;
　this.age = age;
　this.species = "Homo Sapiens";
}

var sally =
var holden =
console.log("sally's species is " + sally.species + " and she is " + );
console.log("holden's species is " + holden.species + " and he is " + );
// ここまで。

■ 今までの例では、「プロパティ」は、すべて、全部、私たちが決定してきました。でも、その必要はないのです。
　右エディタの ”ニューバージョンの” 「Person()/誰かのためのコンストラクタ」を見て下さい(line1-5)。さらに、line4 に注目！、このコンストラクタでは、最初から決定されている「プロパティ」がありますね。
　　this.species = "Homo sapiens";
　　　　// 種 ＝ "ホモサピエンス";
　　　　　// 「人間」の生物学上の別名
そうなんです。このコンストラクタで作った、「誰かのオブジェクト/Personオブジェクト」は、すべて、「this.species 」は、「"Homo sapiens"」に　なり/設定され　ます。
　たとえ、「name と age 」を、設定していなくても、この「Personオブジェクト」の「speciesプロパティ」はいつも、「"Home sapiens"/"ホモサピエンス"」です(◎1－引数は、JavaScriptでは、省略できます)。
　　◎1－しかし、省略すると、ほとんどの場合上手く機能しないようです、、そのためには、
　　　　if(ある引数 == 未定義値) { this.あるプロパティ = ある値; }
　　などのようにすることを推奨されています(イメージコード)。余裕のある人は調べて見ましょう。

■ この場合、、つまり、「Personオブジェクトsally / 〃holden 」は、同じ「speciesプロパティ、つまり"Homo sapiens"」を、持つことになります。そして、これは、人は誰でもそうなので、理にかなった、コンストラクタ の設計 と言えるでしょう。

"Q1"　「sally/サリーさんオブジェクト」と「holden/ホールデンさんオブジェクト」を、「Person()/誰かのためのコンストラクタ」を使って、作って下さい。
　sally　・・・　name(名前): Sally Bowles、　age(年齢): 39
　holden　・・・　name(名前): Holden Caulfield、　age(年齢): 16

"Q2"　そして、コンソール画面には、sallyオブジェクト、holdenオブジェクト、、それぞれの「age/年齢プロパティ」が、プリント/出力 されるように、エディタを、編集(ここでは,書き加えます)して下さい。

"Hint"　
Q1:　今まで通りのやり方で、OK。　speciesプロパティ は、何もしなくとも、設定されます。
Q2:　「+演算子」の後に、彼らの「age/年齢プロパティ」が、プリントされるべく、書き加えてください。
・
・
・
＜4.1　More Options　解答例＞

// エディタ画面
function Person(name,age) {
　this.name = name;
　this.age = age;
　this.species = "Homo Sapiens";
}

var sally = new Person("Sally Bowles", 39);
var holden = new Person("Holden Caulfield", 16);
console.log("sally's species is " + sally.species + " and she is " + sally.age);
console.log("holden's species is " + holden.species + " and he is " + holden.age);

// コンソール画面
sally's species is Homo Sapiens and she is 39
holden's species is Homo Sapiens and he is 16
・
・
・
＜5.0　Constructors With Methods ＞　コンストラクタは,メソッドも設計済みです.
・
// 初期状態のエディタ画面
function Rectangle(length, width) {
　this.length = length;
　this.width = width;
　this.calcArea = function() {
　　return this.length * this.width;
　};
　// put our perimeter function here!
　　/// 周りの長さの合計を計算するメソッド.
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();
// ここまで。
・
■ コンストラクタ は、「プロパティ」を設定できるし、さらに、「メソッド」も、定義することが、出来ます。つまり、「プロパティ と メソッド」を持ったオブジェクトを、「一発で/一行で」作ることが出来ると言うことです。

■ 右エディタに(line1-9)に、「Rectangle()/長方形というものについてのコンストラクタ」を用意しました。この コンストラクタ は、前のエクササイズでやったように、つまり、nameプロパティ と、 ageプロパティ を、設定したように、「length/縦の長さのプロパティ」と「width/横の長さのプロパティ」を、設定できます。

■ さてここで、「calcArea()/面積を計算するメソッド」が、加えられているのに、注目してください！これは、作られたオブジェクトの「length/縦の長さのプロパティ 」と「width/横の長さのプロパティ」を使って、面積を計算するものです。

■ line11 で、このコンストラクタを使って「rexオブジェクト」が作られていますね。
line12 では、「rex.calcArea()/面積を計算する,オブジェクトrex に関連付けられたメソッド」を、呼び出し、その値を「変数area 」に、 代入/格納　しています。

"Q"　line8 に、「calcPerimeter()/周りの長さの合計を計算するメソッド」を、定義して下さい。そのメソッドでは、「lengthプロパティ」と「widthプロパティ」が使われています。

"Hint"　「calcArea()/面積を計算するメソッド」を、お手本にして下さい。周りの長さって事は、
　　(縦×２)　＋　(横×２)
ですね！
　このオブジェクトの　縦の長さ/length、横の長さ/width　プロパティ　を使う時は、キーワード「this/このオブジェクト 」のという意味の「this. /ジス"ドット" 」を前に付けることを、お忘れなく！
・
・
・
＜5.1　Constructors With Methods　解答例＞

// エディタ画面
function Rectangle(length, width) {
　this.length = length;
　this.width = width;
　this.calcArea = function() {
　　return this.length * this.width;
　};
　// put our perimeter function here!
　　// 周りの長さの合計を計算するメソッド.
　this.calcPerimeter = function() {
　　return(this.length * 2) + (this.width * 2);
　};
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

// オプション
console.log(rex);
console.log("area: " + area +
"\n" + "perimeter: " + perimeter);

// コンソール画面
{ length: 7, width: 3, calcArea: [Function], calcPerimeter: [Function] }
area: 21
perimeter: 20
・
・
・
＜6.0　Constructors in Review ＞　コンストラクタ：　まとめ
・
// 初期状態のエディタ画面
// first we can make the instructor
　　// まず,オブジェクトの
　　// 「設計図」を作りましょう.
　　　　// rabbit - うさぎ
function Rabbit(adjective) {
　// adjective は,形容詞.
　// 名詞/もの/こと を飾る言葉.
　this.adjective = adjective;
　// 自分のことを言うメソッド.
　this.describeMyself = function() {
　　console.log("I am a " + this.adjective + " rabbit");
　};
}

// now we can easily make all of our rabbits
　　// もう,Rabbitオブジェクトを作るのは,
　　// 超簡単だ!
・
■ コンストラクタ は、「new 」キーワードを使って、新たに、オブジェクトを作ることが出来ます。そのうち最も基本である コンストラクタは、「Object() 」です。しかし、Object()コンストラクタは、「プロパティ も メソッドも」作りません。
　　◎ 物理的な側面から言えば、参照変数の 実体/実値 のための多くのメモリを確保する準備をすると言うこと？ここは、あくまで予想なので、書くべきではなかった？
そもそも参照変数が必要なのは、たくさんのメモリを必要とするから？もし、物理的なテクノロージーの進歩で、簡単にたくさんのメモリを確保できるようになったら、参照変数は無くなる？ここは、無視してください。でも、考える価値はあるでしょ？

■ でも、実際には、私たちがその時々、設定したい、そして使いたい、「プロパティもメソッドもある」「コンストラクタ」を作りますよね。

■ では、右エディタの例で、コンストラクタによって作られた、オブジェクトの「アクション/中身」を確認してみましょう。この「Rabbit()/ウサギちゃんコンストラクタ」は、それが「どんな/adjective 」「プロパティ 」のオブジェクトか、そして、「どんなウサギなのか自己紹介するメソッド/describeMyself() 」を、持つように、 設計/定義　されています。

■ どうして、「オーダーメイドの,コンストラクタ」が、 重宝するのか/便利なのか　分かりますよね、思い出して下さい。それは、「同類の/よく似た」オブジェクトを作る際、毎回毎回、何度も何度も、「プロパティ」や「メソッド」を、 関連付け/設定　しなくても済むからでしたよね。
　　◎ 泳げたい焼き君 を、思い出してください。彼は、「いやんなっちゃう、ほど簡単に」作られていましたよね。鋳型の鉄板は、コンストラクタ。　「こしあん、つぶあん、うぐいすあん、カスタードクリーム」などが、プロパティ。　出来上がった たい焼き君が、オブジェクト、、と言ったところでしょうか(Javaの哲学 からのパクリですみません)。

"Q1"　3つの新しいオブジェクトを作って下さい。彼らの「プロパティ adjective 」は、それぞれ、以下の通りです。
　rabbit1　・・・　"fluffy" (ふわふわの)
　rabbit2　・・・　"happy" (ハッピーな)
　rabbit3　・・・　"sleepy" (眠たい)

"Q2"　「どんなウサギなのか自己紹介するメソッド/describeMyself() 」を使って、あなたが、作った3つのオブジェクトに、自己紹介をさせてください。それは、コンソール画面にプリントされます。

"Hint"　
● まず、オブジェクトを作りましょう。構文は、
　　var オブジェクトの名前 = new コンストラクタの名前("ストリングタイプの形容詞"/引数/プロパティの値のために);

● メソッドを呼ぶための構文は、
　　オブジェクトの名前.(ドット)メソッドの名前()；
です。
・
・
・
＜6.1　Constructors in Review　解答例 ＞
・
// エディタ画面
// first we can make the instructor
　　// まず,オブジェクトの
　　// 「設計図」を作りましょう.
　　　　// rabbit - うさぎ
function Rabbit(adjective) {
　// adjective は,形容詞.
　// 名詞/もの/こと を飾る言葉.
　this.adjective = adjective;
　// 自分のことを言うメソッド.
　this.describeMyself = function() {
　　console.log("I am a " + this.adjective + " rabbit");
　};
}

// now we can easily make all of our rabbits
　　// もう,Rabbitオブジェクトを作るのは,
　　// 超簡単だ!
var rabbit1 = new Rabbit("fluffy");
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");

// describeMyself()で,
// 自分のことを語っていただきましょう.
rabbit1.describeMyself();
rabbit2.describeMyself();
rabbit3.describeMyself();

// コンソール画面
I am a fluffy rabbit
　　// ふわふわの,うさぎ
I am a happy rabbit
　　// しあわせな,うさぎ
I am a sleepy rabbit
　　// ねむい,うさぎ

// メッセージ
You've completed this section! Start the next section
// このセクション完了！

投稿: alarky | 2012年4月29日 (日) 00時42分

少しですが、終えた分をアップロードします。最近思うのは、もし、英語を日本語と同じぐらいのスピードで読めたら、コードカデミーも、達成率ほぼ100％じゃないだろうかということですが、まあ、仕方ありません。すぐにではありませんが、Objectの基本、HTML & CSS を学習して行こうと思っています。

『Introduction to Objects I » Section 5 』

≪Combining Objects With Our Other Tools ≫

＜1.0　Array of Objects ＞　オブジェクトが要素である配列
・
// 初期状態のコード
// Our person constructor
　// おなじみのPerson()コンストラクタ
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// Now we can make an array of people
　// さて,Personオブジェクトを要素とする
　// 配列familyを,作りましょう.
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
// add the last family member, "timmy", who is 6 years old
　// ここに,最後の
　// ファミリーメンバー/配列familyの要素
　// /Personオブジェクト
　// を,加えましょう.
　　// "timmy"(name), 6(age)

// コードここまで.
・
■ オブジェクトは、いろいろあるデータの中の一つに過ぎません。例えば、「string/文字列データ」や「number/数値」があるように、、しかし、オブジェクトは、複雑ではありますが。
ここで考えて下さい。「配列」というのは、「string と number 」を同時に格納できます。同様に、「いろんなオブジェクトを一つの配列に格納できる」のです。
　　◎ 「配列」は、(とにかく)「オブジェクト」です。なので、
　var family = new Array();
で、新しい配列オブジェクト「family 」を、作ることが出来るわけです。

■ 右エディタに、おなじみの「Person()コンストラクタ/誰かのオブジェクトを作るためのコンストラクタ」がありますね。
その、コンストラクタを使って、「Personオブジェクト」の「配列」を作ってみましょう。
数値 の 配列 の作り方に、似ていると思いますが、各要素には、「ある人/Personオブジェクト」が、格納 されます。

"Q"　もうひとり、timmy/ティミーを、「配列family/とある家族の配列」に、加えてみましょう。
「"timmy"」 は、「6 」歳 です。

"Hint"　この場合、timmy は、4人目ですね。インデックスは「0 」スタートでしたね。よって「3 」が、インデックスになります。つまり、4人目の要素にするためには、
　　family[3] = new Person("名前"<文字列>, age<数値>)；
と、します。
　名前/name は、"timmy"、　年齢/age は、6 です。
・
・
・
＜1.1　Arrays of Objects　解答例 ＞

// エディタ画面
// Our person constructor
　// おなじみのPerson()コンストラクタ
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// Now we can make an array of people
　// さて,Personオブジェクトを要素とする
　// 配列familyを,作りましょう.
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
// add the last family member, "timmy", who is 6 years old
　// ここに,最後の
　// ファミリーメンバー/配列familyの要素
　// /Personオブジェクト
　// を,加えましょう.
　　// "timmy"(name), 6(age)
family[3] = new Person("timmy", 6);

// オプション
console.log(family);

// コンソール画面
[ { name: 'alice', age: 40 },
　{ name: 'bob', age: 42 },
　{ name: 'michelle', age: 8 },
　{ name: 'timmy', age: 6 } ]
・
・
・
＜2.0　Loop the loop ＞　配列の各要素に,順番にごあいさつに回りましょう.
・
// エディタ初期状態
// Our Person constructor

// Now we can make an array of people

// loop through our new array
・
■ 「オブジェクトの配列」は、ちょうど、「文字列や数値の配列」と同じように、使えます。

■ 「数値の配列」において、数値 を順番に、コンソール画面にプリントしたり、数値の合計を計算するために、各要素に順番にアクセスするのと同じように、
「オブジェクトの配列」でも、「要素である,各オブジェクト」の、「プロパティやメソッド」に、アクセスすることもできます。

"Q1"　2つのプロパティ、name, age/年齢 を持つ、Person()/誰かのコンストラクタ を書いて下さい。

"Q2"　中身が空っぽの配列「family/家族のメンバーの配列」を作って下さい。　・・・　◎ 配列は、オブジェクトですよ。

"Q3"　配列には、4つのオブジェクト要素を、設定します。オブジェクトを作るには、Person()コンストラクタを使い、そのオブジェクトを、それぞれ family配列 に格納してください。以下の順番で、プロパティを設定します。
　① 「"alice" 」、「40 」歳
　② 「"bob" 」、「42 」歳
　③ 「"michelle" 」、「8 」歳
　④ 「"timmy" 」、「6 」歳

"Q4"　Personオブジェクトを作った順番で、forループ を使い、そのオブジェクトの「nameプロパティ」を、コンソール画面に、プリントしてください。

"Hint"　forループ を、すばやく、復習するには、「ブルーの文字の exercises on loops 」を、クリックしてそのページへジャンプしましょう。
　forループ の中で、nameプロパティに、順番にアクセスするのは、最もトリッキーな部分ですね。先ず基本として、あるオブジェクトから、プロパティ の値 に、アクセスするには、「. / ドット」を使います。つまり、
　　オブジェクト名.(ドット)プロパティ名
のようにします。
　そして、配列の中で、指定する要素、それはオブジェクトですが、そのプロパティにアクセスするには、同じく「. 」を使って、
　　配列名[インデックスナンバー].(ドット)プロパティ名
のようにするのです。
　つまり、
　　配列名[2].プロパティ名
では、配列のインデックスは、「0 」から始まるので、この配列の「3番目」の要素であるオブジェクトのプロパティに設定されている値にアクセスすると言うことです。
・
・
・
＜2.1　Loop the loop　解答例 ＞
・
// エディタ画面
// Our Person constructor
// おなじみのPerson()コンストラクタ
function Person(name, age) {
this.name = name;
this.age = age;
}

// Now we can make an array of people
// では,Personオブジェクトが,
// 要素になる,配列を,
// 作りましょう.
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

// loop through our new array
// 配列を,ループしましょう.
for(i = 0; i < 4; i++) {
console.log(family[i].name);
}

// コンソール画面
alice
bob
michelle
timmy

投稿: alarky | 2012年4月29日 (日) 20時45分

今日は、アップロードは、ありません。
ちょっと、Ruby について、お話したく、書いています。
とにかく、最近、Ruby が、やたら気になるので、これから独学することに決めました。
また、英文読解力の強化も図りたいと思っていますので、ますます、JavaScritp と HTML & CSS に関する コードカデミー の攻略記事 のアップロードのペースが、遅くなりそうですが、どうぞご勘弁を。
ただ、HTML & CSS は、現在のWebアプリケーションの主流であり、核となる部分ですので、少しずつですが、アップロードして行こうと思っています。そして JavaScript のオブジェクトの基本はもう少しですので終わらせるつもりです。

Ruby を、覚えたいと思った理由の一つは、試しに、Ruby を、インストールし、「Rails / Ruby on Rails 」を、設定してみて、
　　rails new 「Webアプリプロジェクト名」
と、コマンドプロンプトで、実行してみて、
　　Rails は、本当に速いよ！
の意味を体感したことです。
ただ、理解はまだ全然していない段階ですが。しかし、驚きの速さです。
僕の言っていることが、何のことかわからないと思われる方もいると思いますが、何しろ本人もよく分かっていないので。

Ruby に、関しては、コードカデミーでは、もうちょっと JavaScript の応用的な部分が終わったら、次に、取り上げるのではないかと思っていますが、どうなんでしょう。

「JavaScript」 は、「Webブラウザ」が、う～ん、「オペレータ/扱うアプリ/操縦者」なので、サーバーのコンピュータは、たんに、私たち/クライアント のコンピュータの、Webブラウザに送るだけで、実行できると言うことで、何より、手軽なWebアプリケーションだと言えると思いますが、
サーバーのコンピュータを使うと、ただ、僕もよくは思いつかないんですが、「データベース」の扱いによるショッピングサイトや、ただ、そういう「商用サイト」だけではなく、いろんなアイデアを試せるかもしれませんが、とにかく、さらに、いろいろなアプリケーションが出来ます。

そして、Rails を学ぶことで、「現在」よく使われている Webアプリを、知ることが出来そうです。

Rubyに関しては、僕は、構文にも全くなじみがなく、とても人に解説は出来なさそうです。ましてや、Railsなど、自分で理解するのが、精一杯でしょう。それどころか途中で、挫折する可能性も大ですし。

ですが、この本は分かりやすいとか、このWebページは、素晴らしいとかぐらいはいえると思いますので、そういう情報は、書いていきたいと思っています。

それでは、また。

投稿: alarky | 2012年5月 5日 (土) 00時05分

JavaScript を、一通り学べるWebページを見つけました。
　　マンガで分かる JavaScriptプログラミング講座 第2版
です。

僕も、読むつもりです。あと、どこまで続けられるかは、分かりませんが、コードカデミーの攻略記事を書く際の前知識としても、役立ちそうです。

投稿: alarky | 2012年5月 5日 (土) 13時01分

コードカデミー、
『Introduction to Objects I » Section 5 』　≪Combining Objects With Our Other Tools ≫
の続きです。
・
・
　　// 「・」は、ここはどうしても改行したいという時に、付けています。たまに「空行」は、削除されるときがあるので。
・
＜3.0 Passing Objects into Functions ＞　オブジェクトを,関数の引数にしてみましょう.
・
#0 初期状態のコード:
// Our person constructor
　// われらが、Person()コンストラクタ
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// We can make a function which takes persons as arguments
　// 「2人のPersonオブジェクト」を引数に取る「関数」を作ります.
// This one computes the difference in ages between two people
　// その「関数」は、「2人の年齢差」を計算します.
var ageDifference = function(person1, person2) {
　return person1.age - person2.age;
}

// 2人の「Personオブジェクト」を作ります.
var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);

// get the difference in age between alice and billy using our function
　// 「アリス/aliceオブジェクト」と「ビリー/billyオブジェクト」の「年齢差」を、求めましょう. 「ageDifference()関数」を使って.
var diff =
・
・
■ オブジェクト は、「配列」の　要素/メンバー　になれるだけでなく、「関数」の「引数」にもなれる、、つまり、引数に、オブジェクト を、使うことが出来るのです。ということは、「オブジェクトを引数に持つ関数」は、『「引数としてゲットしたオブジェクト」の「メソッド や プロパティ」』を、「自分/その関数」のなかで、利用できるということになるのです。

■ 右のエディタを見てください。毎度の「Person()コンストラクタ/誰かのオブジェクトを作るためのコンストラクタ」の他に、「ageDifference() / 2人の年の差は? 関数」を紹介します。この関数は、２つの「Personオブジェクト」を引数に取り、その「年齢差」を、計算して返します。

■ 言うまでもなく、 引数として、(Personオブジェクト/ 誰かのオブジェクト　ではなく、) 誰かの名前の「文字列」を、この「ageDifference() / 2人の年の差は? 関数」に、渡さないで下さい。なぜなら、「文字列」は、「年齢プロパティ / ageプロパティ」を、持ってはいないからです(◎メソッドの 仕組み を見てみましょう － line 10)。
しかし、「われらがPerson()コンストラクタ」で作った「誰か / Personオブジェクト」は、「誰(だれ)」であっても、(◎引き数を省略した場合は考えないで下さい)「ageプロパティ」を、持っているので、「ageDifference()関数」にどの「personオブジェクト」でも、渡すことが出来るのです。なので、「ageDifference()関数」に渡す引数は、必ず、「Personオブジェクト」にして下さい。

"Q"　2人の「Personオブジェクト」を作っておきました。「alice と billy 」です( line-13,14 )。
line17 で、「グローバル変数 diff 」に、「ageDifference()関数」を呼んで、「2人の年齢差」を、 代入/セット/格納　して下さい。

"Hint"　普通に、「ageDifference()関数」を呼び出し、その「引数」に、2人の「Person()オブジェクト」を、渡すだけです。
・
・
・
＜3.1 Passing Objects into Functions　解答例＞
・
// エディタ画面

// Our person constructor
　// われらが、Person()コンストラクタ
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// We can make a function which takes persons as arguments
　// 「2人のPersonオブジェクト」を引数に取る「関数」を作ります.
// This one computes the difference in ages between two people
　// その「関数」は、「2人の年齢差」を計算します.
var ageDifference = function(person1, person2) {
　return person1.age - person2.age;
}

// 2人の「Personオブジェクト」を作ります.
var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);

// get the difference in age between alice and billy using our function
　// 「アリス/aliceオブジェクト」と「ビリー/billyオブジェクト」の「年齢差」を、求めましょう. 「ageDifference()関数」を使って.

var diff = ageDifference(alice, billy);

// オプション
console.log(diff);

// コンソール画面
5
・
・
・
＜4. Try it Out! ＞今度はあなたが,オブジェクトを引数にとる関数を作ってみましょう.
・
#0 初期状態のコード:
// Our person constructor
　// おなじみの「Person()コンストラクタ」
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// We can make a function which takes persons as arguments
　// 「Personオブジェクト」を「引数」に取る「関数」を作ります.
// This one computes the difference in ages between two people
　// その関数は,2人の「Personオブジェクト」の「年齢差」を,計算します.
var ageDifference = function(person1, person2) {
　return person1.age - person2.age;
};

// Make a new function, olderAge, to return the age of the older of two people
　// "Q"　ここで、新しい関数を作って下さい.　2人の「Personオブジェクト」の内,「年齢が大きい方の ageプロパティ 」を返す「関数」です.

// Let's bring back alice and billy to test our new function
　// この新しい「関数」のテストのために,「アリスさん/aliceオブジェクト, ビリーさん/billyオブジェクト」に,再登場していただきましょう.
var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);

// コンソール画面で確認しましょう.
// 「年上の年齢は, ～歳です.」
console.log("The older person is "+olderAge(alice, billy));
・
・
■ 今度はあなたが、「オブジェクト」を「引数」にとる「関数」を作ってみましょう。

■ まず、 サンプル / 例 / お手本　として、「ageDifference() / 2人の年齢差を求める関数」と、その引数にするオブジェクトのための「Person() / 誰かを作るためのコンストラクタ」を用意しておきました。まず、この コンストラクタ と 関数 の関係を理解しておきましょう。(◎Person()コンストラクタは、後から作ってもらう関数に、かかわりがあります.)

■ では、あなたたちが、これから作る関数についてみてみます。
「olderAge()関数 / 年上の人の年齢を返す関数」を作りましょう。
この関数は、2人の「Personオブジェクト」を、「引数」とし、「年上の方の『ageプロパティ / 年齢』」　を,返します/ が,「返し値」になります。
例えば、「30歳のアリス / aliceオブジェクトのageプロパティ値30」と「25歳のボブ / bobオブジェクトのageプロパティ値25」を引数とした場合、「olderAge(alice, bob) / 引数をaliceオブジェクト,bobオブジェクトに取る,年上の人の年齢を返す関数」では「30 (ageプロパティ) 」が、返されますね。なぜなら「30 」は、年上である「アリス / aliceオブジェクト」の「年齢 / ageプロパティ」ですから。
もし、2人の年齢が同じ時、この関数では、「その同じである年齢」を、返すようにします。

"Q"　「olderAge()関数」を定義して下さい。　この関数は、年上の人の方の年齢を返します。

"Hint"　「if文」の中で、「2人の年齢
/ person1.age, person2.age 」が、「person1.age > person2.age　/　person1オブジェクトのageプロパティの方が,年上 である」かどうか、をチェックします。
もし、そうであれば、「person1.age / 最初の引数の人の年齢(ageプロパティ)」
を、返すようにします / 「返し値」とします。
そうでなければ、「person2.age 」が、返されるようにしなければいけません。

　　「if (変数1 > 変数2) 」

では、「変数1」が「変数2」より大きいことが『正しい / true / 真』であるかを『チェックするため / 調べるため』に使う式であることを、思い出してください。
・
・
・
＜4.1 Try it out!　解答例＞
・
// エディタ画面

// Our person constructor
　// おなじみの「Person()コンストラクタ」
function Person (name, age) {
　this.name = name;
　this.age = age;
}

// We can make a function which takes persons as arguments
　// 「Personオブジェクト」を「引数」に取る「関数」を作ります.
// This one computes the difference in ages between two people
　// その関数は,2人の「Personオブジェクト」の「年齢差」を,計算します.
var ageDifference = function(person1, person2) {
　return person1.age - person2.age;
};

// Make a new function, olderAge, to return the age of the older of two people
　// "Q"　ここで、新しい関数を作って下さい.　2人の「Personオブジェクト」の内,「年齢が大きい方の ageプロパティ 」を返す「関数」です.
function olderAge(person1, person2) {
　if(person1.age > person2.age) {
　　return person1.age;
// この「else if 文」は,オプション.
　// 　} else if (person1.age === person2.age) {
　//　return person1.age + " & " + person2.age;
// 多くのプログラム言語では「文字列」と「数値」を加算することはできませんが,JavaScriptでは自動的に型変換が行われ計算結果が返されます. ただし,型変換は「数値→文字列」になるため数値の合計ではなく「文字列として」連結された結果が返されます.
　} else {
　　return person2.age;
　}
}

// Let's bring back alice and billy to test our new function
　// この新しい「関数」のテストのために,「アリスさん/aliceオブジェクト, ビリーさん/billyオブジェクト」に,再登場していただきましょう.
var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);

// コンソール画面で確認しましょう.
// 「年上の年齢は, ～歳です.」
console.log("The older person is "+olderAge(alice, billy));

// コンソール画面
The older person is 30
// 年上の人の年齢は,30歳です.

・・・・・

ちょっと個人的な話ですが、お話したく、書かせていただきます。
しばらく、Ruby を、学習することに決めましたが、JavaScript も Java も止めるつもりは、全くありません。
なぜなら、それぞれの言語にはそれぞれのよさがあるからです。
最近登場した言語に「Scala 」ってのがあるようですが、「スーパー言語」だと言ううわさもあります。
だけど、そんなもん覚える力もゆとりもないわ。

それで、自分にとってそれぞれの言語の長所を述べてみたいです。

まず、JavaScriptについて:
特に、いいと思うのは、プログラムを動かすのは、ブラウザということです。もしあなたがいいゲームを作って、それを誰かに見せたいとします。しかし、Java などでは、まず、Java のインストールから始めなくてはならず、それは、OS によっても多少違うし、まあ、つまり、そこまでして見せようとは思う人は余りいないでしょう。でも、JavaScriptで作ったゲームなら、HTMLファイルをコピーするだけです。まあ、JavaScriptを別ファイルにしたとしても、フォルダごとコピーするだけでしょう。
普通は、「ブラウザ」の入っていないコンピュータ(パソコン)は、ないと思います。
それにまだまだ自分が知らなくて素晴らしい面もたくさんありそうですし。

Java について:
ハッキリ言って「何でも出来るスーパー言語」でしょう。
しかし、Javaの「名人」になろうと思ったら、かなり覚えることがあります。
実行速度も、いいコードであれば、かなり速いそうです。
何か一つ物にできる言語が出来たら、徹底的に覚えてみたいです。
昔「HeadFirstJava 」という本で、リズムマシンを作ったことがありますが、コードはそんなに長いと言うほどでもないでしょう。しかし、出来てしまうんです。
ドラムセットの基本として「ハイハット、スネア、ベースドラム」は、まあ当然としてそのほか、「カウベルやコンガ」なども「ライブラリ/プログラムの倉庫」に入ってるクラスのメソッドから呼び出せ、「音源」すら用意するひつようもないんです。
また、ちょっとしたゲームではなく、かなり「デラックス」なゲームは、Java とか使わないと難しいと思います。
もっとも、一番向いていそうなのは、「コンピュータ自体が使っている言語にコンパイルする(＝速い実行速度) 」C++やCでしょうが、C++は、激ムズそうだし、C は、文法はそうでないとしても、あたまが、「スパゲティ」になりそうです。
欠点としては、Ruby などとくらべ、書く「コードの量」が多く、生産性が低いといわれてますが、僕のような日曜プログラムお宅にとっては、仕事/受注 じゃないんだから、関係ないです。それに、C などとくらべれば、全然少ないと思いますし。
とにかく、デスクトップアプリケーション/オフラインのアプリ/インターネットを使わないアプリ を作るために、大いに覚えたい言語です。

Ruby について:
まず、心引かれたのが、「シンプル、エレガント(簡潔な)、楽しい」という、Ruby につけられた形容詞です。それで、ずっと気になっていたのですが、「Ruby on Rails 」を、ちょっとだけ体験してみて、「とても面倒な」サーバー側の、コンピュータを扱うためのコーディングが、圧倒的に楽そうということを知って、とにかくやってみようと思いました。

さて、コードカデミーに話は戻りますが、後セクションを1つやったら、
HTML と CSS に取り組み、僕としては、それを、HTML と CSS の「コーディングの練習帳」として使って、体で覚えようと思っています。同様に、皆さんのお役にも立てばいいなと思っています。
それでは、また。

投稿: alarky | 2012年5月12日 (土) 16時59分

ちょっと、ちょっと、ちょっと、今日のコードカデミー見ました？
ついに、HTML と CSS と JavaScript が、合体です。
いや、Ruby も、やりたいけど、ちょっと目を離せませんね。
それに、リニューアルしたって、
「HTML + CSS + JavaScript 」がなくなるとも思えません。
とりあえずは、一通り、目を通さないと、気がすまない気持ちになってきました。

ちょっと Ruby について、
ほんの基本だけやった感じでは、なんと言うか、
ものすごく大雑把な言い方をすると、
JavaScript と、Ruby は、例えば、まあ、東京語と大阪弁のようなものですかね。
ちょっと Ruby の環境を整えて、試していただければ分かると思いますが、一つのプログラム語が、分かれば、
「違う部分」だけ、気をつければ、何もプログラム語のことを知らない人に比べれば、大いにマスターしやすいのではないでしょうか。

まあ、とにかく、マイペースですが、コードカデミーを、攻略して行こうと思っています。
本当に、超スローペースかもしれませんが。

週末は、オブジェクトの続きをやる「予定」です。
では、また。

投稿: alarky | 2012年5月15日 (火) 22時54分

＜1.0　What Are Objects For? ＞　オブジェクトは何のためにある？
・
#0 初期状態のコード
// エディタ画面
// spencerさんオブジェクト,オブジェクトリテラルを使った例.
var spencer = {
　age: 22,
　country: "United States"
};

// make spencer2 here with constructor notation
　// ここで「コンストラクタ」を使って,
　// spencer2さんオブジェクトを作って下さい.
・
■ オブジェクトは、私たちに、「現実の世界」あるいは「いわゆる想像上の世界」を提供しますが、オブジェクトを作るには、オブジェクトの「プロパティ」に「データ/情報」を、「設定/格納/代入」すればいいのです。基本的には、2通りの、オブジェクトの作り方があります。
　　◎ さっすが、「分かりやすい」コードカデミーの説明。直訳的には、「オブジェクトは,私たちに,現実の世界,あるいは,「架空の世界」を表す方法を提供してくれます. 」といったところですが、何が、「分かり易い」かと言うと、今まで僕はオブジェクトの説明に関して、「現実の世界」を表現する方法と言う説明は、いやになるほど、見た覚えがありますが、、、もっとも、もっと言えば「作者の独断で作るオブジェクト」なんですが、まあそれは、言うまでもないかもしれません、、、しかしながら、僕は今まで、「架空の世界」を表現する方法だという言い方は、今まで聴いたことがありませんし、どうしてそういう説明を誰もしないのか不思議でしたが、ついに初めて見ました、こういう説明を。
つまり、具体的なオブジェクト「Person/誰か」「Cat/猫ちゃん」「Dog/ワンちゃん」「Car/車」などなどの、オブジェクトってのは、理解しやすいと思うんですが、オブジェクトの中には「String/文字列」もあって、そのオブジェクトが、「大文字を全部小文字に変えるメソッド」があると言われても、そんなオブジェクトは、「化け物」みたいですね。
まあ、何回も見ていれば、感覚的には、分かるのですが、「そういう説明が欲しかった」し、やっと見ることができたと言う感じです。

● 方法1:　「オブジェクトリテラル」を使う.
　　var オブジェクト名 = {　☆　};
　　　// ☆ ・・・ 「ゼロ個以上」の プロパティ名 とそれに結びつけられた 値 のペアのリスト
　　　// このWebページにも説明があります。「Ctr + F 」などで、検索してみて下さい。

● 方法2:　「コンストラクタ」を使う.　ポイント ・・・ 「new 」キーワード.
　　var オブジェクト名 = new コンストラクタ;

■ ここで、皆さんに思い出してもらうために、右エディタに、「オブジェクトリテラル」を使う方法を示しておきました(line 1-4)。

"Q"　では問題です。新しいオブジェクト「spencer2 / スペンサーさんオブジェクト2 」を作ってください。まったく同じ「プロパティ」を使って。ただし皆さんは、「コンストラクタ、Object() 」を使って作って下さい。

"Hint"　まず、コンストラクタ、Object() を使って、「空」のオブジェクトを作ります。それから、「ドット/. 」を使って、適切な「プロパティ」と「値」を、そのオブジェクトに、 設定して下さい/加えてください。
・
・
・
＜1.1　What Are Objects For?　解答例 ＞
// エディタ画面
// spencerさんオブジェクト,オブジェクトリテラルを使った例.
var spencer = {
　age: 22,
　country: "United States"
};

// make spencer2 here with constructor notation
　// ここで「コンストラクタ」を使って,
　// spencer2さんオブジェクトを作って下さい.
var spencer2 = new Object();
spencer2.age = 22;
spencer2.country = "United States";

// オプション
console.log(spencer2);

// コンソール画面
{ age: 22, country: 'United States' }
・
・
・
少しですが、アップロードします、オブジェクトをもう3エクササイズやって、「HTML & CSS 」の攻略を始める予定です。
オブジェクトの残りは、ここ2，3日のうちに終わらせる予定です。
では、また。

投稿: alarky | 2012年5月18日 (金) 23時19分

＜2.0　Properties ＞　プロパティ
・
#0 初期状態のコード
var snoopy = new Object();
snoopy.species = "beagle";
snoopy.age = 10;

// save Snoopy's age and species into variables
　// スヌーピー の 年/age と 種/species を、
　// グローバル変数に,
　// セット/セーブ しましょう.

// use dot notation for snoopy's species
　// 「ドット/. 」を使って,
　// snoopyオブジェクトの
　// 犬種/species に,アクセスして下さい.
var species =

// use bracket notation for snoopy's age
　// 「[ ] 」を使って,
　// snoopyオブジェクトの
　// 何歳/age に,アクセスして下さい.
var age =
・
■ 「プロパティ」は、オブジェクト のメンバーであり、「変数」でもあります(★)。そして、データ/情報 を、保持しています。プロパティ に、アクセスする方法は、2つあります。

・方法1:
「ドット/ . 」を使う.
　　オブジェクト名.プロパティ名

・方法2:
「[ ] 」を使う.
　　オブジェクト名["プロパティ名" ・・・ ☆ ]
　　　　// 「" / ' / 引用符」を忘れないこと！
　　　　// ☆ ・・・ 引用符で囲まれた「文字列」または「それを示す,変数またはコード」
　　　　　　// つまり、「文字列」であること.
　　◎ この方法は、まだやっていませんでしたね。僕も始めて知りましたが、今覚えましょう。

★ ・・・ 原文では、「プロパティ」は「変数のようなもの」とあったので、白黒つけてみました。
「オライリー,JavaScript第5版」より
　　＜4.6 プロパティ と 変数 は違うのか＞　もうすでにお気づきかと思いますが、JavaScript の場合、オブジェクト の プロパティ と 変数 はよく似ています。値を代入する方法も、使用する方法も同じです。何か基本的な部分で相違があるのでしょうか。実はありません。JavaScript の場合、「オブジェクトのプロパティ」と「変数」は基本的に「同じ」なのです。
・・・ 引用ここまで ・・・ ★

■ 右エディタに、以前取り上げた「snoopy/スヌーピーオブジェクト」を、再現しています。この snoopy には、「プロパティ　species/犬種, age/何歳か」 が、あります。

"Q1"　snoopyオブジェクトの「プロパティ・species 」の「値」を、「グローバル変数・species 」に、保存/セーブ/代入 して下さい。「ドット/ . 」を、使って下さい。 ・・・　line 7

"Q2"　snoopyオブジェクトの「プロパティ・age 」の「値」を、「グローバル変数・age 」にセーブしてください。今度は「[ ] 」を、使って下さい。 ・・・　line 10

"Hint"　
line 7:　「オブジェクト名.プロパティ名」で、アクセスします。オブジェクト名は snoopy、プロパティ名は species です。
line 10:　「オブジェクト名['プロパティ名'] 」で、アクセスします。プロパティ名は age です。
・
・
・
＜2.1　Properties　解答例 ＞
// エディタ画面
var snoopy = new Object();
snoopy.species = "beagle";
snoopy.age = 10;

// save Snoopy's age and species into variables
　// スヌーピー の 年/age と 種/species を、
　// グローバル変数に,
　// セット/セーブ しましょう.

// use dot notation for snoopy's species
　// 「ドット/. 」を使って,
　// snoopyオブジェクトの
　// 犬種/species に,アクセスして下さい.
var species = snoopy.species;

// use bracket notation for snoopy's age
　// 「[ ] 」を使って,
　// snoopyオブジェクトの
　// 何歳/age に,アクセスして下さい.
var age = snoopy['age'];
・
・
・
＜3.0　Methods ＞　メソッド
・
#0 初期状態のコード
function Circle (radius) {
　this.radius = radius;
　this.area = function () {
　　return Math.PI * this.radius * this.radius;
　　　　// ☆ Math.PI　・・・　下記参照.
　};
　// define a perimeter method here
　　// 「perimeter() / 円周の長さを求めるメソッド」を定義してください.
};

☆ Math.PI について
JavaScript の 「Mathオブジェクト」 は、計算を行うために使われます。Mathオブジェクト を、
　　インスタンス化
　　 / new で,新しいオブジェクトを作ること
　　はできず！、
　　　　// つまり,
　　　　// 「var keisan = new Math(); 」などは、
　　　　// 実行できません！
単純に Mathオブジェクト を
　　そのまま使用し、
何もインスタンス化せずに Mathオブジェクト から プロパティー や メソッド を呼び出します。

Math.PI は、「円周率/パイ」です。

なお、Mathオブジェクト は、JavaScript の、
　　組み込みオブジェクト
　　 / Built-in Object (ビルトインオブジェクト)
と呼ばれるものです。

この件に関しては、「パスした」コードカデミーにあるか、今後扱うと思われます。
そんなには難しくなく、ぜひ覚えたいことなので、
ぜひググってみてください(キーワード:　組み込みオブジェクト JavaScript)。
・
■ 「メソッド」は、特定のオブジェクト　に関連付けられた / が持っている　「関数」であると言えます。
　　◎ like　・・・　(前置詞)～に似た, ～のような; 「～と同じ特質のある」
　　　　　// like には、「同じ特質のある」という意味もあった(ジーニアス英和辞典)。

■ この「メソッド」は特に、次の2つの場合、役に立ってくれます。
　1. オブジェクトの プロパティ を、 アップデート / 更新　したいとき.
　2. オブジェクトの プロパティ を使って、 何かしたいとき / 計算したいとき.

■ このことの例 (ここでは,上記の「2. 」に当てはまる) として、「コンストラクタ(関数)・Circle 」を、右エディタに用意しました。プロパティ として「radius / 円の半径」があります。そして、メソッド として、「area() / 円の面積を求めるメソッド」も追加しました。
そしてここでは、「パイ/円周率」を使うために、「Math.PI 」(上記の説明参照)を使っています。

"Q"　「perimeter() / 円周の長さを求めるメソッド」を、定義してください(line 8 から)。

"Hint"　円周の長さ を求める 公式 は、
　　2 × 円周率 × 半径
です。
◎ 参考:　円の面積 の求め方は、
　　[半径/radius] × [半径/radius] × [円周率/Math.PI/約3.14]
です。
僕もすっかり忘れていたので、調べました。
・
・
・
＜3.1　Methods　解答例 ＞
// エディタ画面
// コンストラクタ・Circle / 円オブジェクトのためのコンストラクタ
function Circle (radius) {
　this.radius = radius;
　this.area = function () {
　　return Math.PI * this.radius * this.radius;
　};
　// define a perimeter method here
　　// 「perimeter() / 円周の長さを求めるメソッド」を定義してください.
　this.perimeter = function() {
　　return 2 * radius * Math.PI;
　};
}　・・・　☆

// ☆　・・・　一番最後には、 セミコロン / ;　は、必要ありません。
・
・
・
＜4.0　Customizing Constructors ＞　オーダーメイドのコンストラクタ
・
#0 エディタ初期画面
// 3 lines required to make harry_potter
　// ハリーポッター第1巻オブジェクトのためには,
　// 3行も必要だ.
var harry_potter = new Object();
harry_potter.length = 350;
harry_potter.author = "J.K. Rowling";

// A custom constructor for book
　// 本オブジェクトのための,
　// オーダーメイドのコンストラクタ
function Book (length, author) {
　this.length = length;
　this.author = author;
}

// Use our new constructor to make the_hobbit in one line
　// The Hobbit(本の名前)オブジェクトを,
　// 1行で作りましょう.
・
■ 何の プロパティ も メソッド もないオブジェクトを作る「Object() / Objectコンストラクタ」ではない、オーダーメイドの コンストラクタ も定義できます。もっとも、その コンストラクタ を作るのはあなた自身なのですが。この　特注の / 特別仕様の　コンストラクタ は、次の2つの理由から、とても便利です。

1. オブジェクト を作るとき、引数 を使って、その プロパティ を、セットできます。

2. また、自動的に、メソッド を持った オブジェクト を作ることができます。

■ この 2つの点 により、オブジェクト作成時、私たちは、時間を節約し、無駄なコードを書かなくてもすみます。

■ line 2-4 を見てください。「harry-potter / ハリー・ポッター・第1巻 オブジェクト」を作るために、「3行も」書いていることに注目！
そこで、「Book() / 本オブジェクト を作る コンストラクタ (line 7-10) 」を、使って下さい。この Book()コンストラクタ には、「引数」 として「length / ある本のページ数」、「author / ある本の著者」を、渡してください。

"Q"　Book()コンストラクタ を使って、
　　the_hobbit / The Hobbit(本の名前)オブジェクト
を、作って下さい。
プロパティは、
　　author / 著者プロパティ　・・・　"J.R.R. Tolkien"
　　length / ページ数プロパティ　・・・　320
です。
ここでは、3行ではなく、たったの1行で、このオブジェクトを作ってしまうことに注目してください！

"Hint"　
　　var オブジェクト名 = new Book(length, author);
・
・
・
＜4.1　Customizing Constructors　解答例 ＞
// エディタ画面
// 3 lines required to make harry_potter
　// ハリーポッター第1巻オブジェクトのためには,
　// 3行も必要だ.
var harry_potter = new Object();
harry_potter.length = 350;
harry_potter.author = "J.K. Rowling";

// A custom constructor for book
　// 本オブジェクトのための,
　// オーダーメイドのコンストラクタ
function Book (length, author) {
　this.length = length;
　this.author = author;
}

// Use our new constructor to make the_hobbit in one line
　// The Hobbit(本の名前)オブジェクトを,
　// 1行で作りましょう.
var the_hobbit = new Book(320, "J.R.R. Tolkien");
・
・
・
やっと、目標まで、終わりました。
来週ぐらいからは、
HTML & CSS
を、攻略していくつもりです。
ただし...
コードカデミー自体の文章は、
書いてあることを、ある程度予測できるので、
後は、構文や文法をチェックするだけで、
訳せるのですが、
HTML の内容の文章は、
難しそう！
なので、もう今から、パスするつもりでいます。
まあ、それで、少し、本物のコードカデミーより、
パワーダウンは免れませんが、
それでも、それでもですね、
コードカデミーの、
　　システム自体が、すばらしい
ので、
ほかの本などで、
こつこつやるよりは、いいのではないかと？
まあ、これは、やってみないとわかりませんが。

それでは、また。

投稿: alarky | 2012年5月20日 (日) 03時22分

★ Web Fundamentals
☆ HTML Fundamentals (Section 1 of 7)

『Overview　by Andy Abi Haydar 』
HTML を 簡単に紹介します.
・
＜1.0　Let's go! ＞　
さあ、Webページの基本である HTML をはじめましょう.
・
甘やかしかも？:
■ インターネットのウェブページはみな、本当は/見えない部分では 「HyperTextMarkupLanguage/ハイパーテキストマークアップ言語」つまり、HTMLによって、書かれています。じゃあ、どうして、コードや「タグ 」が見えないのかって？それは、「ブラウザ/インターネットエクスプローラ―,ファイアーフォックス,グーグル・クローム など」が、HTML を、解読して/コードの指示に従って 見栄えのいい画面だけをあなたに見せているからなのです。はっきりって過保護です。

■ もう、過保護にはうんざりです。ここでは、あなたの手を、ベーシックHTML を書くことに、染めていただきます。これから、あなたに、HTMLの 体裁/書式/形式、リンクの書き方、そして画像データの表示方法を、お教えしましょう。それはシンプルなページです、そしてもっと言えば、「みにくい/きたない/ちょっと見劣りする」Webページ です。
　　◎ ただし、Webページを作る作者の考えが、一番大事なので、「ビューティフルなページが何だってんだい」と思っている人には、CSS などは、大きなお世話かもしれません。

■ もっと いかした/ナイスな/素敵な ページがお望みなら、「CSS 」のレッスンまで、お待ちを。

■ HTML は、長年使われてきましたが、そのコードの書き方は、ずいぶん変わりました。もしあなたがまだ、「fontタグ」を使い、そして「tableタグ」で表を作っているんでしたら、HTML & CSS レッスンで、あなたは最新式のやり方を、覚えられるでしょう。

■ それでは、「この(◎画期的な)HTML学習ツール」の使い方を覚えることから始めましょう。ボタンの使い方をクリックして調べれば、すべてのボタンが覚えられますよ(◎と言っても、英語だ)。
　　◎JavaScript の時と、レイアウトは大体似ている。「赤の[Reset]ボタン」は、コードを、書き込む前の状態の戻します。上の「Result 」で、「HTMLコード」の結果を、一瞬で見ることが出来ます。これが、「超画期的」だ、技術的にも感心すべきでしょうが、「アイデア」が、画期的。もし自分で、本など見ながらやるとしたら、実際問題として、「かなりおっくう」なのですよ。覚えたいことは覚えたかったけれど、なかなかやる気になれなかったけど、しかし、これは、いいです！

"Q"　グリーンの[Run]ボタンをクリックして、次のエクササイズへ、go !

"Hint"　右エディタ下のグリーンの[Run]ボタンです。
・
・
・
＜2.0　Buttons, buttons everywhere ＞
ボタンをクリックするだけです！
・
■ あなたはもう、私たちコードカデミーの JavaScriptレッスン を経験済みですか、でも、今回からの右画面は、ちょっと変わりました。では、右の「Webページ(作成)マシーン」を、見てください（◎右コンソール画面というよりも,Webページ自動作成マシーン(略して,Webページマシーン)と呼びたい)。

まず、左側の タブ です、「HTMLタブ」:
　　テキストエディタ に書くべき、「ソースコード」を、表しています。ソースコード とは、プログラムコード とも言えます。HTMLコード も、「< と > 」を使った、プログラムといえるでしょう。

そして、右側の「Result/結果表示タグ」:
　　早い話、(ソースコードである,HTMLファイル をダブルクリックなどで開くと) ブラウザでどう見えるかを、そのまま表示します。
　　◎ ブラウザ は、プログラム(HTMLファイル) の実行マシーンであるとも言えます。

■ 右側の「Resultタブ に表示される画面」は、本物の ブラウザ のように、アクションし/動き ます。たとえば、その画面の「リンク」をクリックすれば、そのジャンプ先の (本物の)Webページ が、表れるというわけです。

■ Go crazy !　― 夢中になって、何度でも、この2つのタブを、行き来してください。そして、「コードの意味」を、理解しましょう。

"Q1"　HTMLコード が、どのように、ブラウザ によって、解釈/プログラムを実行 されるかを、考えてください。そして、[HTML]タブ のコードの変更が、どのように、[Result]タブ の内容に変更を与えるかを確認して下さい。
　　◎ 例えば、<p> や、</p> を、削除して、実行してみて下さい。すべて 1行で 表示されます。

"Q2"　<p> と </p> が、何をしているのか考えて下さい。

"Q3"　あなたがこの Webマシーン を、好きなだけ試したら、[Run ]ボタンをクリックして、次のエクササイズに進んでください。

"Hint"　<p>　⇒　<paragraph/文章の段落/パラグラフ>　と言う意味です。
・
・
・
＜3.0　Give me some more on HTML ＞
まだまだ,HTML は,いろいろなことが出来ます.
・
■ では、 H　T　M　L　は、それぞれ何のことなのでしょうか？

　　1. まず、HT は、HyperText の略です、HyperText/ハイパーテキスト とは、
　　　　ユーザがテキストの一部をクリックすることにより別の部分を呼び出せる機能を持つテキスト
のことです。つまり、
　　　　リンク を クリック して 他のページ に ジャンプ できる
ということです。

　　2. M は、Markup/ピックアップする　という意味で、タグ/<何かの指示ここから> ～ </何かの指示ここまで> を使います。指示とは、ブラウザ での表示方法です(必ずしも目で確認できる部分だけではありませんが)。

■ そして CSS と JavaScript を取り入れると、Webページはさらに ビューティフル/クール になり、また レスポンス/応答/対話 を実現できます。

"Q"　line 2-4 に、「一区切りの文章」を、加えます。その一区切りの文章を表す、HTMLコード は、どうなりますか？
　　◎ Answer(答):　<p> 一区切りのセンテンス(文章) </p> ということ。

さらに、次のことを試してみましょう。
　1. 新しい、パラグラフ/段落/(本当は文字列でも同じだ) を、加えてみましょう。
　2. 段落 を、削除してみましょう/消してみましょう。
　3. ここでは間違った答えはありません。この「Webページマシーン」で、HTML がどんな感じのものかをつかんでみてください。
　　◎ ここで、試せるのは、「改行」されるかどうか、だけですね。HTML を「味わう」には、ちょっと、遠いかも。
　4. 存分に試したら、[Run ]を、クリック！
　　　// これで、このエクササイズをクリアできます。

"Hint"　line 4 を、コピーして、line 5 の前に貼り付けてみて下さい。
　　◎つまり、例えばこういうことです。

line 01:　<html>
line 02:　　<p>Someday, I will become a real webpage. With links and everything.</p>
line 03:　　<p>I'm like the Pinocchio of web pages.</p>
line 04:　　<p>Is this thing on...?</p>　// ここを,コピー.
line 05:　</html>

を、

<html>
　<p>Someday, ...</p>
　<p>I'm ...</p>
　<p>Is this thing on...?</p>
　<p>Is this thing on...?</p>　// ここ !
</html>

のようにすると言うことです。
・
・
・
こんな感じで、やって行こうと思っています。前回やったところを、リメイクしただけですが、やっぱり、コードカデミーの人たちは、「教えることのプロ」だけあって、文章自体が、学習者のテンションを上げてくれるようです。
前回、僕が自分で、要点だけまとめた文章より、面白いのではないでしょうか？
また、ペースがのろいとお思いでしょうが、ここは、あきらめて下さいとしか言えませんし、いろいろ学習方法を工夫してみてくださいとしか言えません。JavaScript を、極めるもよし、Ruby なんかにもチャレンジされたらと思います。
プログラムは、製品化されているゲームなどと比べて、「クリアしたら終わり」ではなく「クリアしたら、さらに先がある」ところがいいところなのだと僕は思います。
では、また。

投稿: a | 2012年5月26日 (土) 05時57分

ちょっと皆さんにお知らせがあります。
実は先日、機会があって、Codecademy/コードカデミー の方に、僕がここで翻訳をしていることを、お知らせしたのです。
そうしたら、僕の翻訳を、公式に使いたいという返事をいただきました。
それで、今、使うべき部分を編集しているのですが、ちょっと前回やった時より、内容が増えていたり、ちょっと日本語がよくなかったり、誤訳が見つかったりで、思ったより時間がかかっています。
Codecademy の方は、数週間でほしいと言っておられたのですが、すぐ終わるだろうと思って、日曜日か月曜日に仕上げて、そのテキストファイルを送りたい言ったのです。
しかし、間に合うのか自信がなくなってきたので、最悪、分割して送るということを申し出ようと思っています。
まあ、それはともかく、そういうことで、しばらくこれが終わるまでは、HTMLレッスン の続きには、取り掛かれませんので、了承しておいてください。
さて、どのように使われるかは、今一よくわからないのですが、今後も使っていただけるかもしれないので(今後も使っていただけることを期待して)、HTML関連は、Webページの内容の翻訳は難しそうだったので、パスするつもりでいたのですが、チャレンジすることにしました。
また、このことに関して、詳細など分かりましたら、お知らせします。
それでは、また。

投稿: alarky | 2012年6月 2日 (土) 16時08分

@alarky
ヒマが十分あれば、翻訳のブラッシュアップ等をできるけど、ヒマもないので、ネット上のフィードバックによるブラッシュアップに期待しましょう。がむばってください。

投稿: iwatani | 2012年6月 2日 (土) 20時18分

岩谷さんへ
応援してくださって、ありがとうございます。
ほとんどのことは、分からなくても、しつこくググれば、何とかなりますが、どうしても分からないことは、ここに掲示したいと思います。
岩谷さんをはじめとして、皆さんに助けていただければと思います。
よろしくお願いいたします。

投稿: alarky | 2012年6月 2日 (土) 21時02分

Codecademy/コードカデミー に提出するために、このページのコピーのテキストデータを編集中に、誤訳が見つかりましたので、ここで、お詫びして訂正いたします。

誤訳のみならず、日本語も分かりづらいところはかなりありまして、この部分でも訂正があります。
なので、提出したテキストデータをそのままコピーすることにしました。以下3エクササイズです。

□ JavaScript Fundamentals » Getting Started with Programming
　by Ryan Bubinski
JavaScript 基本偏 >> プログラミングを始めましょう！
　作者: Ryan Bubinski
・
■ Getting to Know You, Part I (Section 1 of 8)
8-1.　あなたを紹介してください、パート1
・
＜5. Messing Up＞
引用符を付け忘れると？
・
ただし、右のコンソール画面では、守るべきことがあります。

"Q"　ためしに、あなたの名前を、"alarky" ではなく、alarky のように、引用符「" ～ " 」を付けずに、タイプしてみてください。エラー が返されるはずです。
　// 参考:　今は,ざっと見ておいて,このルールを守りましょう.
　　// ReferenceError: alarky is not defined
　　// 参照エラー:　alarky ってのは,定義されていません.
・
・
■ What If? (Section 6 of 8)
8-6.　もしも
・
＜3. Prompting＞
prompt()メソッドを使ってみよう
・
まず、if/else文 の、ユーザの名前を取得する アクション/動作 を見てみましょう。ユーザがあなたに言う名前を、変数 name にセットするということです。

ユーザの名前を聞くためには、「prompt("what's your name?") 」と、タイプして下さい。
　　// what's your name? (あなたの名前を教えてください）
そして、prompt()メソッド によって現れるウィンドウに、変数name の 値 になるべきあなたの名前を入力すると、エディタ下のコンソール画面はどうなるでしょう。

"Q"　これを実行するために、変数name の 値 を、prompt()メソッド が返す 値 に設定しましょう。あなたが書くのは、この部分、つまり、line 3 だけです。残りのコードはもう準備済みです。コンソール画面出力を確認しましょう。

"ヒント"
ここでは、すでに宣言してある 変数name の 値 を、prompt()メソッド で、入力/タイプ した値になるようにすればいいのです。つまり、line 2
// Prompt for the user's name here.
　　(ユーザ名取得のためのprompt()メソッドをここに書く)
の下、line 3 に、
　　name = prompt("What's your name?");
と、書けばいいということです。
・
・
＜6. Inequality＞
「=== / == 」以上に、あなたは、「値」を、調べることが出来ます。次の記号を、「if文、else if文」 の中で、同じように使えるのです。それは、「>(より大きい)、<(より小さい)、!== と != (等しくない) 」です。

もし、「より大きい/より小さい か、同じ」 という演算子が必要なら、後ろに、「= 」 をつければいいのです。こんなふうに、「>= 」。

"Q"　エディタのコードを、直してください。console.log()が、実行されるように。そうすれば、「変数number 」が、5 より大きかったら、「your number is greater than 5 / 5より大きな数字です」と、5より小さかったら、「your number is less than 5 / 5より小さいです」と、応えます。

"ヒント"
「> 」は、「値」の左側が、右側より大きいかを、チェックします。「< 」は、同様に、左側のほうが、小さいかをチェックします。「5 < 3 」は、「false/偽/いつわり」で、「5 > 3 」は、「true/真/正しい」ということになります。
line 1:　// Assign a number to 'number'.
　　// 変数numberに,数値をセット(代入)してください.

以後編集中に見つかりましたら、またアップロードします。
また、コードカデミーの日本語版について、詳しいことが分かりましたらお知らせいたします。
では、また。

投稿: alarky | 2012年6月 3日 (日) 22時35分

日本語版についてのお知らせです。
自分ではもうほぼないとは思っていますが、誤訳および誤記訂正などは、後から自分で治せるということで、今、Codecademy/コードカデミー の方に、作成していただいています。
あと、これからですが、私事がいろいろありまして、少しずつ続きをやる「予定」です。

投稿: alarky | 2012年6月 8日 (金) 22時36分

日本語版の詳細については、近々発表できると思います。少々お待ちください！

投稿: alarky | 2012年6月16日 (土) 21時05分

Codecademy日本語版 始まりました。もう登録済みの方で、セクション2 をはじめるには、ポップアップウィンドウが出現したら、の右上にあるボタンで画面を閉じて「Start the next section 」をクリックして下さい。

投稿: alarky | 2012年6月18日 (月) 22時38分