※スマホ対応はしてません。

タグ: JavaScript おれおれ Advent Calendar 2011

JavaScriptをもっと上達したい人へのヒント(JavaScript おれおれ Advent Calendar 2011 – 24日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 24日目(最終日)

JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。

僕なんかがおこがましいとは思うんですが。

いっぱい書く

とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。

ライブラリーやフレームワークは躊躇なく使う

簡単に書けるならそれに越した事はありません。どんどん使いましょう。そもそも便利なライブラリーを習得する事だって大切です。

(さらに…)

JavaScriptで簡易テンプレートエンジンをつくる(JavaScript おれおれ Advent Calendar 2011 – 23日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 23日目

昨日のデータ埋め込みと一昨日の .replace()に関数を与えるやつを組み合わせて、テンプレートエンジンみたいなのを作成する事ができます。

Ajax/XHRでデータを取得して、その結果を画面に出力するような場面を想定しています。

  • テンプレートはscript[type="text/x-mytemplate"]とかでHTML中に書く
    • キーワードは{#xxx}の形式
  • キーワードと値の組み合わせをひとつのオブジェクトにまとめて、関数に渡す

HTML

まずはテンプレートと、出力先。

<ul id="mylist"></ul>
<script id="mytemplate" type="text/x-mytemplate">
<li><a href="{#url}">{#title}</a> ... {#description}</li>
</script>

これをHTML中に埋め込んでおきます。ここまではHTMLのコーダーさんにお願いしても大丈夫。

(さらに…)

どんなデータでもページに埋め込んじゃうよー(JavaScript おれおれ Advent Calendar 2011 – 22日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 22日目

DBで得た情報をHTML形式で出力するだけならサーバー側でやればいいんですが、JSだけで使いたい場合ってありますよね。ないかな。あるでしょ。あるはず。

そういうデータはテキストにしてAjax/XHRで取得するとか、JavaScriptの変数に代入するとかして出力するとかあるんですが、前者だと通信のコストがかかるし、後者はエスケープとか考慮しなくちゃいけなくてなんとも剣呑です。

echo '<script type="text/javascript">';
echo "var myData = $formatted_data;";
echo '</script>';

というわけでテキストはテキストのまま埋め込んでしまいます。

これスクリプトじゃないよって主張する

こんな感じで。

<script id="mydata" type="text/x-mydata">
26,23,43,55,82,75,82,98,83,85
79,31,38,16,85,85,20,41,90,61
36,52,66,61,43,4,10,40,30,49
...
</script>

(何のデータだこれ……。)

(さらに…)

関数使って豪華な置換(JavaScript おれおれ Advent Calendar 2011 – 21日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 21日目

文字列を置換するやつあるじゃないですか。 .replace()ってやつ。あれ、第1匹数も第2引数も普通の文字列を渡したりしますけど、第1匹数には正規表現を渡す事ができるんですよ。あと第2引数には関数を渡す事だってできるんです。

アンダースコアで連結された名前をキャメルケースに置換

var result = "hoge_fuga_123".replace(
  /_./g,
  function(matched, /* m1, m2, ..., */ offset, original) {
    return matched.charAt(1).toUpperCase();
  });

console.log(result);  // => "hogeFuga123"

matchedはマッチした文字列、offsetはその位置、originalは元の文字列です。関数が何度呼ばれてもoriginalは元のままです。(途中まで置換済み、のようにはなりません。)

正規表現で括弧()を使ってキャプチャした場合は、matchedの次の引数に順次挿入されます。正規表現ではなく文字列で検索した場合は、もちろん0個です。

キャプチャした数により引数の数も変わるので、offsetとoriginalStringを使う場合はarguments[arguments.length-1]みたいにした方が安全です。まああんまり使う場面ないと思いますけど。

URLをリンクか画像にする

function replaceUrl(text) {
  return text.replace(/http:\/\/[a-z./]+/g, function(url) {
    // 拡張子が.gif, .jpg, .pngであれば画像に
    var extension = url.match(/\.\w+$/);
    if (extension && (extension[0] == ".gif" || extension[0] == ".jpg" || extension[0] == ".png")) {
      return '<img src="' + url + '">';
    }
    // 画像っぽいURLでなければリンクに
    else {
      return '<a href="' + url + '">' + url + '</a>';
    }
  });
}

console.log(replaceUrl('続きはhttp://www.example.com/で!'));
console.log(replaceUrl('この猫かわいいー http://www.example.net/cat.jpg'));
続きは<a href="http://www.example.com/">http://www.example.com/</a>で!
この猫かわいいー <img src="http://www.example.net/cat.jpg">

(‘-`) oO( ええと正規表現が甘いのは許して下さい、今日はそこじゃないんで……。 )

(‘-`) oO( あと、本当に画像URLをimg要素に置換しちゃうのは使い勝手良くないと思います……。 )

JavaScriptの型は6種類だけど大きく分けた2種類を絶対に覚えておくべき(JavaScript おれおれ Advent Calendar 2011 – 20日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 20日目

これだけ。

  • undefined
  • null
  • boolean
  • number
  • string
  • object

配列とか日付とかは、全部オブジェクトの一種です。

さらにこれらもobjectとそれ以外でも分かれていて、objectじゃない方をプリミティブ型と呼びます。

(※primitive … (形)原始的な、根本的な)

(さらに…)