java script を理解する。。。
愛用本 詳解 HTML & JavaScript 辞典
算術演算子
演算 演算子
加算 +
減算 -
乗算 *
除算 /
剰余算 %
代入演算子
演算子 意味
= 代入
+= 足して代入
-= 引いて代入
*= 掛けて代入
/= 割って代入
%= 割った余りを代入
単項演算子
演算子 意味
++ １足す
-- １引く
- 符号の反転
関係演算子
演算子 意味
> 大きい時
>= 以上
< 小さい時
<= 以下
== 等しい時
!= 等しくない時
真と偽
真は true
偽は false
論理演算子
演算子 意味
&& (and) 比較対象が真ならば真、それ以外ならば偽
|| (or) 比較対象のどちらかが真ならば真、それ以外は偽
! (not) 比較対象が真ならば偽、比較対象が偽ならば真
条件演算子
二つの値を評価し、どちらかの値を取得する。
書き方は、
(条件式) ? 値1 : 値2
条件式が真ならば値1が、条件式が偽ならば値2を取得する。
演算子の優先順位
演算子
1 （ ），[ ]
2 ++，--，-
3 *，%，/
4 +，-
5 <, <=, >, >=
6 ==, !=
7 &&
8 ?:
9 =, +=, -=, *=, /=, %=
10 ,
if文
if(条件式)実行命令;
if(条件式)
{実行命令;}
if(条件式)実行命令1;
else 実行命令2;
if(条件式){
実行命令1;
} else {
実行命令2;
}
if (a > 0) { b = 1; } else { b = 0; }
と
b = a > 0 ? 1 : 0;
は、同じ結果になります。
switch文
switch(変数)
{case '条件1':実行命令1;
break;
case '条件2':実行命令2;
break;
case '条件3':実行命令3;
break;
default:実行命令4;
break;
}
for文
for(ループ変数の初期状態; ループ継続条件; ループ変数の更新)
{ 実行命令; }
while文
while(ループ継続条件)
{ 実行命令; }
do〜while文
do {実行命令; }
while(実行条件);
continue文 (ループの途中で次の繰り返し制御に移る命令)
例「0から10までの偶数の和を、変数a求めたい」場合
a=0;
for(i=0; i<11; i++){
if(i%2==1)continue;
a+=i;
}
alert(a);
流れ
1. 変数aを0で初期化
2. forループを開始。（最初に変数iを0で初期化）
3. ループの条件判定（iが11未満ならばループを続行）
4. ループ内でif文の条件分岐
iを2で割った余りが0以外の場合は continue 命令が実行され、 ループの先頭に
もしiを2で割った余りが0の場合は、a+=i;の処理が実行されて変数aに変数iの値を加算
5. 処理が終りループの先頭に戻った時、i++が実行されてiの値がインクリメント
6. そのままループを続けて、iの値が10を超えた時点でループを抜ける
7. 最後にalert(a);で、最終的な結果を画面表示
break文 (ループの途中でループから抜け出す命令)
例「0から30までの各数値の和を変数aに求め、aの値が50を超えたら処理を中断する」場合
a=0;
for(i=0; i<51; i++){
if(a>50)break;
a+=i;
}
alert(a);
try catch文（例外処理）
try{
処理内容
}catch(e){
うまく処理出来なかった場合に行う処理内容
}
XMLHttpRequest を呼び出す時によく使われます。
Ajaxを使おう
Ajaxはじめの一歩 XMLHttpRequest
http://allabout.co.jp/internet/javascript/closeup/CU20050515A/
エスケープ処理
「'」→「\'」
「"」→「\"」
「\」→「\\」
Java Script をコーディングする上で必要なサニタイジング処理
http://www.atmarkit.co.jp/fsecurity/rensai/webhole12/webhole01.html
& → &
< → <
> → >
" → "
' → ' ※ 'は使わない
<a href=""> や <img src=""> にスクリプトで流し込む場合は
javascript:alert("hello");
vbscript:MsgBox("hello");
about:<script>alert("hello");</script>
javas	cript:
javAsc
ript:d=document;d.body.appendChild(d.createElement('<script src=test.js defer>'))
こういう事にも注意する。
マルチバイトの落とし穴
http://www.atmarkit.co.jp/fsecurity/rensai/hoshino10/hoshino01.html
JavaScriptインジェクション攻撃
http://itpro.nikkeibp.co.jp/article/COLUMN/20081006/316276/
も参考に。
組み込み関数
escape() 文字列のエンコードを行います
unescape() 文字列のデコードを行います
eval() 引数をスクリプトとして実行します
isNaN() 数値の場合は false、数値でない場合は true を返します
parseFloat() 文字列を浮動小数点数に変換
parseInt() 文字列を整数値に変換
taint() フォームの特定の要素を送信可能に設定
untaint() フォームの特定の要素を送信不可能に設定
予約語
abstract
boolean
break
byte
case
catch
char
class
const
continue
default
do
double
else
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
super
switch
synchronized
this
throw
throws
transient
true
try
var
void
static
while
with これを使うと、「[]」や「.」を使わずプロパティにアクセスできる。 with(document){alert(title)}
ブラウザのアドレスバーに javascript:with(document){alert(title)} で確認できる。
文字を書く
document.write("文字を書く");
a="文字を書く";
document.write(a);
ダイアログボックスを表示
<html>
<script language="JavaScript">
<!--
alert("ダイアログを表示しています。");
//-->
</script>
</html>
確認用ダイアログを利用する
<html>
<script language="JavaScript">
<!--
kotae=confirm("JavaScriptは理解出来そう？");
if(kotae==true)
document.write("良かったね！");
else document.write("それは残念・・・");
//-->
</script>
</html>
文字入力用ダイアログを利用する
<html>
<script language="JavaScript">
<!--
kotae=prompt("貴方のお名前を入力して下さい。","");
if(kotae!="")document.write(kotae+"さん、こんにちは。");
else document.write("こんにちは。");
//-->
</script>
</html>
テキストボックスの値を取得する
書式は、
変数名=document.フォーム名.テキストオブジェクト名.value;
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.text1.value;
alert(a);
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="text" name="text1"size="10">
<input type="button" value="CLICK!" onClick="ck()">
</form>
</body>
</html>
function ck(){
…
}
は
var ck = function() {
...
};
と書くことも可能。
チェックボックスの状態を取得する
値は true もしくは falese で、チェックがついている場合は true 、チェックがついていない場合は false になる
書式は、
変数名=document.フォーム名.チェックボックスオブジェクト名.checked;
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.check1.checked;
alert(a);
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="checkbox" name="check1">
<input type="button" value="CLICK!" onClick="ck()">
</form>
</body>
</html>
ラジオボタンの状態を取得する
値は true もしくは falese で、チェックがついている場合は true 、チェックがついていない場合は false になる
書式は、
変数名=document.フォーム名.ラジオボタンオブジェクト名.checked;
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.radio1.checked;
alert(a);
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="radio" name="radio1"><br>
<input type="button" value="CLICK!" onClick="ck()"><br>
<input type="reset" value="RESET">
</form>
</body>
</html>
実際には、チェック項目が多数ある事が多いので
変数名=document.フォーム名.ラジオボタンオブジェクト名[値].checked;
値は0から数分で取得する事となる
テキストエリアの値を取得する
書式は、
変数名=document.フォーム名.テキストエリアオブジェクト名.value;
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.textarea1.value;
alert(a);
}
//-->
</script>
</head>
<body>
<form name="form1">
<textarea name="textarea1"></textarea>
<input type="button" value="CLICK!" onClick="ck()">
</form>
</body>
</html>
ドロップダウンリストボックスで選択されている場所
セレクトオブジェクトで選択されている場所を取得（0〜）
書式は、
変数名=document.フォーム名.セレクトオブジェクト名.selectedIndex;
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.select1.selectedIndex;
alert(a);
}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="select1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="CLICK!" onClick="ck();">
</form>
</body>
</html>
ちなみに
.length で、 option の数
.options[0].text で 表示文字
.options[0].value で 値
を拾えます。（代入も出来ます）
スクリプトを使って option を書き換える場合(追加）は
var ele = document.createElement("option");
var txt = document.createTextNode("aaa");
ele.value = "AAA";
ele.appendChild(txt);
document.form1.select1.appendChild(ele);
テキストボックスに値を表示
書式は、
document.フォーム名.テキストオブジェクト名.value="代入する値";
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
a=document.form1.text1.value;
document.form1.text2.value=a;
}
//-->
</script>
</head>
<body>
<form name="form1">
１．<input type="text" name="text1" size="20">
２．<input type="text" name="text2" size="20">
<input type="button" value="CLICK!" onClick="ck();">
</form>
</body>
</html>
テキストエリアに値を表示
書式は、
document.フォーム名.テキストエリアオブジェクト名.value="代入する値";
となる。
<html>
<head>
<script language="JavaScript">
<!--
function ck(){
document.form1.text2.value = document.form1.text1.value;
document.getElementById('text3').value = document.getElementById('text1').value; //最近はこうかな？
}
//-->
</script>
</head>
<body>
<form name="form1">
１．<textarea name="text1" size="10" id="text1"></textarea>
２．<textarea name="text2" size="10" id="text2"></textarea>
３．<textarea name="text3" size="10" id="text3"></textarea>
<input type="button" value="CLICK!" onClick="ck();">
</form>
</body>
</html>
入力BOXにフォーカスを移動
document.form1.text1.focus();
黒から白へフェードイン
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function changeColor(){
for(i=0;i<=255;i=i+5){
document.bgColor=i+i*256+i*256*256;
}
}
// -->
</script>
</head>
<body onLoad="changeColor()">
</body>
</html>
Cookieの削除
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
function Start(){
if(document.cookie==""){
alert("このサーバによるCookieはありません。")
}else{
tmp=document.cookie.split(";");
acDate=new
Date();
acDate.setYear(acDate.getYear()-1);
for(i=0;i<tmp.length;i++){
temp1=tmp[i].split("=")[0];
//temp1=tmp[i].split("=")[0].split("=")[0].replace(' ',''); //先頭にスペースが入ってる？
document.cookie=temp1+"=;acDate="+acDate.toGMTString();
}
alert("このサーバによるCookieを削除しました。");
}
}
//-->
</script>
</head>
<body>
<center>
<form>
<input type="button" value="Cookieの削除" onClick="Start()";>
</form>
</center>
</BODY>
</HTML>
onmouseover イベントでテーブルの 1 行を見やすく色を変える
<table bgcolor="#ffffff" border="1" cellspacing="1">
<tr onmouseover="this.bgColor='#DEEBF6'" onmouseout="this.bgColor='#FFFFFF'">
<td>マウスを乗せると色が変わります。</td>
</tr>
<tr onmouseover="this.bgColor='#DEEBF6'" onmouseout="this.bgColor='#FFFFFF'">
<td>マウスを乗せると色が変わります。</td>
</tr>
</table>
クッキー情報を表示する。
IEのアドレスに javascript:document.cookie; と打ち込みます。
すると、現在使われている、クッキーが表示されます。
この手の手法の事をブックマークレットと呼ぶみたいですね。
hidden と password を可視化したり、Javascript で書き換えられた後のソースを表示したり
デバッグ用に便利な物が揃っています。
ブックマークレットが溜まってきたのでまとめました
http://d.hatena.ne.jp/murasuke/20060726
JavaScript::Bookmarklet
http://bookmarklet.daa.jp/
Bookmarklet - パソコン遊戯
http://pasokon-yugi.cool.ne.jp/bookmarklet/
Javascript で書き換えられた後の Webページの内容を表示する
http://groundwalker.com/blog/2007/01/javascripted_source.html
ちなみに、クッキーを使わずクライアント PC へ保存する方法として
DHTML の userData を使う方法があります。（ IE 限定）
Internet Explorer での HTML フォーム Part 2
http://www.microsoft.com/japan/msdn/columns/corner/corner122099.aspx
※javascript:document.cookie='abc=123;path=/';void(0);
とすることでクッキー情報が書き換えられる事に注意。（有効期限が設定されている場合に限る）
javascript:document.body.contentEditable='true';document.designMode='on';void(0);
で IE では HTML を触ることが可能に。IEPRO と組み合わせれば使えるかもね。
RFC2109 http://www.ietf.org/rfc/rfc2109.txt
NAME = 制御文字、特定記号 ()<>@,;:\"/[]?={} 、スペース、タブを含まないこと
VALUE = 上記を含む場合はダブルクォートで囲むこと
test=abc=123 としている場合、VALUE のイコール以降は切り捨てられ test=abc となる
正しく動作させるには test="abc=123" とする
確認ダイアログを出さないでメインの窓を閉じるには
window.opener = null;
self.window.close();
又は
window.opener = window;
self.window.close();
で、ダイアログが出ないで消えてくれます。
※使えなくなる可能性がありますので程々に。。。
ステータス行に時間を表示
function tm(){
var day = new Date();
var year = day.getFullYear(); //getYear() を使うとファイアフォックスでは 108 と表示される
var month = day.getMonth()+1;
var date = day.getDate();
var hour = day.getHours();
var min = day.getMinutes();
var sec = day.getSeconds();
var itime = parseInt((day.getUTCHours()*3600 + day.getUTCMinutes()*60 + day.getUTCSeconds()+3600)/86.4);
// getUTCHours(), getUTCMinutes(), getUTCSeconds() を使って現在のグリニッジ標準時の 時間・分・秒 を取得
// インターネットタイムの基準はグリニッジではなく Swatch 社のあるスイスですので、時差を考慮し
// 1時間（3600秒）を加えた値を1日の時間を 1 ビート(86400÷1000=86.4秒)で割り
// 小数点を切り捨てた値が、インターネットタイムとなります。
// インターネットタイムは Swatch社が中心となって提唱。
// 1日を1000で割り、その単位を BEAT（ビート）とした世界共通時間
if (month < 10){ month = "0" + month }
if (date < 10){ date = "0" + date }
if (hour < 10){ hour = "0" + hour }
if (min < 10) { min = "0" + min }
if (sec < 10) { sec = "0" + sec }
if (itime < 10) { itime = "0" + itime }
if (itime < 100){ itime = "0" + itime }
youbi = new Array(7)
youbi[0] = "(日)";
youbi[1] = "(月)";
youbi[2] = "(火)";
youbi[3] = "(水)";
youbi[4] = "(木)";
youbi[5] = "(金)";
youbi[6] = "(土)";
window.status = year+"."+month+"."+date+youbi[day.getDay()]+" "+hour+":"+min+":"+sec+" @"+itime;
setTimeout("tm()")
}
<body onLoad="tm()">
</body>
インラインフレームを操作
<script type="text/javascript">
function st(){
var w = window.subwindow;
var d = w.document;
d.body.appendChild(d.createTextNode("Hello,World!!"));
d.body.style.backgroundColor = "#FFFFDD";
}
</script>
<body onload="st()">
<iframe id="submit_window" name="subwindow" src="about:blank"></iframe>
ちなみに、インラインフレームから親フレームを操作する場合は
parent.window.location.href = "http://www.kojikoji.net/";
エレメントを使う場合は
parent.frames.left.document.getElementById("form1").action = "./send.asp";
とか…
909432 - iframe 内にて リストボックスにフォーカスすると onchange イベントが発行される
POST後に同時更新したい場合（フレームを分けていた場合）
いくつかやり方は在りますが、left と right で left フレームを POST 後に スクリプトで right を更新させる
<script language="JavaScript1.2">
<!--
parent.right.window.location.href="http://";
-->
</script>
管理ページ等でフレームを利用していて、タイムアウト後にフレーム毎にログインページが表示される場合も
<script language="JavaScript1.2">
<!--
parent.window.location.href="http://";
-->
</script>
とすれば回避出来ます。
選択したボタンを押せなくする。
<input type="button" id="b1"
onclick="b1.disabled=true;b2.disabled=false;b3.disabled=false;>
<input type="button" id="b2"
onclick="b1.disabled=false;b2.disabled=true;b3.disabled=false;>
<input type="button" id="b3"
onclick="b1.disabled=false;b2.disabled=false;b3.disabled=true;>
リンクやボタンを使って「xxx.asp」へPOST送信
<html>
<head>
<script language="JavaScript">
<!--
function wPost(a1,a2){
document.form1.text1.value=a1;
document.form1.text2.value=a2;
document.form1.action = "http://www.kojikoji.net/index.asp";
document.form1.submit();
}
//-->
</script>
</head>
<body>
<a href="javascript:wPost('text1','text2')">送信</a>
<input type="button" OnClick="wPost('text3','text4')" value="送信">
<form name="form1" method="post" action="err.html">
<input type="hidden" name="text1">
<input type="hidden" name="text2">
</form>
</body>
</html>
※ http://www.kojikoji.net/ にて GET と POST のパラメータを表示するようにしています。
JavaScript で 送信した場合に結果がちゃんと飛んでいるかの確認に、よければ使って下さい。
http://www.kojikoji.net/?TEST=テストだよ
日本語は UTF8 でエンコードしてから送信しないと文字化けします（多分）
送信する前にメッセージを表示させる
<script language=javascript>
function warning(){
if ( confirm ('送信します。宜しければ[OK]ボタンを押して下さい。')){
// document.form.encoding = "multipart/form-data"; //ファイルを送信する場合
document.form.action = "http://www.kojikoji.net/";
document.form.submit();
return;
} else {
return false;
}
}
</script>
<body>
<form action="" method="post" name="form">
<input type="file" name="file1">
<input type="text" name="text1">
<input type="button" onclick="warning()">
※javascript:document.forms[0].onsubmit=null;void(0);
と打ち込まれるとチェックを回避される事に注意。
リンクから
<a href="http://www.kojikoji.net/?Act=Delete" onclick="return confirm('削除します。宜しければ[OK]ボタンを押して下さい。')">削除</a>
動作確認 ＞削除
Enter キーが押されたら送信
<input type="text" name="text1"
OnKeyPress="if (event.keyCode == 13) {warning();return false;}">
タグを生成して送信
<script language=javascript>
function send(){
var element = document.createElement("input");
element.type = "hidden";
element.name = "data1";
element.value = "生成したデータだよ";
document.form.appendChild(element);
// alert(document.form.data1.value); // 確認
// document.form.method = "POST"; // POST で送信したい場合
document.form.action = "http://www.kojikoji.net/";
document.form.submit();
}
</script>
<body>
<form action="" method="get" name="form">
<input type="button" onclick="send()">
</form>
リセットボタンの処理
IE の場合、フォーム上にリセットボタンが配置されていた場合は、[ESC] でリセット。
リセットボタンが無い場合は、[ESC] 2回押すとリセットされます。
<form action="about:blank" onreset="return false;">
で、無効化。
<form action="about:blank" onreset="
if( !confirm('本当に入力内容を消去してもよろしいですか？') ) { return false; }
">
で、確認ダイアログ表示。
要素数取り出し実験（おぼえがき）
<script language=javascript>
alert("INPUTの要素数は " + document.getElementsByTagName('INPUT').length);
alert("2 番目が " + document.getElementsByTagName('INPUT')[2].name);
alert("2 番目が " + document.getElementsByTagName('INPUT')[2].type);
document.getElementsByTagName('INPUT')[2].value = "1";
alert("2 番目の INPUT に " + document.getElementsByTagName('INPUT')[2].value + " を代入");
</script>
innerHTML タグの間の内容を取得・書き換えをする。
outerHTML タグごと内容を取得・書き換えをする。
Document.open
Document.write msg.outerHTML
Document.close
こんな感じでごっそり入れ替え。
アドレスに下記を貼り付けて実行で動きがわかります。
JavaScript:document.all.tags("html").outerHTML='<form><input%20type="text"%20value="123"><input%20type="submit"><form>'
フォーカス時に背景変更
<input type="text" name="text1"
onFocus="if(document.all) {this.style.backgroundColor='#e5ddff';}"
onBlur="if (document.all) {this.style.backgroundColor='#fafafc'}">
マウスカーソルが重なった時にメッセージ表示
<input type="text" name="text1"
onMouseOver="window.status='TEXTを入力します。';return true"
onMouseOut="window.status='';return true">
カーソル変更は
onMouseOver="this.style.cursor='hand'"
onMouseOut="this.style.cursor='auto'"
単純にタグに title="なんちゃら" とか書いた方が早いかも。
●HTML-FROMの TEXTで右寄せ（JAVAScript じゃないけど ）
<input type="text" name="text1" value="abc" style="text-align:right">
●FORM タグを記述した時の隙間を詰める
<form action="http://www.kojikoji.net/" style="margin-top:0 ;margin-bottom:0">
●INPUT を書込み禁止にする
<input type="text" style="border: 0 solid;" value="データ" tabindex="-1" readonly="readonly">
●右クリック禁止(IE限定)
<body onContextmenu="return false">
onDragstart="return false"
onSelectstaet="return false"
ググってみたら、この２つも同時に指定しているサンプルが多いみたい。
oncontextmenu Event を使って操作できます。
oncontextmenu Event Sample
第2回 イベントで「右クリック禁止」を禁止してみよう
●ダウンロード時の保存禁止(IE限定)
<meta name="DownloadOptions" content="nosave">
●オートコンプリート禁止(IE限定)
<input type="text" autocomplete="no">
●イメージツールバーの非表示(IE6)
<meta http-equiv="imagetoolbar" content="no">
または、
<img scr="" alt="" galleryimg="no">
●音楽を再生(これもIE限定だったかな？）
<BGSOUND SRC="">
●キャッシュの無効
<meta http-equiv="Pragma" content="no-cache">
●アドレス（URLの隣）のアイコンを好きなものに変更(IE)
http://www.netdive.jp/memo.asp で書いた気もするけど、、、
アイコン作成ツールを利用して、アイコンを作成。（ベクター等でチェック）
favicon.ico という名前で保存し、HTML ファイルと同じ場所に置く。
別の場所にある場合は
head 部分に
<link rel="shortcut icon" href="./img/favicon.ico">
と記述。
●表示時に使用禁止
<input type="text" name="text1" disabled>
●JavaScript エラーを無視する
window.onerror = null;
※ エラーが発生する可能性がある箇所の前に記述
●ブラウザ名をチェック
document.write(navigator.appName);
●直前の参照ページのURL取得
document.write(document.referrer);
●ページを印刷する
<INPUT TYPE="button" VALUE="印刷する" onClick="print()">
●別ファイルから読み込み
<SCRIPT SRC="script.js"></SCRIPT>
※script.js には、 <script language=javascript>、</script> は不要
●非対応ブラウザへの配慮
<NOSCRIPT>
このページはJavaScriptに対応しているブラウザでご覧ください
</NOSCRIPT>
●左寄せと右寄せを同時に使いたい
http://allabout.co.jp/computer/hpcreate/closeup/CU20060209A/index.htm
●時間のかかる処理でアイコンを砂時計にする話とか
時間がかかる操作中に表示を更新する
●フルスクリーンで開く
window.open(url,name,"fullscreen=yes");
※戻し方知らないとハマります。（Ctrl+W や Alt+F4 で閉じましょう）
IEの全画面表示を無効にする
http://arena.nikkeibp.co.jp/tec/winxp/20060914/118639/?from=mail
●JavaScriptで画像の本来の幅と高さを取得する
http://d.hatena.ne.jp/inamenai/20081011/p1
●[CSS]スタイルシートをIEだけに適用する大胆で簡単な条件式の使い方
http://coliss.com/articles/build-websites/operation/css/1558.html
●ダウンロード画面のボタン(IE限定)
<meta name="DownloadOptions" content="" /> 全てのボタンを表示
<meta name="DownloadOptions" content="noopen" /> 「開く」ボタン非表示
<meta name="DownloadOptions" content="nosave" /> 「保存」ボタン非表示
チェックボックスに連動して、入力許可 ※未チェック(^^;
<input type="checkbox" name="no" id="chk" onClick="
if (chk.checked==true){
txt1.disabled=false;
} else {
txt1.disabled=true;
}
">
<input type="text" name="text1" id="txt1" disabled>
お気に入りに追加
<input type="button" value="お気に入りに追加" onClick="
window.external.AddFavorite('http://www.netdive.jp/','NETDIVE')
">
ホームページに設定
<input type="button" value="ホームページに設定" onClick="
this.setHomePage('http://www.netdive.jp/')
">
ファイルの参照ボタンを使わずにドラッグ＆ドロップで設定
http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/reference/events/ondragstart.asp
サンプルはそのうち…
function eve1(){
window.onDragDrop.data;
}
window.onDragDrop = eve1;
↑チェックしてません。
関連
ドラッグ＆ドロップライブラリ: Dragable
http://siva.cc.hirosaki-u.ac.jp/usr/koyama/dragable/
クリップボードへテキストをコピー
<script language=javascript>
function ClipBoard() {
textRange = document.body.createTextRange();
textRange.moveToElementText(Text1);
textRange.execCommand("Copy");
}
</script>
<input type="button" value="クリップボードへコピー" onclick="ClipBoard();">
<div id="text1">
ここに書かれている内容がクリップボードにコピーされます。
createTextRangeについては下記を参考に。
http://www.microsoft.com/japan/developer/library/jpisdk/dhtml/references/methods/createTextRange.htm#createTextRange
</div>
クリップボードのテキストを表示
<script language=javascript>
function ClipBoard() {
if(clipboardData.getData("Text")){
document.form1.text1.value = clipboardData.getData("Text");
}
}
<form name="form1">
<textarea cols="40" rows="10" name="Text1">
<input type="button" value="クリップボードの内容を表示" onclick="ClipBoard();">
</form>
知ってる人は多いと思いますが、こういった事が出来てしまいます。
あなたのクリップボードが盗まれる
http://private.ceek.jp/archives/001639.html
URLをコピペしたら悪質サイトに――乗っ取り被害が続出
http://www.itmedia.co.jp/news/articles/0808/20/news033.html
テキストエリアの文字数をステータスバーに表示 と、カーソル位置にテキスト代入
（昔書いたソースの一部切抜き加工。未チェック）
<script language=javascript>
var n=0;
var s=0;
function pp(par){
var r=document.form1.mbody.createTextRange()
r.collapse()
r.moveStart("character",document.form1.mbody.value.replace(/\r/g,"").length-n)
r.moveEnd("character",s)
r.text=par + r.text
r.collapse(false)
r.select()
r.parentElement().focus()
s=0
Check()
}
function Check() {
dmy = escape(document.form1.mbody.value);
dlen = dmy.length;
moji = 0;
var r=document.form1.mbody.createTextRange()
var sel=document.selection.createRange()
r.moveToPoint(sel.offsetLeft,sel.offsetTop)
r.moveEnd("character",sel.text.length)
s=r.text.replace(/\r/g,"").length
r.moveEnd("textedit")
n=r.text.replace(/\r/g,"").length+(document.form1.mbody.value.match(/(\r\n)*$/),RegExp.$1.length/2)
for(i=0;i<dlen;i++){
if(dmy.charAt(i) == "%") { i=i+4; }
moji++;
}
window.status = "残り入力文字数: " + (500 - moji) +
" バイト （" + (500 - moji)/2 + " 文字） 文字位置：" +
(document.form1.mbody.value.replace(/\r/g,"").length - n) + "文字目";
}
</script>
<form name="form1">
<textarea wrap="physical" name="mbody" rows="18" cols="17"
onmouseup="Check()" OnkeyUp="Check()" OnChange="window.status=''"></textarea><br>
<input type="button" value="カーソル行に文字挿入" onClick="pp('埋め込み')">
</form>
※DOCTYPE を付けるとスクリプトエラーになるみたい。（IE8で確認）
<!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">
最終更新日をテキスト表示
date = new Date(document.lastModified);
y = date.getFullYear();
m = date.getMonth() + 1;
d = date.getDate();
if (m < 10) { m = "0" + m; }
if (d < 10) { d = "0" + d; }
document.write(y + "/" + m + "/" + d);
数字のチェック
<script language=javascript>
function numchk(){
var i;
var sNum;
var wNum;
sNum = document.form.text1.value;
if(sNum == ''){
alert('数値を入力して下さい。');
return false;
}
for(i=0; i<sNum.length; i++){
wNum = sNum.charAt(i);
if((wNum<'0') || (wNum>'9')){
alert('数値を正しく入力して下さい。');
return false;
}
}
}
</script>
<body>
<form action="" method="post" name="form">
<input type="text" name="text1">
<input type="button" onclick="numchk()">
一定時間なにもしなければログアウト。
SetInterval メソッドを使用してログオフする方法が MS サイトに書かれています。
[HOWTO] Web アプリケーションから自動的にユーザーをログオフする方法
http://support.microsoft.com/default.aspx?scid=kb;ja;315584
Web ページダイアログ(showModalDialog/showModelessDialog) で表示した後に、そのページ内で URLの移動（POST処理等）する場合。
ウィンドウにスクリプトで名前を付けけておき(this.window.name="modal1" など)
URL を移動する際に target="modal1" などのように現在のウィンドウ名を指定する。
[IE] Internet Explorer のプロセスを複数起動すると showModalDialog/showModelessDialog からセッション Cookie が正しく送信されない
http://support.microsoft.com/default.aspx?scid=kb;ja;839443
Google キャッシュ
http://www.google.co.jp/search?hl=ja&rls=GGLG%2CGGLG%3A2005-31%2CGGLG%3Aja&q=showModalDialog+839443&lr=
累積的なセキュリティ更新プログラム 974455 をインストールした後、Internet Explorer で VBScript スクリプト エラー メッセージ "型が一致しません" が表示される
http://support.microsoft.com/kb/976749
リンククリック後に戻るボタンを無効化
<a href="http://www.netdive.jp" onClick="
javascript:location.replace(this.href);
event.returnValue=false;
event.cancelBubble=true;
">NETDIVE TOPページへジャンプ</a>
APPLET、EMBED、OBJECT 要素を使っている場合の自動アクティブ化
Internet Explorer 用の累積的なセキュリティ更新プログラム (912812) (MS06-013)
http://www.microsoft.com/japan/technet/security/bulletin/ms06-013.mspx
適用後、IE の挙動が変わり、自動でアクティブにならない（特許の関係）
下記を参考にスクリプトで自動的にアクティブになるようにする。
ActiveX コントロールのアクティブ化
http://www.microsoft.com/japan/msdn/workshop/author/dhtml/overview/activating_activex.aspx
createElement で生成した場合に URL を流しこむと、音声だけで映像が表示されないような・・・
document.wite を使えば、正しく動作しましたが。。。
IE の更新プログラムを適用すると、Flash や Shockwave を余計に一度クリックしないとコンテンツを操作できない
http://support.adobe.co.jp/faq/faq/qadoc.sv?5503+001
MS、Eolasからライセンス取得でIEの「余分な1クリック」解消へ
http://www.itmedia.co.jp/news/articles/0711/10/news001.html
2008 年 4 月公開予定の IE 累積アップデートで元に戻るようです。
Internet Explorer自動 コンポーネントアクティブ化(IE ACA)更新は、「アクティブ化するのをクリックする」動作を無効にするよう使用できます。
http://support.microsoft.com/kb/945007
で、元にもどるようです。テスト版？
画像のリンクが切れている場合に、[X]マークを出さないようにする。
<img src="a.jpg" alt="a" onerror="this.style.display='none'"/>
角を丸くするには
Nifty Corners: rounded corners without images
http://pro.html.it/esempio/nifty/
のスクリプトを利用して、Rounded 要素で設定する。
ちなみに、XP + IE の場合は、<fieldset> タグを使うと角丸になる。(2000 の場合は角ばったまま）
<META HTTP-EQUIV="MSThemeCompatible" Content="No"> を付けると、OS（XP) と同じ概観を持たないようにも出来る。
[x]ボタンを押したときや、サイト移動時にスクリプトを動作させるには
<script for=window event=onbeforeunload language="JavaScript">
window.event.returnValue = "メッセージ"
</script>
URL の ？ 以降の文字を取得する。※未チェック
<body
onload="
if(location.search!=''){
var par = location.search; //「？以降の文字列を返す」＃以降を返す場合は、.hash
par = par.replace(/\?/,'');
par = par.split('&');
for(var i=0; i<par.length; i++){
alert(par[i]);
}
}">
グレイスケール
<style>
.glayer {
position: fixed!important;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
background-color:#1F1F1F;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
display:none;
}
</style>
<!-- グレイスケール表示するためのエレメント -->
<div id = "glayer" class = "glayer"></div>
あとはスクリプトで座標指定
document.getElementById("glayer").style.zIndex = "100";
document.getElementById("glayer").style.display = "block";
document.getElementById("glayer").style.top = "100";
document.getElementById("glayer").style.left = "100";
document.getElementById("glayer").style.width = "100";
document.getElementById("glayer").style.height = "100";
これだとフラッシュの上に表示出来ない。
表示するには、iframe を利用する。
<!-- グレイスケール表示するためのエレメント -->
<iframe id = "glayer" class = "glayer" src="./glayer.html"></iframe>
glayer.html
<html><body style="background-color:#1F1F1F;"></body></html>
クリックジャッキング攻撃が問題になっているようで。http://itpro.nikkeibp.co.jp/article/COLUMN/20081105/318470/
エレメントID を使って値を取得、変更
prototype.jp の $F が楽チンですが実装してみると。
function eID(tagid){
return this.XMLHttpRequest ?
document.getElementById(tagid) :
document.all(tagid);
}
グレイスケールの表示（少しだけ短く書ける）
eID("glayer").style.display = "block";
タブルクリックで 選択メニューを表示 ※未チェック(^^;
function popup(event){
var p = document.getElementById("popmenu");
if(document.all){
p.style.top=document.body.scrollTop+winodw.event.clientY;
p.style.left=document.body.scrollTop+winodw.event.clientX;
//ie7 や ie8 だと
p.style.top=document.documentElement.scrollTop+winodw.event.clientY;
p.style.left=document.documentElement.scrollTop+winodw.event.clientX;
} else if(document.getElementById){
p.style.top=event.pageY+"px";
p.style.left=event.pageX+"px";
}
p.style.visibility="visible";
return false;
}
<div ondblclick="popup(event)">ダブルクリック</div>
<!-- メニュー表示するためのエレメント -->
<div id="popup" style="position:absolute;top:0px;left:0px;visibility:hidden;cursor:pointer;font-size:x-small">
<table border="1" cellspacing="0" cellpadding="3" valign="center" bordercolor="red" bgcolor="white" width="100">
<tr>
<td style="background-color:yellow">MENU</td>
</tr>
<tr>
<td onmouseover="this.bgColor='skyblue'"
onmouseout="this.bgColor='white'"
onclick=""
>何かする処理
</td>
</tr>
<tr>
<td onmouseover="this.bgColor='skyblue'"
onmouseout="this.bgColor='white'"
onclick="document.getElementById('popup').style.visibility='hidden'"
>閉じる
</td>
</tr>
</table>
</div>
メディアプレーヤーをコントロール（iframe に wmp を貼り付けて在るのが前提。）昔のソースを一部抜き出し。
--wmp.html はこんな感じで。
<body style="margin:0">
<object id="wmp"
height="480" width="640"
classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
onmousemove="window.status='再生時に表示される視覚エフェクトは、メディアプレーヤで最後に選択した物になります。'">
<param NAME="URL" VALUE="" />
<param NAME="rate" VALUE="1" />
<param NAME="balance" VALUE="0" />
<param NAME="currentPosition" VALUE="0" />
<param NAME="defaultFrame" VALUE="" />
<param NAME="rate" VALUE="1" />
<param NAME="balance" VALUE="0" />
<param NAME="defaultFrame" VALUE="" />
<param NAME="playCount" VALUE="1" />
<param NAME="autoStart" VALUE="-1" />
<param NAME="currentMarker" VALUE="0" />
<param NAME="invokeURLs" VALUE="-1" />
<param NAME="baseURL" VALUE="" />
<param NAME="volume" VALUE="50" />
<param NAME="mute" VALUE="0" />
<param NAME="uiMode" VALUE="none" />
<param NAME="stretchToFit" VALUE="-1" />
<param NAME="windowlessVideo" VALUE="0" />
<param NAME="enabled" VALUE="-1" />
<param NAME="enableContextMenu" VALUE="0" /><!-- 右クリックメニュー許可・禁止 -->
<param NAME="fullScreen" VALUE="0" />
<param NAME="SAMIStyle" VALUE="" />
<param NAME="SAMILang" VALUE="" />
<param NAME="SAMIFilename" VALUE="" />
<param NAME="captioningID" VALUE="" />
<param NAME="enableErrorDialogs" VALUE="0" />
<param NAME="_cx" VALUE="6482" />
<param NAME="_cy" VALUE="6350" />
</object>
</body>
--
<iframe src="wmp.html" frameborder="0" scrolling="no" name="wmpframe" width="640" height="480"></iframe>
<input type="checkbox" id="fullscreen" onclick="makeFullScreen()"/>ﾌﾙｽｸﾘｰﾝ
<input type="checkbox" onclick="wmpLoop()"/>Loop
function wmpRateChange(spd){
// 再生速度変更
var w = window.wmpframe;
var d = w.document.wmp;
d.Settings.rate = spd;
}
function wmpFastForward(){
// 5倍速再生
var w = window.wmpframe;
var d = w.document.wmp;
d.Controls.fastForward();
}
function wmpFastReverse(){
// 5倍速巻戻し
var w = window.wmpframe;
var d = w.document.wmp;
d.Controls.fastReverse();
}
function wmpPisAvailable(f){
// Play play メソッドが利用できるかどうかを調べます。
// Pause pause メソッドが利用できるかどうかを調べます。
// Stop stop メソッドが利用できるかどうかを調べます。
// FastForward ファイルが FastForward をサポートするか、および機能を呼び出すことができるかどうかを調べます。多くのファイルの種類 (またはライブ形式のストリーム) では、FastForward がサポートされません。
// FastReverse ファイルが FastReverse をサポートするか、および機能を呼び出すことができるかどうかを調べます。多くのファイルの種類 (またはライブ形式のストリーム) では、FastReverse がサポートされません。
// Next ユーザーが再生リスト内で次の項目に移動できるかどうかを調べます。
// Previous ユーザーが再生リスト内で前の項目に移動できるかどうかを調べます。
// CurrentMarker ユーザーが特定の名前付きマーカーに移動できるかどうかを調べます。マーカー付きのファイルに対してのみ有効です。
// CurrentPosition ユーザーがファイル内の特定の位置に移動できるかどうかを調べます。移動がサポートされないファイルもあります。
// CurrentItem ユーザーが currentItem プロパティを設定できるかどうかを調べます。
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.isAvailable(f);
}
function wmpPlayItem(no){
// メディア項目の再生
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.playItem(no);
}
function wmpNext(){
// 次の項目に移動
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.next();
MediaPlay();
}
function wmpPrevious(){
// 前の項目に移動
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.previous();
MediaPlay();
}
function MediaPlay(){
// 再生
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.Play();
}
function wmpStop(){
// 停止
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.stop();
d.CurrentPosition = 0;
}
function wmpPause(){
// 一時停止
var w = window.wmpframe;
var d = w.document.wmp;
d.controls.pause();
}
function wmpPlayStyleMode(){
//ランダム再生
var st;
var w = window.wmpframe;
var d = w.document.wmp;
if(d.settings.getMode('shuffle')==true){
d.settings.setMode("shuffle",false);
} else {
d.settings.setMode("shuffle",true);
}
}
function wmpLoop(){
//ループ
var w = window.wmpframe;
var d = w.document.wmp;
if(d.settings.getMode('loop')==true){
d.settings.setMode("loop",false);
} else {
d.settings.setMode("loop",true);
}
}
function attachBehaviour() {
//フルスクリーン の場合、attachEvent を使わないと動かない。
var w = window.wmpframe;
var d = w.document.wmp;
d.attachEvent('playStateChange',makeFullScreen);
}
function makeFullScreen() {
var w = window.wmpframe;
var d = w.document.wmp;
if (d.playState == 3) {
if(top.document.getElementById("fullscreen").checked==true){ //チェックBOX確認
d.fullScreen = 'true';
} else {
d.fullScreen = 'false';
}
}
}
プレイリスト（ASX）が在る場合のタイトルとか
d.currentMedia.getItemInfo("Title")
d.currentMedia.getItemInfo("Artist")
[WMP].asx ファイルの内容
IEに対応、HTML5 Video機能プラグイン
http://journal.mycom.co.jp/news/2010/02/22/037/
シルバーライト（SmoothPlayer）を使った配信。(たぶんこの辺り)
Silverlight Applications (IIS Smooth Streaming)
http://msdn.microsoft.com/en-us/library/ee958032.aspx
Smooth Streaming Player Development Kit
http://www.iis.net/expand/SmoothPlayer
日本語だと
http://technet.microsoft.com/ja-jp/library/dd775195.aspx
クロスサイト・スクリプティング（XSS)対策
セキュアなWeb構築の秘訣〜クロスサイトスクリプティングは思わぬ個所に巣食っている〜
第1回 クロスサイトだけが問題ではない
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148383/
第2回 多面的な特徴を持つ
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148384/
第3回 クロスサイトの意味
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148385/
第4回 さまざまな個所に潜む
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148386/
第5回 受動的攻撃との組み合わせで深刻に
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148387/
第6回 対策の基本はHTMLエンコード
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148388/
第7回 見落としがちな問題
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148389/
第8回 自動生成するJavaScript対策
http://itpro.nikkeibp.co.jp/members/NBY/Security/20040809/148390/
◆画面解像度は横1,024ピクセルが6割〜Jストリームが Web 環境調査
http://japan.internet.com/wmnews/20061106/3.html
◆IPA、「安全なウェブサイトの作り方 改訂第2版」を発行
http://japan.internet.com/webtech/20061106/4.html
◆フィッシング詐欺(擬似サイトと対策)
http://eazyfox.homelinux.org/Security/special/Security24.html
◆NO!PHISHING.JP : アドレスバー（URL）偽装の脆弱性と事例
http://no.phishing.jp/topic/2006/06/url_1.html
◆XSSの実例
https://www.webappsec.jp/modules/bwiki/index.php?XSS%A4%CE%BC%C2%CE%E3
◆XSS (Cross Site Scripting) Cheat Sheet
http://ha.ckers.org/xss.html
不正コードの標的はコンピュータからブラウザへ？
http://www.itmedia.co.jp/news/articles/0703/28/news089.html
常識を覆す「悪意あるコードの実態」--米社調査
http://itpro.nikkeibp.co.jp/article/Research/20070328/266601/
「企業はWebアプリケーションの脆弱性を認識していない」
――ネットワーク・ファイアウォールだけでは攻撃は防御できない
http://opentechpress.jp/security/article.pl?sid=07/03/23/0411234
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
http://coliss.com/articles/build-websites/operation/css/577.html
情報セキュリティ白書2008 第II部「10大脅威 ますます進む『見えない化』」を公開
http://www.ipa.go.jp/security/vuln/20080527_10threats.html
JavaScript奇妙なふるまいまとめサイト
http://journal.mycom.co.jp/news/2010/02/16/039/
XSS のありふれた常套手段としては、onerror 記述する。
<img onerror=alert(0) src=…>
marquee を使った場合だと、<marquee onfinish=alert(0)>
スペースを入れれない場合は、コメントを入れる。 var/**/a=1; または %20
IE限定、スラッシュ無しでの場合は
<script onreadystatechange=alert(0)>
<bgsound src="javascript:･･･
現在では、Unicode なダブルバイトの文字列だけで…
TOPページ以外のページに直接アクセスされた場合、TOP へ誘導（ASP だけど。。。）
global.asa に記述
<script language="VBScript" runat="Server">
Option Explict
Dim uArray
Dim ScriptName
Dim CurrentPG
Dim CurrentDIR
Sub Session_OnStart
ScriptName = Requset.ServerVariables("SCRIPT_NAME")
If Instr(ScriptName, "/") > 0 Then
uArray = Split(ScriptName, "/")
CurrentPG = LCase(uArray(UBound(uArray)))
If UBound(uArray) - 1 >= 0 Then
CurrentDIR = LCase(uArray(UBound(uArray) -1))
Else
CurrentDIR = ""
End If
If CurrentPG <> "index.asp" Then
Response.Write "<" & "script lanugage='javascript'" & ">"
Response.Write "parent.location.href='index.asp'"
Response.Write "<" & "/script" & ">"
End If
End Sub
</script>
IIS で UTF-8 の結果を返す
<%@ Language=VBScript ENABLESESSIONSTATE=False CODEPAGE=65001 LCID=1041 %>
<% Response.CharSet = "UTF-8" %>
出力時のデータは XML の場合
<?xml version="1.0" encoding="UTF-8" ?>
<data>
<title>タイトル</title>
</data>
<!-- こんな感じ -->
HTML の場合は、 HEAD フィールドに
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
を追加しておく。
クライアントからサーバへ送る時
FORM で GET や POST する場合は
<form id="form1" action="about:blank" method="get" accept-charset="utf-8">
を忘れずに。
XML で POST する場合は
.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
javascript で POST する場合は
document.form.method = "POST";
encodeURIComponent を使う？
※ファイルの保存時に UTF-8 を選択する事。
[IIS]CodePage を UTF-8 に設定すると一致しない文字で出力されることがある
http://support.microsoft.com/kb/295063/
UTF-8 エンコーディングの危険性 - WebOS Goodies
http://webos-goodies.jp/archives/51072404.html
UTF-8.jp
http://utf-8.jp/
内田順一「学習1カ月でWeb制作会社にもぐり込む！」
msdn JScript
JScript 8.0(MSDN2 Library)
Firefox 3とFirebugで始めるJavaScript開発
日本の JavaScript ユーザのためのハブサイト
JavaScriptオブジェクトリファレンス
JavaScriptのイロハ
オブジェクトなJSの基礎講座
高度な JavaScript 技集
とみのホームページ
Javascriptで指定のHTML要素を動的に角丸デザインにする方法。
JavaScript統合開発環境 JSide 1.0 登場
そろそろきっちりJavaScript 第2回 執筆＝富田陽介 無名関数についてもう少し考える
Javascriptによる大規模開発の覚え書き。高速化編
一行で IE の JavaScript を高速化する方法
Google製JavaScript最適化ツール「Closure Compiler」
javascriptを初めて学ぶ人についてのおさらい。その１
IEとFirefoxで「リファラを送信しない設定」をする
わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」
テーブルに実装できるjQueryプラグインいろいろ
iPhone風のチェックボックスを実装できるjQueryのプラグイン『iPhone-style Checkboxes』
jQuery 1.4.2、マイナーアップもさらに高速化
第6回 JavaScriptでHTMLをダイナミックに書き換える 前編
JavaScript でテトリスみたいなゲームを作ろう！
Flashなしでもここまで作れる！
印刷専用ページを簡単に作るには（SSI版）
インターネットチャンネル向けのウェブページを作りたいのですが…。
Wiiのネット機能悪用の動き、Opera旧版の脆弱性に起因
最も人気あるプログラミング言語は「JavaScript」、Ajax開発における関心事1位は「クロスブラウザレンダリング」
MicrosoftからJavaScriptのメモリリーク検出ツール
MS、XSSの脆弱性検出ツールを無償公開
もいちどイチから！ HTTP基礎訓練中 第3回 Ajaxのセキュリティ、特殊なものだと思ってました
Ajax 関連 入門 Ajax Ajaxセキュリティ (単行本（ソフトカバー）) （アマゾン）
表示をぐりぐり動かせるWeb技術「Ajax」って、だから何なの？（ネット・トレンド）
JavaScript++かも日記
米Microsoftの次世代ポータル「Start.com」が日本語に対応
AJAXを全面的に使ったマイクロソフトのポータルサイト「Start.com」が日本語に対応
Ajaxで作られた手書き文字認識
ふにゃふにゃGoogle
Ajaxフォトアルバムのフェードイン画像フレームを作ろう
JavaScriptでリッチアプリケーションを実現 - qooxdoo 0.1.4
Ajaxを超える「Arax」採用、リッチクライアント新技術の内容は
Opera、携帯向けAjaxサイトを構築するためのSDK
時間がないときの Ajax
［ASP.NET］Ajax.NETでAjaxプログラミングを効率化するには？
米Microsoft、AjaxベースのIM通信クライアント「Communicator Web Access」を発表
AJAX Toolkit Framework、Apache Incubator Projectへ提案される
ネットビレッジ、Ajax技術を活用したタイムマネジメントツールを公開
第3回 どんなに無茶をやっても「それもありかな」なAjax
ASP.NET にスパイスを加える: AJAX
浸透し始めたAjax，開発支援ツールに期待感 Windowsライクな操作性を実現できるが実装は「茨の道」
第4回 自動車業界のAjaxを活用したキャンペーンを目撃せよ
Ajax技術の目に見えない通信内容をのぞいてみよう
AJAXを使ったJava製プロジェクトトラッキングツール - TrackIt 1.0.0
Yahoo!からのバレンタインプレゼントはWeb 2.0/AJAXライブラリ
宇宙から見た富士山の3D画像! - JAXA、衛星「だいち」の取得画像を初公開
Ajax地図で住宅情報検索 リクルート
ＨＯＷＳ、ホームページをマウスだけで制作・ソフト開発
HOWS、動的 Web ページ作成ツール「AjaxBuilder Lite」β版を無料公開
マクロメディア、Web 作成ツール各種をバージョンアップ
Windowsでイントラ・ブログを構築する
リッチクライアントベンダ・インタビュー「Ajaxをコーディングレスで作成するAjaxBuilder」
Ajaxで人気のRuby on Ralisとは？
“どのブラウザでも動くAjax”を共有財産として育てよう
Microsoft、新検索サービス「Windows Live Search」ベータ版を公開
JSPでAjaxポートレット JSP Controls Tag Library 0.5
Ajax開発環境を無償にしたTIBCOは勝ち組？
Ajaxのビジュアル開発が可能に，TenArtni Ninja-VA新版がEclipsにも対応
Ajaxを用いたWebアプリケーション構築ツール「AjaxBuilder Lite」
その70「Ajaxの仕組み」
JSONによるデータ通信でAjaxアルバムを完成させる
Ajaxを使ったファイルマネージャをPHPで作ろう
Ajaxを利用し、ブラウザ上でデスクトップと同じ機能を提供する「StartForce」
Adobe、Ajax対応ページ作成用の「Spry」公開
MSのAjaxツールセットの名前は「Comet」
Ajaxの特徴に潜むリスクをサンプルアプリで確認しよう
Yahoo!Web検索サービスとGWTを使ってみよう
Ajaxを理解する4つのポイント
そのサービスはAjaxフレームワークで一変できるか？ (1/4)
サーバが通信を開始できるComet活用Webチャット
Comet: Low Latency Data for the Browser
Flexのフレームワーク、Cairngormでサンプルアプリ
企業サイトに「Web 2.0」を実装する 連載一覧
Webアプリに使えるAjaxライブラリ8選！
Ajax YUIライブラリを使う準備
Ajaxな無料のWeb OS、スウェーデンのXcerionが開発中
第5回 Amazon Webサービスを料理してみる
Ajaxの高度な使用例、Yahoo! pipes
Ajaxでデバッグしよう
JavaScriptレスでAjax開発、NTTデータ新フレームワークの実力は
【ハウツー】らくらくAjax実装!ちょっと使ってみませんか? - myAJAX
Ajaxフレームワーク「qooxdoo 0.7」登場 - メジャーリリースの位置づけ
リバースAjax機能はAjax＋Javaをもっとやさしくする？
Ajaxおいしいレシピ
Prototype 1.6.0、待望のリリース - 同時に書籍も発売
詳解! Dojo Toolkit 1.0 (基礎知識編) - 頻出APIと便利機能を一気におさえる
いまからはじめるPrototype.js
JavaScriptへのマルチスレッド・プログラミングの導入
Google人気JavaScriptライブラリ配布開始、ネット全体でキャッシュ効果
まじで使えるJavascriptライブラリ75選
Yahoo!、JavaScriptフレームワーク最新YUI 2.6.0発表
Prototype 1.6.0.3登場、待ち望まれていたバグ修正あり堅実さ向上
jQueryとMicrosoft
jQuery 1.3 リリースノート - jQuery 1.3.1 日本語リファレンス
連載：jQuery逆引きリファレンス
ざっくり覚えて始められるjQueryセレクタ入門
アイコンがふわっと拡大するjQuery
画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」
SubSonicを使ってASP.NETで簡単にDBアクセスする - プログラミング編
Ajax JavaScriptフレームワークどれを選ぶべきか - John Resig比較
20の優れたAjax効果
40分で覚える！jQuery速習講座
ハイパフォーマンス Web アプリケーションの構築
[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず
クールなドロップダウンメニューをオンラインで作成 ダウンロードして使える「Pure CSS Menu」
リスト形式でサイトマップを書くとグラフィカルに表現してくれるCSS『SlickMap CSS』
小さくて可愛いフリーのアイコンセット「Minimalist Pixel Icon Set」
40,000個以上のアイコンをシンプルなインターフェースで検索できる『iconlet』
アイコン・ファビコンを作成するサイト20
なんとも太っ腹！無料で使えるかわいいアイコンが560個！『User Interface Icons』
これは使える・・・CCライセンスの無料ミニアイコンが512個！『Led Icon Set』
マルチタッチインターフェース時代のアイコン集『Gesturecons』
商用・個人サイトで利用可能なロイヤリティフリーの写真素材サイト集
商用可！3000枚以上の写真素材をダウンロードできる国内フリー写真素材配布サイト「Futta.NET」
国内の商用利用可能なWeb制作に使えるフリー素材配布サイトまとめ
JavaScriptの復権
あなたのブログ読者はほかにどんなブログを読んでいる？--サイドフィードの新サービス
あなたのページを最速にする14の掟
MS、無償のWeb制作者向けIEプラグイン「Internet Explorer Developer Toolbar」正式版公開(CodeZine)
Firebug lite
Firebug for IE7「FireBug Lite ++」
IEでjavascriptのエラーをデバッグする方法
IEでのデバッグ/動作確認に便利なソフトいろいろ
モバイルサイトをPCで見るためのツールやFirefoxアドオン
Web開発者は必須！様々なバージョンのIEを収録した「Internet Explorer Collection」
IEでのJavaScriptデバッグを可能にする「CompanionJS」
これは凄い、Ajaxをオンザフライ解析 - Razor Profiler
Webのバグを燃やしまくるFirebugと、そのアドオン7選
【レビュー】入れておきたいFirefoxアドオン - ジャンル別リスト「IE」編
IE6 and IE7 速度テスト（ベンチマーク）
http://www.openspc2.org/JavaScript/benchmark/index.html
試してみた。
●Windows 2000 SP4 + IE6 P3 800Mhz Dual, 512MB 文字連結 36922msec
●Windows XP SP2 + IE6 P4HT 2.6GHz, 512MB 文字連結 5969msec
●Windows XP SP2 + IE7 core Duo 1.83GHz, 1024MB 文字連結 3047msec
業務システムでAjaxを使う際の「JavaScript問題」とは
API関連 最新WebサービスAPIエクスプロ-ラ ~Amazon、はてな、Google、Yahoo! 4大Webサービス完全攻略（アマゾン）
Webプログラミングで腕試し、米Googleが「Homepage API」を公開
意外と簡単！自社サイトの案内地図をGoogle Mapsに置き換えてみよう
ヤフー、API公開スタート まずは検索から
Yahoo! Photosなど4サービスのAPIを新たに公開
ヤフー、開発者向けサイトで Yahoo! オークション API を公開
【ハウツー】ゼロからはじめるYahoo! UI Library - Panel編
Konfabulator 2.1.1
米Yahoo!、「Konfabulator」改め「Widget Engine 3.0」をリリース
はてなウェブサービス
はてな、会員認証APIを外部に開放
Amazon広告スクリプト：lilbox
Amazon AWS を利用できるためのXML, XSL理解備忘録
米Amazon.com，開発者向けオンライン・ストレージ・サービス「Amazon S3」開始
Google AdSense API がベータ公開
ラクシーズ、ワールドカップを前にGoogle Maps API利用のチャットサービス開始
paperboy&co.、会員認証システム「JugemKey認証API」を公開
スケジュール管理サービス「Googleカレンダー」日本語対応版が登場
Windows Live ガジェット SDK の日本語版を公開
URLを入力するだけでHTMLをPDFに変換する無償サービス，Web APIも公開
Dojo、Yahoo! Pipesをサポート
Google Apps Premier Edition、国内でも提供開始へ
「楽天トラベル」APIを公開、約21,500軒の宿泊施設情報が取得可能
Wii向けFlashゲーム用の十字キー操作API
「Ajaxアプリでもナビゲーションバーで戻りたい!」を叶える、dsHistory登場
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類
MS、Flashキラーの新技術「Silverlight」発表
【Silverlight 2 日本語 チュートリアル提供開始】 実践に役立つ基本を徹底解説! http://silverlight.net/internationallearn/default.aspx
Googleがフィード組み込みを支援する開発者向けAPIを発表
Google AJAX Search APIでGoogle Newsを表示
Microsoft AJAX Libraryでドラッグ＆ドロップ対応のWebページを作成する
かな漢字変換ソフト「VJE」、ヤフーのWeb APIとして“復活”
マイクロソフト、Windows Live APIの日本語リファレンス公開
脆弱性対策情報データベースのソフトウェアインタフェースを公開
セカイカメラのAPIが公開、東急ハンズやエバーノートが対応サービスを開発
京都の街で謎解き！リアル探偵ゲーム「おさんぽ探偵団」をやってみた http://b.hatena.ne.jp/articles/201003/907
日経ソフトウエア 2006年5月号
http://software.nikkeibp.co.jp/software/backno/2006/0605indexc.html
特集
Google，Amazon，Yahoo!徹底活用
Web APIプログラミング！
特集1 Web APIプログラミングに挑戦しよう！
特集2 Google Web APIsでWeb検索プログラミング！
特集3 Google Homepage APIを使ってみよう
特集4 Amazon / Yahoo! JAPAN Webサービス徹底活用
特集5 SOAP，WSDL，REST――Web APIの基礎技術を学ぶ
だ、そうです。
日本で公開されているAPI一覧（下書き）
最近参考にさせてもらったサイト
prototype.js の開発者向けメモ
Ajaxを勉強しよう
script.aculo.us - web 2.0 javascript
11月11日の技術勉強会
AJAX Activity indicators | Animated GIFs designed to indicate your site is doing something
たのしいXML: XML/XHTML入門ページです
RSS関連
応用技術(RSS, SVG,MathML...) - ［HTML・XML］All About
RSS作成ソフトを使ってRSSを自動生成しよう
W3C、RSS/Atomフィードの文法を検証するバリデータを公開
ごく簡単なHTMLの説明
RSS -- サイト情報の要約と公開
Atom - RSS改訂の試み
ドリコムが具現したWeb 2.0の第一弾「ドリコムRSS」--ユーザーに合わせた広告配信も
RSS収集・分析サイト「BLOG360」開設、ブログで話題のキーワードを表示 形態素解析 の実験はhttp://www.netdive.jp/cha.aspで以前触ってみたことがあります。
キーウォーカー、プロガーのプロファイリングを可能にする検索サービス
「Web 2.0的」考察−第1回 RSSとAtom
［ASP.NET］データベースからRSSフィード情報を生成するには？
Web2.0
それはWeb 2.0へと続く道
後編 Web2.0の全体像を整理する Web2.0時代のお金・情報の流れをつかむ
話題の次世代Webサービス「Web2.0」っていったい何だ？
ベンチャー企業の代表者が解くWeb 2.0と経営の本質
広がるWeb 2.0の世界，使えるサービスはこんなにもある
大企業は発想の転換を、シリコンバレーの頭脳を使って開発する時代に
企業はコンテンツと顧客データベースの一元管理を
今後は製造業で企業情報システムとWebの統合が進む
Web 2.0時代の三行広告サイト「edgeio」がサービス開始
第5回：O'Reilly氏による「Web 2.0とは何か」のポイント（後編）
第7回：「Web 2.0」を理解するための、たった2つのポイント
ビジネス展開におけるWeb 2.0 第１回：Web 2.0が意味する新しいトレンド
「Web2.0の背景を知る」 第1回 新しい時代の予感
Web2.0な日々 自分だけの検索エンジン
Google Appsで家族ドメインを運用する
Web 2.0は危険がいっぱい: 第1回 悪意のJavaScriptで情報が漏えい
SEO対策講座 - 検索エンジン事情 - 独自ドメインはSEOに有利か？
http://www.fseeker.jp/seolecture/column/20060327.html
SEO の目的は何？ 目的と手段を混同しない
http://japan.internet.com/column/webtech/20060322/7.html
こんなことが分かっていない！
http://japan.internet.com/column/wmnews/20060322/6.html
自分のサイトがほかのブラウザでどう見えるか試す「browsershots.org」
http://gigazine.net/index.php?/news/comments/20060908_browsershots/
IE確認の必需品「IETester」がIE8 RC1に対応してバージョンアップ
http://coliss.com/articles/browser/ie/release-ieterter-03.html
HTMLクイックリファレンス
http://www.htmq.com/index.htm
色の組み合わせをチェックしてみる
http://www.kanzaki.com/docs/html/color-check
Webデザイン・マーケティングセミナー・レポート
http://itpro.nikkeibp.co.jp/webdesign/index.html
フリーな(X)HTML/CSSなテンプレート集のまとめ
http://phpspot.org/blog/archives/2009/10/xhtmlcss_1.html
W3Cの検証サービス
http://validator.w3.org/
第5回 デザインのセンス，持ってますか
http://itpro.nikkeibp.co.jp/article/COLUMN/20061121/254314/
HTML 4.01の正しい記述方法、最小構成編
http://journal.mycom.co.jp/news/2008/09/30/023/
文書構造を表現するXHTMLタグの正しいマークアップ
http://www.atmarkit.co.jp/fwcr/design/tag/structure/index.html
IE 6で泣かないための、9つのCSSハック
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack01/01.html
CSSグラデーションを使ってクールなボタンをつくる方法
http://journal.mycom.co.jp/news/2009/12/04/010/
IE6問題に対処する10のテクニック
http://journal.mycom.co.jp/news/2009/03/09/026/
エンジニアのためのWebデザイン教室 第27回 フォームとCSS
http://itpro.nikkeibp.co.jp/article/COLUMN/20080924/315327/
JavaScriptベストプラクティス: Unobtrusive DOMプログラミングのススメ
http://journal.mycom.co.jp/news/2008/09/25/035/index.html
CEATEC JAPAN 2008 - 世界初! ソニー、テレビ用の自作アプリ開発環境を公開
http://journal.mycom.co.jp/articles/2008/10/02/ceatec_sony/
個人・商用サイトで利用可能な大きいサイズのテクスチャ配布サイト -Texturise
http://coliss.com/articles/build-websites/operation/design/1542.html
プログラミング向けフォント３２選
http://kenz0.s201.xrea.com/weblog/2008/10/post_144.html
35 High-Quality Free Fonts For Your Designs
http://www.instantshift.com/2009/07/26/35-high-quality-free-fonts-for-your-designs/
Webサイトの制作／運用の効率化を図る「ガイドライン策定」のすすめ（前編）
http://codezine.jp/article/detail/3289
Firefox拡張機能（Extention）の簡単な作り方メモ
http://hisasann.com/housetect/2008/12/firefoxextention.html
HTTPの通信状況をデバッグしてボトルネックを発見できる「HttpWatch Basic Edition」
http://gigazine.net/index.php?/news/comments/20090218_httpwatch/
文字コードと携帯絵文字
http://labs.unoh.net/2009/02/post_132.html
ブログパーツの作り方 第1回：ブログパーツの基礎知識
http://thinkit.jp/article/823/1/
【レポート】Internet Explorer 8の新機能「Webスライス」でどうやって認証付きサイトを利用する?
http://journal.mycom.co.jp/articles/2009/03/31/webslices/
かんたん10分プログラミング
http://itpro.nikkeibp.co.jp/article/COLUMN/20060927/249087/?ST=develop
第8回 WebページにGoogle APIで簡単にきれいなグラフを描く
http://itpro.nikkeibp.co.jp/article/COLUMN/20090818/335660/?ST=develop
HTML 5 ― HTML 4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
http://hxxk.jp/2008/09/29/0118
あまり知られていないけれど、HTML5では正規表現が使えるようになる
http://www.publickey.jp/blog/09/html5_3.html
「Google 日本語入力」はATOKやMS-IMEを超えることはできるのか、実際に使って実用に堪えるかどうか試してみた
http://gigazine.net/index.php?/news/comments/20091203_google_japanese_input/
スクリプトの変換候補が出ると便利そうですね。
上の方でスクリプトがスプリクトになってたので修正。
以外と気づきませんね、この間違い。
似たような間違いに、ボウリングとボーリング、シミュレートとシュミレートなと。。。
Gogle Chromeエクステンション登場、Firebug Lite
http://journal.mycom.co.jp/news/2010/02/05/035/
TOP
メモ全般
リモートデスクトップ 関連
WSC 関連
SMTP 送信関連
IIS 関連
ASP 関連
Java Scriptを理解する（ここ）
VHD 仮想化関連