5章:式と演算子

左辺値とは代入文の左側に記述してもよい式、という意味で、JavaScriptにおいては変数、オブジェクトのプロパティ、配列の要素。

剰余演算子は通常整数オペランドに適用するが、浮動小数点値に適用することもできる。例えば4.3%2.1は0.1。

プレインクリメント(例:++i)は評価結果にも1加わる。ポストインクリメント(例:i++)は元の値。デクリメントも同じ。

比較演算子は数値だけでなく日付や文字列にも適用できる。文字列の場合、Unicodeの文字コード表を使って、厳密に文字単位で行われる(String.localeCompare()メソッドはロケール固有のアルファベット順を考慮して比較するが、日本語の場合はやはりUnicodeでの比較になる)。日付の場合、どちらが古い日付か、を比較できる。

各演算子の結合性の順、左からか、右からか、に注意する。

論理積演算子(&&)は意外に複雑だが、論理演算の目的だけに使用すれば安全。右側の式は評価されない場合もあるので副作用を伴う代入やインクリメントなどは避ける。

論理和演算子(||)も同様に複雑で、左側のオペランドの値がtrueに変換できる場合、左側のオペランドを変換せずにそのまま返す。いくつか候補がある場合にこれが使える。例えば、function getScrollTop(){
return document.body.scrollTop || document.documentElement.scrollTop;
}

引数がない場合、new演算子に続くconstructorの()を省略してもよいのはJavaScriptの特例。

delete演算子はオブジェクトプロパティや配列要素、変数を削除して、削除できた場合にはtrueを返す。var文で宣言された変数は削除できない。暗黙的に宣言された変数は削除できる。

カテゴリ: JavaScript, サイ本を読む

第4章:変数

var scope = "global";
function f(){
alert(scope);
var scope = "local";
alert(scope);
}
f();
上記のようなコードでは、1回目のアラートでは「undefined」、2回目のアラートでは「local」が表示される。なぜなら、function f()内の変数scopeのスコープは関数function f ()内全体で有効であるため、関数が始まったときにはすでに宣言されているのと同じであり、1回目のalertの時点でグローバル変数の方のscopeが隠されてしまうから。つまり、下記のコードと同じ処理になる。var scope = "global";
function f(){
var scope;
alert(scope);
scope = "local";
alert(scope);
}
f();
変数を関数の先頭でまとめて宣言するほうがコードが読みやすくなる理由は、ここにある。

JavaScriptはガーベジコレクションという技術を採用しており、変数が参照されなくなった時点でメモリが解放されるのでプログラマがメモリの管理をする必要がない。

JavaScriptにおいてはプロパティと変数は基本的には同じである。グローバル変数はグローバルオブジェクト(クライアントサイドにおいてはイコールWindowオブジェクト)のプロパティであり、ローカル変数はCallオブジェクトのプロパティである。

クライアントサイドJavaScriptの場合、ウィンドウごとに、あるいはウィンドウのフレームごとに異なるグローバル実行コンテキストが定義され、parent.frames[1]、parent.frames[0]、というふうに相互に参照することができる。セキュリティ上の問題については13.8節で。

カテゴリ: JavaScript, サイ本を読む

第1章:概要、第2章:字句構造、第3章:データ型と値

基本型の数値と論理値は「値による」操作であり、オブジェクト(配列や関数を含む)は「参照による」操作であるということ。その理由は、オブジェクトはプロパティや要素をいくつでも持つことができ、サイズも自由なので、基本型ほど操作が容易ではなく、サイズが非常に大きくなるので、値により操作すると、大量のメモリを消費してしまい、効率的でないから。

基本型の中でも、文字列には、charAt()メソッドのように文字列内の特定の位置にある文字を知るメソッドはあっても、文字を変更するメソッド(たとえばsetCharAt()メソッドのような)はなく、仕様として不変で、コピーしたり渡したりするときに「値による」のか「参照による」のか知る方法はない。つまり、どちらでもないということ。しかし、比較するときには(CやC++、Javaとは異なり、)「値による」。これは、プログラマが文字列を比較する場合は「値による」比較を望んでいるのだとJavaScriptが判断しているため。

TDノードオブジェクトをtoString()メソッドやString()関数で文字列に変換したとしても、その結果は<td> … </td>のようなhtmlソースそのままではなく、[Object HTMLTableCellElement]のような文字列になる。

undefinedは宣言はされているが、値が設定されていないか、または存在しないオブジェクトプロパティである、という意味。nullは「存在していても値がない」という意味。==等値演算子で比較した場合には同じ値と見なされる。
javascriptにおけるnullとundefinedの違いはそうとう厄介らしい。
[Javascript] nullとundefinedとfalseと0と空文字と

関数には、function square(x){return x*x;}という定義のしかたの他に、var square = function(x){return x*x;}という関数リテラルによる定義のしかたがあり、ラムダ関数と呼ばれる。高度なスクリプトになると、関数リテラルの方が便利な場合があることが分かる。読み進めるとそのうち分かるらしい。

カテゴリ: JavaScript, サイ本を読む

nodeNameは大文字で書かないといけない

createElementとかの引数としては小文字でもいいんだけど、if文の条件のとこなんかは、

if(hogehoge.nodeName == 'TD')

みたいに大文字で書かないといけない。ので大文字で統一しよう。

カテゴリ: JavaScript, 今日はじめて知ったこと

javascriptで配列を複製する

javascriptで配列を複製するとき、単純に

a = b;

なんてやると、bはaへの参照となってしまって、bをいじるとaも変化してしまう。

単純な数値の配列なんかだと、
for(var i= 0; i<a.length; i++){
b[i]=a[i];
}

でうまく行くらしいけど、ノードリストの場合は

for(var i= 0; i<a.length; i++){
b[i]=a[i].cloneNode(true);
}

としなければならない……かな。
ノードリストと配列の違いについてはまだ勉強中……。

カテゴリ: JavaScript

イロイロモロモロ

スクリプトをつくってる上で、td要素にdisplay: block;を指定すると大変なことになります。つまり同じtr要素内のtd要素も全部縦に並んじゃいます。気をつけましょう。

そんなわけで、スクリプト上、displayは’block’または’inline’と’none’ではなく、”と’none’で切り替えるのがうまいやり方です。もともとcssファイル上でdisplay: none;を指定してたりすると、スクリプト上で”を指定してもうまく表示されないみたい。なので、こういうのはcssファイルではなく、htmlファイルの方でstyle属性として指定するのが良いでしょうね〜。

FFやIEのデバッグで、あるファンクションがundefinedだと言われたとき、他の条件ではそのファンクションが効いてる場合には、ファンクションを適用しているオブジェクトがundefinedだと考えて間違いない。

カテゴリ: JavaScript

.htaccessで文字コードを指定する

Ajaxを使っていても文字コードはsjis、なんてこともある。httpd.confをいじる方法もあるけれど、XAMPPでのローカル環境やレンタルサーバ内の特定のディレクトリ内のみ、文字コードを指定したいときには.htaccessを使うのが便利。

参考:.htaccessによる文字化け対策
参考:文字化け対策としての.htaccess

要は、.htaccessファイルに
AddType "text/html; charset=Shift_JIS" .html(改行)と書けばいいだけ。

カテゴリ: JavaScript

TinyAccordion

アコーディオンメニューはjQueryにもMooToolsにもあるけれど、デフォルトで全部のパネルを開いた状態にしたり、各パネルを連動させず、個別に開閉するのは意外に厄介。どうしようかなあ、といろいろ検索していて見つけたのがこのスクリプト。

TinyAccordion

このサイトには他にも軽くて優秀なスクリプトがたくさんあるみたい。

カテゴリ: JavaScript

他のページのアンカーへもスムーススクロール

スムーススクロールの実現方法はいろいろあるけれど、他のページのアンカーへもスムーススクロールするスクリプトはなかなか見当たりません。jQuery+interface.jsはそのままだと他のページのアンカーへのリンクが効かなくなってしまうし、tinyscrolling.jsは普通にジャンプするだけ。スムーススクロールの最大のメリットは、ページのどこからどこまで移動したかをユーザが直感的に把握しやすいことだけれど、それだったら他のページのアンカーにもスムーススクロールしたいよね、ということで自分で作ってみました。

続きを読む

カテゴリ: JavaScript