× 無料のユーザー登録をすると学習状況を管理することができるようになります

【旧版】JavaScript入門 (Tips集) (全26回)

最新版のレッスンはこちらから » 【最新版】JavaScript入門 (全24回)

JavaScriptの便利なTips(ちょっと便利な小技)をまとめました。なお、このTips集は随時追加されていきます。

#01 JavaScriptを外部ファイルへ
2012年1月24日
一般的にはJavaScriptファイルは別のフォルダに分けて置くことも多いです。よくあるパターンとして、index.htmlがあるフォルダに「js」フォルダを作ってそこに置く場合は次のように書きます。
<script src="js/myscript.js"></script>
#02 変数名はどうつける?
2012年1月24日
なお、MyNameやmyNameのような記法を「キャメルケース」と呼びます。これは大文字がらくだ(Camel)のこぶのように見えるから、という理由から来ています。おもしろいですね。より詳しくは以下からどうぞ。
http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9
#03 コメントの書き方
2012年1月24日
なお、コメントはメモを書く以外にも「一時的にプログラムの一部を一時的に無効にする」ときに良く使います(特にプログラムの不具合を探すときに関係ないところを無効化することがよくあります)。そういうときは「ここからここをコメントアウトする」といった言い方をしますので用語として覚えておきましょう。
#04 単項演算子について
2012年1月24日
単項演算子は最初は面食らうかも知れませんが、他のプログラミング言語でも一般的な演算子になっていますので覚えておくと良いでしょう。
#05 論理演算子いろいろ
2012年7月10日
条件がORで連結されている場合、左から条件を見ていって最初に true になった時点で、以降の条件は評価(実行)されません。

これは、条件式に関数を指定した時などに注意が必要です。

if (func1(x) || func2(x)) {

上記の例では、もし func1(x) が true を返せば、func2(x) は実行されないということになります。逆に func1(x) が false を返せば、func2(x) も実行されます。
#18 無名関数と即時関数で出来ること
2013年9月9日
即時関数に引数を与えたい場合は、最後の括弧に引数を指定します。
(function(str) {
    console.log(str);
})('hello world!');
#23 DOM要素を動的に追加してみよう (1)
2013年9月9日
DOM操作には appendChild があれば removeChild もあります。

element.removeChild - DOM | MDN
https://developer.mozilla.org/ja/docs/DOM/element.removeChild

これはある要素から特定の子要素を取り除くというメソッドです。

firstChild という最初の子要素を返すプロパティと組み合わせると、ある要素内のすべての子要素を取り除く処理は、次のようなコードで書くことができます。

var element = document.getElementById('hoge');
while (element.firstChild) {
    element.removeChild( element.firstChild );
}
2013年9月9日
jQuery を勉強していると、JavaScript の appendChild() と jQuery の append() の違いに戸惑うかもしれません。

JavaScript の appendChild() は jQuery の append() と違って、返り値が「追加される子要素」になります。

// 変数 li には fourthLi が格納される
var li = mylist.appendChild(fourthLi);

ですので、以下のように書いてしまうと意図しない結果になってしまいます。

// これだと最終的に fourthText だけ mylist に append されてしまう
mylist.appendChild(
  fourthLi.appendChild(
    fourthLink.appendChild(fourthText)
  )
);
#24 DOM要素を動的に追加してみよう (2)
2013年9月9日
なお、insertBefore()があればinsertAfter()もありそうですが、実は存在しません。
これはinsertBefore()を次のように使えばinsertAfter()と同じように使えるためです。
親要素.insertBefore(挿入したい要素, ターゲットとなる要素.nextSibling);
.nextSiblingは「同列にある次の要素(Siblingは兄弟の意味)」を指します。
こう書くことで「ターゲットとなる要素の次の要素の前に挿入する=ターゲットとなる要素のあとに挿入する」になります(少しややこしいですが)。
insertBefore()と.nextSiblingをうまく使って望むとおりの操作をできるようにしておきましょう。
またこのあたりは以下にも詳しいのでご参考までに。
https://developer.mozilla.org/ja/docs/DOM/Node.insertBefore
#25 DOM要素のスタイルを変更してみよう
2012年11月12日
「e.style.color」といった命令は値をセットするときにも使えますが、現在セットされている値を取得するときにも使えます。例えばある要素の文字色を知りたい場合は次のようにすればOKです。
console.log(element.style.color);
変数にそれらをセットして、他の要素に適用したりもできますね。御参考までに。