[jQuery]HTMLタグのidを動的に生成(or変更)する方法
例えば、Twitterの新しいつぶやき一つ一つにidがついていくが、JavaScriptでどうやってidを生成、変更しているのかという話。 jQueryのattr()を使う。 もし、idを'oldid'→'newid'に変更したいのなら、 $('#oldid').attr('id', 'newid'); とすれば良い。 しかし、もっと動的に、生成された番号などをid内に入れたいときなどは、 例えば、attr(function(i){...})を使う。 以下はClick meボタンを押すと新しいpタグが挿入されていき、TESTボタンをクリックすると、上から４番目のものの背景が赤になるというコード。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascri
Enter/Leave とトランジション一覧 — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
ractivejs.org| The diamond age of web development
Live, reactive templating ractivejs.orgis a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default. Powerful and extensible Two-way binding, animations, SVG support and more are provided out-of-the-box – but you can add whatever functionality you need by downloading and creating plugins. Opt
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
API — Vue.js
最終更新日: 2021年5月22日 グローバル設定Vue.config は Vue のグローバル設定を含んでいるオブジェクトです。あなたのアプリケーションが読み込まれる前に、下記のプロパティを変更することができます: silent 型: boolean デフォルト: false 使用方法: Vue.config.silent = true すべての Vue のログと警告を抑制します。 optionMergeStrategies 型: { [key: string]: Function } デフォルト: {} 使用方法: Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option:
JavaScriptで関数型プログラミングを強力に後押しするUnderscore.jsのおすすめメソッド12選（lodashもあるよ） - Qiita
はじめに この記事では、関数型プログラミングを強力に後押しするライブラリ、 Underscore.jsとlodashを紹介します。 両ライブラリとも_で使用できます。 ほかのライブラリにも依存せず、 現在フロントでもサーバでもかなり人気なライブラリです。 個人的にもこれなしでは。。 といった必須なライブラリとなっています。 また、Backbone.jsといった人気なフレームワークが、 Underscoreに依存していたりします。 Underscore.js GitHub: https://github.com/jashkenas/underscore Document: http://underscorejs.org/ 和訳: https://github.com/enja-oss/Underscore lodash GitHub: https://github.com/lodash/lo
canvasで色相環 - MEMO:はてな支店
canvasを使って色相環を描いてみた http://kar.s206.xrea.com/js/colors.html 色の変化のさせかたを自分で考えるのが目的だったのでグラデーションの技は使わず１ピクセルずつ処理してる。 なのでかなり重い処理になってるので注意。 RGB各色が0〜255の256階調なので、半径256ドット、60度(π/3ラジアン)を256分割にした。 関数psetsの引数でrのみの指定がメインとなる色、r*th/255が徐々に混じる色、0が使わない色。 関数nの255-rを生かすと中央が白から始まる円、0(=255-255)にすると中央が黒から始まる円になる。 <html> <head> <title>Colors</title> <script> window.onload = function(){ c = document.getElementsByTagName(
色の処理に特化した軽量ライブラリ「Chroma.js」
こんにちは、古見澤（コミザワ）です。最近は寒いですね。 自宅に加湿器を導入して潤いが増した一方、結露が酷くて窓際や玄関がカビそうで困ってます。 さて今回は Chroma.js という色に関するJSライブラリに触れる機会があったのですが、日本語の記事が殆ど見つからなかったため、この紹介をしようと思います。 Chroma.js とは 色を補正したり、色空間の変換をしたり、カラースケールを設定して色を得る事ができる、色に関する振る舞いに特化した軽量（32.8 KB）なJSライブラリです。 多くの色空間に対応しており、CSSやJavaScriptで扱いやすい形で色情報を取得することができます。 ソースはgit上にあり、ライセンスは BSD license です。 Chroma.js サンプル 下の例は色の補正機能を使い、X11カラーのpink（#ffc0cb）をベースに、明るさを下げ、彩度を上げ、
橋本商会 » tesselをカメラ付きwebサーバーにする
Node.jsが動くマイコンボードtesselを買ったのでさっそくカメラモジュールとwifiとtiny-routerというWAFを使ってtessel自体をwebサーバーにし、撮影した画像を配信できるようにしてみた。 ライブカメラというほどの速度は出ないけど、tessel単体で定期的な撮影とhttpでの配信ができた。 マイコンでNode.jsが動くとはいっても、例えばTCPのlistenはWiFiチップと通信しているからチップの状態次第で失敗するし、WiFiの設定をしている間にcameraのreadyイベント取りこぼしたりするから色々とタイミングがシビアでつらい所がある。でもNodeなのでeventemitterがあるからそれほどストレスフルではなくて面白い。 WiFi tesselのwifiは802.11b/gの1〜11チャンネルしか使えない。WiFiアクセスポイントがチャンネル12〜14
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
便利なjavascriptテクニック集 - Thujikun blog
今回はjavascriptで知ってる人にとっては当たり前だけど、そうでない人は全然知らないようなテクニックをまとめていきます。 globalを汚さない無名関数スコープ javascriptの問題のひとつとしてスコープがよくとりあげられますが、ここではグローバルスコープを汚さない手法を紹介していきます。 悪い例 1 2 // これはグローバルスコープ var foo = 'bar'; ちなみにglobalスコープとはwindowオブジェクトにプロパティを追加していくことと同義です。 1 2 3 // 下記の２つは結果として同じことを行っている。 var foo = 'bar'; window.foo = 'bar'; 解決するには下記のように無名関数を用います。 1 2 3 4 5 // 無名関数をつくり即時実行 ;(function() { // スコープが関数内で閉じる。 var foo
Controls and Dashboards | Charts | Google for Developers
Send feedback Controls and Dashboards Stay organized with collections Save and categorize content based on your preferences. outlined_flag Dashboards organize and manage multiple charts that share the same data, while controls are UI widgets that manipulate the data displayed in a dashboard. Creating a dashboard involves setting up HTML elements, loading necessary libraries, preparing your data, c
時系列データのグラフをjQueryとFlotで描く
JSONの時系列データがたくさん手に入りました。なにせJSONなんだし、JavaScriptを使ってブラウザにインタラクティブなグラフを簡単に描けそうな気がします。そこでとりあえず折れ線チャートを描くことにしました。むかしjQuery用のFlotというライブラリを使ったことがあったので、今回もこれを使おうと思ったのですが、完全に使い方を忘れていた！そういえば、むかし使ったときも、API.txtという英文がだらだら書かれたテキストファイルしかドキュメントがなくて面倒だったのを忘れていました。そこで今回は備忘録を残しておくことにしたしだい。 なお、Flotはべつに時系列の折れ線チャートを描くためのライブラリではないので、ほかにもいろいろなチャートが描けるはずですが、とくに調べていないので知りません。あくまでも時系列データの折れ線チャートを描くことが目標の備忘録です。 下準備描画したい時系列デー
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro
Theseus: Understanding Asynchronous Code
Theseus: Understanding Asynchronous Code Tom Lieber MIT CSAIL Cambridge, MA 02139 USA tl@csail.mit.edu Figure 1: Theseus with two pseudo-breakpoints active. Copyright is held by the author/owner(s). CHI’13, April 27 – May 2, 2013, Paris, France. ACM 978-1-XXXX-XXXX-X/XX/XX. Abstract The behavior of JavaScript is difficult to understand due to the language’s asynchronous and dynamic nature. In part
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iterate over object attributes and modify them
humble software development - flotr
NameBright - Coming Soon
Jquery.inputmask by RobinHerbots
Plunker