初めて JavaScriptを勉強してみた

2013/01/15 2014/06/26

AJAXのために JavaScriptを勉強する

　
これまで敬遠してきた言語がある。
それは、JavaScriptである。
　
なぜなら、ブラウザによって実装方法が大きく違い、実装する際のデバッグが非常に大変だからだ。
そして、実際にやったことがなかったことがその恐怖心にも似た間隔を増幅させて JavaScriptを遠ざけてきた。
　
しかし、AJAXをやってみよう！と決心したときから JavaScriptを敬遠するわけにはいかなくなった。
　
　
そんなわけで、昨年末頃から時間を見つけて JavaScriptを使って AJAXの仕組み、組み込みの勉強をしているわけですが、プログラムの記述の方法そのものは PHPとそれほど大きく違うこともないために、あと離れの問題なのかな、という感じもしました。
しかし、JavaScriptの使われ方というか、仕組みが全く違う言語ですので、プログラムの書き方と言うより実装の方法を理解、納得する方が大変な感じがしますね。
そして、どの言語に対してもそうなのですが、これを使いこなすには、それこそ場数をこなしていくしかないんじゃないか、と。
　
こういうときはこういう実装方法をした方がいいね！そんな風に思えてくるまでにはやや時間がかかりそうです．．．
　
　

初めての JavaScript

　
さてさて、前置きが長くなりましたが、今日は JavaScriptからです。
　
以下のようなサンプルソースがありました。
for文でぐるぐる回すところは PHPと変わりありませんので、構文としては理解しやすいのですが、「JavaScript length」というプロパティをググルと「文字列の長さ」と出てくるわけです。
　
サンプルソースとしては動いているため、「文字列の長さ」では違うような気がするわけですが、「文字列の長さ」と説明してあるページがいろいろと出てくるわけです。
　
—–（サンプルソース）——————————-

for(i = 0; i < item.length; i++){
  var title = item[i].getElementsByTagName('title');
  var titleValue = title[0].firstChild.nodeValue;
   （以下略）
}

for(i = 0; i < item.length; i++){

var title = item[i].getElementsByTagName('title');

var titleValue = title[0].firstChild.nodeValue;

（以下略）

}

——————————————————
　
　
最初は JavaScriptとはそういうものかと思うことにして、先に進んでいたわけですが、for文はあちこちに出てきますので、やはり気になって仕方がないのです。
　
　
そこで改めて調べなおした結果、下記のページにたどり着きました。
　
5種類の .length（JavaScript おれおれ Advent Calendar 2011 – 11日目）

5種類の .length（JavaScript おれおれ Advent Calendar 2011 – 11日目）

　
そこには衝撃的な事実が。
「JavaScript　の　.length　プロパティは、どのオブジェクトに使うかによって意味が違ってくる！」ということを知ったのです。
　
配列のプロパティとして使うのか、文字列のプロパティとして使うのかによって意味が違ってくるようなのですが、JavaScriptと言う言語は、プロパティの使い方によってこういった意味の違いがあると言うことを始めて知ったわけです。
PHPの場合は、文字列なのか配列なのかによって使うコマンドは違いますので、「どちらにも使えるにもかかわらず、意味が違うという場合があるのか！？」という衝撃を受けました。
　
逆に、JavaScriptを学び始めたこのタイミングでこういったオブジェクトによってプロパティの意味が違うと言う場合があると言うことを知ることが出来たことはラッキーだったのでしょう。
今後、同じ様な状況に行き当たった場合はすばやく対応できるようになるでしょう。
　
それにしても、言語が違っても基本構文は大きく違わないけれど、細かなところではぜんぜん違う発想のものがあるなぁ、と改めて感じさせられましたね。
　
　
ちなみに、文字列のプロパティとして使った場合に取得出来る文字数は、バイト数が返ってくるのではなく、文字数が返ってくるようです。
半角英数字であっても、全角の文字であっても、全角の Unicodeの文字であっても、1文字は 1文字として処理されるようですね。

- JavaScript

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: WYSIWYGエディタのCKEditor 4を設置、カスタマイズ、日本語化の方法を解説

WYSIWYGエディタであるCKEditor（旧：FCKeditor）を導入する方法を解説。日本語化やボタンの追加削除、skinの変更、複数エディタの設置など実際の使い方に合わせたカスタマイズ方法も解説。

: jQuery UI DatePickerに時間を入力できる機能を追加する方法解説

jQuery UI DatePickerには時間を入力する機能はないが、いくつかの JSファイルを追加し「datetimepicker」と書くだけで簡単に時間も入力できるようになる。その解説とカスタマイズ方法。

: jQuery UI DatePickerの導入の方法。および、カスタマイズ方法の解説

デイトピッカー「jQuery UI DatePicker」を導入する方法を解説。テーマを変える、日本語にする、選択できる日を指定する、入力を制限するなどのオプションを使ったカスタマイズ方法も紹介。

: WYSIWYGエディタのCKEditor 5を設置、カスタマイズ、日本語化の方法を解説

WYSIWYGエディタであるCKEditor5（旧：FCKeditor）を導入する方法を解説。ボタンの追加、削除などのカスタマイズ方法も解説。現時点ではDeveloper Previewのため、まだまだ情報は少ない。