jQueryで年月カレンダーを一瞬でプルダウン化！「Facebook Like Datetime Picker」
twitter facebook hatena google pocket フォームで例えば誕生日を入力させたい時、1つ1つ年をoptionに入れるのは億劫ですし、年が変わった時に変更が面倒です。 それでJavaScriptライブラリ「jQuery」のプラグインJquery Facebook Like Date Time Pickerを利用します。 sponsors 使用方法 Jquery Facebook Like Date Time PickerからfbDateTimeをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="fbDateTime-0.1.js"></script> <script type="text/ja
naveでNode.jsのバージョン管理＆イベントループ詳説
naveでNode.jsのバージョン管理＆イベントループ詳説：node.jsでサーバサイドJavaScript開発入門（2）（1/3 ページ） 前回のおわび 前回の「サーバサイドJavaScriptの本命「node.js」の基礎知識」をご覧いただいた皆さま、はてなブックマークやTwitterなどでコメントをいただきました方々、ありがとうございます。話題の「Node.js」ということもあり、はてなブックマークも1000ユーザーを超えました。 私の力不足もあり、いろいろな方から指摘をいただいたので、今回は前回の補足と訂正をします。ご指摘いただきました皆さま、ありがとうございます。非常に勉強になります。 「nave」で簡単！ Node.jsのバージョン管理 前回の記事で、Node.jsと「npm（node package manager）」のインストールを説明していますが、以下のような問題があり
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
サーバサイドでCanvasを利用する(node.js)
こんにちは、中川です。 今年も残すところあと１週間をきりましたね。 このところ色々と忙しかったので年末年始はゆっくりとしたいと思います。 さて、今回の話題ですが、node.jsを使ってサーバサイドでCanvasが利用できるということで試してみました。 それでは、早速使ってみましょう。 ■今回の環境 Ubuntu 10.10 node.js v0.3.1 npm 0.2.12-1 node-canvas v0.4.1 ■インストール node-canvasでは、cairoを利用しますので、事前にインストールします。 // sample.js var Canvas = require('canvas') , http = require('http'); http.createServer(function (req, res) { var canvas = new Canvas(200,20
jQuery入門 (ver 1.3)
このページはAjaxライブラリの1つであるjQueryライブラリを勉強したい人向けに用意されています。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 jQueryはバージョンによってメソッドが異なるため、バージョン別に入門ページを用意してあります。ここでは、バージョン1.3.1を基準としています。 Ajaxライブラリ (JavaScriptライブラリ) としてはPrototypeライブラリ (prototype.js) が有名です。Prototypeライブラリはプログラマに多く利用されており、JavaScriptの機能を拡張することで使いやすくなるように設計されています。jQueryはエレメントへのアクセスをスタイルシートと同じようにすることで非常に分かりやすくコンパクトな記述ができるようになっています。
Ajax » jQuery plugin » フォーム要素の制御 | PHP & JavaScript Room
テキスト入力欄に日付、電話番号、郵便番号など指定したフォーマットで入力させるように入力制御を行うjQueryプラグイン。 設置イメージ Maked Input Pluginの設置サンプルサンプルを見る<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-L
Firebug の javascript デバッガの使い方を少し覚えた - @kyanny's blog
とある外部の javascript を呼び出す際にカスタマイズしたパラメータを渡すことができるのだけど、ページ表示後に Firebug コンソールから設定済みの変数の値をみると null になっていて、 javascript のソースには書いてあるのになんで中身が消えてるの？？と不思議に思ったので、デバッガを使って調べた。 Firebug を開き、スクリプトタブを選び、タブの上の段の XXXX.js みたいなのをクリックするとずらっとそのページで呼び出してるスクリプトファイル一覧が出てくるのでデバッグしたいスクリプトを選ぶ。 スクリプトのソースコードビューが出てくるので、「この関数のこの行の時点で、この変数の値がどうなってるかみたいんだよなぁ」という行の番号の左をクリックすると赤い丸印がつく。これがブレークポイント。ブラウザをリロードすると、ブレークポイントの行にさしかかったタイミングでス
無駄にエンターを強く押してしまいそうな誰得jQueryプラグイン jdtMdnStrongEnter.js
最近、Twitterでよく 『 俺つれーわー。ほんとつれー 』ってよく聞きますよね。 え？ 『何ヶ月か前にはやってて、何回も見た』？ いやいや、『 マジ飽きたわー 』って人も是非このぷるぎんを試してみてください。 使い方 jQueryとjdtmdnstrongenterを読み込んで、実行！ <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jdtmdnstrongenter.js"></script> <script type="text/javascript"> jQuery(function($) { //プラグイン実行(input or textareaが無難) $( "input" ).jdtMdnStrongEnter(); });
node.jsとは何か(3) - I am bad at math
今日はnode.jsで採用しているCommonJSの話である。 CommonJSの説明だけだとあっという間に終わってしまうのでJavaScriptの歴史を混ぜ込んだら期せずして長くなってしまった。 さて、1995年に発表されたJavaScriptは開発当初「Mocha」と呼ばれ、次に「LiveScript」となり（実際Netscape Navigatorの2.0のアルファ版ではではこの名前だった）、最後にようやくJavaScriptになる(Navigatorの2.0B3から)という変遷をたどった。このJavaScriptという名前っていうのはJavaというコンパイル言語を補完するスクリプト言語にしたいという考えがあったからという話もあるんだけど、そのころ開発元のNetscapeはSunとの業務提携を発表しており、ちょうどそのころJavaが世に出てNetscapeブラウザ上でクールなJava
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
第4回 JavaScriptでオブジェクト指向プログラミング
第4回 JavaScriptでオブジェクト指向プログラミング：連載：Ajax時代のJavaScriptプログラミング再入門（4/4 ページ） 以上、最終回の今回はJavaScriptによるオブジェクト指向について解説した。JavaScriptのオブジェクト指向は「プロトタイプ・ベースのオブジェクト指向」と呼ばれ、従来の「クラス・ベースのオブジェクト指向」に精通した開発者であればあるほど、なじみにくく感じる概念かもしれない。しかし、あまり難しく考える必要はない。 繰り返しではあるが、JavaScriptではクラスという抽象的な概念の代わりに、すべての概念が実体を持ったオブジェクト（インスタンス）で表されるというだけだ。クラス・ベースのオブジェクト指向言語では、クラスを基にオブジェクトを作成していたところが、JavaScriptではオブジェクトを基に異なるオブジェクトを作成することになっただけ
第3回 変数の宣言とスコープ ― ＠IT
JavaScriptが、いま注目を浴びている。 長い冷遇の時代を経ながらも、Ajaxという技術の登場とも相まって、JavaScriptの価値はいままた確実に見直されつつある。その過去の凋落と近年の華々しい脚光は、「復権」と呼んでもよいかもしれない。 本連載は、JavaScript復権のいまこの時代に求められる、JavaScriptという言語への理解を再確認しようというものだ。その連載、第3回となる今回扱うテーマは、「変数」である。どのような言語においても同様であるが、コード上で値を入力し、処理した結果を格納し、また、ほかへと引き渡すすべての基本となるのが変数だ。プログラミング言語を理解するうえにおいて、変数の理解は欠かせない。そして、それはJavaScriptの世界においても同様だ。 本稿では、JavaScriptにおける変数のデータ型に始まり、そのスコープ（有効範囲）の概念、そして、初学
第1回 JavaScriptの復権 ― ＠IT
連載目次 JavaScriptが、いま注目を浴びている。JavaScriptの復権、といってもよい。 最初にJavaScript（当初は「LiveScript」と呼ばれていた）がブラウザに実装されたのが1995年の「Netscape Navigator 2.0」というWebブラウザでのことであるから、すでに登場から10年以上も経過しているわけであるが、そんな枯れた言語がなぜいまごろになって注目されているのか。 いうまでもない。昨今、GoogleやYahooをはじめとした多くの企業が積極的にJavaScriptを採用したリッチなユーザー・インターフェイスを公開し、これが「Ajax（Asynchronous JavaScript And Xml）」という名前とともに急速に注目を浴びたことが、その理由である（Ajaxについては拙稿「枯れた新しいUI革命「Ajax」をASP.NETで活用する」を参
第4回 JavaScriptでオブジェクト指向プログラミング ― ＠IT
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
js2-modeを使いやすくする - speg03の雑記帳
Emacsのjs2-modeはリアルタイムに構文エラーを示してくれてなかなかよさげな感じだったのだけど、インデントまわりが残念でずっとjavascript-modeを使ってた。 結構前の話だったので、どう残念だったか思い出すために試してみた。 コールバック関数を引数に取る関数なんかで下のような感じになる。（インデント4マスの場合） hoge(function () { foo(); // ここじゃなくて bar(); // ここに来て欲しいわけ }); というのをどうにかして直せないかと探し回って対策を発見。 Editing JavaScript with Emacs — js2-mode / Projects / Mishoo's homepage ほぼ丸パクリでかなり良い感じになりました。多謝。 導入手順 とにかく必要なのは js2.el と espresso.el の2つ。ロードパス
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
cakePHP+ajaxでjsonを扱う - 憂鬱なプログラマの形而上学
cakePHP, Ajax, prototypecakePHPとajaxでjsonを扱ってみたのでその備忘録。まずはコントローラー側で必要なヘルパーとコンポーネントを追加する。ちなみに view でprototype.js を読み込んでいるがそこは省略ｗapp/controllers/hoge.php class HogeController extends AppController { var $helpers = array("Javascript"); /* 取りあえずは Javascriptヘルパーが必要 */ var $components = array("RequestHandler"); /* RequestHandlerコンポーネントが必要 */ /* コントローラのメソッドなど ... */ } ?> あれ？Ajaxヘルパーは？と思った方もいるだろうけど、Ajaxヘル
JavaScriptのオブジェクトプログラミング（１） : InDesign Javascript に明日はあるのでしょうか？ 誰か教えて！
2010年03月04日 Permalink Comments(0) TrackBack(0) InDesign javascript JavaScriptのオブジェクトプログラミング（１） 以下にJavaScriptを使ったオブジェクト指向的な書き方の例をまとめます。 ※[]で囲まれた部分には、コードを書くときに自分の目的に合わせ書き換えてください。 【コード】 /*--------------------------------------------------クラスの定義*/ //コンストラクタ関数 function [クラス名]([プロパティ1], [プロパティ2]){ this.[プロパティ1] = [プロパティ1]; this.[プロパティ2] = [プロパティ2]; } //インスタンスプロパティ /*コンストラクタ関数内でthisキーワードを使い初期化*/ //インスタンス
マウス座標を取得する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 マウスポインタのページ内座標を取得するJavascript。 Opera 9、Safari 1.2、IE 5-7、Firefox 2で確認済み。 onmouseX: onmouseY: Script function setPosition(){ target = document.getElementById('sampleform'); window.document.onmousemove = function(e){ target.onmouseX.value = getMousePosition(e).x; target.onmouseY.value = g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.adamrocker.com/blog/102/javascript_simplest_jsonp.html