Loading...
プログラミングB #13
#13
DOM
高尾俊介（takawo@konan-wu.ac.jp）
甲南女子大学 文学部 メディア表現学科 講師
Crayon Codes
Crayon Codes
Customizable Generative Art Editions by the Open Source Artists on OpenProcessing
openprocessing.org
雑談：タイピング練習，AI
https://typing.run/p5
https://dotinstall.com/lessons/basic_p5js#!lessons
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（グラフィカルユーザーインターフェース）のボタンやスライダーを作成してプログラムで使用してみる．
詳細を知りたい場合などは，
https://p5js.org/reference/
#group-DOM
から，様々な関数やシステム変数など仕様を確認してください．
作例
ドラッグアンドドロップで画像を変換する
201220a - OpenProcessing
openprocessing.org
200513 - OpenProcessing
openprocessing.org
ボタンの制御
let
button;
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
#13 DOM
Crayon Codes
雑談：タイピング練習，AIhttps://typing.run/p5https://dotinstall.com/lessons/basic_p5js#!lessonsDOM（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要素として，GUI（グラフィカルユーザーインターフェース）のボタンやスライダーを作成してプログラムで使用してみる．
詳細を知りたい場合などは，
https://p5js.org/reference/#group-DOM
から，様々な関数やシステム変数など仕様を確認してください．
作例
ボタンの制御
let button;