目指せ!万能クリエーター!!デザイン・コーディングプログラミングまで幅広く書いています。

準備中

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

JavaScript*ロールオーバー*

このエントリーをはてなブックマークに追加
ロールオーバーについて。
リンクが貼ってある画像・ボタンなんかにカーソルを当てた時画像が切り変わったりするアレです。

↓以前はこんな書き方してました↓

< script type="text/javascript" >
< !--
function rollOver( imgname , file ){
document.images[imgname].src = file ;
}
-- >
< /script>
< /head >
< body >
~省略~
< a href="next.html" onmouseover="rollOver('nextpage','img1_on.jpg')" onmouseout="rollOver('nextpage','img1.jpg')" >< img src="img1.jpg" id="nextpage" >

この書き方だとロールオーバーする画像が多ければ多いほど記述が面倒な上、htmlが汚く見えます。

そこで、前回書いたJavaScript*文書を完全に読んだ後に関数を呼ぶ*を利用してみます。

!コピペする場合スぺース注意!
< script type="text/javascript" >
< !--
function rollOver(){
  var Imgs = document.getElementsByTagName('img') ; //すべてのイメージタグを取得
  var iSrc; // イメージのファイルのパスを収納
    for(var i = 0;i < Imgs.length ; i++){ //イメージ数だけ繰り返す
    if(Imgs[i].className == "rOver" ){ //イメージのクラス名がrOverの場合
      iSrc = Imgs[i].getAttribute( 'src' ) ; //イメージのファイルのパスを取得
      fType = iSrc.substring(iSrc.lastIndexOf( '.' ) , iSrc.length ) ; //.以降画像の拡張子取得
      cSrc = iSrc.replace( fType , '_on' + fType ); //イメージのファイルのパスを変更

      Imgs[i].setAttribute( 'cSrc' , cSrc ) ; //マウスオーバー時のイメージ

      Imgs[i].onmouseover = function(){  //マウスオーバー時、イメージを切り替える
      iSrc = this.getAttribute( 'src' ) ;
        this.setAttribute( 'src' , this.getAttribute( 'cSrc' )) ;
      }
      Imgs[i].onmouseout = function(){  //マウスアウトした時イメージを元に戻す
      if(!iSrc)iSrc = this.getAttribute('src').replace('_on'+fType,fType) ;
        this.setAttribute('src',iSrc) ;
      }
    }
  }
}
try{
  window.addEventListener('load',rollOver,false) ;
}
  catch(e){window.attachEvent('onload',rollover) ;
}
-->
< /script >

これをヘッダーに入れるだけで、class名をrOverにした画像はすべてロールオーバーします。

今後はもっとかっこいい動きをするソースを紹介できればと思います(^-^)/
スポンサーサイト

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/16(月) 16:02:40|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:1

JavaScript*文書を完全に読んだ後に関数を呼ぶ*

このエントリーをはてなブックマークに追加
Javascriptをあっちこっちに書き込むとソースも見た目に汚いので一か所に書きたい。
もしくはHTML内に記述したくない。

function msgShow(){
< script type="text/javascript" >
< !--
  var Imgs = document.getElementsByTagName( 'img' );  //イメージタグを取得

  function msg(){
    alert( 'マウスオーバー中' ); //アラート※関数
  }

  for( var i = 0 ; i < Imgs.length ; i++ ){  //イメージタグの数だけ繰り返す
    Imgs[i].onmouseover = msgShow; //イメージにマウスオーバーした時、アラート表示

    //※もしImgs[i].onmouseover = alert( 'マウスオーバー中' );と記述すると
    //mouseover時にアラートが表示されないので注意
}
-- >
< /script >
< body >
< img src="img1.jpg" >
< img src="img2.jpg" >
~省略~

すべてのイメージにマウスオーバーした時、アラート文を表示する関数ですが、htmlの文書をすべてロードした後でないと関数が動作しないので下記のように文書の終盤に関数を呼び出すかjavascript自体最後に記述してやるあります。

< img src="img1.jpg" >
< img src="img2.jpg" >
~省略~
< script type="text/javascript">
< !--
msgShow();
-- >
< /scrip >
< /body >
< /html >

どちらにしてもソースがきれいじゃないので、
個人的にはJavascriptはヘッダーに書くか外に出したいので…

< script type="text/javascript" >
< !--
function msgShow(){

  var Imgs = document.getElementsByTagName( 'img' ) ;

  function msg(){
    alert( 'マウスオーバー中' );
  }

  for( var i = 0;i < Imgs.length ; i++ ){
    Imgs[i].onmouseover = msgShow;
}

try{
  window.addEventListener( 'load' , msgShow , false );
}
  catch(e){ window.attachEvent( 'onload' , msgShow );
}


-- >
< /script >

と追記します。
window.addEventListener()を使って文書をロード('load')し終わった後、msgShowの関数を呼び出します。
ポイントはaddEventListenerメソッドが使えないIE(新しいのでは使えるかも)。try-catch文でaddEventListenerが使えない場合(false)同等のメソッドattachEventで切り替えます。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/16(月) 10:10:27|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

JavaScript*知っておくと便利♪整数⇒少数*

このエントリーをはてなブックマークに追加
少数を素早く整数に変える方法です。

方法は簡単で、変数の前などに~~を付けるだけです。

var num = 5 ;
var result = num/3 ; // 変数resultは1.6666666666666667が代入される

~~result ;

alert() ;やdocument.write() ;で書き出すと結果は1となります。
※小数点以下は切り捨てられる。

~~(5/3) ;

もちろん、こんな書き方でも結果は一緒。

逆に小数点で表示。
こっちはあんまり使いどころを感じないけど一応紹介。

num /= 3 ;

結果は1.6666666666666667で表示される。※普通に計算しても同じ結果だ。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/15(日) 10:55:21|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

JavaScript*デバック的alert利用*

このエントリーをはてなブックマークに追加
alertはデバック時によく使います。
他にもいろんな方法はありますが、とりあえず2種類を紹介します。

■typeof演算子
型を調べるのに使います。型というのは前回書いたJavaScript*型変換、短縮記述*で紹介したように、型が違うと1+1が2でなく12になってしまうことがあります。

alert(typeof 型を知りたい変数など);

var num1 = 1;
var num2 = toString(1);//文字列にに変換

1.alert(typeof num2); //alertメッセージはstring(文字列)
2.alert(typeof num1); //alertメッセージはnumber(数値)



変数には関数も代入できるので、function(型)などの判定もできます。
ちなみに何も代入されていない変数にはundefinedです。

■Boolean型に変換
値が真偽を調べます。

alert(Boolean(調べたい数値など));

var num; //空の変数
alert(Boolean(num)); //alertメッセージはfalse(偽)
alert(Boolean(!num)); //alertメッセージはtrue(真)

変数numには値が空なので結果はfalseです。演算子!(否定=でない場合)を付けると結果が逆転するので結果はtrueとなります。

他にもこんな使い方をすると便利です。

alert(Boolean(num1 > num2); //比較した結果を調べる

alert(Boolean(num1 == num2)); //2つの変数の値が一致するか調べる

alert(Boolean(num1 === num2)); //2つの変数の値と方が一致するか調べる

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/14(土) 13:11:38|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

JavaScript*型変換、短縮記述*

このエントリーをはてなブックマークに追加
下記のようなことはありませんか?

< script type="text/javascript" >
var a = 1;
var b = 2;
~いろいろ記述~
sum = a + b ;

↓ ↓ ↓

結果⇒12  あれ??

プログラミングの最中、変数を文字列型に変換してしまったためです。たまにあります。
こういう場合は変数を数値に戻さないと計算できないので…

sum = Number(a) + Number(b); //結果は3

というようにNumber()で数値に変換してやります。
逆に数値を文字列に変換するときは

toString(変数)


で文字列に変換できます。
記述短縮がJavaScriptならではで下記の通り出来ます。

数値に変換
+a ; //正の符号を利用
+b ;
sum = a + b; //結果は3

文字列に変換
a + "" ; //文字列連結を利用
b + "" ;
sum = a + b; //結果は12

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/14(土) 11:55:29|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

JavaScript*関数おさらい*

このエントリーをはてなブックマークに追加
最近もっぱらJavaScriptのおさらい中。
初心に戻って勉強がてら、日記にもアップしていこうかと思います。

JavaScriptの関数でよく使う書き方だと思ったのでメモ。
↓まずはこんな書き方からスタートすると思います↓
私も職業訓練校ではこの書き方しか習ってません(-_-;)

!コピペする際は半角・スペース修正要!
~省略~
< script type="text/javascript" >
< !--
function sum(a,b){
    return a + b;
}
-- >
< script >
< /head >
< body >
< script type="text/javascript" >
< !--
document.write(sum(5,6));
-- >
< script >

sum(a,b)=>a+bの足算をdocument.writeで書きだすという簡単なプログラムです。
こんな書き方もできます。

!コピペする際は半角・スペース修正要!
~省略~
< script type="text/javascript" >
< !--
var fn = function sum(a,b){return a + b;};
//変数fnに関数を代入
-- >
< script >
< /head >
< body >
< script type="text/javascript" >
< !--
document.write(fn(5,6));
-- >
< script >

書いていることは同じですが、この書き方は便利なので覚えておくと◎。

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2012/07/14(土) 10:33:49|
  2. Javascript
  3. | トラックバック:0
  4. | コメント:0

続きを読むをカスタマイズ

このエントリーをはてなブックマークに追加
Wordpress便利ですね~。

最近趣味で始めたサークルのためのHPをWordPressで作り始めました。

Wordpressではビジュアルエディタから長い文書を<!--more-->と記述するだけで続きをはしょることが出来るんですが、日本語ではないのでどうもヤダ!と思い変更したかったんですが、ビックリするぐらい簡単だったんでメモ。

<!--more (続きを読む…)-->これだけ。

カンタンでしょ?
  1. 2012/07/03(火) 17:35:06|
  2. Wordpress
  3. | トラックバック:0
  4. | コメント:0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。