メシのタネ

Webプログラミング 備忘録

  • DOMをPHPで操作できたらいいよね

    そうだよね。そう思うよね。JavaScriptでやると、画面がガタついたりするもんね。そうならないようにする方法もあるかもしれないけど、僕はできませんので、サーバー側でなんとかできたらええなぁと思って挑戦したけど、できませんでしたよ。PHP標準でHTMLをDOMにできるらしい今、技[...]

    続きを読む
  • 設計書ってなんで書くの?

    設計書をなぜ書くのかから始めてかれこれ3年近くこの禅問答をやっているわけですが、いまだに答えは出ません。ただ、その禅問答をやる中で設計書に対する取り組み方は大きく変わったので、その一部でも書いていきたい。基本設計はとにもかくにも必要だと思う設計書はいらぬ!という話をよく聞くし、自分[...]

    続きを読む
  • 書ききってやる。

    久々に書いてみる。久々に文章を書くということをやってみようと思う。伝える作業を観察したいと思ったからそうしたいと考えた。情緒的な文章は基本的にゴミ箱にぽいしてきましたが、情緒的なのも自分だと思う。「文章をかくという作業は、とりもなおさず自分と自分をとりまく事物との距離を確認すること[...]

    続きを読む
  • 普通の会社で2年普通に働いて思う事

    えらい寒くなりました。文句言いながらも現職を続けて2017年12月1日にめでたく2年がたちました。分かりやすいが乱暴に言えばITドカタと呼ばれる業界に入って案件のヒエラルキーの無慈悲さを痛感しながらも、それでもしょうがないと頑張る人たちに心を打たれながら「じゃあ俺も」と頑張れない自分に挫折して、とあ[...]

    続きを読む
  • jQueryUiのDatepicker利用時にminDate設定するとバグる件

    題名の通りなんですが、DatepickerでminDate使うとバグります。また後でキャプチャ見て貰いますけど、灰色の部分が、minDateで設定した日付が反復して出るようになるんですね。こういうの気が付かない人がいるかも知れませんが、ChoromeでminDate設定してる人は気にしてみてくだ[...]

    続きを読む

【jQuery】clickとかに書いた無名関数の中の変数の値を変更して扱う方法

jQuery11
この間Wikipedia読んでてたら、JavaScriptってジャバスとも略すと書いてあって
一瞬ジャバスwwwwwwwwwwwwwwwなんて思ったんですが、それも悪くないなと意識が変わりました。

JavaScriptで7音節、JSで4音節必要なのに対して、
ジャバスは3音節で済むため、少しずつ使用範囲が拡大している。

wikipediaより転載

そのうちトレンディーな略し方はジャバスになるかもしれませんね。
チェックしておきましょう。

jQuery使ってて昔よく思ってた事

無名関数の中で変更した変数の扱い方が分からなくて
clickでフラグ変えたりとかできないもんだと思ってました。
だからその後処理書きたければ、全てこのclickの中の無名関数で
処理していかないとダメなんだと思ってました。


jQuery(function(){

     var a;

     jQuery("button").click(function(){
              a = "a";
     });

     console.log(a); //undefined
});

こうやった際にaの中身が未定義になるからです。

何故未定義になるのか

クリックイベントが実行されたからといって、
もう一回jQuery関数が実行されるわけではないです。
JacaScriptの実行順序を見てもらえると、何となく分かる気がします。

JavaScriptの実行順序

実行順序図
この図のようになってます
これに加えて補足すると、

HTMLを解釈してる間に、script属性が最初に読み込まれて
次にasync属性が読み込まれ解釈が終わった時にdefer属性が読み込まれます。

async,defer属性についてはこのサイトが参考になります。

無名関数で定義しなおした変数を扱うには?

これだって回答出すととぶち殺されそうなので、
こういう風に使ってますと書いておきます。


          jQuery(function(){

               var a;

               jQuery("#clickbutton").click(function(){
                    a = "a";
               });


               jQuery("#clickbutton2").click(function(){
                    console.log(a); //変数aの中に"a"が入っている

                    if(a == "a")
                    {
                         a = "b";
                         console.log(a); //変数aの中の値が"b"になる!
                    }
               });
               
          });

私はこういう風に書いてますが、
オライリーの6版の56ページ3.10変数のスコープの所で、
グローバル変数でvarを省略しても良いけどローカルではvarを宣言してねって書いてあります。

これをやるとローカルスコープで宣言された変数の値が変わると、
グローバルスコープで宣言された変数の値も変わるためです。

どうすれば一番良いんだろう・・・と今は新しい問題に悩んでます。
それなので、優しく教えてくれる人を絶賛募集中です!

と、とにかく今日一番言いたかったのは、クリックイベントが実行された時に変わった変数は
別のイベントが実行された時に使えるよってことが言いたかったです!

関連記事

コメントをお待ちしております