© Jan Paul Posma and University of Oxford, 2012. Home | About | GitHub | Twitter | Facebook | “Peeking through the blindfold”
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか? 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
JavascriptライブラリUnderscore.jsがすごい便利。 すごい便利なのにもかかわらず、あんまり日本語の情報がなかったので、公式のドキュメントをスピリチュアル抄訳してみた。 http://documentcloud.github.com/underscore/ Collection Functions each _.each(list, iterator, [context]) listの要素をイテレートする。すべての要素はiterator関数にyieldされる。iteratorには(element, index, list)の3つの引数が渡される。もしlistがJavascript Objectだった場合は(value, key, list)になる。 _.each([1, 2, 3], function(num){ alert(num); }); => alerts eac
これからはじめるフロントエンドJavaScript:はじめまして。JavaScript(1)(1/2 ページ) はじめに 一昔前、リッチなWebサイト、Webサービス のUI構築は、Flashを代表格とするプラグインを利用したUIの構築が一般的でしたが、近年、Flashなどのプラグインを搭載しないモバイル端末の登場により、その情勢が変わってきました。 もともと、2000年代前半からJavaScriptによるリッチなUI構築に関しては注目されてきましたが、ブラウザが搭載するJavaScript実行エンジンのパフォーマンスや、体系的に構築するためのフレームワークがそろっていないこともあり、まだまだ普及するレベルではありませんでした。 2000年代後半から、prototype.jsを皮切りに、JavaScriptを実行する際に頭を悩ませてきたブラウザ間の仕様の違いを吸収してくれるようなライブラリ
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか? ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた!以下、情報ソースはなるべくECMAScript仕様書(3rd)を元にするようにして書きました なぜ分かりづらいのか? そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか?自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
ãã®ããã¥ã¡ã³ãã§ã¯ãYouTube JavaScript Player API ã®ãªãã¡ã¬ã³ã¹æ å ±ãæä¾ãã¾ãã ç®æ¬¡ æ¦è¦ JavaScript API ã使ç¨ããã¨ãYouTube ã®åãè¾¼ã¿åç»ãã¬ã¼ã¤ã¼ã JavaScript ã§ã³ã³ããã¼ã«ã§ãã¾ããåçãä¸æåæ¢ãæå®ããåç»ä½ç½®ã¸ã®ç§»åãããªã¥ã¼ã 調æ´ããã¥ã¼ããªã©ãé¢æ°ãå¼ã³åºããã¨ã§ãã
Captcha security check actyway.com is for sale Please prove you're not a robot View Price Processing
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「クリックするとメッセージを表示する」という,テキストボックスがある。 このテキストボックスの動作テストをしたい。クリックのイベントを自動的に発生させ,ちゃんとメッセージが出るかをコードで確認する。 <body> イベントの発生源となるテキストボックス: <input type="text" onclick="onclick_func()" id="my_text"> click時に,ここにメッセージが表示されます。 <div id="my_div"></div> テスト: <input type="button" onclick="test_onclick()" value="onclickの単体テストを実行"> <script language="JavaScript">
「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を発表 ~最も支持されるJavaScriptの表現方法とは~ 株式会社アイ・エム・ジェイ(JASDAQ 4305)のグループ会社である株式会社IMJモバイル(本社:東京都目黒区 代表取締役社長:川合純一)は、「スマートフォンのインタラクションデザインに関するユーザビリティ調査」を実施いたしました。 調査期間は2011年9月14日~9月15日、有効回答数は412名から得られました。 調査結果概要 スマートフォンの普及に伴い、インタラクション性が高いサイトが求められています。 スマートフォンサイトを構築する際の効果的な表現方法としてJavaScriptの活用がありますが、実際にJavaScriptを使った表現方法がユーザーに与える印象について実例を用いた調査を行いました。 調査の結果、シンプルにわかりやすい表現方法はユーザ
UPIE8Kuma.js とは 特徴 UPIE8Kuma.js を設置したページを「インターネットエクスプローラー 6」で閲覧した場合、ウインド左下にクマの顔が表示されます。 表示されたクマをクリックすることで「インターネットエクスプローラー 6」から「インターネットエクスプローラー 8」へアップデートを推進する吹き出しが表示され、 吹き出しの中のボタンをクリックすることで アップデートについて詳しく説明したページ へ遷移します。 ※ このライブラリは Internet Explorer 6 ユーザーを対象に作成しているため Internet Explorer 6 以外では動きませんが、 このページではご覧の通り Internet Explorer 6 以外(Internet Explorer 7 、Internet Explorer 8)でも試験的に動くようにしてあります。 使用方法 配
2011.09.12 Web JavaScript Google Chart Tools をもう少し簡単に使うJavaScript作った(のに忘れてた) そらいっち(@soraiy)がGoogle Chart Toolsの記事をポストしたのを見て、少し前に調べていたのを思い出しました(そらいっちありがとう!)。 簡単にグラフを作れる Google Chart Tools を使ってグラフを作成する方法 Google Chart Tools はGoogleが提供している高機能なグラフを作ってくれるAPIです。 前に調べたときに「ちょっと使いずらいな~」と感じて、もう少し簡単に使えるようにしてみました。 サンプル ソース(円形グラフの場合) HTML <div id="GRAPH"></div> JavaScript <script src="http://www.google.com/jsap
プログラミング基礎文法最速マスターまとめにMooToolsが無かったからカッとなって(ry MooToolsについての概要はウィキペディアをご覧ください。 Wikiにも書いてある通り、MooToolsはオブジェクト指向の慣習とDRY原則に従っているため OOPな言語を習得しているのであればその知識が大いに役立つフレームワークです。 巷で人気があるjQueryとの違いについてはjQuery vs MooToolsが詳しいです。 私がMooToolsを選んだときは既にjQueryが登場していましたが、遭えてMooToolsを選んだのは 「PHPと同時進行で覚えやすかった」のと、「文法がJavaScriptのそれであるから」です。 PHPのことがなかったりJavaScriptの基礎が無ったりしていたらjQueryを選んでいただろうと思います。 1つ覚えてしまえば後は似たようなものなので、今自分に
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
JSer.info #702 - typescript-eslint v8がリリースされました。 Announcing typescript-eslint v8 | typescript-eslint ESLint 9のサポー...
MooToolsは中級から上級のJavaScript開発者のために設計された軽量で、モジュール化された、オブジェクト志向のJavaScriptフレームワークです。これを使えば、エレガントで、きちんとした裏付けのある、一貫したAPIにより、パワフルに、柔軟に、そしてクロス・ブラウザなコードを書くことができます。 MooToolsのコードは標準準拠しており、どんな警告も出しません。拡張性のあるコーディングと、わかりやすい変数名:ブラウズしやすく、わかりやすい。 オープンソース・ライセンス MooToolsはオープンソースMITライセンスの元にリリースされています。つまり、あなたはどんな状況でもこれを使用し、修正することができるのです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く