programmIng: 11月 2012

2012年11月27日

CodeStudy 22-8 正規表現のこと

このところしばらく取り組んできた CodeStudy のセクション 22-8 にやっと正解できました。正規表現というのは、名前は聞いたことはありましたが、思っていた以上に複雑で奥が深そうなものでした。

問題
regexp1やregexp2にマッチする様な文字列を、str1とstr2に代入しましょう。

var regexp1 = /\w{3}\s?\d+/;
var regexp2 = /\d{3}-\d{4}\s*\w/;

var str1 = 'aaa 1';
var str2 = '222-1111 a';

var result1 = regexp1.test(str1);
var result2 = regexp2.test(str2);

regexp1 の方の最初の条件は、\w（windowsでは ¥w ）です。これは文字を表していますので、文字なら何でもマッチします。僕は a にしました。

次の条件は {3} です。これはこの直前の文字を 3つ繰り返すので、さっきの a が aaa になります。

次は、\s（¥s）です。これは空白スペースを表しています。その次に ? がついていますから、空白スペースが 0~1個入っていればマッチします。ということは空白スペース無しでもOKです。

次が、\d（¥d）です。これは数字を表しますので、僕は 1にしました。最後に付いている + は直前の文字を 1回以上繰り返す意味ですので、僕は 1回だけにして、

僕は最終的に 'aaa 1' としました。'@@@ 99999' 等でもマッチします。

regexp2 の方でつまずいてしまったのですが、最初の \d{3}（¥d{3}）は数字を3個繰り返す条件です。

次の - を [-] の記号と勘違いしてしまったのですが、[] に挟まれていない - はこの文字自身を表すだけですので、- が入ります。

次は最初と同じ書き方の数字を4個繰り返す条件です。

次の \s（¥s）は空白スペースです。* の記号がついていますから、0個以上繰り返していればマッチします。つまり空白スペース無しでもOK です。

最後の \w（¥w）は文字です後ろに何もついていないので、何の文字が何個ついていてもマッチします。

僕は最終的に '222-1111 a'としました。 '999-0000 zxcvbnm' 等でもマッチします。

正規表現はここで出題されている以外にも色々あって、ちょっと覚えきれませんが

目標にしているショッピングサイトを作る時に商品の発送先などの入力フォームで必要になりそうなので、構文的な所は覚えておいて、条件の書き方はその都度調べながらでもしっかり身につけたい所です。

2012年11月25日

変数についてのまとめの続きです。変数について色々と試してみた結果を書いていきます。できるだけ結果を表示させた画像もつけました。
前回は var で変数を宣言して、値を代入する所まででしたが、

一度にたくさんの変数を宣言する事もできました。
やり方はカンマで区切って書きます。

var a = 1, b = 2, c = 3;
document.write(a, b, c);

このように表示されます。

次に変数に限った事ではないのですが、

変数名の大文字小文字は別のものとして扱われます。

例えば予約語に含まれる var は変数名に使えませんが、Var なら使えました。

var Var = 1;
document.write(Var);

もっともこういった変数名は紛らわしいので、やめておいた方が良さそうです。

同じ変数に違う値を続けて代入すると、上書きされました。

先に代入していた値は消えてしまいます。

var a = 1;
a = 10;
document.write(a);

var は変数を宣言するものなので、10を代入する時には書く必要はありません。

var は省略できるみたいです。

解説書によると、書いた場合と省略した場合では、何か違いがあるようなのですが、まだ良く判りませんので、今後の宿題に残しておきます。

a = 5;
document.write(a);

今回試したのは以上です。解説書などに一通り書いてある事かも知れませんが、ちょっとの事でも自分で入力して試してみるのは、「習うより慣れ」の面で良さそうなので、できるだけ続けていこうと思います。

2012年11月24日

JavaScript　初歩のまとめ ① 変数

CodeStudy での練習が終盤ですが、正規表現のところでまた行き詰まってしまっています。少し復習の意味でここまでのまとめをしたいと思います。まずは変数から…
（間違っている所もあると思いますが、それに気づいたら、その都度書き直します。）

変数は様々な値などを入れておける名前のついた箱のような物です。
色々な場面で使われているみたいですが、例えば変数を使わずに桁数の大きな数を計算するとしたら、その数を紙などに書いておいて計算する式にその数が登場する度にプログラムに打ち込まなくてはなりませんが、変数に入れておくと、変数の名前を書くだけで、その数を扱うことができます。打ち間違えをする心配も減りますし、とても便利そうです。
変数を JavaScript で実際に扱う場合は、

var 変数名; 　

これで変数名に指定した名前の変数ができます。
var でその後に書く名前の変数を宣言します。宣言っていうのはどういう事なのか良く判りませんが、その名前の関数を作るぐらいの意味かと思います。
ですが、このままでは空っぽの箱の状態です。そこで続けて次のように書きます。仮に変数名を a としました。

a = 1;

これで a という名前の変数に 1 という数が入ります（代入するといいます）。さっき書いたように a は変数名で基本的には自由に決めて構わないのですが、いくつか決まりがありました。

使える文字は、半角英数字と $ と _ の記号。
一文字目に数字は使えない。
予約語（JavaScript の命令などで使うキーワード）は使えない。

予約語については、結構たくさんあって全部は書けませんが、例えば変数の宣言に今使ったばかりの var も予約語なので、変数名には使えません。

a の次に来る = ですが、数学で使う場合とは意味が違い、= の左を右に代入するという意味です。ですのでこの場合だと、1 が a に代入されます。最後に付いている ; は JavaScript で一つの文の終わりに付ける記号です。ここでは二つの文で変数 a を用意して a に 1 を代入した訳ですが、これを一つの文で書く事もできます。

var a = 1;

変数を宣言する時に同時に代入もしてしまっています。
最後にちゃんと代入ができているかを確認して終わりにしたいと思います。

これを HTML ファイルの中に（<head>~</head> でも <body>~</body> でも大丈夫です）書いて実行してみます。
document.write(a); と書くと、変数 a の中身を表示させることができます。

無事に 1 が表示されました。

変数についてだけでも、覚えた事はまだあるので、まとめ ② も変数についてです。

2012年11月22日

CodeStudy 21-5 プロトタイプのこと ②

CoseStudy で Javascript の練習を続けています。

先日セクション 21-5 に正解できましたので、復習を兼ねてまとめを書いておきます。

問題

Circle オブジェクトが定義されています。これに、円周を求める circumference( ) と、面積をを求める area( ) メソッドを定義して、正しく出力させましょう。

function Circle(radius) {

this.radius = radius;

this.PI = 3.14;

}

//ここにメソッドcircumference()とarea()を定義する。

Circle.prototype.circumference = function(){

return this.radius * 2 * this.PI;

};

Circle.prototype.area = function(){

return this.radius * this.radius * this.PI;

};

var circle1 = new Circle(3);

var circle2 = new Circle(25);

output("半径"+ circle1.radius + "の円の円周は" + circle1.circumference() + "で、面積は"+ circle1.area() + "です。");

output("半径"+ circle2.radius + "の円の円周は" + circle2.circumference() + "で、面積は"+ circle2.area() + "です。");

まず円周を求める公式は、直径 × 3.14 で、円の面積を求める公式は、半径 × 半径 × 3.14 でした。

この式をメソッドにして、クラス Circle の prototype に続けて書けばうまく行きそうです。

1~4行目クラス Circle が定義されています。引数で radius を受け取って Circle.radius に代入していますが、問題文には書かれていませんが、radius は英語で半径という意味なので、おそらく半径を扱っているのでしょう。ということは、14~15行目の (3) と (25) の引数は、半径の数値なのでしょう。

PI = 3.14 は Circle のプロパティにしてしまっていいと思うので、3行目に書いておきました。ここまでで、計算に必要なプロパティは揃いました。

自分が答えとして書くのは 7~12行目までです。

7~9行目円周を計算するメソッドです。8行目 this.radius には、1~2行目で引数として受け取った、半径が代入されていますので、これを 2倍すれば直径になります。さらに 3.14 を掛ければ、円周になります。この処理を 7行目で無名関数の書き方で、クラス Circle の prototype.circumference に代入すればメソッドの完成です。

10~12行目こちらもやっていることは 7~9行目と同じです。メソッドの中身が半径 × 半径 × 3.14 になっています。

ひとまず prototype の問題は解き終わりました。参考書などを見ると、さらに prototype を使った継承という技法があるみたいなのですが、これはかなり難しくて、今の所さっぱり判っていません。この辺の事が判ったら、また別の記事にまとめたいと思います。

2012年11月18日

CodeStudy 21-4 プロトタイプのこと ①

少し前に全く判らずに、出直して挑戦した CodeStudy のセクション 21-4 が正解できました。既に書かれているコードの間違いを直す問題だったのですが、間違っている部分が、結構多くて、そこをばっさりと書き換えないといけないのが初心者には難しかったです。以下は僕が書いたコードです。

function Menu(name, price){
this.name = name;
this.price = price;
}

Menu.prototype.totalPrice = function(quantity){
return this.price * quantity;
}

var hamburger = new Menu("ハンバーガー", 100);
var cheeseburger = new Menu("チーズバーガー", 120);

output("太郎は、" + hamburger.name + "を" + hamburger.totalPrice(5) + "円分買いました。");

output("二郎は、" + cheeseburger.name + "を" + cheeseburger.totalPrice(3) + "円分買いました。");

1~4行目は、Menu クラスの定義です。インスタンス化の時にメニューの名前と値段を引数で受け取り、オブジェクトのプロパティに代入するようになっています。
this.name がクラス Menu のプロパティ。name は引数を受け取る為の変数です。
this.price の方も同じです。

6~8行目がプロトタイプの定義です。クラス Menu のprototype プロパティ（だと思います。）に続けて書いたプロパティやメソッドが、インスタンス化したオブジェクトで共用できるようになります。この場合では、ハンバーガーやチーズバーガー何円分買ったか、つまり値段 × 個数の計算が、2種類のオブジェクトで共用されています。

10~11行目は、1~4行目で定義した Menu クラスから、hamburger と theeseburger の2つのオブジェクトを生成（インスタンス化）しています。カッコ内は Menu クラスに渡す引数で、それぞれのオブジェクトの name と price のプロパティに代入されます。

13~14行目は、いつもの CodeStudy 専用の output メソッドを使って、オブジェクトのプロパティの中身と、メソッドの結果を表示させています。.totalPrice( ) の引数はプロトタイプメソッドの (quantity) に渡される、買った個数です。

一応正解はできましたが、prototype のことはまだ良く判っていません。困ったときの「独習 JavaScript」には図入りで詳しく解説してありましたが、どうもぼんやりとしか判っていません。もっとしっかり理解できたら、このブログ上でもまとめを書いてみたいです。

あと、前回までに書いた中で用語をかなり間違って使っていました。ちょっとずつ修正していきます。

2012年11月17日

JavaScript　座右の書とサイト　

いつも空いた時間に Javascript のコードを書く練習をしていますが、
壁にぶつかった時にお世話になっている本とサイトのご紹介をさせていただこうと思います。

本

翔泳社　独習 Javascript　高橋和也、竹添直樹、里見知宏　著
本当は今の僕にはちょっとレベルが高い本です。でも、色々な要素について系統立てて説明してあるし、各オブジェクトのプロパティやメソッドの一覧もついているし、当分の間本はこの1冊で良いと思っています。

サイト

ドットインストール
YouTube の動画でプログラミングの基礎を学べる（今や説明不要の）サイトです。
Javascript は基礎と、Tips あと Javascript を使ったミニプログラムがあります。
基礎を一通り見た後は、ミニプログラムのコードを丸写しして細かい所を変更したりすると、動きがどう変わるかを試したりして勉強させて頂いています。
http://dotinstall.com/

CodeStudy
このブログの中でも何度も話題に出ています。サイト上で出される問題に、実際にコードを書いて答えていく講座になっています。サイト内に答えを入力できるフォームがあるので、テキストエディタいらずで勉強と練習ができて、とても便利です。
ただ、模範解答のようなものは表示されません。手を動かしながら考える方が、よく頭に入ってくる感じがしてとても良いです。
http://jeek.jp/study

あまり手を広げすぎても理解しきれなくなると思うので、
今はこの辺りに絞って勉強しています。

2012年11月16日

CodeStudy 18-11 オブジェクトのこと

相変わらず CodeStudy で試行錯誤しています。
オブジェクトのおさらいをしています。
セクション 18-11 にもう一度取り組んでみたら、だいぶ整理できてきました。

問題
Calcオブジェクトが途中まで定義されています。
新たにname,price,numberプロパティを定義し、問題文の説明にあるようなメソッドtotalPrice(),result()を定義し、result()をoutputで出力して下さい。

function Calc(name, price, number) {
this.name = name;
this.price = price;
this.number = number;
}

var calc = new Calc("じゃがいも", 30, 16);
calc.totalPrice = function(){
return this.price * this.number;
}

calc.result = function() {
return "１個" + this.price + "円の" + this.name + "を" + this.number + "個買ったので、合計" + this.totalPrice() + "円になりました。";
}

output(calc.result());

1~5行目の最初に function Calc()…となっているので、今までの知識から関数を定義していると思ってしまいましたが、どうも違うらしくて、オブジェクトの原型になるインスタンスを定義しているみたいです。
ここで定義した Calc をもとにして 7行目で new 演算子を使ってオブジェクト calc を作っています。

2~4行目がまず判りにくかったですが this.name は Calc のプロパティで、name は7行目のオブジェクトを作る時の引数を受け取る変数です。
この場合新しく作られた calc オブジェクトは、原型の Calc で定義されたプロパティの name, price, number を持っていますが、そのままだと中身は空です。
ですので、7行目の ("じゃがいも",30,16) が引数としてそれぞれ (name, price, number) に代入されて、それが 2~4行目でオブジェクトcalc の値を持ったプロパティとして定義されます。

後は比較的簡単だと思います。
8~10行目は合計の購入金額を計算するメソッドをオブジェクトcalc に定義しています。return で計算結果が返される先は、メソッドを呼び出した所なので、13行目の this.totalPrice() の所です。

12~14行目は、計算結果を文字列にするためのメソッドです。この文字列が 16行目のoutput() で表示されます。

これは練習問題だからか、わざと複雑にしてるんじゃないかと思いたくなりますが、例えばじゃがいも以外にニンジンとかキャベツとかが増えた時に Calc をもとにしてオブジェクトを作るとプログラムの修正が楽にできるようにしてあるんだと思います。

一度正解できた問題も、行き詰まって戻ってきて取り組むと整理しながら理解ができて良かったです。
インスタンスを定義するのと、関数を定義するのが同じ function で、書き方も同じというのは何か理由がありそうですが、先日の連想配列とオブジェクトが似ている件と合わせてこれからの宿題にします。

2012年11月14日

Javascript　オブジェクトのこと

相変わらずオブジェクトのことが理解できずに行き詰まっていますが、
色々なサイトや本を読んでみると、どうもオブジェクトは連想配列と殆ど同じように使えるらしいことまでは判りました。試しに…

//連想配列
var arr = new Array();
arr.color = "blue";
arr.number = 18;
arr.flg = true;

alert(arr.color);
alert(arr.number);
alert(arr.flg);

//オブジェクト
var obj = new Object();
obj.color = "blue";
obj.number = 18;
obj.flg = true;

alert(obj.color);
alert(obj.number);
alert(obj.flg);

同じ内容を書いて new の後ろだけを Array と Object にしてみました。

実行してみると、確かに同じ内容がアラートされました…。

これだけ良く似た物をどうやって使い分けるのか、とかを考えると

判ったような判らないままのような感じですが、とりあえず先に進みます。

この先にはまたしても良く判らないコンストラクタという物があるらしいです。

用語も判らない物がたくさんあるので、
調べてここまでの分をまとめてみたいです。

2012年11月12日

Javascript　オブジェクトのこと

日々 CodeStudy での練習を通して、Javascript の色々のことを覚えようとしてきましたが、オブジェクトの所で完全にこんがらがってしまいました。
用語も色々出てきますし、コードの書き方も色々出てきて CodeStudy だけでは無理っぽいです。
他の解説のサイトを覗いて、用語の確認と書き方と全体像の様な物をざっとでも良いのでつかみたいと思い、このサイトをしばらく読んでいってみることにします。

JavaScript のイロハ
http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/

何だかとても高度な内容みたいですが、文章はとても読みやすかったので、量はとにかく膨大ですがさっきの用語、書き方、全体像を少しでもつかめれば良いかなと思います。

2012年11月11日

CodeStudy 20-10 連想配列のこと

相変わらず CodeStudy で Javascript の練習をしています。
section20-10まで来ました。
今回は初めて2次元配列が出てきて、とても難しかったです。

問題
cart（購入した品物）に配列が定義されています。
それぞれ、itemsに品物の名前、totalPriceに品物の合計金額、
totalQuantityに品物の全個数を代入し、出力してみましょう。
なお、itemsは配列として出力してください。

こんな風に書いたら正解できました。

var cart = [
{ name:"タマネギ", price:80, quantity:3 },
{ name:"じゃがいも", price:60, quantity:5 },
{ name:"ニンジン", price:40, quantity:4 }
];

var items = [];
var totalPrice = 0;
var totalQuantity = 0;

for(var i = 0; i < cart.length; i++){
items[i] = cart[i]['name'];
totalPrice += cart[i]['price'] * cart[i]['quantity'];
totalQuantity += cart[i]['quantity'];
}

output(items);
output(totalPrice);
output(totalQuantity);

自分で書かなくてはいけないのは、真ん中あたりの for文の所です。
　配列 cart は 0番から始まるので、カウンタ変数 i は 0から。
　普通の配列の中に連想配列が納められているので、

　for in ではなく for で .length プロパティを使って繰り返し回数を指定。

for 以下の1行目で配列 items に配列 cart の name に
納められた値 3つを代入しています。

2行目で最初エラーが出てしまって行き詰まったのですが、
80（円?）が 3個 + 60 が 5個 + 40 が 4個の合計を出せば良ので、
for文を使って、配列 i番目の price * quantity を cart.length の数だけ繰り返して
変数 totalPrice に順に足しながら代入しています。

3行目は、1行目とやっていることは同じですが、代入するのが
配列ではなくて普通の変数という所だけ変える必要があります。

このブログの最初の方に書いたように、ショッピングサイトを作るのが
目標ですので、とても楽しんで取り組めました。

2012年11月8日

CodeStudy 18-7 無名関数のこと

引き続き CodeStudy でJavascript を練習中です。
section 18-7 に正解できました。

問題
与えられた引数の平均を返す無名関数を作成し、変数aveに代入しましょう。
また、その結果を aveResult に代入し、それを output() で出力して下さい。

var ave = function(){
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return aveResult = sum / arguments.length;
}
var aveResult = ave(1, -5, 3, 8, -40, 200);
output(aveResult);

2行目変数 sum は平均を出す際に、必要になる全ての要素の合計値。

3~4行目 for を使って、配列の全ての要素を合計しています。

　　配列 ave の0番目から合計していくので、カウンタ変数 i は 0 から、

　　繰り返す回数は、 .length プロパティで配列の要素の数と同じだけ、

　　配列の全ての要素を合計するので、カウンタ変数は 1づつ増やす。

6行目全ての要素の合計値 sum を要素数のarguments.length で割れば平均が出ます。

前回同様最後の行の output() はこのサイト内だけの練習用メソッドだと思います。

複数の引数をまとめて配列で扱える arguments はとても便利で

他の場面でも活用できそうです。

2012年11月6日

CodeStudy 18-4 配列のこと（昨日の続き）

昨日の続きで、Javasctipt 学習サイト CodeStudy に挑戦していました。
こんな風に書いてみたら、とりあえず正解になりました。

function max(){
var result = arguments[0];
for(var i = 1; i < arguments.length; i++){
if(result < arguments[i]){
result = arguments[i];
}
}
return result;
}
var maxValue = max(8, 100, 20, -6, 8000, 29, 68);
output(maxValue);

2行目で、変数 result に配列の 0番目（この場合 8 ）を暫定の最大として代入。

3行目の for で、4行目からの if を配列の要素の数と同じだけ繰り返す。
　配列の 0番目が既に暫定の最大としているので、カウンタの始まりは 1から、
　繰り返す回数は、.length で配列の要素の数と同じだけ、
　i++ で 1づつ増やして配列の全ての要素を判定する。

4行目からの if は配列の添字にカウンタ変数 [i] を使って（この場合は 1~6）順番に暫定の最大と比較して、大きければ、新たな暫定の最大として変数 result に代入。
繰り返しが終わった時点で resultに代入されているのが最終的に勝ち残った最大値ということになるので、その値をreturn で返す。

で、良いと思います。
最後の行の output() は、このサイト内だけの練習用のメソッドだと思います。

CodeStudy 18-4 配列のこと

Javascript 学習サイト CodeStudy を続けていますが、
セクション18-4 で行き詰まりました。
数値が入った配列で、for 文と if 文を使って
最大の要素を取得するにはどうすればいいの？

要素の数だけ for で繰り返して、

if ( a[0] > a[1]){
r = a[0];
else{
r = a[1];
}
}

こういった判定をして、大きい方を別の変数に入れて、
次のくりかえしで、

r > a[2]

みたいな判定で、また大きい方を r に入れ直して…。
ってやればできそうかな？
続きはまた明日やります。

CodeStudy　http://jeek.jp/study

2012年11月4日

日課

CodeStudy というサイトで Jsvascript の勉強ができます。
ブラウザ上にエディタも出ますので、とても手軽に取り組めます。
少しの時間でもできるだけ毎日手を動かすようにしたいです。

CodeStudy　http://jeek.jp/study

あと、この際ですので、タッチタイピングの練習もやります。
こっちの練習は、Mac App Store で無償でダウンロードできる「タイピスト」が評判通りとても良いです。

実際に自分でコードを書けるようになった時に、それを動かす為のサイトもつくりはじめています。

2012年11月2日

とりあえずの目標

現時点では、HTML 4 とCSS 2 は一応は理解していますので、
静的なサイトは作れます。
そこをスタートとして、目標は自分でオンラインショップのシステムを作ることです。
ですがそれはかなり遥かな目標ですので、とりあえずの目標は、Javascript で
HTML と CSS で作ったサイトにいろいろな仕掛けを作れるようになりたいです。
その間に必要が出てくると思いますので、HTML 5 と CSS 3 も覚えたいです。

プログラミングのブログを始めました

趣味でプログラミングをやっています。
色々な本やサイトを参考にしながら試行錯誤していますが
判らない事はたくさんあります。
判らない事や、それが判ったときの事などを
このブログに書いていこうと思っています。

登録: 投稿 (Atom)