JavaScript

JavaScriptとは

HTML内要素の動的書き換えができるスクリプト言語です。

JavaScriptを使用することで、WEBサイトのユーザーインタ－フェイスを格段に向上させることができます。

PerlやRuby,PHPなどのサーバ側で動くプログラムと違い、レンタルサーバの環境に左右されにくいので多くのwebサイトで活用できます。

また、サーバ側で動くプログラムと非同期通信を行い、インターフェイスの構築を行うものをAjax(Asynchronous JavaScript + XML)と呼びます。

JavaScriptとHTMLを関連付ける

外部jsファイルを呼び出す

この方法だと同じJavaScriptを全てのページに適用できるのでカスタマイズが簡単です。 
<script type="text/javascript" src="/js/script.js"></script>

HTML文書に直接scriptタグを書く


<script type="text/javascript"><!--
num1 = 2 + 3;
document.write(num1);
//--></script>

出力

文字列を出力

この方法は静的な出力なので、イベントで変更することは出来ない。

DOM制御

動的にWEBサイトの情報を書き換えることが出来る。


// onclick="jsSampleDom()" でイベント起動
function jsSampleDom(){
  document.getElementById('jssample').innerText = "スイーツ";
}

厨二病

アラートを表示

条件分岐


  var i = 1;
  if(i == 1){
    document.write("OK");
  } else {
    document.write("NO");
  }

繰り返し


  for(i=0;i<10;i++){
    document.write("○" + i);
  }

配列制御

配列の宣言


var ary = [1,2,3,4,5];

配列の長さを求める


ary.length;

配列を連結する


var ary1 = [1,2,3,4,5];
var ary2 = [6,7];
var ary3 = [8,9,10];
var resultArray = ary1.concat(ary2, ary3);

高階関数を使って配列内を繰り返し処理する


var ary1 = [1,2,3,4,5];
var resultArray = ary.map(function(n){ retrun n+1;});

フィルタ処理する

1番目の引数はコールバック関数、2番目の引数はコールバック関数内でthisとして指定するオブジェクト

IE6,IE7では動作しない


var ary1 = [1,2,3,4,5];
var resultArray = ary.filter(function(ele, index, array){
    if(ele < this){
      return true;
    } else {
      return false;
    }
  }, 0);

数値制御

計算しよう。

の組み合わせ。 

function calculator(){
    var a = parseInt(document.calc.num1.value);
    var b = parseInt(document.calc.num2.value);
    var n = document.calc.cal.value;
    var c = 0;
    switch (n){
        case "+":
        c=a+b;break;
        case "-":
        c=a-b;break;
        case "*":
        c=a*b;break;
        case "/":
        c=a/b;break;
        case "%":
        c=a%b;break;
    }
    document.calc.num3.value = c;
}

文字列制御

文章を加工しよう。

部分取り出し

分割


  var string = "2008/04/01";
  document.write(string);
  ary = string.split("/");
  document.write(ary[0] + "年" + ary[1] +　"月" + ary[2] + "日" + "
");

文字列置換


  var string = "犯人はおまえだ";
  document.write(string + "
");
  string = string.replace("おまえだ","ヤス");
  document.write(string + "
");

日付情報の取得

タイマと再帰呼び出し と組み合わせてリアルタイムに現在時刻を表示する時計

残念ながらJavaScriptにはsprintfのような文字列整形機能はない。

ページ読み込み時に自動で時計を起動したいときは <body onload="event()"> のように記述する。


function tokei(){
    var dd = new Date();
    var yy = dd.getYear();
    var mm = dd.getMonth()+1;
    var dt = dd.getDate();
    var dy = dd.getDay();
    var hh = dd.getHours();
    var mi = dd.getMinutes();
    var ss = dd.getSeconds();
    d = yy + "-" + mm + "-" + dt + " " + hh + ":" + mi + ":" + ss;
    document.date.show.value = d;
    setTimeout("tokei()",1000);
}

数学関数



function getRand(){
  alert(Math.random());
}
document.write("円周率： " + Math.PI + "
");
n = 60; //角度
rad = 30 / 180 * Math.PI; // ラジアン単位に
document.write("sin: " +  Math.sin(rad) + "
");
document.write("cos: " + Math.cos(rad) + "
");

ロケーション情報の取得


document.write(
window.location + "
" +
window.location.protocol + "
" +
window.location.host + "
" +
window.location.hostname + "
" +
window.location.port + "
" +
window.location.pathname + "
" +
window.location.search + "
" +
window.location.hash + "
" 
);

ブックマークレット

外部読み込みを利用して、ブックマークレットを作成する

http://d.hatena.ne.jp/murky-satyr/20090121/1232326025

JavaScriptライブラリ

jQuery

JavaScriptの基礎を覚えたら、別ページ記載のjQueryを使おう！

prototype.js

http://www.prototypejs.org/

script.aculo.us

http://script.aculo.us/

S5

A Simple Standards-Based Slide Show System

JavaScriptでWEBをプレゼンテーションのように！

これでパワーポイントとか必要ありません。

http://meyerweb.com/eric/tools/s5/

右クリックメニュー禁止

ユーザーの利便性を奪う上に、ソース参照禁止やコピペ禁止にしても窓の外から「ソースをみる」で突破できるので意味のない機能。

非推奨ですが、頭の悪い人が当機能を強制してきたのきの参考用に


  $(document).bind("contextmenu",function(event){
    return false;
  });