setInterval()を使ったアニメーションをご紹介します。一定間隔でアニメーションさせたいときに使います。時間を表示する例を見ていきます。 setInterval()の設定 デモ setInterval()の解除 デモ まとめ setInterval()の設定 setInterval(関数, 時間間隔); …

アニメーションの開始と終了の制御について書きます。アニメーションの開始と終了をクリックで操作する例を見ていきます。また、アニメーションイベント属性にスクリプトを設定する方法をご紹介します。 アニメーションの開始と終了 デモ アニメーションイベ…

イベントを処理する方法は、イベント属性の他にもあります。それは、要素にイベントリスナーを設定する方法です。イベントリスナーは、関数・メソッドを持っています。そこにイベントが発生した際の処理を記述します。イベントリスナーが持っている関数・メ…

テキスト要素の生成と追加について書きます。具体的な書き方は、サンプルコードを確認してください。 テキストオブジェクトの生成 デモ まとめ テキストオブジェクトの生成 document.createTextNode("テキスト"); テキストオブジェクトの追加の流れは以下の…

要素の追加と削除について書きます。サンプルとして、円の追加と削除の例を見ていきます。具体的な書き方は、サンプルコードを確認してください。 要素オブジェクトの生成と追加 デモ 要素の削除 デモ 補足:CDATAセクション まとめ 要素オブジェクトの生成と…

getElementByIdメソッドを使って、特定の要素を取得する方法を見ていきます。id属性を頼りに特定の要素を取得します。イベントが発生していない要素に対して、処理を設定することができます。 特定の要素の取得 まとめ 特定の要素の取得 要素のid属性に属性…

テキストオブジェクトの取得、テキストの取得・設定についてご紹介します。テキストオブジェクトを取得した後、テキストを操作していきます。予め設定してあるテキストをイベントを介して変更してみます。詳細は、サンプルコードをご確認ください。 テキスト…

動きのあるページを作るには、jQueryを使うと良いです。JavaScriptという選択肢もありますが、jQueryの方がハードルが低いです。そこで、私が読んだjQueryの本をご紹介します。 本の要約 学んだこと 基本の記述 セレクタの種類 イベント/ajax/アニメーション…