知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て - 三等兵

2011/08/23 1470 users Greasemonkey jQuery 即時関数 三等兵 全て

JavaScript(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも... 続きを読む

JavaScript アニメーションのデザインパターン

2012/05/13 955 users アニメーション JavaScript デザインパターン 変色

JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() ... 続きを読む

JavaScriptの巧い書き方 - Archiva

2007/06/16 942 users YUI 玉石混淆 Archiva 発端 言語

JavaScriptの巧い書き方 2007–06–16 Webに言語は数あれど、特に玉石混淆の激しいJavascriptの書き方について纏めてみた。間違い指摘大歓迎！ 発端はYahoo!の Eric Miraglia による、YUI 式モジュールの作り方をまとめた記事。ざっくりまとめると、以下の手順になる。 YAHOO.myProject.myModule = function () { //"p... 続きを読む

EfficientJavaScript - Dev.Opera - 効率的な JavaScript

2007/04/21 922 users Dev.Opera eval コンストラクタ 関数 目次

EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-final... 続きを読む

昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog

2019/09/13 633 users 昨今 aoma blog JavaScript class

はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClas... 続きを読む

jQueryでスクロールしても上に固定されるメニュー｜Webpark

2011/03/23 629 users jQuery Webpark scroll window 上部

よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。javascriptの部分は次のようになっています。$(function() {$(window).scroll(function(){var scrol... 続きを読む

jQuery の .on() と .off() を理解する - tacamy memo

2013/03/03 568 users jQuery foo OFF click 記述方法

2013-03-03 jQuery の .on() と .off() を理解する 初心者向けの本とかだと、イベントは jQuery オブジェクトの後に直接指定する、 $('.foo').click(function(){...}); のような記述方法で説明されている場合が多いですが、少し複雑なことをしようとすると、それだと困ることが出てきます。そんなときに便利なのが .on() を使ったイベント設... 続きを読む

プライベートメソッドのユニットテストは書かないもの？ - QA@IT

2013/03/13 559 users プライベートメソッド クロージャ foo ユニットテスト 関数

JavaScript を書いています（ブラウザがターゲットです）。手動テストが面倒になって、 Jasmine を使ってテストを書きはじめています。 オブジェクトに含まれる関数（プロパティ）の数が増えてきたので、外から呼ばれることがないものはプライベートメソッドのように扱おうと、クロージャを使って、以下のように書きました。 var Foo = function(foo) { this.foo = f... 続きを読む

GoogleMapsEditor - GoogleMapsAPIを利用した地図コンテンツをプログラムなしで作成できる編集ソフトです。

2005/07/29 461 users createElement GoogleMapsAPI

GoogleMapsAPIを利用した地図コンテンツをプログラムなしで作成できる編集ソフトです。config.macros.AmazonBanner = {};\nconfig.macros.AmazonBanner.handler = function(place,macroName,params)\n{\n var e = document.createElement('iframe');\n ... 続きを読む

Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509

2010/11/19 451 users jQuery Ajax window タブ切替 スクリプト

Ajaxやタブクリックなどのイベントでもブラウザの「戻る」「進む」を有効にすることができるjQueryのhashchange eventというプラグインを紹介します。同じような効果を得られるスクリプトより断然使いやすいのでおすすめです。 使い方はとても簡単で windowにhashchangeイベントをbindするだけです。 $(window) .hashchange(function() { H... 続きを読む

IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念

2006/09/10 407 users IT戦記 概念 setInterval setTimeout

javascript おそらく、JavaScript を使いこなす肝はsetInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("... 続きを読む

JavaScriptのコードサイズを圧縮するための変態テクニック集がすごい | IDEA*IDEA

2011/05/30 394 users IDEA 強火 After 犠牲 可読性

「強火で進め」で紹介されていた「Byte-saving Techniques」がすごいっす。可読性を犠牲にしてでも、とにかくサイズを圧縮したい！という人のための変態テクニック集ですｗ。 いろいろ参考になったのですが「へぇ」というものを中心に紹介してみます。 function(t,d,v,i,f){...} // before function(a,b,c,d,e){...} // after ↑ ... 続きを読む

即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように

2011/04/23 386 users 即時関数 ローカルスコープ カッコ 無名関数 書き方

JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ローカルスコープの存在しないJavaScriptにおいて擬似的にローカルスコープを再現します。 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？　ためしにfunction(){ ... 続きを読む

アロー関数が実装された - JS.next

2014/07/23 373 users JS.next 無名関数 実装 アロー関数 ES6

2014-07-23 アロー関数が実装された ★★★ ES6 新仕様実装 V8 概要 ES6を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける　　　[3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } ... 続きを読む

ウェブ開発者必携の「Firebug」をiPhone, iPadで利用する方法*二十歳街道まっしぐら

2011/12/14 373 users iPhone Firebug return Safari 方法

まず、iPhoneのSafariでどこでも良いのでページを開いてブックマークしましょう。 そして「How to use Firebug on your iPad and iPhone」に書かれているJavaScriptをコピーします。 javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'N... 続きを読む

BBCが使っているJavaScriptのライブラリ『Glow』が遂に一般公開！ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/07/08 333 users jQuery glow IDEA ＢＢＣ ノウハウ

これはjQueryなんかと競合していく・・・のかな。BBCが実際に使ってきたJavaScriptのライブラリが公開されたようです。 BBCといえばネット上の先進的な取り組みで一目置かれていますが、そのノウハウをぎっしり詰め込んだライブラリになっているようですよ。 雰囲気をつかんでいただく為に一応お約束の「Hello World」をば。こんな感じですね。 glow.ready(function() ... 続きを読む

ちょっと高度にJavaScript／クロージャの基礎 ｜ クラスメソッド開発ブログ

2012/10/04 291 users クロージャ スコープ 変数 別物 関数

JavaScriptのクロージャを一言で言うと、「自身が定義されたスコープで変数を解決する関数」となります。 少し複雑ですが、マスターすれば何かと便利な概念なので、解説したいと思います。 ちなみに、JavaScript未経験なFlex開発者にオススメしたいClosure ToolsのClosure Toolsとは別物です。まぎらわしくてすみません。 例 var f = function() { v... 続きを読む

JavaScriptの無名関数の実行 (function(){})() と (function(){}()) の違い | 圧縮電子精神音楽浮遊構造体

2011/12/17 279 users 無名関数 Advent Calendar 半分 実行 ネタ

2011年12月17日土曜日 JavaScriptの無名関数の実行 (function(){})() と (function(){}()) の違い JavaScript Advent Calendar 2011 (オレ標準コース) 17 日目、polygon_planet です。 ずっと Advent Calendar 参加してみたいなぁと思ってたんですが ネタが思いつかない日々で半分諦めてたんで... 続きを読む

JavaScriptで継承やるときにprototype書きまくるのめんどい人は - あ、いしかわですね

2010/03/15 279 users parent alert this.name Hello

JavaScript, Tips | 07:16 | こうすればいいよ function Parent() { this.name = "parent"; } Parent.prototype = { sayHello: function() { alert("Hello! I'm "+this.name+"!"); } } function Child() { this.name = "chil... 続きを読む

最近覚えたシェルスクリプトの小ネタ - カメニッキ

2016/06/28 274 users シェルスクリプト カメニッキ xargs XXXX find

2016 - 06 - 28 最近覚えたシェルスクリプトの小ネタ シェルスクリプト 神から教えていただいた。忘れないように書いとく xargsでfunctionを叩く 下の例だと find xxxx | xargs cp xxxx ってかけば良さそうでイマイチだけど、もっと複雑な処理やらせたいときに。 前はこう書いてた #!/bin/bash for x in ` find /var/www -n... 続きを読む

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由: 小粋空間

2013/06/11 270 users 小粋空間 ソーシャルボタン Twitter share 理由

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="t... 続きを読む

JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita

2024/02/21 264 users Qiita script src height width

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.... 続きを読む

IT戦記 - それすぐ実行！JavaScript！

2006/10/15 264 users IT戦記 実行 JavaScript Firebug 関数

javascript 思った JavaScript はすぐに実行してみましょう！ブラウザの URL 入力欄に javascript:(function() { /*実行したいコードを書く*/ })() FireBug を使ってる人は、コンソール開いて実行したいコードを書く。 たとえばこんなことができます。これらの例は僕が日頃使っているものです。 グローバルで使える関数を列挙する(Firefox O... 続きを読む

JavaScriptでdocument.cookieへのアクセスを禁止する - 金利0無利息キャッシング – キャッシングできます - subtech

2012/07/09 246 users subtech document cookie false

JavaScriptからdocument.cookieへのアクセスを禁止するという手法が知られていて Object.defineProperty(document, 'cookie', { get: function(){return false}, set: function(){return false}, configurable:false }); XSS界で有名なMarioさんのスライド... 続きを読む

[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト | コリス

2009/06/22 242 users コリス jQuery スクリプト エフェクト アニメーション

背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 背景画像 スクリプトのベースにはjQueryが使用されており、下記のスクリプトをプラグインとして使用します。 $(function() { // *** // Scrolling background // *** // height of back... 続きを読む