スポンサードリンク
カテゴリー:"JavaScript"

JavaScript で特定のHTMLタグの子要素(タグ)の数を取得するには childElementCount を使おう!

JavaScriptから特定のHTMLタグの子要素を取得してホゲホゲする用事ができたので、いろいろと調べてみた結果、childElementCount を使うのが良さそうだったのでメモメモです φ(..)。

たとえば・・・

続きを読む »

JavaScript からHTMLタグの属性値をうまく取得できない時は、getAttribute を使えばなんとかなる(ハズ)

JavaScriotからHTMLの属性(プロパティ)の値を取得する場合、document.getElementById('hoge').value なんてやると手っ取り早いのですが、オリジナルの属性をしかもハイフンの入った名前で付けられてる(例えば my-id みたいな)と、この書き方では上手く中身を取り出せません。

知らずに document.getElementById('hoge').my-id と書いて見事にハマってしまいました・・・orz

どうやらmyの後ろの “-” が減算演算子として扱われてしまうようなんです。つか、誰だよ、こんな属性作ったの!

続きを読む »

ブックマークレットから直接クリップボードにテキストをコピーするのは無理っぽい

ちょっと前に、現在表示しているページヘのリンクを作成するブックマークレットを作ってみたのですが、せっかくダイアログに[OK]ボタンがあるのだから、そもままクリップボードにテキストをコピー出来たら便利じゃね? と、いろいろ調べてみたのですが・・・。

タイトルにもある通り、どうやらちょっと無理っぽいという結論に達しました。

続きを読む »

現在表示しているページヘのリンクを作成するブックマークレットを作ってみた

現在表示しているページへのリンクを作成するブックマークレットを作ってみました。

続きを読む »

JavaScriptを使ってHTMLの特定の要素の後に要素を追加したい

Javascriptを使ってHTMLの特定の要素の後に新たな要素を追加したかったのですが、insertBeforeというメソッドはあってもinsertAfterというメソッドって無いんですね。

まぁ、探せば間違いなく誰かが書いてると思うのですが、勉強も兼ねて実装してみました。

続きを読む »

setTimeoutはこれだけ覚えておけばOK

久しぶりに javascript のコードを書いてて、setTimeout を使おうと思ったらすっかり忘れてたので自分用にメモメモです φ(..)。

文法

Webを検索してみると使い方がいろいろヒットするわけですが、結局のところ

setTimeout(function(){ 実行したい処理 }, 待機時間);
 

という書式だけ覚えておけばOKなんですよね。ちなみに待機時間はミリ秒で指定します。1秒だと 1000 を指定することになるわけです。

実際に使う場合は、

setTimeout(function(){ alert("Timeouted!"); }, 1000);
 

みたいに使います。

注意点

で、注意しないといけないのは、setTimeout は処理を指定時間止めて待つわけではない。という事です。

イメージ的には、“指定秒後に実行する” というイベントを作って、そこに処理を登録すると考えればいいかと思います。

似たようなパターンとしては、onLoad イベントに処理を登録しておくと、ページのロードが終わったところで登録されている処理が実行される場合が近いかと思います。

ですので、

alert("hoge");
setTimeout(function(){ alert("fuga"); }, 1000);
alert("piyo");
 

という処理の場合、まず "hoge" のダイアログが表示され、次に "piyo" のダイアログが表示され、最後に "fuga" のダイアログが表示されます。

参照リンク
 ・JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記

JavaScriptからチェックボックスの情報を取得しよう

JavaScript からチェックボックス(下の2行目のタグ)の値を取得しよう! というお話です。

<form name="nF1" id="iF1" action="./index.cgi" method="POST">
  <input type="checkbox" name="nCB1" id="iCB1" value="OK">
</form>

この場合、

var value = document.getElementById('iCB1').value;

とすれば、値 "OK" は取得できるのですが、チェックボックスがチェックされているかどうかまでは、分かりません。

というわけで、チェックされている場合のみ値を取得するには

var value = undefined;
if(document.getElementById('iCB1').checked){
  value = document.getElementById('iCB1').value;
}

としてやればOKです。また、name 属性経由で、

document.nF1.nCB1.checked;
document.nF1.nCB1.value;

からもアクセスできます。

ちなみに、checkedプロパティの値は、チェックされていれば true が、チェックされていなければ false がセットされています。

また、checkedプロパティに true or false を代入することで、JavaScript からチェックボックスのチェックの ON/OFF を制御することができます。

参考リンク
 ・チェックボックスを扱う-JavaScript入門
 ・全てのチェックボックスをチェック/解除する - JavaScript
 ・チェックボックスを全チェックON/OFFとする方法 - JavaScript

JavaScriptでブラウザに入力されたキーコードを取得しよう

ブラウザ上で、入力されたキーのキーコードを取得してホゲホゲするプログラムを書いてたんですが、ブラウザによって使うメソッドが違うじゃないですか!

というわけで調べてみたところ、キーコード取得のために使われる event のメソッドは、keyCode と which と charCode のようでしたので、全てに対応できるように関数(getKeyCode)にしてみました。

ソースは以下の通り。

<html>
<head>
<title>Get KeyCode</title>
<script type="text/javascript">

function onKey(evt){
  alert(getKeyCode(evt));
  return false;
}

function getKeyCode(evt){
  var kc;
  
  if(evt.keyCode){
    kc = evt.keyCode;
    
  }else if(evt.which){
    kc = evt.which;
    
  }else if(evt.charCode){
    kc = evt.charCode;
    
  }
  
  return kc;
}

</script>
</head>
<body>

<input type="text" onkeypress="onKey(event)">

</body>
</html>
 

動作確認は、Windows XP SP3 上の IE8, Firefox 16.0.2, Chrome 23.0.1271.64, Opera 11.51, Safari 5.0.5 にて行いました。

JavaScriptのremoveChildを使う際の注意点

JavaScript の removeChild を使ってノードの削除をしようとしてハマったので。

そもそもは、とあるノードの子ノードを全て削除する関数を書いてたのですが、これがどうにもうまく行かなくて、新JavaScript例文辞典子ノードを全て削除する (removeChild) にあった関数を使ったら、上手く動いたんです。

というわけで、それを参考に書き直したのが以下の関数です。引数はHTML要素のIDで、該当要素の子要素を全て削除します。

function delInnerHtmlAll(nodeId) {
  var element = document.getElementById(nodeId)
  for (var i=element.childNodes.length-1; i>=0; i--) {
    element.removeChild(element.childNodes[i]);
  }
}
 

で、「何で上手く行かなかったんだろう?」 といろいろ試してみた結果、for ループの回し方がダメだったんですね。

当初、僕は

for (var i=0; i<element.childNodes.length; i++) {
 
と書いてたんですが、頭から消していってはいけなかったんです。

想像するに、最初の要素を削除した場合、Perl で配列に対して shift を実行したときように、添字に対する要素がズレていくのが原因ではないかと思われます。

具体的には、1番目の要素が削除されると2番目の要素が1番目の要素として再設定されて、3番目以降の要素についても同様にズレていって、最終的には配列としての長さが1短くなるというイメージかな。

なるほど、それでは上手く動かないわけだ。

参照リンク
 ・子ノードを全て削除する (removeChild) by 新JavaScript例文辞典

JavaScriptを使ってセキュアなログインを実現する MD5(Digest)認証

Webアプリで、SSL を使わなくてもセキュアなログインは実現できないものか? と調べていたら、Digest認証(MD5認証)なる方法を見付けたのでメモメモφ(..)。

前提条件としては、ユーザーのIDとパスワードのハッシュ文字列(MD5でハッシュしたもの)を、予めサーバー側に保存しておきます。

実際のデータのやりとりは、以下のとおりになります。

1.クライアント
ⅰ.サーバーに対し、ログインページをリクエスト
2.サーバー
ⅰ.クライアントにランダムな文字列(nonce)を埋め込んだログインページを返す
3.クライアント
ⅰ.ユーザーが入力したパスワードからハッシュ文字列(cMd5pw)を作成
ⅱ.ユーザーが入力したID(id)と、 cMd5pw, nonce からハッシュ文字列(response)を作成
 response = MD5(cMd5pw + nonce + id)
ⅲ.id, nonce, response をサーバーに送信
4.サーバー
ⅰ.クライアントから送られてきた id, nonce と、サーバーに予め格納されているパスワードのハッシュ文字列(md5pw)から、新たにハッシュ文字列(reResponse)を作成
 reResponse = MD5(md5pw + nonce + id)
ⅱ.クライアントから送られてきた response とサーバー側で作成した reResponse を比較して、一致すれば認証成功!

この方法なら平分のパスワードはおろか、ハッシュ化されたパスワードのやりとりもありませんし、サーバーに平文のパスワードを保存しておく必要もないので、パスワードの保護という点においてはかなり強そうです。

参照リンク
 ・Digest認証 - Wikipedia
 ・HTTP クライアントを作ってみよう(6) - Digest 認証編 -

MD5を計算するJavaScriptライブラリ
 ・md5.js (mitsunari@cybozu labs)

関連エントリー
 ・JavaScriptでMD5を計算するライブラリ 「md5.js」

スポンサードリンク

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER

  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク