Javascriot | albatrus.com

$(function(){
　　　　　$('select').change(fucntion(){
　　　　　　　　　　if($(':selected').attr("value") == "10代"){
　　　　　　　　　　　　　　　　$("input").attr("disabled","disabled");
　　　　　　　　　　} else{
　　　　　　　　　　　　　　　　$("input").removeAttr("disabled");
　　　　　　　　　　}
　　　　　　});
});

年齢：

好きなお酒:

この場合選択した年齢が１０代の場合は好きなお酒が記入できなくなるようにしています。

jQueryでアニメーション

jQueryを使えば、アニメーション効果をつけることも簡単にできます。
[主なアニメーション]

　show(): 徐々に表示をする。第一引数で速度を指定できる。
　hide():徐々に非表示にする。
　fadeIn() : フィードインで表示する。
　toggle()：表示、非表示を徐々に切り替える
animate() : 任意のCSSプロパティの値を変更する

shwo(),hide(),toggle()は基本的な画面の表示、非表示を切り替えられます。
第一引数に”slow”,”fast”などの速度を指定できます。

1
2
3
4
5

$("button").click(function(){
$("p").show( slow,function(){
// show()　が終わった際に呼び出す処理を記載
　　　　　});
});

animate()はユーザーが独自にアニメーションを設定できます。
animate( CSSプロバティ、速度、動き、コールバック関数)

1
2
3
4
5

$(function(){
$("button").click(fucntion(){
$("p").animate( { "marginLeft : "200px"} , "slow","swing");
});
});

ライブラリを使えば、簡単に色々動的なコンテンツを作成することができます。
後、jQueryには多くのフラグインがあります。
フラグインを使えばさらにできることが広がります。凄い！！

［参考書籍］

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

2010: 04/06
CATEGORY: javascriot
TAGS: JQuery
コメントを書く

[JQuery]　基本的なこと。

Javascriptの勉強をかねて、以前買った「jQueryデザイン入門」を読んでみます。

jQueryとは

jQueryとはjavascriptのライブラリーの一種で2006年に公開されました。
どちらかというと外部を構成するデザイナー向けのライブラリーです。
特徴はコードをあまり書かないが、ダイナミックな表現を実践できることにあります。

使い方としては公式サイトから「jQueryライブラリー」をサーバーにアップロードして利用する方法が一般的です。
scriptタグの中にコードを記述することもできますが、外部ファイルに記述したほうが実務上楽でしょう。

1
2
3
4
5

<head>
//メタダグなど
<script type="text/javascript" src="./jquery-1.3.2.min.js"><script>
<script type ="text/javascript" src ="./albatrus.js"><script>
</head>

その他、「Google AJEX Libratries API」を使えばサーバにDLしなくても、直接グーグルから呼び出して使うことができます。
この場合はjQuery以外にもDojoやprototype.jsなどのライブラリーも呼び出させます。

1
2
3
4
5

jQueryの基本

javascriptの開発環境をなんでしようかを考えていたのですが、FireBugと一緒に使えるFireQueryを使ってみます。
こういった開発環境を整えるのが億劫になってしまうんですよね。

FireQueryはFireBug上のコンソールに書いたコードがブラウザで表示されているHTML文章に適用されます。

1
2
3
4
5

$("p").each(function(){
$(this).click(function(){
$(this).css("color","blue");
});
});

例えば上記コードをFireBugのコンソール内で実行すると、ブラウザないのPタグをクリックした際に文字の色が青に変わります。

[基本的書き方]

$マークの（）の中にはターゲットとなるセレクタを入れる。
$(“セレクタ”).命令（内容）

セレクタはタグの名前。タグの名前やid=”",class=”"などがしてできる。
CSS3やCSS2、「属性セレクター」、「jQuery独自のフィルター」など多くの記載方式があるみたいです。

セレクタを指定したら、そのセレクタに何を行わせるかの命令を記載します。
例

text(“変更したいテキスト内容”);

css(“…..”,”…..”) CSSの制御
append(….) :要素の最後に指定したHTMLを移動させる
html(“変更したいhtml”);

1
2
3
4
5

// <a>のCSSを変更する。この場合は背景を緑、文字の色を白に。
$(function(){
$("a").css("background-color","green")
.css("color","#ffffff");
});

[イベント]

通常のjavascriptのように、イベントを設定することが可能です。
例えば、あるセレクタをクリックしたら文章を変えるなどを設定できます。

1
2
3
4
5
6

$(function(){
$("p").click(function(){
$(this).css("color","blue");

});
});

click以外にも、mouseover()、one()、toggle()など色々なイベントがあります。これらを組み合わせることによって寄り動的なサイトを作ることができます。

［参考書籍］

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

2010: 04/05
CATEGORY: javascriot
TAGS: JQuery
コメントを書く

Javascript入門【メモ】

とりあえず、少ない時間の中で手を動かさないといけないので、インターネット上に散らばっている「javascript入門」を調べて勉強していきます。

Javascriptの基本構造

scriptタグで囲まれた項目に、Javascriptを記述していきます。
これは外部ファイルを呼び出す方法もあります。

1
2
3
4
5

外部から呼び出す場合はの中に以下のように記述する。

1	<script type="text/javascript" src="test.js">

イベントパンドラ

イベントパンドラは属性部分で指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13

使用する関数はheadタグの中に入れたほうがいい。

1
2
3
4
5

window.addEventLisnter("Load",function(){
document.getElementById("box").addEventListener("Click",function(){
document.getElementById("text").innerHTML += "クリックしました <br>" ;
},true);
},true);

actionscriptと同じように、イベントリスナーを指定できます。

第一引数には、Click　mouseoverなどのイベントの種類を指定する。
第二引数には、実行する関数。
第三引数には、true か　falseを指定する。

詳しくはこちらで

プロパティとメソッド

オブジェクトが持つ値を参照したり設定するものがプロパティ（属性）といいます。
太字がプロパティ
navigator.appName ：ブラウザーの会社の名前。
navigator.appVersion ：ブラウザーのバージョン名。

オブジェクトはまた、動作を指定する際に用いるものをメソッド（処理）と言います。
太字がメソッド
window.open(“http://albatrus.com/”,”blank”);

DOM

1
2
3
4
5
6
7
8
9
10
11

// HTML内のidを指定できる。
document.getElementById();

//例
function test(){
document.getElementById("header1").style.color = "red";
}
・
・
<ｐ id="header1">Sample</ｐ>
<input type = "button" value ="色変更" onclick = "test()">

上記の例はDOM（Document Object Model）と言います。

2010: 04/01
CATEGORY: javascriot
TAGS: Javascript
コメントを書く

自己紹介

小さな頃の夢だったゲームを作りたいブログです。
iPhoneと海外サッカーと格闘技が好きです。
勉強したこと、新しい発見があったことを書いていきたいです。

RSS FEED

「JavaScript ゲーム製作勉強会　#jsgstudy」に行ってきた

【javascript】　Raphael.jsとは