JavaScriptの最近のブログ記事

MongoDBのデフォルトの日時オブジェクトはISODateというものです。

これの実装がどうなっているか調べてみました。

ISODateとは、関数であります。
ということは、ISODate関数のコードを可視化できれば、実装がわかるはずです。

Mongo Shell で"ISODate"とタイプしてみたら、コードの中身を表示することができました。

ISODateの実装

Ajaxで、サーバ側から"hello"という単純な文字列を出力したときに、
JavaScript側でそれを受け取ると<pre>で囲われてしまう現象が起きることがあります。

<pre>hello</pre>

対処法

カヤックのブログに、相反する2つの記事が書かれていました。
非常に面白かったので紹介します。

1つ目の記事
jQuery言語入門
AmazonS3上の画像を表示するときは、下記ようなHTMLタグになると思います。

<img id="image1"
 src="http://hoge.s3.amazonaws.com/fuga/file.jpg?AWSAccessKeyId=AKIHOGE&amp;Expires=1322305525&amp;Signature=abcde" >

これをjQueryで再読み込みする方法をご紹介します。
MongoDBにデータを入れたものの、何をどうしていいかわからないプログラマのみなさんこんにちわ。
今日はそんなあなたのために、MapReduceの超わかりやすい入門を書いてみました。

MapReduceで何ができるのか?

Firefoxに備わっているHTML5のlocalStorage機能を使うと、Javascriptのデータをブラウザに保存することができます。
保存した情報は、ブラウザを閉じても保持されます。

使い方は超簡単で、"localStorage"というオブジェクトにプロパティと値を保存するだけです。
前回の記事 [MovableType]管理画面の記事編集ツールバーでオリジナルボタンを追加する方法 の応用編です。

昔あったプラグイン「EntityRefButton」(私は使ったことないですが)とほぼ同じ機能をするボタンです。
MT 5.12で動作確認済みです。
MovableTypeでHTML実体参照に変換してくれるプラグイン「EntityRefButton」がMT5.2で動きませんでした。

「Perlは多少書けるし、いっちょう直してやるか!」と直す気まんまんで腕まくりして、プラグインのソースコードやらMovableTypeのドキュメントやらをのぞいてみたのですが、さっぱりわからずあえなく挫折。
orz

あきらめかけたところに救世主あらわる!
全角数字を半角数字に変換するJavscriptの関数です。
このコードはHTMLからは完全に独立していて、1つの関数としているので、再利用しやすいかと思います。
Google Chromeに備わっているHTML5のlocalStorage機能を使うと、Javascriptのデータをブラウザに保存することができます。
保存した情報は、ブラウザを閉じても保持されます。

使い方は超簡単で、"localStorage"というオブジェクトにプロパティと値を保存するだけです。
JSの練習がてら書いてみました。

これをsleep sortと言っていいのかどうかわかりませんが。

Node.jsでは、"npm xmas"というコマンドでクリスマスツリーを表示することができるそうです。

私のような素人プログラマにとってはそもそもインストールすること自体が最大の障壁なわけですが、
さりとてNode.jsを触らないまま人生を送るのも悔しいのでやり方を調べてみました。
HTMLに1行書くだけで、jQueryを読み込めます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

5行のコードで、Yahoo!のトピックス一覧を抽出する!使うのは「メモ帳」だけ!

Windowsユーザのみなさん、社会人・学生のみなさん、こんにちわ。
プログラマではないあなたのために、プログラムの面白さを伝えるためにこの記事を書きました。

これから、たった5行のコードでYahoo!のトピックス一覧を抽出してみます。
このプログラムのすごいところは、何もインストールしなくてよいことです。
Windowsとメモ帳だけあれば動きます。

下記のコードをメモ帳に貼り付けて、デスクトップに保存してください。
(IE6,7で動作確認済みです。たぶんIE8でも動きます。)

ファイル名: yahoo.jse

var IE = new ActiveXObject('InternetExplorer.Application');
IE.navigate('http://yahoo.co.jp');
while (IE.busy);
while (IE.document.readyState != "complete");
WSH.Echo(IE.document.getElementById('topicsfb').innerText);


ファイル名が " yahoo.jse.txt " にならないように気をつけてくださいね

jscript01.JPG

保存したら、ダブルクリックします。

02.jpg

すると、、、ほら!!

03.jpg
ね、すごいでしょ?

応用例

株価を取得する
トヨタ自動車の株価をチェックしてみたりとか。


var IE = new ActiveXObject('InternetExplorer.Application');
IE.navigate('http://profile.yahoo.co.jp/fundamental/7203');
while (IE.busy);
while (IE.document.readyState != "complete");
WSH.Echo(IE.document.getElementById('left_col').innerText);

04.jpg

気象庁の天気予報を取得する
明日のデートにそなえたりとか。


var IE = new ActiveXObject('InternetExplorer.Application');
IE.navigate('http://tenki.jp/');
while (IE.busy);
while (IE.document.readyState != "complete");
WSH.Echo(IE.document.getElementById('descriptionEntries').innerText);


05.jpg
どうですか、簡単でしょう?

まとめ

JavaScript(厳密に言うとJScript)で遊んでみました。
Windowsには、このようにメモ帳だけでプログラムを実行できる素晴らしい環境があります。
特別なソフトを入れずとも、すぐプログラムが書けるのです。

これでプログラミングの楽しさを知っていただけたら幸いです。

(くれぐれも悪用しないでくださいね!!)

世界一インストールが簡単なWikiシステム「JSWikiMini」

(ただし Windows+IE 限定)

JSWikiMini 1.0.1をリリースしました。
JSWikiMini - YukiWikiMiniのJavaScript移植版
このWikiツールは、おそらく世界一インストールが簡単です。
なぜ世界一簡単かというと、
"index.html"ファイルただ1個で動くからです。
上記リンク先から、ZIPファイルをダウンロードして解凍したら、インストール完了です。
実際にストップウォッチ片手に測ってみたところ、ダウンロードから使用開始までの所要時間は10秒ほどでした。

JSWikiMini-1.JPG
ZIPフォルダを解凍した中身。index.htmlを開くだけで動く

YukiWikiMiniのJavaScript移植版

中身は、YukiWikiMiniをJavaScriptで再実装したものです。
画面の操作方法は本家YukiWikiMiniとまったく同じです。

JSWikiMini-2.JPG
YukiWikiMiniそのままのシンプルデザイン

最大の違いは、
  • YukiWikiMini:Webサーバに設置して公開して使う。(もしくは社内Web等で使う)
  • JSWikiMini:ローカルPCに置いて自分ひとり(もしくは共有フォルダにおいて仲間内だけで)で使う

自分ひとりだけで使うような場合、YukiWikiMiniだと自分のPCにApacheとActivePerlをインストールする必要があり、初心者には少し敷居が高いです。
このインストールの手間を省くために今回JavaScript版を作りました。

動作もサクサク超高速

これはWebアプリではなくデスクトップアプリなので、Webサーバとの通信が発生しません。
なので動作が超絶速いです。

USBメモリ、SDカードに入れても動く

「フォルダ」がある場所ならどこにでも置けます。
SDカード、USBメモリ、ネットワーク上の共有フォルダなどに置いて使うことができます。

Wikiを使ってみたいけど公開したくない、勝手に編集されたくない、ちょっとだけ試してみたい、そんな人にはぴったりです。
超簡単に設置できるので、ぜひ試してみてください。
感想をコメントでいただけたらうれしいです。
dqneo-calendar.JPG

DQNEO Calendar

は、Googleカレンダー風の日付入力ツールです。
JKL CalendarをGoogleカレンダー風にアレンジしたものです。
JavaScriptが分らない人でも導入できるように、設置方法を簡単にしました。
誰でも簡単に設置できると思います。

デモ
←クリック


(ここにカレンダーが表示されます。)
ダウンロード
dqneo-calendar-0.1.js   (右クリックで保存できます。)

設置方法

1.HTMLファイルの<head>~</head>タグ内で次のように書きます。
  <script src="dqneo-calendar-0.1.js" charset="utf-8"></script>
  <script>
    var cal1 = new DQNEO.Calendar("cal1");
  </script>
2.<body>~</body>タグ内で、次のように書きます。
<span>
 <input type="text" id="cal1" 
    onclick="cal1.onclick();" onchange="cal1.onchange();"><br/>
</span>
注1:"cal1"の部分は好きな文字列でかまいません。
注2:<br/>タグ、<span>タグなどは必須ではありませんが、これがないと表示が崩れることがあります。
(次期バージョンで改良予定)

1画面に複数のカレンダーを表示したい場合

1画面に複数表示することも簡単にできます。
 ~ 


下記のように記述します。
  <script>
    var cal1 = new DQNEO.Calendar("cal1");
    var cal2 = new DQNEO.Calendar("cal2");
  </script>
<table><tr>
<td>
  <input type="text" id="cal1"
 onclick="cal1.onclick();" onchange="cal1.onchange();"> ~ 
</td>
<td>
  <input type="text" id="cal2"
 onclick="cal2.onclick();" onchange="cal2.onchange();">
</td>
</tr></table>

設置例

デモページ をご覧ください。

補足

JKL Calendarにある半透明化やフェードアウトの機能はありません。
基本的に、JKL Calendarから機能を削ってより簡単にしています。

謝辞

JKL Calendarという素晴らしいツールを作られた川崎様に感謝いたします。
小数点を切捨てるには、Math.floor()を使います。

<script>
var a = Math.floor(2.9999);
alert(a);  // '2'と表示
</script>

サイ本 第3章 データ型と値

3種類の基本データ型

JavaScriptには、基本データ型が3種類ある。

データ型値の例
数値3
文字列'hello'
論理値true,false

また、nullとundefinedという特殊なデータ型がある。
これらは値が1種類しかない。

データ型値の例
nullnull
undefinedundefined

複合データ型

オブジェクトと呼ばれる複合データ型がある。
オブジェクトには、配列と関数も含まれる。
逆に、配列と関数は、特殊な振る舞いをするオブジェクトである。

Date,RegExp,Errorなどもオブジェクトである(型ではない)。

[JavaScript] 予約語の一覧

サイ本 第2章2.8 予約語

ECMAScript v3で決められている予約語の一覧です。
意外と少ないんですね。


break
case
cache
continue
default
delete
do
else
false
finally
for
function
if
in
instanceof
new
null
return
switch
this
throw
true
try
typeof
var
void
while
with


ifやfunctionはよく使います。
逆に使ったことがないのは、default,delete,finally,instanceof, voidあたり。
今後、意識して使うにしようっと。

使用頻度分析とかしたら面白いかも。
達人プログラマと初心者プログラマの違いがはっきり出るんだろうな。ww


サイ本 第2章2.6 識別子

識別子というのは変数や関数につける名前のことです。

$記号を好きな位置で使えるところが特異ですね。
var $ =   1;
var $1 =  2;
var $x =  3
var x$ =  4;
var $$ =  5;
var $$$ = 6;
var $_  = 7;
var _$  = 8;

alert($);
alert($1);
alert($x);
alert(x$);
alert($$);
alert($$$);
alert($_);
alert(_$);

$は、jQueryやprototype.jsで使われていますね。

いま気づいたんですが、$_も普通に使えるんですね。
Perlっぽくてよさげです。


人気記事

このアーカイブについて

このページには、過去に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のカテゴリはMovableTypeです。

次のカテゴリはPerlです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

最近の人気記事