初勉強 ― 仲間が書いたソースをよむ

JavaScript

学校の演習で5人のチームでコンビニグルメ検索サイトをつくろうとしています。

演習内容は、
コンビニグルメについて書かれたブログから情報を集めて
検索結果の中で商品の評判として表示するっていうものです。

そこでまず、チームメンバーの一人が書いたソースを見せてもらうことに。。

  • GoogleMapを作成して、地名/住所入力で移動して
  • 学校周辺のコンビニ(数件)の位置を示すマーカーを表示。
  • マーカーがクリックされると吹き出しを表示。

というものらしいのですが…

Webプログラミングの世界に初めて入った私には
JavaScriptが、さっ　　　　　ぱり読めなくて、
id:sotarok 先生に教えてもらいました(・ω・)

  var keyGeo ="(APIキー)";
  var keyLocal="(APIキー)";
  
  var reGeo = new RegExp("geocities.jp");
  if ( reGeo.test(window.location.href) ) {
       loadScript(keyGeo);
  }
  else {
       loadScript(keyLocal);
  }

正規表現の用法については、それだけで一冊の本が出てるくらい深いものらしい。
なので、使い方だけ教わりました。

  • 今回は文字列のパターンマッチングに使っている。
  • 上のように生成しない方法
  if ((window.location.href).match(/geosities\.jp/) ) {
       loadScript(keyGeo);
  }
  else {
       loadScript(keyLocal);
  }
  • window.location.href(ウィンドウに表示されているページのURL)これ自体をオブジェクトとして扱える!?
  • matchメソッドでもパターン検索可能
  • /で括ると検索したいパターンが設定できる
  • 使えるメタ文字(X, Y, Zは文字とする)
    • ^XXX ⇒ XXXからはじまる
    • XXX$ ⇒ XXXでおわる
    • [XYZ] ⇒ X, Y, Zのどれかにマッチ
    • YX+ ⇒ Xが1回以上一致
    • YX* ⇒ Xが0回以上一致(+は*ともに最長一致をする)

JavaScriptはイベント駆動型なんだよ
と教わりました。

  <form onsubmit="moveTo(this.place.value); return false;">
  <input type="text" size="40" id="place" />
  <input type="submit" value="移動" />
  </form>
  <div id="map" style="width: 500px; height: 400px"></div>
  • イベントの発生と取得して実行させたい場合に使える。
  • よく使いそうなもの
    • onload ⇒ ロード時
    • onclick ⇒ クリック時
    • onfocus ⇒ フォーカスが得た時
    • onblur ⇒ フォーカスが離れた時
    • onsubmit ⇒ submitボタンが押された時
    • onchange ⇒ フォームが書き換えられてフォーカスが離れた時
    • onkeydown ⇒ キーを押した時
    • onkeypress ⇒ キーを押したままの時
    • onkeyup ⇒ キーを離した時
    • onmouseover ⇒ オブジェクトにカーソルが乗った時
    • onmouseout ⇒ オブジェクトからカーソルが離れた時
  • 上のonsubmitでfalseを返すと、ページ遷移しない。

Java勉強中なので、まだオブジェクト指向は混乱します(；；
また機会があったらJavaScript勉強しますっ。