カテゴリー : Javascript

Google Chromeでコンソールに値を表示する方法

Javascriptのデバッグで、変数に入っている値を知りたいときには、

var hoge = "ほげ";
alert(hoge);

として、alertで表示させていました。

これはこれで便利なのですが、loop処理などでいちいちalertボックスを
表示させているのがメンドくさい場合もあります。
そういった場合は、

var hoge = "ほげ";
console.log(hoge);

としてください。

Google Chromeのデバッグツールで「Console」を表示させると
hogeにセットされている値を表示させることができます。
これは便利!

JavascriptでFormのsubmitを行う

FormのsubmitをJavascriptで行う方法です。

ボタンでsubmitする場合は、以下のように書きます。

<input type="submit" value="登録">

Javascriptで実行する場合は以下のようにします。

<script>
function do_submit() {
  document.forms['hoge'].submit();
}
</script>

<form method="post" name="hoge" action="index.php">
<input type="text" name="name" />
<input type="submit" value="登録" />
</form>

<input type="button" value="登録" onClick="do_submit();">

type=”submit”をクリックしても、type=”button”をクリックしても同じように動作します。
Javascriptの方のforms['hoge']には、formタグのname=”hoge”の値をセットします。

また、Javascriptの方で変数を追加してpostしたいということがよくあると思います。
jQueryを使って以下のようにしてやります。

$('<input>').attr({
  type: 'hidden',
  id: 'hoge_id',
  name: 'hoge',
  value: 'ほげ'
}).appendTo('#target_id');

これで、id=”target_id”の要素に、inputタグのtype=”hidden”が追加されます。

まとめると、以下のようになります。

<script>
function do_submit() {
  $('<input>').attr({
    type: 'hidden',
    id: 'hoge_id',
    name: 'hoge',
    value: 'ほげ'
  }).appendTo('#target_id');
  document.forms['hoge'].submit();
}
</script>

<form method="post" name="hoge" action="index.php">
<div id="target_id">
  <input type="text" name="name" />
  <input type="submit" value="登録" />
</div>
</form>

<input type="button" value="登録" onClick="do_submit();">

HTMLで印刷用ページを作成する

印刷ボタンを用意して、クリックすると印刷用ページを開くという実装を行ったのでメモ。
通常は、Web表示用と印刷用でそれぞれのCSSを用意して、
印刷したい場合だけ印刷用のCSS(print.cssなど)が適用されるように実装します。

印刷ボタンを以下のようにして設置することで印刷が実行されます。

<button onclick="window.print()">印刷する</button>

今回は、別途印刷専用のページを用意して、そのページを開くと印刷が実行されるように実装しました。
で、ページを開くとすぐに印刷が実行されるようにするにはどうするか?と思い
とりあえず以下を入れてみたらOKでした。簡単でした・・・。

<script>
window.print();
</script>

Javascriptで確認ダイアログを表示する

Javascriptで、「OK」か「キャンセル」かを選択できる確認ダイアログを表示する方法です。

window.confirm()を使用します。

<script>
function kakunin() {
  if(window.confirm("")) {
    //OKをクリックした場合の処理

  } else {
    //キャンセルをクリックした場合の処理

  }
}
</script>

<input type="button" value="確認" onClick="kakunin()" />

Javascriptで足し算を行う際に気をつけること

Javascriptで足し算をしようと何も考えずに

var hoge = 2;
var hoge = hoge + 4;

とすると、hogeは6ではなく、24になってしまいます。

Javascriptでは、足し算だけではなく、文字列の連結も「+」で行います。
ですので、この場合、文字列の連結とみなされて「24」となってしまうのです。

では、数値計算したい場合はどうするか?
以下のようにして、文字列を数値型に変換します。

var hoge = 2;
var hoge = parseInt(hoge) + 4;

parseInt(hoge)だけではなく、eval(hoge)も使えます。
あと、マイナス(-)は数値型として計算してくれますので、以下のようにする方法もあります。

var hoge = 2;
var hoge = hoge - (-4);

バグの元になりやすいので気をつけたいですね。

jQueryでリンク先を変更する方法

jQueryでリンク先のURLを変更する方法を調べたのでメモ

<a href="http:\\hoge.com/">Hoge</a>

上記のようなリンクのURLをjQueryから変更する方法です。
aタグにid=”hoge”を追加します。

<a href="http:\\hoge.com/" id="hoge">Hoge</a>

以下のようにして、リンク先を置き換えます。

$("#hoge").attr("href", "http:\\hogehoge.com/");

ブラウザでレーダーチャートを表示する

レーダーチャートを表示できるjQueryライブラリがないか調べたところ、
簡単に表示できるものが見つかったのでメモ。

Jquery Canvas Chart

html5のcanvasを使って表示しているようです。

Jquery Canvas Chartから、jquery.canvasChart.jsとexcanvas.jsをダウンロードします。

jQueryと、ダウンロードしたjsファイルを読み込みます。

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

<!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->

レーダーチャートで表示したい値の指定はinputタグのhiddenで行います。

<div id="canvasChart">
  <canvas width="380" height="380"></canvas>
  <div class="chartInput">
    <input type="hidden" value="5" id="input1" name="input1" />
    <input type="hidden" value="4" id="input2" name="input2" />
    <input type="hidden" value="5" id="input3" name="input3" />
    <input type="hidden" value="3" id="input4" name="input4" />
    <input type="hidden" value="2" id="input5" name="input5"  />
  </div>
</div>

レーダーチャートの設定を行います。

<script type="text/javascript">
$(function(){
  $('#canvasChart').canvasChart({
    //各種設定
  });
});
</script>

以上で、とりあえずレーダーチャートの表示ができてしまいます。







線の色や塗りつぶしの色、レーダーの形など、各種設定が可能です。
設定項目はJquery Canvas Chartを参照ください。

jQueryで要素が存在するのかをチェックする方法

jQueryで要素が存在するかをチェックする方法です。

jQueryを使って複数のhtmlファイル内で共通の処理を実装させようとしていたときに、
特定の要素が存在するかどうかで、処理を分けたいということがあったのでメモ。

size()で判定できます。

調べたい要素がid=”hoge”で指定されている場合、

if ($("#hoge").size() > 0) {
  //存在する場合の処理
} else {
  //存在しない場合の処理
}

以下を参考にさせて頂きました。
JQuery | 要素の存在を確認する | crossover

jQueryでinputの値を取得する

jQueryでinputの値を取得する方法です。
val()で取得できます。

id=”tel”で指定したinputタグの値は、以下のようにして取得します。

$("#tel").val();

逆に値を設定する場合は、val()に値を入れてやります。

var tel_no = "03-0000-0000";
$("#tel").val(tel_no);

jQueryでスクロールした位置を取得する

jQueryで、画面をスクロールした際の位置を取得したいということがあり調べたのでメモ

以下でどれだけスクロールしたのかの位置を取得できます。

$(window).scrollTop();

もしくは

$(document).scrollTop();

で取得できます。

スクロールした際に、動的にスクロールした位置を取得したいということがあると思います。

$(window).scroll(function () {
  //スクロールした際に動的に実行したい処理を記載する
  var hoge = Y - $(window).scrollTop();
});

上記のように、$(window).scrollを設定すると、画面のスクロールで指定した処理を実行できます。