JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
ミニRSSリーダーを作ってみよう！
Google AJAX Feed APIとは？ Google AJAX Feed APIはRSS/Atomなどの各種フィードを取得するためのJavaScript APIです。最大の特徴はクロスドメインでも他のサイトのフィード情報を簡単に取得できることです。Ajaxで使われるXMLHttpRequestはセキュリティの都合上、同一ドメインでしか通信できない仕様ですが、Google AJAX Feed APIはJSONPという仕組みを使うことでクロスドメインでの通信を実現しています。 詳細は省きますが、JSONPでは Google AJAX Feed APIを使うにはまず、Googleアカウントでログインし、Google AJAX Feed APIのサインアップページで自サイトのURLを入力し、API Keyを発行をする必要があります。サインアップページはこちら（http://code.goo
JavaScriptのイベントハンドラ説明
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 を読んで，思うところあって書いてみました（決してカウンターアーティクルではない）。 むかしむかし JavaScript を触っていた むかしむかしに書かれた JavaScript の本で勉強している／した 人向けに。大元記事（そろそろ本気で学びませんか？ | Think IT（シンクイット））の想定読者に近いかなと思います。よって以下は JavaScript の初学者にはまったくおすすめできない（余計な知識がついてしまう）です。 Step 1: はじめのいっぽ ボタンを押したらメッセージボックスが出現する HTML を書いてみます。 <html><body> <script type="text/javascript"> function ShowMes
本気でやるならonclick属性は避けてライブラリを活用すべき - id:HolyGrailとid:HoryGrailの区別がつかない日記
第1回 そろそろ本気で学びませんか？ | Think IT これ、今この記事書いてる時点で650以上ものブクマがされているんだけれども、あまり内容がよろしくない。 というのも、解説はとても丁寧ですごくよい内容なのだけど、サンプルコードの書き方がどうも古くさい。 onclick属性とか、今時のフロントエンドエンジニアはそんな書き方はしない（と思う）。 なぜonclickをあまり推奨しないのか やっぱり、エンジニアとデザイナーorマークアッパーとの分業の点でHTMLの属性にスクリプトを書いちゃうのはあんまりよろしくない。 たとえばの話だけど関数の名前を変えたかったり、だとか、HTMLを変更したり、っていうときにミスが起こりやすくなってしまう。 これは分業していなくてもどちらにしろ発生してしまうことだと思う。 他にも前に書いたのだけど、aタグとかでonclickしちゃうとhrefにreturn
[JS]アプリケーション構築も可能なライブラリExt 2.1, Ext GWT 1.0がリリース
高性能なインターネットアプリケーションの構築も可能なJavaScriptライブラリ「Ext 2.1」とJavaライブラリ「Ext GWT 1.0」が、2008年4月21日にリリースしました。 Ext JS 2.1 and Ext GWT 1.0 released, preview of Ext JS 3.0 Ext 2.0からの主な変更点は、バグフィックス・パフォーマンスの改善となっており、今回追加されたデモを紹介します。 また、次期バージョンのExt 3.0のデモもいくつかご紹介。 Ext 2.1のリリースの変更点は、Release Notes for 2.1.0になります。 Ext 2.1のデモ
[JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto
prettyPhotoは、角丸のかわいい感じのフレームやパーツを使用した、画像を拡大表示するLightbox風のスクリプトです。 prettyPhoto 背景色、拡大表示時のフレーム、ローディング時のアニメーション、ボタンなど他のLightbox風スクリプトよりかわいくデザインされています。 prettyPhotoで画像を拡大表示するには、スクリプトを外部ファイルとして、画像箇所に下記のようにrel属性に「prettyOverlay(一枚用)」「prettyOverlay(ギャラリー用)」を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <a href="fullscreen.jpg" rel="prettyOverlay" title="画像の説明"><img src="thumbnails.jpg" alt="
[JS]高いカスタマイズ性を備えたLightbox風のスクリプト -nyroModal
nyroModalは、アニメーションを伴って表示・非表示される、高いカスタマイズ性を備えたモーダルウインドウを生成するスクリプトです。 nyroModal デモページ nyroModalが生成するウインドウには、テキストなどのコンテンツをはじめ、複数の画像を使用したギャラリーや動画、AJAXコンテンツやフォームなどを表示することができます。 また、デフォルトのままでも気持ちよく表示・非表示されるアニメーション、背景、ウインドウなどをカスタマイズすることも可能です。 nyroModalはjQueryのプラグインのため、動作にはjquery.jsが必要です。
nyroModal v2 :: jQuery Plugin
Edito Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It's easy to use and easy to design. The big problem I experienced with every plugin I tried either using Prototype/Scriptaculous or jQuery is the customization. They say you can do whatever you want simply but that's not fully true. The default CSS works fine
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
JavaScript - InfoQ
あなたにとって重要なトピックや同僚の最新情報を入手しましょう最新の洞察とトレンドに関する最新情報を即座に受け取りましょう。 継続的な学習のために、無料のリソースに手軽にアクセスしましょうミニブック、トランスクリプト付き動画、およびトレーニング教材。 記事を保存して、いつでも読むことができます記事をブックマークして、準備ができたらいつでも読めます。
ProtoFlow - Coverflow-like javascript library
ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff! Well mainly because I felt like it. There are few other coverflow implementations out there but I couldn't find any that used Prototype and Scriptaculous! Its fairly easy to use this lib. Just follow the steps: Add Protot
正規表現（RegExp） - とほほのWWW入門
str = "ABCDEF"; re = /DEF/ig; console.log(re.test(str)); // => true マッチング str.match(regexp) str に対して正規表現 regexp でマッチングを行い結果を返します。マッチしなかった場合は null を返します。 const ret = "abc123".match(/[0-9]+/); console.log(ret); // => ['123', index:3, input:'abc123', groups:undefined] console.log(ret[0]); // マッチした文字列: '123' console.log(ret.index); // 見つかった場所のインデックス: 3 console.log(ret.input); // 入力文字列: 'abc123' グローバルフ
prototype.js逆引きサンプル集 - JavaScriptist
はじめに bookmark prototype.jsの概要 ユーティリティ関数 bookmark 指定idのエレメントを取得 - $ 指定idのエレメントのvalueを取得 - $F エレメントのリスト形式を配列形式に変換 - $A オブジェクトをHash形式に変換 - $H 指定した範囲のリストを返す - $R prototype.jsで追加された機能 bookmark Ajax Ajaxリクエストを行う - Ajax.Request Ajaxで指定エレメントの内容を書き換える - Ajax.Updater Ajaxで指定エレメントの内容を定期的に書き換える - Ajax.PeriodicalUpdater 定期的に指定の処理を行う - PeriodicalExecuter Enumerable リストに特定の関数で処理させる - Enumerable.each リストの全ての値を調べる
[JS]軽量で、簡単に設置できるLightbox風のスクリプト -iBox
iBoxは、画像・動画・インラインコンテンツ・ドキュメント・フォームなどをLightbox風のエフェクトで表示するスクリプトです。 iBox v2 iBox - Lightweight inline popup Lightbox風のスクリプトは多数ありますが、その多くはjQueryやPrototypeなどのライブラリと一緒に設置しないと動作しなかったりしますが、このiBoxは単独で実装することができます。 また、容量も18.5KBと他の多くのスクリプトと比べ軽く、Packerを使用すると7KBになります。 iBoxの実装方法は、「ibox.js」と「ibox.css」を外部ファイルとして指定し、下記のコードを記述します。 titleは、キャプションとして表示されます。 画像 <textarea name="code" class="html" cols="60" rows="5"> <a
とほほのJavaScriptリファレンス
とほほのJavaScript入門 (JavaScriptリファレンス) [戻る] [索引] 基本編 JavaScript って何？ JavaScript とは？ JavaScript と Java の関係は？ ECMAScript とは？ JavaScript のバージョン ES5 の新機能 ES5.1 の新機能 ES2015(ES6) の新機能 ES2016(ES7) の新機能 ES2017(ES8) の新機能 ES2018(ES9) の新機能 ES2019(ES10) の新機能 ES2020(ES11) の新機能 ES2021(ES12) の新機能 ES2022(ES13) の新機能 ES2023 の新機能 ES2024 の新機能 ES2025 の新機能 まずは始めてみよう 準備するもの 「Hello world!!」と書いてみよう 時刻を表示してみよう 動く時計を表示してみよう Ja
Private Members in JavaScript
Private Members in JavaScript Douglas Crockford www.crockford.com JavaScript is the world's most misunderstood programming language. Some believe that it lacks the property of information hiding because objects cannot have private instance variables and methods. But this is a misunderstanding. JavaScript objects can have private members. Here's how. Objects JavaScript is fundamentally about object
JavaScript: 世界で最も誤解されたプログラミング言語 - 実用
翻訳 原文:JavaScript: The World’s Most Misunderstood Programming LanguageCopyright 2001 Douglas Crockford. All Rights Reserved Wrrrldwide. JavaScript(別名：Mocha、LiveScript、JScript、ECMAScript)は、世界で最も人気のあるプログラミング言語の一つです。世界中のほとんどのパソコンには、少なくとも1つはJavaScriptインタープリタがインストールされ動いていることでしょう。JavaScriptは、WWWのスクリプト言語としての確かな地位により広く利用されるようになったのです。 しかしその高い普及率にもかかわらず、JavaScriptが汎用的でダイナミックな優れたオブジェクト指向プログラミング言語であることはあまり知られて
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryサンプル集 | DesignWalker
[JS]アクセシブルな円・棒・折れ線グラフとスライダーのスクリプト