知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
【JavaScriptの正規表現】１０分で分かる基本パターン | TECH::NOTE | プログラミングをはじめる全ての人に
正規表現の作成方法 正規表現は以下２つのパターンで書くことができます。 正規表現リテラル スラッシュで囲まれたパターンで構成される正規表現リテラルを使用する方法です。 hoge = /^ab/; これは、先頭の文字が「ab」から始まるものにマッチします。 RegExpオブジェクトのコンストラクタ関数 RegExpオブジェクトのコンストラクタ関数を呼び出す方法です。 var reg = new RegExp("ab"); このやり方は、RegExpコンストラクタに正規表現のテキストをつけることにより、そのパターンにマッチする正規表現オブジェクトを生成します。 この記事では、よく使用する正規表現リテラルの方法で解説していきます。 正規表現のパターン 正規表現のパターンは、大きく分けると以下のように2つ存在します。 /hoge/ のような単純な文字のパターン、または /hoge*huga/ や/
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
ChromeのデベロッパーツールでJSをデバッグする方法（2018年版） - ICS MEDIA
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
配列とオブジェクトでデータをまとめる
オブジェクト JavaScriptの場合、オブジェクトというのは変数や配列と同じく、データの管理の方法です。簡単なデータを一時的に入れておくには変数が便利でした。データをまとめて扱うには配列が便利でしたね。 オブジェクトも、簡単に言えば、その延長線上にある、データを扱うのに便利なものなのです。オブジェクトの特長は、「名前」でデータを管理できることです。 さっそく、実際にオブジェクトを作ってみましょう。 <html> <body> <script type="text/javascript"> var seito=new Object(); seito.namae="山田太郎"; seito.seiseki=95; document.write(seito.namae+"："+seito.seiseki+"点"); </script> </body> </html> JavaScriptでオ
EaselJSの基本と簡易物理シミュレート入門 | Fuzz blog
この記事では、EaselJSを使って、ボールが跳ねる動作の簡易物理シミュレートをしながら、EaselJSとアニメーションのプログラミングの基本をなぞってみます。 今記事の、目指すべき完成形はこちらです。 完成形デモページ ボールがポーンと跳ねる動きを作成していきます。 目次 EaselJSについて EaselJSの基本的な扱い 1.ボールの作成と等速直線運動 2.ボールの跳ね返り 3.重力を与える 4.摩擦を与える まとめ EaselJSについて EaselJSについてはたくさんのブログで詳細に説明されていますが、簡潔に言えば「Canvasの2Dアニメーションがより作成しやすくなるライブラリ」と言った感じでしょうか。 FlashのAS3やっていた方は各クラスの構成など書き方や扱い方が類似しているので馴染みやすいかと思います。 公式ドキュメントが大変見やすく、参考になります。
jqueryでテキストエリア監視について - OKWAVE
実際の処理がどのような内容になっているのかにもよりますが、keyup changeの両方を指定すると、必ず最後に同じ状態で2回処理をすることになってしまうので、keyupだけで充分かと想像します。 ＞ctrl+vでペーストされた場合に2回処理されてしまうのは ＞仕方のないことなのでしょうか？？ keyupは文字通りkeyup時に発生しますので、ctrlキーだけをキーアップしても発生します。これはshiftやdelやescその他のキーでも同様です。 keyの種類によって処理を実行させたくないのであれば、keycodeを取得して判定するか、あるいは、対象としているテキストエリアの値を記録しておいてその内容が変わっていたら処理を行なうとかにすれば2回実行せずに済むかと思います。 （後者は、リアルタイムでのonchangeに近い感じかも…） ＞テキストエリアが変化したら、１度づつ処理させるには ＞
JavaScript If文の復習と、三項演算子 - Wikibooks
[編集] if文復習 [編集] if文 if文中の条件式の内部ではtrueかfalseの値を受け取る、と言ったが、正確には型ごとにその扱いは違う。 それぞれの型ごとに、falseとなる条件を挙げていくと Number型:値が0ならばfalse、NaN(Not a Number)でもfalse String型:長さ0の文字列「""」ならばfalse、それ以外はtrue Undefined型, Null型は常にfalse となっている。 [編集] 三項演算子 まずは次のコードを見て欲しい if( a>b ) a=b; else a=c; 上のif文には次のような省略記法がある (a>b)? a=b : a=c ; 上の様な式を、三項演算子という。 （名前の由来は最低３つ項が必要な式が、これしか存在しないためである） この演算の記法は、条件式に続く値を返すので a = (a>b)? b : c
[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか？ あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか？ ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決する関数のことである。 理解できないですよね？ 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが
![[JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f7de7c0278993661a11fbc3637f96292ba773aa/height=288;version=1;width=512/http%3A%2F%2Fdqn.sakusakutto.jp%2Fimages%2Fkali.jpg)
Javascriptスクレイピング！jquery.xdomainajax.js
これぞJavascriptスクレイピング！jquery.xdomainajax.js 主催している勉強会でも何度もPHPでのスクレイピングネタを取り上げていいます。 Javascriptでもスクレイピング出来ないものか PHPでのスクレイピングでもそうなのですがスクレイピングする際はHTMLのタグやIDなどのセレクタを利用して取得します。 でもこの考えがいかにもJavascriptっぽいので、だったらJavascriptでもいけるのではないかと調べていたら素敵なjQueryプラグインを発見しました。 クロスドメインの制約突破！jquery.xdomainajax.js Javascriptの場合ネックになるのがクロスドメイン間の突破です。クロスドメインとは、例えばこのサイトはwww.kaasan.infoというドメインですが、このサイトを閲覧しながら 違うドメインの他サイトにアクセスすると
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
Making Video.js Fluid for RWD
Video.js is a pretty, smooth, CSS-styleable video polyfill and my Google-Fu didn't return any responsive examples, so I grokked this out. May 03, 2012 Now, Uncle Dave is no stranger to video in responsive web design and I currently have a situation where I need to use Video.js on a project. Out of the box, Video.js isn’t super flexible. My first attempts at responsivizing1 it went awry, but I even
higash.net
higash.net 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のaudioで.mp3の音を鳴らす | nanalab *ナナラボ
Javascriptで乱数を発生させる - omnioo lab.
Processing.js drug and drop
KataPad.com is for sale | HugeDomains
