業務のための JavaScript 勉強法？ 岩田 享 LLP メガネラボ [email_address]

アジェンダ 自己紹介 本題 サンプル まとめ

自己紹介

本題

サンプル

まとめ

自己紹介

自己紹介 岩田 享 / issm 【いわた】 LLP メガネラボ Perl とか JavaScript とか http://blog.iwa-ya.net/

岩田 享 / issm 【いわた】

LLP メガネラボ

Perl とか JavaScript とか

http://blog.iwa-ya.net/

本題

本題 業務のための JavaScript 勉強法？

本題 わかりません ><

本題 ... ということで個人的見解

本題 JavaScript HTML+DOM CSS

サンプル

サンプル アニメーション PNG （透過） のようなものを作ってみる

サンプル HTML を記述 <div id=&quot;anim”></div>

HTML を記述

サンプル 連結画像を準備 #anim { overflow: hidden; background-image: url(animation.png); ... }

連結画像を準備

サンプル .frame-0 { background-position: 0 0; } .frame-1 { background-position: 0 ...px; } .frame-2 { background-position: 0 ...px; } . . . 各フレームに対応するクラスを定義

各フレームに対応するクラスを定義

サンプル JavaScript を記述 var anim = document.getElementById('anim') , frame = 0 ; // 200 ミリ秒ごとに frame-1, frame-2, ... // と，クラス名が切り替わっていく setInterval( function() { frame++; anim.className = 'frame-' + frame; ... }, 200 );

JavaScript を記述

サンプル デモ

サンプル

まとめ

まとめ 紛らわしいタイトルをお詫びします JavaScript もいいけど HTML+DOM ， CSS もね 画像を準備する方が苦労した http://blog.iwa-ya.net/2008/07/11/064937

紛らわしいタイトルをお詫びします

JavaScript もいいけど HTML+DOM ， CSS もね

画像を準備する方が苦労した

http://blog.iwa-ya.net/2008/07/11/064937

もうひとつ ...

もうひとつ ... http://www.nicograph.jp/

もうひとつ ... http://www.54t.org/

よろしければ

ご静聴ありがとうございました