bata's log

フロントエンド系のTipsとかメモ

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でクラス継承みたいなものをやってみる

JavaScriptにはそもそもクラスなんてないし~(ry、とかプロトタイプチェーンが~(ryとかの話はひとまずスルーして、実際に使用出来そうなクラス継承を考えてみた。 クラスを継承する クラスの継承は.call()関数や.apply関数を使用します。 function A(n){ …

要素の位置を取得する

縦長スクロール型のページでナビゲーションに現在位置を表示したり、ある特定の位置までスクロールしたらイベントが発火したりするコンテンツを作る場合、該当の要素の位置を取得するという工程が必要になります。 この部分だけを切り出してユーティリティ的…

JavaScriptの設計 ~ ModelとViewを考えながら書いてみる

フォームにテキストを入力すると配列にデータをプッシュするというWEBアプリでよくありそうな処理です。 色々やると難しいので、Modelはデータを管理してViewはDOMの操作を管理するという単純なルールのみ。 さらにデータをDOMに書き出すViewを作ると簡単なM…

画像ロールオーバーをオブジェクト指向的な書き方で・・・その2

基本的な機能を使いまわして、通常のロールオーバーとフェード付きを作ってみた。 クローン画像の生成のあたりはもう少し改善できそうな気がする。 kawabataryo/imgRollover kawabataryo/imgRollover · GitHub

画像ロールオーバーをオブジェクト指向的な書き方で実装すると…

大昔のこの記事のURL元がなくなってて、どんなコードだったのか興味があったので書いてみた。 cl.pocari.org - ロールオーバーのオブジェクト指向的実装 まあこの時代なので「<img onMouseOver=''>とかでやってて、それをJSのみで実装して使いやすくしよう」、みたいな内容だった…

オブジェクトリテラルを入れ子にした場合のthisの扱いについて

下記のような書き方は機能を切り分けたりする時によくやると思いますが、オブジェクトリテラルが入れ子になった場合、入れ子のなかでthisの扱いが変わってしまいます。 var MyApp = { init: function(){ this.getFugafuga(); //fugafuga! }, util: { init: f…

JavaScript(jQuery)で画像のサイズを取得する際のエラー

ドはまりしたのでメモ。 .appendとかで生成した<img />の場合、widthやheightを指定していない事がありますが、これが画像の幅や高さを取得する際にハマる原因になったりします。 高さが取得できない!

JSONからデータを取得して配列にフィルターをかける

WEBアプリ開発でJSONデータを扱うことになったのでメモ。 実際に作り始めると色々な機能追加がありそうなので、対応出来るような書き方を目指してみた。 JavaScript (function(window,namespace,$){ function _Item(dataFilter,i,$_list){ this.member_id = …

PHPでRSSを取得しJavaScriptで表示する

RSSを取得してサイト内に表示する時、普通のリスト表示くらいなら全部PHPでやってしまえば良いのですが、インタラクティブな表現とかをする時はJavaScriptで書き出したほうが利用しやすいです。 PHP RSSを取得して、json_encode を使ってPHPの配列をJSON形…

jQueryなしで要素を取得してイベントを加える

普通に仕事してると、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を追加して名…

イベント内でのthisについて

画像のロールオーバー 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…

デザインパターン:The Module Pattern

即時関数を使ってプライベートなスコープを実現するモジュールパターン。 var Sample = (function(){ var _name = 'Ryo Kawabata'; var _age = 37; function _sayHello(){ console.log('Hello, my name is ' + _name); } return{ sayHello: _sayHello }; })(…

jQueryプラグインのテンプレート

jQueryプラグインを作成する時の基本的な形をメモ。 ;(function($){ //option var option = { option01: 'value01', option02: 'value02' } $.fn.pluginName = function(params){ params = $.extend(option,params); //core return this.each(function(){ })…