気まま日記(kimamanikki)

気の向くままに、のんびり更新しますヽ(´∀`)ノ

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
11


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

1ヶ月カレンダー

を作ってみた。

正直ちゃんと動くかどうか不安だが…

ちなみにショートカットキーはIE6、IE7のみ確認済み。

FireFoxやネスケではコントロールキーのキー番号(キーイベント)が取得できなかったため、今回は見送り。

どうやったらコントロールキーの値が取れるんだろう?

 

スポンサーサイト

JavaScriptとCSSのおべんきょう その2



ちょっと風邪ひいちゃってたり忙しかったりで更新が止まっちゃってました

今回オブジェクトのドラッグの話。

オブジェクトの移動

今回は対象オブジェクトを自由に動かせるようにしてみたよ。

今回はソースがちょこっと長いで~す
なので解説は要望があればいつか乗せます


では実際の動きを見てみましょう。



どうかな…動いた

今回は、前回の表示・非表示も一緒に使ってます。
masaがテストした環境のIE6だとちゃんとした動きになるんだけど、他のブラウザだと、動く位置がおかしかったり、キレイに表示されないかもしれない。

その辺気付いたらコメント下さいね

とりあえず今回のお勉強メモはこの位で


次回はJSON形式についてか、またJavaScript+CSSの第三弾かのどちらかをやります

コメントもらえると凄く喜びます

ではまた

JavaScriptとCSSのおべんきょう その1


今回は簡単なものを作ってみたよ

オブジェクトの表示・非表示を変更する

これはクリックした時に対象オブジェクトの表示・非表示を切り替えると言うもの。

色んな所に使われてるから、多分みんなも目にした事あると思うよ
それに探せばいくらでもソースがあると思うし

実際には↓こんな感じの動きだね。


これはボタンをクリックした時に、対象のタグの表示属性を変える事で実現してます。

具体的には、ボタンのonclickイベントが発生した時に、以下のスクリプトを実行します。

var elm = document.getElementById(id);
elm.style.display = elm.style.display == 'none' ? 'block' : 'none';

どうかな?
結構短いし、簡単だよね

説明としては、
var elm = document.getElementById(id);
で指定したidのオブジェクトを取得しています。

そして、
elm.style.display = elm.style.display == 'none' ? 'block' : 'none';
で、「対象オブジェクトのスタイル:display属性が'none:非表示'の時は'block:表示'。そうでなければ'none:非表示'」という事になります。

どうかな?
結構メジャーというか、WEB系触った事ある人なら誰でも知ってる事かもしれないけど、masaは最初に出来た時は「おぉ」ってなったよ

まだまだ他にも色々と勉強したものを書いていくつもりです。
皆さんもツッコミのほど宜しくお願いしますね

…コメントとか頂けるとすっごく喜びます
もしよかったらお願いしますね

ではまた


参考資料
とほほのWWW入門

テーマ : WEB系勉強中    ジャンル : コンピュータ


カウンター
セルフィ

 
Twitter



 
 
クラッチ作品集
 
 
プロフィール

クラッチ

気まま日記バナー

・クラッチ
このブログの管理人

 
 
管理人へメール
メールフォームを開く
 
 
ブロとも申請フォーム
 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。