jQueryを学びはじめる

「よくわかるJavascriptの教科書」を読んで、勉強中。
なんかオブジェクトの作り方とかいう難しい話が出てきたけど、
さらっとそこは読み飛ばして、P111からはjQueryのお話。

jQueryを使うと、プログラムを短くすることができる。
jQueryはDOM操作や、Ajax通信、エフェクト処理などの
骨組みをあらかじめ作成してて、それを利用できる。

本を見ながら、jqueryをぽちぽちしてみた。
$('toolContent')とnoneをシングルクォーテーションで囲うのを忘れて動かなかった。
シングルクオーテーション、これ大事。

下のファイルをクリックしてみてください。
メニューが開いたり閉じたりします。

ファイル

• 新規
• 開く
• 上書保存
• 名前をつけて保存

ボタンを押して、javascriptを実行させる

「よくわかるJavascriptの教科書」を読んで、勉強中。
P80からは、ボタンを押して、Javascriptを実行させるお話。

今までブログにボタンを押したら、
javascriptを実行できるボタンを設置してたんだけど、
テキストのやり方となんか違う…

今までのやり方
<input onclick="OnButtonClick();" type="button" value="実行" />
<script language="javascript" type="text/javascript">
function OnButtonClick() {プログラム}
</script>

テキストでのやり方
<input id="適当な名前" type="button" value="実行" />
<script language="javascript" type="text/javascript">
document.getElementById('適当な名前').onclick = function() {プログラム}
</script>

これからはテキストのやり方でやってみよう。
早速試してみる。

配列

「よくわかるJavascriptの教科書」を読んで、勉強中。
P74からは、配列のお話。

配列を使うと、数字以外の要素も簡単に
繰り返しなどの処理で使えるようになるらしい。
配列の宣言方法は…

var 変数名 = new Array ( 要素をいくつでも );

で、要素にはそれぞれ背番号みたいなものがついてて、
それは0からはじまる。

P76の練習問題は、配列を利用して、
都道府県をドロップダウンリストに表示するというもの。
それをjavascriptで書くと…



配列の添字に使う括弧を最初[]じゃなく、()を使ってて、動かなかった…。
失敗して、学んでいこう。

繰り返し処理（whileとfor）

「よくわかるJavascriptの教科書」を読んで、勉強中。
P66からは、繰り返し処理のお話。

whileとforは同じような処理をする。
違いは書き方。

変数の宣言
while ( 条件 ) {
   繰り返す処理
   繰り返しごとの更新処理
}

for ( 変数の宣言 ; 条件 ; 繰り返しごとの更新処理 ) {
   繰り返す処理
}

P70に練習問題がある。

右図のように、2個ずつしか選べない商品について、
2個から20個まで選べるようなドロップダウンリストを作ろう。

それをjavascriptで書くと…

論理演算子の練習問題

「よくわかるJavascriptの教科書」を読んで、勉強中。
P65の論理演算子の問題を解いてみる。

現在の時刻が、9時30分00秒または10時00分45秒の場合に、
「起きる時間です」と表示する目覚ましスクリプト

三項演算子

「よくわかるJavascriptの教科書」を読んで、勉強中。
P62からは、論理演算子のお話だったけど、
簡単だったので、ちょっと飛ばして、三項演算子へ。

単純なif構文を1文で書けるのが三項演算子。
普通にif構文を書くと…

となるのが、三項演算子で書くと…

あらま、簡単！

単純なif構文のときは、使っていきたいね。

比較演算子

「よくわかるJavascriptの教科書」を読んで、勉強中。
P57からは、比較演算子のお話。

比較演算子には、種類がある。

===  等しい
>  より大きい
<  より小さい
>=  以上
<=  以下
!==  等しくない

現在の時刻を午前か午後か表示するプログラムは、
次のようになる。





最初「getHours」を「gethours」って書いてて、動かなかった…。
大切なんだね、大文字小文字…。

文字列連結

「よくわかるJavascriptの教科書」を読んで、勉強中。
P52からは、writeメソッドと文字連結のお話。

演算の結果や文字列を表示するには、writeメソッドを使う。
文字列は(+)で繋げることができる。
writeメソッドのパラメータにHTMLを記述することもできる。

変数

「よくわかるJavascriptの教科書」を読んで、勉強中。
P46からは、変数のお話。

変数には自由に名前が付けれるが、
いくつかルールがある。

英字、アンダースコア（_）、ドル記号からはじまる。
数字からは、はじめられない。

予約語ではないこと。

予約語とは、変数名として使うとややこしくなるから、
javascriptが使わないでねって決めてるキーワード。

• break
• case
• catch
• continue
• default
• delete
• do
• else
• finally
• for
• function
• if
• in
• instanceof
• new
• return
• switch
• this
• throw
• try
• typeof
• var
• void
• while
• with

大文字と小文字が違う場合は「別の変数」として認識される。

namecompanyとnameCompanyは違う変数。

キャメルシンタックスを使うのがおすすめ。

小文字ではじめて、複数の単語を組み合わせる場合は、
2語目以降を大文字ではじめる。
namePersonCompanyとかとか。

confirmの練習問題

「よくわかるJavascriptの教科書」を読んで、勉強中。

P45の練習問題を考えてみる。
ちなみに問題は…

1月は別名「睦月」。同じように6月は「文月」である。
（○:OK / ×:キャンセル）
という確認ボックスを表示して、
「OK」の場合は「はずれ！正解は水無月」
「キャンセル」の場合は「正解！」
と表示するプログラムを作ろう。

confirmとifを利用して…



できた！

confirmで戻り値を知る

「よくわかるjavascriptの教科書」を読んで、勉強中。

P41からconfirmとifのお話。
confirmは確認ボックスを表示させ、
ユーザーにokかキャンセルを選ばせるもの。
それをjavascriptで書くと…




となる。alertにそっくり。
alertと違うのは、ユーザーが選んだ結果を得ることができるとこ。
帰ってくる値は、true/falseのどちらか。
こういうのをboolean値（ぶーりあんち）というらしい。

この結果を受けて、表示させるメッセージを変えたり、
処理を変えたりできる。
そのときに使うのが、if。




confirmとifを組み合わせると、
ユーザーが押したボタンによって、
プログラムを変えることができる。

javascriptの中で、句読点を使うには

bloggerでjavascriptを使って、
alertメソッドを次のようにすると…

と、読点は「&#12289;」、句点は「&#12290;」となって、
うまく表示されません。
これは…文字コードの問題なんですかね。

utf-16では読点は「3001」、句点は「3002」なので、
それぞれ「\u」を付けて、「\u3001」「\u3002」とすると…

うまく表示できました。ぱちぱちぱち。
句読点を使えるようになって、なんだか一安心

テンプレートのhtmlを触れば、こんなことしなくてもいいのかな？
誰か知っている方、教えてください。

クオーテーションとエスケープシーケンス

よくわかるJavascriptの教科書を読みながら、勉強中。

P36でwindow.alert(パラメータ)を学んだんだけど、
パラメータに使えるのは、2つあって、
それはシングルクォーテーション(')とダブルクオーテーション(")。


みたいに、2つあると、
パラメータの中の記号と外の記号を使い分けて、記述できる。
著者の人曰く「パラメータを囲うのは、シングルクォーテーションでいいよ」とのこと。
HTMLのタグの属性にダブルクオーテーションを使うから、
それと重ならないように、シングルクオーテーションがおすすめらしい。

alertの中の文章が長くなってしまう場合は、


と書くと、ダメらしい。
改行はプログラムにとって、重要だから。


というふうに、「\n」という記号を改行したいとこに入れる。
この記号をエスケープシーケンスという。

下の実行ボタンを押すと、長いメッセージが改行されて、表示される…はず！

とりあえずのHello Worldから

Syntax highlightでコードを表示できるようになった…
うれしい！

で、まずはHello Worldを表示させる。
コードは下のとおりで、下の実行ボタンを押すと、
アラートが表示されます。

小さすぎる第一歩を踏み出せたかな。