JavaScriptから見たHTML
- 2025/02/28
- 20:27
前回でも少し触れましたが、DOM（Document Object Model）とはJavaScript側からHTMLを木構造として捉えてオブジェクトとして扱えるようにするモデルです今回はこのDOMを介してJavaScriptとHTMLの関係について記したいと思いますWindowオブジェクトとDocumentオブジェクトHTMLは<html>要素を最上として階層構造を取っていますが、JavaScriptではWindowオブジェクトをトップとして構成されていますこのWindowオブジェクトはHTM...
JavaScriptによる要素の追加
- 2025/01/31
- 20:58
これまでJavaScriptはHTMLの要素を元に動いてきましたが、JavaScript側からHTMLに要素を追加することもできます今回は実際にHTMLにJavaScriptから要素を追加してHTML上に追加した要素を表示するスクリプトを作りたいと思いますcreateElementとappendChildcreateElementメソッドはHTMLに要素を追加するメソッドですcreateElement()の()内で指定した要素をHTML内に追加しますしかしこれだけではHTMLのどこに追加した要素を配置するの...
requestAnimationFrameについて
- 2024/12/31
- 20:57
こでまでrequestAnimationFrameを用いて様々なアニメーションを作成してきましたが、そもそもrequestAnimationFrameとは何なのでしょうか今回はrequestAnimationFrameについて改めて記してみたいと思いますwindowオブジェクトのメソッドとしてのrequestAnimationFramewindowオブジェクトとはブラウザ上に表示される全てのオブジェクトを格納するオブジェクトです（ちなみにdocumentオブジェクトはhtmlの文章を格納するオブジェクト...
動く矩形同士の当たり判定
- 2024/11/30
- 20:53
前回は静止した矩形と動く矩形の当たり判定を用いたアニメーションを作成しましたが、今回は動く矩形同士のアニメーションを作成しましたそれぞれの矩形の重心の距離を参照して動きを判別することで、当たり判定のコードを簡潔に記述することができます...
矩形の当たり判定
- 2024/10/31
- 22:57
前々回と前回は円形の当たり判定を用いたアニメーションを作成しましたが、今回は矩形（長方形）の当たり判定を用いたアニメーションを作りたいと思います矩形の重心を利用した判別矩形ではそれぞれの対角線が交わる点が重心となりますJavaScriptのCanvasでは矩形描写メソッドstrokeRectやfillRectの幅や高さの1/2の座標が重心になります矩形は円とは違い重心（円では中心）から辺の距離は一定ではありませんそこで矩形では上下と...
