カテゴリー別アーカイブ: JavaScript

date.getMonth()が微妙

date.getMonth()は+1しないと月の値にならない。

1月だったら0,3月は2,12月だったら11が返ってくる値。

なんでこんな仕様なんだろう。

配列に入っている値を返してて要素が0だから?

そんなこと理由にならないような。。

意味がわかりません。。。

javaScriptでonChangeでアンダーバー入りの関数が動かない/未定義になる。

タグ上のonChangeに定義済の関数xxxxx_bbbbb_ccccc()というような、
アンダーバーが上記のように2つ入った関数を呼び出すことができなかった。
not defined functionみたいなエラーになってしまう(FireFox33.0.2)。

以下のブログと同じような現象かと思います。
ragranje.blog73.fc2.com/blog-entry-25.html

アンダーバーをなし、または1つの関数にしたり、a_b_c()というような関数にしたら動いた。

意味がよくわからない。アンダーバー無くした関数にして回避したが、注意が必要。

[JavaScript]ブロック要素の非標示を活用するサンプル。

右とか左とかにあるサイドバーがひょっこり隠れたり現れたりするといいのですが、いったいどうやるの?ということで実験...単純にブロック要素(div)の表示と非表示を切り替えればよいのではないかと思います。メインコンテンツのブロックをfroat(ラピュタ城の如し浮遊城)設定していておけばいい気がします。実験はしていませんが...。

obj.style.visibility = "hidden";

obj.style.display = 'none';

これらの違いは、赤緑ブロックと青ブロックの違いを見れば一目瞭然です。青ブロック(visibility:hiddenで指定している方)は忍者のように隠れているだけで存在しており、(初期状態の)緑ブロック(display:none)は舞台裏に完全にひっこみ空間から消えているような状態になる(赤いブロックの下に隠れているわけではなく、存在が無い状態)。

※課題:フェードイン/フェードアウトなどのアニメーションを実現するにはどうしたらいいか?
 (jQueryなどを分析した方がすぐわかりそうである)



コードはコチラ↓

<script type="text/javascript">
window.onload = function(){
  var obj = document.getElementById('div_j4k');
  var obj2 = document.getElementById('div_j5k');
  obj.style.display = 'block';
  obj2.style.display = 'none';
}
function j4k(){
  var obj = document.getElementById('div_j4k');
  var obj2 = document.getElementById('div_j5k');
  if(obj.style.display == 'none'){
    obj.style.display = 'block';
    obj2.style.display = 'none';
  }else{
    obj.style.display = 'none';
    obj2.style.display = 'block';
  }
}
function j3k(){
  var obj = document.getElementById('div_j3k');
  if(obj.style.visibility == 'visible'){
    obj.style.visibility = 'hidden';
  }else{
    obj.style.visibility = 'visible';
  }
}
</script>

<input type="button" onClick="j4k(); return false;" value ="赤/緑ブロック要素の非標示(none)">
<br />
<input type="button" onClick="j3k(); return false;" value ="青ブロック要素の非標示(hidden)">
<br />
<br />

<div id="div_j3k" style="width:100px; height:100px; background-color:#00F; visibility:hidden; float:left;">
</div>
<div id="div_j4k" style="width:100px; height:100px; background-color:#F00; float:left;">
</div>
<div id="div_j5k" style="width:100px; height:100px; background-color:#0F0; display:none; float:left;">
</div>
<div style="clear:left;"></div>
<br />

n文字毎に改行して出力したい。

Webのシステムを作成していると、
あまりに出力する文字が長すぎてレイアウトが壊れたりするので、
特定の長さで改行しつつ出力して欲しいことがある。

(...で特定文字数で消してしまい、
 詳細画面で全文字を出力するという方法をとることもある。)

サーバサイドスクリプトでやってもいいが、
JavaScriptで正規表現を用いて改行を追加してもよい。

str = str.replace(/(.{20})/g,'$1<br>');

※\n改行でいい場合は<br>を\nに置き換えればOK。

javascriptとimgタグの表示が1回目は表示されない。


↑黒猫をimgタグにて表示。画像があるから、普通に表示されるはずである。

なお、下記のコードだとどうなるか。

<script type="text/javascript">
document.write("<img src=http://blog.hanesoft.com/wp-content/uploads/2013/06/i_nkao2.gif>");
</script>

↓結果。真っ当なWebブラウザであれば上から順に実行されながら,
HTMLへと書き出されていくので表示されるはずである。

まれに表示されない場合がある?↓なぜか。
okwave.jp/qa/q8311639.html

昔、似たような現象で困ったことがあった。
ブラウザのせいにしていいのか、今一自身が無く、よくわからないので、回答を見守り中。

※てか、src属性をダブルクォートで囲わないのはエスケープの仕方が分からないからなのだろうか、。

javascript::入力した値の重複チェック

※入力した値がダブルかチェック。'test'と入力された時にのみokと出る。


twitterアカウント作成の時などに使われるIDの重複チェック。実際にはajaxでDBに当てに行く処理がさらに必要だけどまずはできるかチェック。onkeydownイベントで取得すればいいかと思ったがなぜかtextのvalueの値が一文字欠けてしまうのでonkeyup属性でイベントを取得した。なぜonkeydownではうまくいかないのだろうか。原因不明で気持ちが悪すぎる。

【サンプルコード】

<script type="text/javascript">
function idc(obj,res){
    var str = 'test';
    if(obj.value == 'test')
    {
        // 一致
        document.getElementById(res).innerHTML = "OK";
    }
     else
    {
        // 不一致
        document.getElementById(res).innerHTML = "NG";
    }
}
</script>

<input type="text" onkeyup="return idc(this,'res1');" value="" id="text1">
<span id="res1"></span>

BOMとDOMの違い

・BOM(BrowserObjectModel)

Webブラウザを操作するためのオブジェクト(インターフェース)。Webブラウザが独自に実装しているもの。Netscapeがデファクトスタンダードとなり標準化が進んだ。 windows.xxxxx(windows.locationなど)を使って画面遷移を実装することがあるが、これは換言すればwindowsオブジェクトというBOMのインターフェースを使用してWebブラウザを操作しているということである。

・DOM(DocumentObjectModel)

Webブラウザで読み込んだHTML文章を操作するためのオブジェクト(インターフェース)。windows.documentメソッドを使ってアクセスする方法をとっていたが現在はgetElementByIdを使用する。BOMとDOMは特別意識する必要はないかもしれないが別概念であるという区別はつけておいた方がよい。

Javascript::Error::Firefox

時刻: 2013/06/09 15:23:29
エラー: Error: Permission denied to access property 'toString'

意訳:その文字列プロパティにアクセスできません。

※プロパティがまず存在するかを疑った方がよい。その次に文字通りアクセスできるようにあっているかを確認すること。

JavaScriptならif文はこう書くことも可能(だった?)

記述例1.

<script type="text/javascript">
    var a1 = 1;
    a1==1 && document.writeln('ok!');
    a1=0;
    a1==1 && document.writeln('no!');
</script>
  • どんなプログラム言語でもそうだが、&&(AND)は左辺が満たされない時に右辺の評価は行わない。計算することによって条件が変わることは無いからだ。つまり、左辺の条件が満たされたら右辺のStatementを実行するというように上述のように書くことが可能である。
  • 現在は使えなくなっているっぽい?ので消しました。

    実行例1.