Archived posts in ' "JavaScript"

インクリメントとデクリメント

Posted by specterant on 2012.02.07

ActionScriptやJavaScriptなど組むとき、i++や++iのような演算子を使用することがあります。
++(インクリメント)は、1を足して、–(デクリメント)は、1を引きます。

しかし、++や–をオペランド(演算の対象値や変数)の前にするか後にするかで、処理の順番が変わってきます。

/********************************
//前にした場合
********************************/
var i = 10;
var a = ++i * 2;

alert(i); //【結果】11
alert(a); //【結果】22
 
 
/********************************
//後にした場合
********************************/
var i = 10;
var a = i++ * 2;

alert(i); //【結果】11
alert(a); //【結果】20
前にした場合、iに1を足した後に、2を掛けている。
後にした場合は、iに1を足す前に、2を掛けている。
ということになるのですよ!オレ!

ちなみに、–(デクリメント)は、足すのではなく引くに変わるだけで同じ処理をします。
そんな訳で、物覚えが悪いのでメモしたっちゃ。

No Comments

HTML内にJavaScriptを記述する方法

Posted by specterant on 2012.02.04

HTML/XHTML内に記述する場合、<script>〜</script>のようにしますが、<script>タグが対応していないブラウザなどあるようです。
一番は、外部にするのがベストだと思うのですが、そうもいかないこともあるので、下記のように記述するようにした方がいいぜってことでメモ。

/***************************************
//HTMLの場合
***************************************/
<script type="text/javascript">
<!-- 
	//ここに記述。
-->
</script>
 
 
/***************************************
//XHTMLの場合
***************************************/
<script type="text/javascript">
//<![CDATA[
	//ここに記述。
//]]>
</script>
 
 
/***************************************
//HTML5の場合
***************************************/
<script>
	//ここに記述。
</script>
 
 
/***************************************
//最新ブラウザではなく古いブラウザの場合
//language属性も記述した方がいいみたい。
***************************************/
<script language="javascript" type="text/javascript">
<!-- 
	//ここに記述。
-->
</script>

No Comments

jQueryのbindメソッド

Posted by specterant on 2012.02.01

いつも忘れてしまうのでメモ。
bindメソッドは、セレクタで発生するイベントに対してイベント処理を行う関数を関連付けたり、一度に複数のイベントを設定できるモノ。

で、標準で以下のイベントが設定できます。

blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

/********************************
//書式
********************************/
$('セレクタ').bind('イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
 
 
//イベント処理を行う関数にデータを渡す場合
$('セレクタ').bind('イベント名', "イベントデータ", function(event) {
  //event.dataでイベントデータを取得
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('セレクタ').bind('イベント名 イベント名', function() {
  //セレクタでイベントが発生した時に実行するイベント処理
});
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').bind('click', function() {
  alert("clickしました!");
});
 
 
//イベント処理を行う関数にデータを渡す場合
/* ------------------------------------------------------------------------
var message = '#div2でイベントデータ取得!';
$('#div2 a').bind('click', function() {
  alert(message);
});
message = '#div4でイベントデータ取得!';
$('#div4 a').bind('click', function() {
  alert(message);
});
【出力】#div4でイベントデータ取得!('#div2 a'も'#div4 aも同じになっちゃう。)
------------------------------------------------------------------------ */
var message = "イベントデータ取得!";
$('#div2 a').bind('click', {m:message}, function(e) {
  alert(e.data.m);
});
 
 
//複数のイベントを同時に設定する場合(※イベント名の間にスペース入れて区切る)
$('#div3 a').bind('click mouseout', function() {
  alert("clickかmouseoutしました!");
});

参考サイト
.bind() – jQuery API
bind(type, [data], fn) – jQuery API 1.4.4 日本語リファレンス – StackTrace

No Comments

canvasタグについて

Posted by specterant on 2012.01.27

canvasタグは、HTML5から新しく追加されたタグで、JavaScriptを組み合わせて図形を描画するモノ。
まぁ〜、JavaScript以外のスクリプトでも描画可能なのですが…。
要は、FlashやJavaのようにプラグインがなくても、円とか四角形などが描けるってことっす。

canvasタグは、Internat Explorer9以上、Firefox1.5以上、Opera9以上、Google Chrome、Safariなどでサポートされています。
でも、Internat Explorer6・7・8でも対応させるには、Googleが提供しているExplorerCanvasというJavaScriptライブラリで解決できます。

そんな訳で、ざっくりとした流れと使用例です。

  1. canvasを使うために描画コンテキストを取得する。
  2. getContext()メソッドでcanvasにアクセス。
  3. 色を指定したり、円を描いたりする設定をする。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>canvas Study</title>
    <!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
    <script type="text/javascript">
    onload = function() {
        draw();
    }
    function draw() {
        var canvas = document.getElementById('basic1');
        if (!canvas || !canvas.getContext) {
            return false;
        }
        //canvasを使うための準備(描画コンテキストの取得)
        //getContext()メソッドでcanvasにアクセス
        //現在のところ、getContext()メソッドでは'2d'という引数のみがサポート。
        var context = canvas.getContext('2d');
        context.beginPath(); //図形を描く宣言
        context.moveTo(390, 60); //書き始める座標指定
        context.lineTo(570, 60); //線を描く設定
        context.lineTo(570, 240); //線を描く設定
        context.lineTo(390, 240); //線を描く設定
        context.closePath(); //描いた図形を閉じる設定
 
        //色指定
        context.fillStyle = 'rgb(255,255,255)';
 
        //図形を塗りつぶした状態で描画するメソッド。
        //このメソッドを呼び出さないと、ブラウザ上には表示されない。(他に図形を線で描画するメソッドstroke()もある)
        context.fill();
    }
    </script>
</head>
<body>
<canvas id="basic1" width="960" height="300" style="background-color:#666;">canvasタグをサポートしたブラウザが必要です。</canvas>
</body>
</html>

参考サイト
Canvasリファレンス – HTML5タグリファレンス
Canvas – HTML5.JP

No Comments

jQueryのattrメソッド

Posted by specterant on 2012.01.16

jQueryを勉強しているのですが、いつもattrメソッドの意味を忘れてしまうので覚え書き。

attrメソッドは、指定した要素の属性や属性値が操作できるモノ。
例えば、aタグのhrefを書き換えることができたりしちゃいます。

/********************************
//書式
********************************/
$('セレクタ').attr('操作したい属性名', '変更後の属性値');

//複数の属性値を同時に操作もできる
$('セレクタ').attr({
 '操作したい属性名1', '変更後の属性値1',
 '操作したい属性名2', '変更後の属性値2',
 '操作したい属性名3', '変更後の属性値3'
});

//属性値を取得したい場合(※変更後の属性値を指定しない。)
$('セレクタ').attr('取得したい属性名');
/********************************
//そんな訳で、記述例
********************************/
$('#div1 a').attr('href', 'http://log.specterant.com/');

/********************************
//HTMLの記述
********************************/
<div id="div1"><a href="http://www.specterant.com/">リンク</a></div>

//jQueryで下記のように変更される。
<div id="div1"><a href="http://log.specterant.com/">リンク</a></div>
Read the rest of this post »

No Comments