ブラウザにファイルをドロップすると、ファイル・ビュワーがファイルの中身を表示してくれる。
あえて、自前でやるサンプルを見つけた。
文字とか背景の色を変えてみたけど
文字と背景の色の組み合わせが超難しいｗ
JavaScriptの正規化表現の部分が化けやすいｗ
コメント部分の予約語がヒットしてしまうｗ
色だけに、色々ある（笑
この画面は、簡易表示です
ブラウザにファイルをドロップすると、ファイル・ビュワーがファイルの中身を表示してくれる。
あえて、自前でやるサンプルを見つけた。
文字とか背景の色を変えてみたけど
文字と背景の色の組み合わせが超難しいｗ
JavaScriptの正規化表現の部分が化けやすいｗ
コメント部分の予約語がヒットしてしまうｗ
色だけに、色々ある（笑
HTML5のcontentEditableを使うと
ものができる。
MSのサイトにサンプルがあった。
でも、このままではちょっと使いにくいし、ガリガリ書かないといけないので・・・
jQueryっぽくし手直しHTMLファイルの
<div class=”rtEditMenu” id=”rtEditMenu1″ >
・・・
</div>
の中に
<select class=”rtEditMenuSelect” id=”{document.execCommandのコマンド}“>
か
<img class=”rtEditMenuButton” id=”{document.execCommandのコマンド}” src=”img/{ボタンの絵（※要透明色指定）}.png” />
※透明色指定の画像はMS-Office365のEXCELに画像を挿入し、画像をダブルクリックすると、ツールバーの「色」から「透明色を指定」、画像の背景をクリックすると背景が透明に、Webページ(*.htm)で保存。
を追記するダケで
機能を増やせる様にしてみた。
使える（ハズの）コマンドはコメントで書いておいたので
好きなだけ機能を盛り込む
のも・・・
そう難しく無いだろう。
※SUPとSUBは、document.execCommand に対応したコマンドが無かった。
※フォントサイズの設定はクセがある様で1～7の範囲外は無効らしい。
※色は表示を工夫しないと文字色と背景色が区別できない。
※本来はcontentEditable=true時にはCtrl+BやCtrl+Iのショートカットが使えるらしいが、ブラウザのショートカットと重なっているので、この辺は調整しないといけない様だ。（要検討。
※メニュー設定のUIが欲しい。
※localstrageでいいから、メニィー設定の永続化が欲しい。インポートとエクスポートも欲しい。
※編集したものをインポートやエクスポートもしたい。
※HTMLファイルを読み込んで、サクっと編集できるようにしたい。
※最後にHLなどのタグが入ってしまうと、末端にカーソルが移動しない
などと考えていると
これで暫く遊べそうだ。
本家のホームページは、http://jquery.com/、ここからjQuery UIのライブラリィをダウンロードできるが、cssのテーマが色々あるので、ドレを選ぶか非常に迷う。
迷うなら、ALLからダウンロードするといいかもしれない。※２つあるが、後述の様にGoogle CDNのソースを使うならthemeだけでいい。
※現在は、バージョン1.12.1らしい。
ウェジット（部品）は、
なので変わっていない。(と思う。
グラフやスプレッドシートもあったらいいのにと思うけど、デザイン（見た目）だけでは使えない類なので、多少の改造はあり得るものなので、ここに無い方が都合が良いかもしれない。
以前は、カレンダー（DatePicker）の日本語化が難しかった。今でも jQuery CDN には無く、 Google Hosted Libraries にある。
使い方は、
<!– jQuery UI CDN にあるソース //–>
<link type=”text/css” rel=”stylesheet” href=”http://code.jquery.com/ui/1.11.3/themes/cupertino/jquery-ui.min.css” />
<script type=”text/javascript” src=”http:/
<script type=”text/javascript” src=”http:/
<!–Google CDN にあるソース–>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/i18n/jquery-ui-i18n.min.js”></script>
を貼り、
初期化の先頭に
$(function() {
// まず、カレンダーの言語設定を日本語に変更。
$.datepicker.setDefaults($.datepicker.regional[‘ja‘]);
・・・
});
を付け加えればいいらしい。
※Google CDNにはまだ1.12.1 の国際化対応のソースが載っていないらしい。
ググってみると、GitHubにすでに1.12.1のソースはあるが、jquery-ui-i18n.min.js は無く、ダイレクトに datepicker-ja.js と日本語化することになる。
1.11.3のjquery-ui-i18n.min.jの中身は、
datepickert.regional.{各リージョン名} = {
closeText:”＊＊＊＊”,
・・・
yearSuffix:””
},
t.setDefaults(t.regional.{各リージョン名}), t.regional.{各リージョン名}, ←多分いらないコード。
と少し変な感じになっているけど、こんな感じで、i18nのjsファイルをマージしたものなので、
$.datepicker.setDefaults($.datepicker.regional[‘ja’]);
$(‘#date’).datepicker({ dateFormat: ‘yy年mm月dd日’ });
で日本語向きのカレンダーになる。
とりあえず、jquery-ui-i18n.min.jsの1.11.3を最新のjQueryやuiに使いまわしても動くらしい。
本家のホームページは、http://jquery.com/、ここからjQueryのライブラリィをダウンロードできる。
※現在は、バージョン3.1.1らしい。
利点
HTMLやNode.jsでJavaScriptのライブラリィとして使うと、ブラウザの差異をあまり気にせずにコードできる。
イベント・ドリブンなコードを書くので、必要な個所だけ付け加えればいい。
難点
HTMLに取り込むとコードが見づらくなる。
ライブラリィを参照させるとサーバーが必要だしローカルに保存し実行しにくいが、最近のブラウザはページを保存するとそのサブフォルダの参照ファイルを保存してくれるのであまり不便ではない。
jQueryで書くコードは、イベントの事前に宣言することを基本にコードするので、書いたものはイベントが発生しないと実行しないので、コードが上から下に順に動作する訳では無いので、普通のJavaScriptに混ぜると非常に読みにくくなる。
とりあえず
<script>
$(function(){
// この中に変数の初期化やイベントを書いていくと
//HTMLファイルを読み終わった後に、初期化やイベント宣言（っぽい）が処理されるので便利。
});
</script>
妙な形だが、$のパラメータに名無しの関数を書き込んでいるダケ。
普通にJavaScriptを書くと、<body>の部分を読んでいないのに処理されてしまうと、document.getElementByID(‘*****’)な部分が undefine となってしまうので、<body onclick=”init()” >な感じに初期化処理を書かないといけないけど、$(function(){・・・});はそれを自動的にやってくれるので、デザインとスクリプトが別々の人で作っている時には特に便利なので、こんな風にした方がいいのだろう。
セレクターの書き方
document.getElementByID(‘＊＊＊’)のように長く指定せず、$(‘#＊＊＊’)と簡単に書ける。
IDで指定する場合は $(‘#＊＊＊’) 、クラスの場合は $(‘.＊＊＊’) 、タグの場合は $(‘table’) とそのまま書く。
よく見ればcssの指定と同じなので、$(‘td aaa’)のように細かく分けて指定もできるが , で区切って複数指定もできそう。
イベントの書き方
先のセレクターを使い
$(‘#****’).click( function() {
// イベントの中身
});
のように書く。
妙な形だが、セレクターで指定したオブジェクトのclickイベントのパラメータに名無しの関数を書き込んでいるダケ。
もしclickイベントに既に設定されているものがあれば、そのリストの最後に追加される。
オブジェクトの見た目を変える
イベントの書き方と同じ様にプロパティを変える。
書式なら css 。
$(‘#test1’).click(function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});
テキストなら text か val 。
※HTMLタグによる。
//INPUTタグやTEXTAREAタグの場合
$(‘#test2’).click(function() {
$(‘#test2’).val(“INPUTタグを変えました”);
});
//DIVタグやTEXTAREAタグの場合
$(‘#test3’).click(function() {
$(‘#test3’).text(“DIVを変えました”);
});
アニメーション
フェードアウトなどがある。
$(‘#test’).click(function() {
$(‘#test’).fadeOut(“slow”);
});
AJEX
一時期流行った非同期通信の例
ajexでファイルを読み込んでいる。指定のdataType: “script” は、読み込んだらトリアエズ勝手に実行してくれるので便利だが、外部変数をイジる場合は使えないかもしれないので、
勘違いしやすいところ
上でイベント宣言（っぽい）と書いたのは、HTMLを全部読まないと使えないイベントの宣言なので、本物の宣言ではない。
なので・・・
（１）同じIDをいくつも使う場合は#***** ではなく [id=****] と書かないと先頭の1個目しか反応しない。
（２）後に追加したものは中途半端に無視してしまうので、※ID指定の場合
$(document).on(‘click’, ‘#test1’ , function() {
$(‘#test1’).css(‘background-color’, ‘#777700’)
});
な感じに書き、タグを追加した時にマメにイベントも処理する様にしないといけない。
という感じに注意が必要になっている。
クラスの場合はどうでもいいらしい。
（３）jsファイルをいっぱい作ると相対パスを変えてしまうと修正がめんどくさい。
<base>で指定できるが、チョット間違えると動かなくなるし、ｊｓファイルのパスを指定すると、cssファイルや画像ファイルの方も困るかもしれないので、
共通のjsファイルで
var base_js_path = “/sample/jquery/js/”;
var base_css_path = “/sample/jquery/css/”;
var base_img_path = “/sample/jquery/img/”;
個別のjsファイルで、
url: base_js_path + “sample12init.js”
と書いた方がマシ。
jQueryの話をする前に、
Q: jQuery無しにJavaScriptを書いた場合どうなるだろうか？
A: 別に困らない。
と云うことを忘れずにjQueryは、ブラウザに依存しないJavaScriptコードをサポートしている。ではIEのIME制御ができないのかと云うとそうではない。よく使う機能（例えば、タグのIDとNAME属性）なのに、ブラウザの種類によって指定する方法が違ったり、APIの名前が全然違ったり、そもそもタグの名前が違う（レイヤー機能など）を気にしなくても良いような方法論を提供しているのです。だから、jQueryをグローバルスタンダードなAPI（中の実装は各ブラウザで相違がある部分は個別に実装している）として使い、うまくいかない部分はターゲットにしているブラウザ向けにコードを書くのがいいでしょう。
Q: 初期設定をするときに<body onload=”xxxxx()” > と書かずに window.onload = xxxxx（）； でもなく、$(document).ready(function(){・・・・} なぜこうなっているのだろう？
A: Javascriptはheaderタグの中に書くけど、本音はHTMLを全部読み込んだ後に、色々な処理を実行したい。
その矛盾を大雑把に解決しようとするとjQueryに body.onload なり 他のイベントの処理を任せて、全て読み込み完了と判断してもらった方が便利なハズだ。自分でHTMLの最後のタグがDOMで読み取れればOKとしてもいいけど、デザインが変った途端に動かなくなるのは避けたいですよね。
Q: リンクのイベントを止めるのにevent.preventDefault()なんてのがあるんですね。
A: ｅｖｅｎｔはブラウザで提供しているクラスです。
ついでに云えばstopPropagationの方が強力です。