JavaScript
スクロール型のナビゲーションがあるサイトで、一定の位置までスクロールするとナビゲーションが固定で出てくるサイトがあります。 こういうの↓ http://gion-renge.jp/ これが結構よく使う演出なので使いまわせるように書いてみました。 function NavControl…
ユーザーエージェントを判定する簡単なユーティリティを作ってみた。 function DecideUA(){ this.name = window.navigator.userAgent.toLowerCase(); } DecideUA.prototype = { match: function(str){ return (this.name.indexOf(str) !== -1); } } 使い方 m…
JavaScriptにはそもそもクラスなんてないし~(ry、とかプロトタイプチェーンが~(ryとかの話はひとまずスルーして、実際に使用出来そうなクラス継承を考えてみた。 クラスを継承する クラスの継承は.call()関数や.apply関数を使用します。 function A(n){ …
縦長スクロール型のページでナビゲーションに現在位置を表示したり、ある特定の位置までスクロールしたらイベントが発火したりするコンテンツを作る場合、該当の要素の位置を取得するという工程が必要になります。 この部分だけを切り出してユーティリティ的…
フォームにテキストを入力すると配列にデータをプッシュするというWEBアプリでよくありそうな処理です。 色々やると難しいので、Modelはデータを管理してViewはDOMの操作を管理するという単純なルールのみ。 さらにデータをDOMに書き出すViewを作ると簡単なM…
基本的な機能を使いまわして、通常のロールオーバーとフェード付きを作ってみた。 クローン画像の生成のあたりはもう少し改善できそうな気がする。 kawabataryo/imgRollover kawabataryo/imgRollover · GitHub
大昔のこの記事のURL元がなくなってて、どんなコードだったのか興味があったので書いてみた。 cl.pocari.org - ロールオーバーのオブジェクト指向的実装 まあこの時代なので「<img onMouseOver=''>とかでやってて、それをJSのみで実装して使いやすくしよう」、みたいな内容だった…
下記のような書き方は機能を切り分けたりする時によくやると思いますが、オブジェクトリテラルが入れ子になった場合、入れ子のなかでthisの扱いが変わってしまいます。 var MyApp = { init: function(){ this.getFugafuga(); //fugafuga! }, util: { init: f…
ドはまりしたのでメモ。 .appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。 高さが取得できない!
WEBアプリ開発でJSONデータを扱うことになったのでメモ。 実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。 JavaScript (function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = …
RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。 PHP RSSを取得して、json_encode を使ってPHPの配列をJSON形…
普通に仕事してると、jQueryなしの環境ってほとんど無いし、そもそも効率がわるい。 しかも、自分のスタートがJavaScript == jQueryみたいな環境だったので、実際にjQueryなしでJavaScriptを書く機会が殆どなかった。 その後一から勉強しなおしたので、一応…
Javascriptで何場面もあるようアニメーションを実装する場合に、シーンごとにアクションと発火点をタイムラインのように管理できたらよいのかなと思って書いてみた。 (function(window,namespace,$){ window[namespace] = { play: function(){ var len = thi…
オブジェクト指向の書き方を練習するために前に作ったやつ。 HTML <div id="wrap"></div> JavaScript (function($){ var n = 99; var wrap = $('#wrap'); var Box = function(i,selector, x, time){ this.i = i; this.x = i*10; this.selector = selector; this.time = time; this…
画像のロールオーバーでフェードエフェクトがついたものを書いてみた。 ロールオーバー用のクローン画像を生成して元画像の後ろに配置して、元画像をフェードすることで効果を出します。 汎用性が出るように画像と親要素に直接CSSが付加されるようにしていま…
即時関数の引数を使った名前空間の作り方を教えてもらったのでメモ。 (function(window, namespace){ window[namespace] = { fuga : function(){ document.write('Hello!'); } }; })(this, 'Hoge'); Hoge.fuga(); グローバルオブジェクトにHogeを追加して名…
画像のロールオーバー var Rollover = (function(){ var _func = { init: function(el,suffix){ this.event(el,suffix); }, event: function(el,suffix){ var that = this; $(el).on({ mouseover: function(){ var self = this; self.setAttribute('src',tha…
即時関数を使ってプライベートなスコープを実現するモジュールパターン。 var Sample = (function(){ var _name = 'Ryo Kawabata'; var _age = 37; function _sayHello(){ console.log('Hello, my name is ' + _name); } return{ sayHello: _sayHello }; })(…
jQueryプラグインを作成する時の基本的な形をメモ。 ;(function($){ //option var option = { option01: 'value01', option02: 'value02' } $.fn.pluginName = function(params){ params = $.extend(option,params); //core return this.each(function(){ })…