web,direction,planning,graphicdesign

2009年12月7日月曜日

tableを交互に色を変える

■ライブラリを使わない場合

要検討

window.onload = function(){
var conf = {
className : 'striped',
childNodeName : 'tr',
oddClassName : 'oddline',
evenClassName : 'evenline'
}
var tables = getElementsByClassName(conf.className);
for(var i=0, len=tables.length; i var table = tables[i];
var lines = table.getElementsByClassName(conf.childNodeName);
for(var j=0, llen=lines.length; j node = lines[j];
if(j%2==0){
node.className = conf.oddClassName;
}else{
node.className = conf.evenClassName;
}
}
}
};

// クラス名によるエレメントノード配列取得

function getElementsByClassName(name){
var elements =[];
var allElements = document.getElementsByTagName('*');
for(var i=0, len=allElements.length; i if(allElements[i].className ==name){
elements.push(allElements[i]);
}
}
return elements;
}





■jQueryを使った場合

//js

$(document).ready(function(){
$("table").each(function(){
jQuery(this).find("tr:odd").addClass("oddline");
});
});

//css

table .oddline{
background:#333;
}

2009年10月21日水曜日

ActionScript ユーザーがウィンドウサイズを変えるのに対応

ユーザーがウィンドウサイズを変えたとき、そのサイズに合わせるようにステージサイズを変更したい場合

stage.stageAlign = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

private var left:Number = 0;
private var top:Number = 0;
private var right:Number = stage.stageWidth;
private var bottom:Number = stage.stageHeight;


このようにムービーの上(top)、左(left)の境界は0で、右(right)と下(bottom)の境界はstage.stageWidthとstage.stageHeightです。必要なときにこれらを変数にいれておくことができます。

import flash.display.StageAlign;
import flash.display.StageScaleMode;

の読み込みも忘れずにインポートする必要がある。

2009年10月20日火曜日

ActionScript KeyboardEventについて、

<覚え書き>

addEventListenerするときは、stageにしないとキーボードの操作はできないですよー

ActionScript マウスを追いかけるやじるし

ActionScript スクリプトで矢印を描く
を読み込み、矢印をマウスをおいかけるようにする。


FollowMouse.as

package {
import flash.display.Sprite;
import flash.events.Event;

public class FollowMouse extends Sprite{
private var arrow:Arrow;
private var speed:Number = 10;
public function FollowMouse():void{
init();
}
private function init():void{
arrow = new Arrow();
addChild(arrow);
addEventListener(Event.ENTER_FRAME,onEnterFrameHandler);
}
private function onEnterFrameHandler(event:Event):void{
var dx:Number = mouseX - arrow.x;
var dy:Number = mouseY - arrow.y;
var angle:Number = Math.atan2(dy,dx);
arrow.rotation = angle*180/Math.PI;
var vx:Number = Math.cos(angle)*speed;
var vy:Number = Math.sin(angle)*speed;
arrow.x += vx;
arrow.y += vy;
}
}
}

2009年10月12日月曜日

ActionScript 三角関数の基本的な公式

■基本的な三角関数の計算

角度のサイン = 対辺/斜辺
角度のコサイン = 隣辺/斜辺
角度のタンジェント = 対辺/隣辺


■ラジアンから度へ、度からラジアンへの変換

ラジアン = 度 * Math.PI / 180
度 = ラジアン * 180 / Math.PI


■マウスの方向への回転
// mouseXやmouseYは任意の点のx,yに置き換える
dx = mouseX - sprite.x;
dy = mouseY - sprite.y;
sprite.rotation = Math.atan2(dy.dx)* 180 / Math.PI;


■波の作成
//valueはスプライトやムービークリップのx,yにその他のプロパティに割当
public function onEnterFrame(event:Event){
value = center + Math.sin(angle) * range;
angle += speed;
}


■円の作成
//Xposition,Ypositionをスプライトやムービークリップのxとyに割りあて
public function onEnterFrame(event:Event){
Xposition = centerX + Math.cos(angle)*radius;
Yposition = centerY + Math.sin(angle)*radius;
angle += speed;
}

■2点間の距離の取得
dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx*dx + dy*dy);

2009年10月10日土曜日

ActionScript サイン波

0のサインは0であり、90度(π/2ラジアン)のサインは1。
180度(πラジアン)のサインは0に戻り、270度(3/2π)のサインは-1、
360度(2π)のサインは再び0に戻ります。

例)

for(var angle:Number = 0; angle < Math.PI*2; angle +=0.1){
trace(Math.sin(angle));
}

この例では、変数angleは0の値でスタートし、Math.PI*2の値になるまで0.1ずつ増えていきます。
出力された値は0ではじまり、その後増えて1に近づき、そしてまた-1に近づくまでへっていき、再び0近くまで増えていきます。

2009年10月7日水曜日

ActionScript スクリプトで矢印を描く

いつかなにかのために使うときがあったらのためのメモです。

package{
import flash.display.Sprite;

public class Arrow extends Sprite{
public function Arrow(){
init();
}
public function init():void{
graphics.lineStyle(1,0,1);
graphics.beginFill(0xffff00);
graphics.moveTo(-50,-25);
graphics.lineTo(0,-25);
graphics.lineTo(0,-50);
graphics.lineTo(50,0);
graphics.lineTo(0,50);
graphics.lineTo(0,25);
graphics.lineTo(-50,25);
graphics.lineTo(-50,-25);
graphics.endFill();
}
}
}

2009年9月30日水曜日

ActionScript Tweenerの文法

Tweenerを使って.動かしたい(どのオブジェクトの, {どのプロパティを:どこに向かって, time:何秒かけて, transition:どんな感じで});

例)
ステージの左上基準に移動する「絶対座標移動」の場合。

Tweener.addTween(ball, {x:200, y:150, time:2});

2009年9月23日水曜日

ActionScript カスタムイベント

カスタムイベントを定義するには、EventDispatcherクラスを継承したクラスを作成。
イベントを識別するためのイベントの種類をクラス定数で定義しておき、Eventオブジェクトの引数にして「dispatcher()」メソッドでEventオブジェクトを配信する。
カスタムイベントを利用するためには「addEventListener()」メソッドを使ってリスナーの登録をする。

カスタムイベントの定義

package{
import flash.events.EventDispatcher;

public class MyClass extends EventDispatcher{
//カスタムイベントの種類
public static const EVENT_TEST:String = "event_test";

//コンストラクタ
public function MyClass() {
}

//イベント送信
public function SendEvent{
dispatchEvent(new Event(EVENT_TEST));
}
}
}


カスタムクラスの利用

var obj:Myclass = new MyClass();
obj.addEventListener(MyClass.EVENT_TEST,eventTestHandler);

2009年8月21日金曜日

PHP foreach文

PHP4からサポートされました。
指定した配列に関してループ処理を実行します。
各ループ時には現在の要素の値が変数$valueに代入されます。

foreach( 配列 as $value ){
ループ処理;
}


例)ハッシュをつかった場合

$fruit = array(
"apple" => "りんご",
"orange" => "オレンジ",
"banana" => "ばなな"
);

foreach( $fruit as $key => $value ){
echo $key. ":" .$value."
\n"; // 改行しながら値を表示
}
?>

出力結果

apple:りんご
orange:オレンジ
banana:ばなな

2009年7月23日木曜日

youtubeを表示させるときのメモ

youtubeのタグをそのまま貼るとobjectタグがIEではエラー表示される

<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>


これを
object dataを入れる

<object data="http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=1&color1=0xfe9931&color2=0xfae2c9&border=1" type="application/x-shockwave-flash" width="320" height="265">
<param name="movie" value="http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=1&color1=0xfe9931&color2=0xfae2c9&border=1" />
<param name="wmode" value="transparent" />
<a href="http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=1&color1=0xfe9931&color2=0xfae2c9&border=1">http://www.youtube.com/v/aFhvWOgg-YU&hl=ja&fs=1&rel=1&color1=0xfe9931&color2=0xfae2c9&border=1</a>
</object>

で、表示されるようになる

2009年5月20日水曜日

ActionScript ムビークリップをイージングをかけて移動させる

例)A_mcを移動させる。


package{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;

public class MoveStr extends Sprite {
// コンストラクタ
public function MoveStr() {
// フレームが再生されるたびにenterFrameHandlerを実行
A_mc.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
}

// 毎フレーム実行する
private function enterFrameHandler( evt:Event ):void{
//ターゲットのムービークリップを取得する
var mc:MovieClip = evt.target as MovieClip;
//終点の設定
var goalx:Number = 500;
//ムービークリップの位置設定
moveStr(mc,goalx);
}

//ムービークリップの位置設定
private function moveStr( targetmc:MovieClip, goalx:Number ):void{
if ( Math.abs(goalx-targetmc.x )<10){
//スナップ処理
targetmc.x = goalx;
//イベントリスナー削除
targetmc.removeEventListener( Event.ENTER_FRAME, enterFrameHandler );
} else {
//x座標を設定
var easing:Number = 0.15;
//イージングでx座標を設定
targetmc.x +=( goalx - targetmc.x ) * easing;
}
}
}
}

ActionScript ドキュメントクラス

ドキュメントクラスとは,SWFファイルに関連づけられるトップクラスの事。
ドキュメントクラスには、任意のカスタムクラスを設定する事が出来る。

Flash Player でSWFがロードされたときに、特にnew演算子を使うことなく、自動的にこのクラスのインスタンスが作成され、コンストラクタが呼び出される。

〈設定方法〉

flaファイルの空白領域をクリックして、ステージとタイムラインのすべてのオブジェクトの選択を解除すると、プロパティインスペクタに「ドキュメントプロパティ」が表示される。プロパティインスペクタの「ドキュメントクラス」テキストボックスに、クラス名(パッケージを背呈している場合は、クラスパスとクラス名)を入力


例)線が描かれていく

RandomLine.asにRandomLineクラスを作成していく。RandomLineクラスにはSpirteクラス(表示オブジェクト、表示オブジェクトコンテナでもあるというコアクラス)を継承する(extends)。

RandomLine.as

package {
import flash.display.Sprite;
import flash.events.Event;

public class RandomLine extends Sprite {
// 描画した線をカウントする変数
private var count:int = 0;

//コンストラクタ
public function RandomLine(){
//線のスタイル
this.graphics.lineStyle(1,0xFF358B);
//ステージの中心から描き始める
this.graphics.moveTo(this.stage.stageWidth/2,this.stage.stageHeight/2);
//フレームが再生されるたびにenterFrameHandlerを実行
this.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
private function enterFrameHandler(evt:Event):void{
//ランダムに線を描く
if (count<1000){
//ランダムに座標を設定
var xx:int = Math.random() * this.stage.stageWidth;
var yy:int = Math.random() * this.stage.stageHeight;
//線を描く
this.graphics.lineTo(xx,yy);
//描画した線をカウントする
count++;
}else{
//イベントリスナーを削除
this.removeEventListener(Event.ENTER_FRAME,enterFrameHandler);
}
}
}
}

2009年4月23日木曜日

ActionScript カスタムクラスの定義

カスタムクラスのクラス名とファイル名を同じにする必要がある。

package パッケージ名{

//インポート
import 読み込むクラス名;

public class クラス名{

//クラスプロパティ
public static var プロパティ名;

//インスタンスプロパティ
public var プロパティ名;

//コンストラクタ
public function クラス名(引数:データ型){
//インスタンスが生成されたときに実行するスクリプト
}

//クラスメソッド
public static function メソッド名(引数:データ型):データ型{
//メソッドの動作を定義するスクリプト
}

//インスタンスメソッド
public function メソッド名(引数:データ型):データ型{
//メソッドの動作を定義するスクリプト
}
}
}


例)ボールが移動して壁に跳ね返るサンプル

Ball.as

package{
//インポート
import flash.display.MovieClip;
import flash.events.Event;

public class Ball {
//クラスプロパティ
//インスタンスの数
public static var instanceNum:Number = 0;

//インスタンスプロパティ
//ボールのムービークリップ
public var myBall:MovieClip;
//ボールの半径
public var radius:Number;
//x軸方向の速度
public var myXspeed:Number;
//y軸方向の速度
public var myYspeed:Number;

//コンストラクタ
public function Ball(ball:MovieClip){
//ボールのムービークリップをmyBallに格納
myBall = ball;
//ボールの半径をradiusに格納
radius = myBall.width / 2;
//インスタンスの数を数える
instanceNum++;
}

//クラスメソッド
//インスタンスの数を出力する
public function printInstanceNum():void{
trace("現在のインスタンスの数"+instanceNum);
}

//インスタンスメソッド
//円を描画する
public function moveBall(xspeed:int,yspeed:int):void{
//速度をmyXspeed、myYspeedに格納する
myXspeed = xspeed;
myYspeed = yspeed;

//フレームが再生されるたびにenterFrameHandlerを実行
myBall.addEventListener(Event.ENTER_FRAME,enterFrameHandler);
}

//ボールを動かす
private function enterFrameHandler(event:Event):void{
//ボールを移動させる
myBall.x += myXspeed;
myBall.y += myYspeed;

//右壁で跳ね返る
if(myBall.x + radius > myBall.stage.stageWidth){
myBall.x = myBall.stage.stageWidth - radius;
myXspeed = -myXspeed;
}

//左壁で跳ね返る
if(myBall.x - radius < 0){
myBall.x = radius;
myXspeed = -myXspeed;
}

//上壁で跳ね返る
if(myBall.y + radius > myBall.stage.stageHeight){
myBall.y = myBall.stage.stageHeight - radius;
myYspeed = -myYspeed;
}

//下壁で跳ね返る
if(myBall.y - radius < 0){
myBall.y = radius;
myYspeed = -myYspeed;
}

}
}
}

sample.fla

//Ball クラスからインスタンスを作る
var ball1:Ball = new Ball(ball1_mc);

//メソッドを実行
ball1.moveBall(10,-5);

2009年4月20日月曜日

ActionScript XMLファイルの読み込み

1、URLLoaderオブジェクトの作成
2、URLLoader.load()メソッドによるXMLファイルのロード


URLLoaderクラスでは読み込んだデータはテキストデータとしてURLLoaderオブジェクトのdataプロパティに格納されます。
XMLファイルの内容をdataプロパティから取得できるのはファイルのダウンロードが完了してからになります(非同期処理)。


例)

var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventLitener(Event.COMPLETE,xComplete);
xmlLoader.load(new URLRequest("sample.xml"));
function xComplete(evt:Event):void{
trace(xmlLoader.data);
}

2009年4月10日金曜日

ActionScript 外部イメージの読み込み

Loaderオブジェクトの作成
Loarder.load()メソッドによる外部イメージファイルのロード
loaderオブジェクトを表示リストに追加

例)

var loader:Loadr = new Loader();
var urlReq:URLRequest = new URLRequest("photo.jpg");
loader.load(urlReq);
addChild(loader);

2009年4月8日水曜日

フィルタの適用と削除

*表示オブジェクトへのフィルタの適用

○一つしか適用できない

表示オブジェクト.filters = フィルタオブジェクト


○複数適用できる

表示オブジェクト.filters = [フィルタオブジェクト1,フィルタオブジェクト2]



var blurObj:BlurFilter = new BlurFilter();

blurObj.blurX = 100;
blurObj.blurY = 100;

_mc.filters = [blurObj];


解除

_mc.filters = null;

インスタンス作成時にクラス名を文字列でしていする

getDefinitionByName()メソッドを使用

例)

var className:String = "star";

var myClass:Class = getDefinitionByName(className) as Class;

var NewStar:MovieClip = new myClass();

2009年3月30日月曜日

ActionScript まず書いておく事

// ステージを拡大した時にインスタンスを拡大しない
stage.scaleMode = StageScaleMode.NO_SCALE;
// ステージの基準点を左上
stage.align = StageAlign.TOP_LEFT;
// 再生品質を高い
stage.quality = StageQuality.HIGH;
// 右クリックでメニューを表示しない
stage.showDefaultContextMenu = false;

2009年3月27日金曜日

ActionScript ムービークリップインスタンスの動的な追加/削除

二つのプロセスが必要
インスタンスを作成する
インスタンスを表示リストへ追加する


var 変数 : データ型 = new 埋め込みアセットクラス名();

■表示

表示オブジェクトコンテナ.addChild(インスタンス);

■削除

表示オブジェクトコンテナ.removeChild(インスタンス);


例)

var newStar:MovieClip = new Star();
this.addChild(newStar);


クラスを文字列で指定する場合

var className:String = "Star";
var myClass:Class = getDefinitionByName(className) as class;
var newStar:MovieClip = new myClass();

2009年3月26日木曜日

ActionScript URLRequestクラス

var 変数:URLRequest = new URLRequest (リクエストファイルのURL);

navigateToURL(URLオブジェクト,"ターゲット");

ActionScript Arrayオブジェクト

var aMembers:Array = new Array();
aMembers[0] = "hoge";
aMembers[1] = "hogehoge";

2009年3月25日水曜日

ActionScript Objectオブジェクト

var oBook:Object = new Object();

oBook["title"] = "kaerimiru";

2009年3月23日月曜日

ActionScriptの定数

const 定数 : データ型 = 値 ;

値の設定は原則として宣言時にしか出来ない。

ActionScriptのデータ型

文字列 : String型

数値 : Number型

true/false : Boolean型

テキストフィールド : TextField型

ボタンインスタンス : SimpleButton型

ムービークリップインスタンス : MovieClip型


数値には整数値を表すint型と正の整数値を表すunit型がある

DisplayObject.parentプロパティの型変換

Actionscriptではparentプロパティが表示オブジェクト(DisplayObject)としてのみ理解される。
実際にはメインタイムライン(=ムービークリップ)であっても、Flashにはそれが理解されず、もっと大まかなくくりの表示オブジェクトとして扱われるので、stop()メソッドは不明なメソッドとなってしまう。


これの回避方法



型変換

//メインタイムラインに配置したムービークリップのフレームアクション

MovieClip(parent).stop();


「as」演算子

var Myparent:Movieclip = parent as MovieClip;
Myparent.stop();

2009年3月21日土曜日

イベントの指定

オブジェクト.addEventListener(イベント,イベントハンドラ名);

function イベントハンドラ名(変数){

処理

}



removeEventLitenerで削除

2009年3月20日金曜日

ムービークリップボタンの作り方

■ムービークリップをボタンにする

ボタンムービークリップの作り方

_up
_over
_down

のフレームをつくります。


as//

this.ButtonMC_mc.stop();
this.ButtonMC_mc.buttonMode = true;

//

アニメーションをとめて、ボタンとして認識させています

2009年3月16日月曜日

くるくる回るアニメーション

this.Rect_mc.addEventListener(Event.ENTER_FRAME,enterFrameHandler);

function enterFrameHandler(event:Event) :void {
event.target.rotation +=5;
}

2009年3月12日木曜日

actionscriptの演算子

■算術演算子
+ 加算(足し算)
- 減算(引き算)
* 乗算(掛け算)
/ 除算(割り算)
% 剰余(割り算の余り

■代入演算子
= 代入・設定
+= 加算後代入
-= 減算後代入
*= 乗算後代入
/= 除算後代入
%= 剰余を代入
++ インクリメント(1足す)
-- デクリメント(1引く)

■比較演算子
a == b [等価(aとbが等しいときにtrue、等しくないときfalse)]
a != b [不等価(aとbが等しくないときtrue、等しいときfalse)]
a < b [より小さい(aがbより小さいときtrue、そうでないときfalse)]
a <= b [以下(aがb以下のときtrue、そうでないときfalse)]
a > b [より大きい(aがbより大きいときtrue、そうでないときfalse)]
a >= b [以上(aがb以上のときtrue、そうでないときfalse)]
a === b [厳密な等価(aとbが値もデータ型も等しいときにtrue、そうでないときfalse)]
a !== b [厳密な不等価(aとbが値もデータ型も等しくないときにtrue、そうでないときfalse)]

■論理演算子
a || b [論理和 (a、bどちらか一方でもtrueならばtrue。両方ともにfalseのときfalse)]
a && b [論理積 (a、bともtrueのときtrue。そうでなければfalse)]
!a [否定 (aがtrueならばfalse。aがfalseならばtrue)]

2009年3月9日月曜日

scriptaculousのmorphエフェクト

$("contents").observe("click", morphEffect);
var bigOrSmall = true;
function morphEffect (e) {
e.stop();
var target = e.currentTarget;

if (bigOrSmall) {
// large
target.morph({width:"300px", height:"300px",backgroundColor:"#ddf",color:"#009",borderColor:"#f00"},{duration:3});
//bigOrSmall = false;
} else {
// small
target.morph({width:"200px", height:"100px",backgroundColor:"#fff",color:"#000",borderColor:"#f63"},{duration:3});
//bigOrSmall = true;
}
// フラッグ反転 true <-> falseを入替え
bigOrSmall = !bigOrSmall;
}

2009年3月8日日曜日

firefox3が重い

Firefoxを終了した状態で、ユーザライブラリのキャッシュからurlclassifier3.sqliteをゴミ箱に入れ削除する。
 キャッシュファイル保存先の一般例:Macintosh HD/ユーザ/(ユーザ名)/ライブラリ/Caches/Firefox/Profiles/(不規則文字列).default/urlclassifier3.sqlite
 起動が速くなります!
 Gmail等のWebアプリも速くなる

2009年3月7日土曜日

任意のスピードで動く

//X軸用
function myEaseInX(targetMc:MovieClip,startPointX:Number,easingIn:Number,delay:Number) {
var endPointX:Number = targetMc.x;
targetMc.x=startPointX;
var intervalId:uint = setInterval(intervalFunc,delay*1000);
function intervalFunc() {
targetMc.addEventListener(Event.ENTER_FRAME,slideIn);
function slideIn(evt:Event):void {
if (targetMc.x > endPointX || targetMc.x < endPointX) {
targetMc.x += (endPointX-targetMc.x)/easingIn;
} else {
targetMc.x = endPointX;
targetMc.removeEventListener(Event.ENTER_FRAME,slideIn);
}
}
clearInterval(intervalId);
}
}
//Y軸用
function myEaseInY(targetMc:MovieClip,startPointY:Number,easingIn:Number,delay:Number) {
var endPointY:Number = targetMc.y;
targetMc.y=startPointY;
var intervalId:uint = setInterval(intervalFunc,delay*1000);
function intervalFunc() {
targetMc.addEventListener(Event.ENTER_FRAME,slideIn);
function slideIn(evt:Event):void {
if (targetMc.y > endPointY || targetMc.y < endPointY) {
targetMc.y += (endPointY-targetMc.y)/easingIn;
} else {
targetMc.y = endPointY;
targetMc.removeEventListener(Event.ENTER_FRAME,slideIn);
}
}
clearInterval(intervalId);
}
}

フラッシュをフルブラウザで表示

function fixStage() {
var speed = 5;
var sW = Stage.width/2;
var sH = 100;
this.layout._x += (sW-this.layout._x)/speed;
this.layout._y += (sW-this.layout._y)/speed;
}

onEnterFrame = function () {
fixStage();
};

2009年3月3日火曜日

protptype.js-dom:loaded

dom:loadedは、prototype.jsの拡張イベント
ページを読み込まれた後にJavaScriptを実行する

Event.observe(document,"dom:loaded",実行させたい関数);

prototype.js-トグル

○js

function toggleAC (clickDom) {
var contentsID = clickDom.id + "-contents";
var contents = document.getElementById(contentsID);
var contents = $(contentsID);
if (contents.style.display == "none") {
contents.style.display = "block";
} else {
contents.style.display = "none";
}
}

これが

○prototype.js

function toggleContents (clickDom) {
$(clickDom.id + "-contents").toggle();
}

これだけになる


○html

<ul>
<li><a href="#" id="menua" onclick="toggleAC(this)">メニュー 1番目</a>
<div id="menua-contents">
1番目のコンテンツ
</div>
</li>
<li><a href="#" id="menub" onclick="toggleAC(this)">メニュー 2番目</a>
<div id="menub-contents" style="display:none;">
2番目のコンテンツ
</div>
</li>
<li><a href="#" id="menuc" onclick="toggleAC(this)">メニュー 3番目</a>
<div id="menuc-contents" style="display:none;">
3番目のコンテンツ
</div>
</li>
</ul>

prototype.jsの基礎

var contents = document.getElementById(contentsID);

var contents = $(contentsID);


「document.getElementById」を「$」でおきかえることができる

javascriptの基礎-HTMLの読み込みが完了したら実行

○HTMLの読み込みが全部完了したら実行

window.onload = function () {
alert("test");
}

javascript基礎-アンカータグのページ内リンク

return false;

で無効にする

■追記

javascript:void(0)

でも無効にする

jamsさん
a タグの href に # とか javascript:void(0) とかする理由

javascriptの基礎

javascriptの基礎

○stylesheetの設定を変えるときは
「.」でつないでいく。「-」のところは直後にくる文字を大文字で。


h1.style.backgroundColor

○以下でもできる

contents0.setStyle("display:none")


○設定

var January = 変数

function February (引数){

};

○実行

February(戻り値);


■任意の色にh1タグの色を変えてみる

○js

function changeClr (colorValue) {
var h1 = document.getElementById("header-title");
h1.style.backgroundColor = colorValue;
}

○html

<a href="#" onmouseover="changeClr('#ff0000')"
onmouseout="changeColor('transparent')">背景色を赤にする</a>

ブログ アーカイブ

フォロワー