JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強&復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。
まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの?使いどころは?どうなるの?いろいろやってみた。
先日のエントリー『CSS3のtransitionプロパティでアニメーションを試してみた』で、何気なく作ってみた、ブラウザごとでプレフィックスを変更するボタン。単純に文字の置換で実行されているのですが、その時作ったものを振り返ってみようと思います。
昨日まで、JavaScript OFF環境の人にも優しく(動きはなくとも見られるように)するために、JavaScriptの動的部分に関係するCSSについてはJavaScriptで追加する方法を紹介してきましたが、今回もその続き。
前回はjQueryを使わずにJavaScriptで外部CSSを追加しましたが、今回は直接CSSを書き込む方法。jQueryでも書いた直接CSSをJS内でCSSを書く方法です。
今回もあらかじめ書いておきますが、メンテナンス性が下がるので、おすすめする方法ではありません。サイトの構造とかメンテナンス性を考えるのであれば、前回の方法をおすすめします。
昨日は、jQueryでCSSを追加する方法を書いたのですが、本日はjQueryを使っていない環境でもJavaScriptでCSSを読み込む方法を書いておきます。
昨日のところにも書いたのですが、あくまでこのJavaScriptでCSSを追加する方法は、JavaScriptでDOMを操作するときに、DOMの読み込みが完了するまえに適用させておきたいCSSがある場合に利用しておくほうがいいかなというものです。これを利用することで、JavaScriptがOFFの環境でも、動的に動くことはなくなりますが、問題なくサイトを見ることができるようになります。
あくまでJavaScriptでDOMを操作する箇所へ適用するもので、それ以外は通常通り外部CSS化したCSSをlinkで指定するようにしましょう。
[mixi] jQuery.js | しつもん No.153
コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん?どういうことだ?なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・
おっと、なぜ!?
どのようなことなのか、確認しつつ対応方法を見つけようと思います。
Twitterをはじめたかなり前に比べると、ものすごくTwitterがにぎわっていると思うこのごろですが、いまさらながら「Retweet」のボタンを設置しようと思い、とりあえず簡単にですが設置してみた。
今回の設置では、「Easy Retweet Button」というJavaScriptを使って本当に楽に実装。
これを使うと、Retweetが簡単にできる且つ、その時に投稿したRTのリンクが何回クリックされたのかというのがわかるようになります。
ただ、使用する際にカスタマイズが必要でしたので、その点についてをメモしておきます。
昨日「HTMLなどのソースを綺麗に表示するSyntaxHighlighterが2.0になってた」をエントリーしたのですが、今日はカスタマイズ方法を少し紹介しておきます。
ちょっとしたテクニックなのかもしれないですが、
formのテキストエリアで改行つきの入力をしたときに、
改行を自動的にbrタグになる方法があったので、
メモとしてエントリーしておきます。
昨日のエントリーで「JavaScript:文字を数値に変換する方法」を書いたのですが、
そのコメントにてcyokodogさんが他の方法を教えてくれました。
そっちの方が記述少なく行けることが判明したので、
それも使ってみて動作を確かめようと思います。
jQueryとかでCSSのpaddingとかを抜きだした時、
pxやemがついたまま抜きだされてくる。
これをreplace()などで数値だけにして足し算とかをしようとしても、
文字列として扱われてしまうことになる。
つまり、文字を数値へ変換しなければならないのだけど、
JavaScriptでどうやれば数値になるのか知らない。
調べたらたまに使っているeval()を使う事で、
文字を数値として使うことができるらしいので、
メモとしてエントリーしておく。
今回のお勉強はconsole.log()について。
JavaScriptを構築しているときに、
どのような結果が返ってくるのかというのを確認する時は、
HTML上に書き出させたり、alertで確認する方法を使ったりするけど、
この今回のconsole.log()は、Firefoxのプラグインの
Firebugのコンソール欄に結果を表示させるものらしい。
知らなかったのでメモエントリー
続きを読む »実はまだまだ知らない事が多いJavaScriptの基本、
ちゃんと勉強しないとなーなんて思うのですが、
ちょくちょく気づいた時にしかできなかったりします。
そんな今回「あれ?なんだっけな、これ?」
なんて思ったのが「?」の使いどころ。
調べてみたら、条件演算子ということ。
どういう使い方ができるのか、少し試してみた。
Mootoolsを使ったナビゲーション、
「Fancy Navigation with MooTools Javascript」
というのがあったので試しに使ってみた。
ところがそこにのっているままの設定だと、
ちょっとだけチラついた動作があるだけで、
Demoでのっているような動きをみせてくれない。
なんでだ?
と思って試したら、書いてある設定が足りなかっただけみたいなので、
それもあわせて書いておきます。
文章中に使ったサンプルの文字とかを
直接動作させる方法はないかなと思い探してみたら、
どうやらevalという関数で動作させることができるようだ。
今後作って動作させてみたいことがあるので、
今回はその時のために、evalの使い方を勉強してみる。
いつも読んでいるブログのあちらこちらで、
JavaScriptのonclickについて書いてあったので、
自分の意見をふまえ簡単にまとめておく。