JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
pdf.jsをインストールして動かしてみる | DevelopersIO
1.node.jsをインストールする node.jsをwgetコマンドでダウンロードします。 $ wget http://nodejs.org/dist/node-latest.tar.gz tar.gzを展開し、展開フォルダ内に移動します。 $ tar zxvf node-latest.tar.gz $ cd node-v0.8.19 2.依存パッケージをインストールする node.jsをインストールする前に、node.jsをコンパイルするために必要な以下のモジュールが必要だったのでインストールします。 build-essential libssl-dev build-essentialをインストールする $ sudo apt-get install build-essential libssl-devをインストールする $ sudo apt-get install libssl-dev
フェードイン・アウトで画像を切り替える jQuery smart-crossfade.js | Style-5
フェードイン・アウトしながら画像を切り替える jQuery smart-crossfade.js DEMOページ smart-crossfade.js からファイルをダウンロード。 (ファイルがDL出来ない場合、最下部のソースをコピーし smart-crossfade.js でファイルを作成して下さい。 header内にsmart-crossfade.jsファイルを読み込ませます <script src="/smart-crossfade.js" type="text/javascript"></script> 「a img」 要素の全てが対象となりますので、画像拡張子の後ろに 「_off」 「_on」 をそれぞれの画像に加えます 例：元画像 <li><a href="#"><img src="images/gazou01_off.png" alt="motogazou" /></a></
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで Webブラウザを用いJavaScriptで実装をしたEPUB 3リーダーが相次いで公開されました。1つはEPUB 3を策定したIDPF（International Digital Publishing Forum、国際電子出版フォーラム）が後押しするEPUB 3リーダーのリファレンス実装開発プロジェクトのReadiumが発表した「Readium.js」、もう1つは、米Berkeley大学による「Epub.js」です。 どちらもgithubでオープンソースとして公開されています。 電子書籍のフォーマットとして策定されたEPUB 3は、HTML5/CSS3などのWeb標準がベースになっています。そのため、EPUB 3リーダーはWebKitなどのWebブラウザのレ
実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね＞＜ とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
入門 モダンJavaScript
TOPICS Programming , Web , JavaScript 発行年月日 2013年02月 PRINT LENGTH 524 ISBN 978-4-87311-605-1 原書 Modern JavaScript: Develop and Design FORMAT 本書は、JavaScriptの“モダンな”プログラミングを視点として、言語の基礎から、アプリケーション開発に必要な知識までを解説する入門書です。JavaScriptの初心者や、JavaScriptに触れたことはあるもののなぜそうするのかきちんと理解できていない初級者を主な対象としています。丁寧な解説で、言語の基礎から、開発に必要な基礎知識、さらにはアプリケーション開発のためのテクニックまでを提供。JavaScriptのモダンな扱い方だけでなく、なぜそう書くべきかという裏付けを得ながら理解を深めることができます。
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
Twitterが自社製JavaScriptフレームワーク「Flight」をオープンソースで公開
Twitterは自社サービスで利用しているJavaScriptフレームワーク「Flight」をオープンソースで公開しました。 Flightはコンポーネントベースの軽量フレームワーク。開発者に対して非同期で独立性の高いコンポーネントを定義する機能を提供することで、デバッグ、テスト、イベントハンドリングなどを容易にするフレームワークのようです。 Githubのページでは以下のように説明されています。 Components cannot be directly referenced, instead they communicate by triggering and subscribing to events. Consequently every component, and every component API, is entirely decoupled from every othe
Google AJAX Feed API入門
他のサイトが配信しているATOMやRSSフィードをJavaScriptを使って取得しようとした場合、同一生成元ポリシー(Same-Origin Policy)の制限によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要でした。 Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。 ここではGoogle AJAX Feed APIを使ってATOMやRSSフィードを取得する方法などを解説していきます。 Google AJAX Feed APIとは ドキュメント
JavaScriptのコード無しでWeb APIからデータ取得、表示まで実行·爆速JSONP MOONGIFT
爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。 去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである爆速JSONPを紹介します。 サンプル。電力消費量を取得しています。 ソースです。取得したJSONデータをテンプレートとして当てはめています。 爆速JSONPはデータをJSONPを使って取得し、その結果を予め決められたテンプレートに埋め込んで表示する仕組みです。data-*要素を使っており、JavaScriptのコードを書かずに実装できてしまうのが利点です。 爆速JSONPはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
JavaScript の new 演算子の意味: Days on the Moon
JavaScript における new 演算子の動作は大まかにいって以下のとおりである。(new F() とした場合。) 新しいオブジェクトを作る。 1 で作ったオブジェクトの [[Prototype]] 内部プロパティ (__proto__ プロパティ) に F.prototype の値を設定する。 F.prototype の値がオブジェクトでないのなら代わりに Object.prototype の値を設定する。 F を呼び出す。このとき this の値は 1 で作ったオブジェクトとし、引数には new 演算子とともに使われた引数をそのまま用いる。 3 の返り値がオブジェクトならそれを返す。そうでなければ 1 で作ったオブジェクトを返す。 ここで「オブジェクトである」というのはプリミティブ値 (文字列、数値、真偽値、undefined 、null) ではないということだ。new Stri
prototype図示とnewの挙動 - web newbie
多くの方に読んでもらえたのが何より嬉しい。 ブログ、書いて良かった、純粋に。ありがとうございます。 でも、はてぶページとか社内とかで、 「でも...もう一歩しっくりこない」という声もあって。。 話をしてて、以下の２つが理解できると、 Javascriptのprototype指向がしっくりくる（かもしれない）ことがわかった。 で、僕なりにそれをまとめてみようと思った。（くどくない程度に^^;） それは次の(1)と(2)の理解である。 （１）prototypeとオブジェクトの関連を図でイメージする。 （２）newの挙動を把握する。 この2つをきっちり理解すれば、 少なくとももう少しprototype指向がしっくりくると思う。 だから、前の記事でよく分からなかった人は、読んでいただければと思う。 題材は前回の記事と同じく、赤い箱と青い箱を取り上げる。 var Box = function(siz
web newbie - Javascript初心者からみたprototype
http://d.hatena.ne.jp/amachang/20070413/1176421425 勉強会のあと、そしてこの記事の後、 もう一度自分の中でprototypeについてまとめてみた。 下の実行結果を見て、首をかしげた人は是非とも読んでいただければと思う。 （って、首をかしげるのは僕だけか？！） var Box = function(size){ this.size = size; }; Box.prototype = { color: "red" }; var box = new Box(10); alert(box.color); // red Box.prototype = { color: "blue" }; alert(box.color); // red var box2 = new Box(11); alert(box2.color); // blue Box.p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2013/10/20131008.php
yuguri.com
1216彩票-官网平台