2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

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

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

自己紹介

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

本題

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

本題わかりません ><

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

本題 JavaScript HTML+DOM CSS

サンプル

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

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

サンプル
連結画像を準備
#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 もいいけど HTML+DOM ， CSS もね
画像を準備する方が苦労した
http://blog.iwa-ya.net/2008/07/11/064937

もうひとつ ...

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

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

よろしければ

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

2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

by IWATA Susumu on Jul 13, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

2008-07-12 / WCAN 2008 Summer Ligntning Talks #2 — Presentation Transcript