プログラミングB #13

#13 DOM


高尾俊介(takawo@konan-wu.ac.jp)
甲南女子大学 文学部 メディア表現学科 講師


 

雑談:タイピング練習,AI




 

DOM(Document Object Model)

通常,ウェブページはHTML(HypeText Markup Language)と呼ばれるマークアップ言語で記述されている.HTMLではH1やP,IMGなどのマーカー(印)によって文書内の構造を記述する.


HTML以外のPHPやPython,JavaScriptなどでウェブページを開発することも増えているが,それらは基本的に最後にHTMLを出力します


(ウェブサイトをChromeの検証でDOMツリーを確認,文書を書き換えてみる)


p5.jsでは,さまざまなDOM要素をp5.dom.jsを読み込むことで操作できる.


  • 新たにDOM要素 <p>  や<div>といったHTML要素を操作することができる.


授業ではDOM要素として,GUI(グラフィカルユーザーインターフェース)のボタンやスライダーを作成してプログラムで使用してみる.

詳細を知りたい場合などは,

から,様々な関数やシステム変数など仕様を確認してください.



作例


ドラッグアンドドロップで画像を変換する




 


ボタンの制御



let button;

function setup() {