p5.jsさわってみた

返信

三角関数を勉強中なのですが、数学としてだけ勉強しても上達しないので何かコードが書けるツールないかな～と思ってたところでp5.jsに出会いました。

使い方は

　1. p5.js(p5.min.js)をサイトに読み込む。
　2. setup()とdraw()という関数を用意して中に処理を書く。

でOK。

ちなみに setup() は最初に1回、drawは指定したフレーム数/秒で実行されます。
（何も指定しないと30フレーム/秒？）

こちらのコードをちょっといじって貼り付けてみました。

今までcanvasを使った描画はやったことなかったのですが、こういう解り易いプラグインがあると一気に敷居が下がりますね（きっと他にもいっぱいある）

jQueryの$(this)で指定した要素(HTML)をそのまま取得したい

返信

ハマったのでメモ。

例えば二つのリストがあって、クリックしたらもう一方に対象の要素を複製したいとする。

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <!--ここに<li>要素を移動したい-->
</ul>

$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).html());
  });
});

何の疑いもなくこれでイケると思ってたのに実際は、

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <span>要素1</span>
  <!--ここに<li>要素を移動したい-->
</ul>

・・・外側の<li>がない；；

$(this).html() がthis(上の例の場合は<li>)の中身を取得するものだとは知らなかった＞＜

対象の範囲としては

$(this).remove();//this自体が対象
$(this).empty()//thisの中身が対象
$(this).text()//thisの中身が対象

empty()やtext()の仲間なんですね（jQuery使い慣れてる人には当然の事？）

で、解決策。

$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).get(0).outerHTML);
  });
});

$(this).html() を $(this).get(0).outerHTMLに変えればOK。

場当たりでコード書いてるからこういう基本的なことでハマってしまう。ドキュメント読んでからコード書く癖付けないとだめだなぁ；；

返信

JavaScriptのvarについて大事な事２つ。
忘れそうなのでメモ。

どちらも素晴らしい解説でした。

ついでにコードチェックツール。
jslint.com
単独Varパターンに対応してないとエラーが出るらしい。