JavaScriptリファレンス

HTMLだけではできないことをJavaScriptを使うことでできたりします。
  1. 基礎知識
  2. JavaScriptの読み込みを遅延または非同期にする
  3. ボタン
  4. リンクをボタンでつくる
  5. 一度押したらもう押せないボタンをつくる
  6. 指定したボタンを押さないと押せないボタンリンクをつくる
  7. ステータスバーに流れる文字を表示させる
  8. 直前に見ていたページに戻る(または進む)リンクをつくる
  9. ウィンドウからフォーカスを取る
  10. メッセージボックスの表示

基礎知識

実行環境は基本的にWebブラウザ上のみ

記述の仕方

<script>
 ここに記述
</script>

または
<script>
<!--

ここに実行内容を記述

//-->
</script>
<noscript>

JavaScript無効時に実行される内容を記述

</noscript>
<!-- と //-->はJavaScript無効時に<script type="text/javascript">から</script>の間に記述した実行内容が Webブラウザに表示されないようにするためのもの。基本的には上記の内容をHTMLに記述するのだがCSSのように外部ファイルに記述して 読み込むようにすることもできる。外部ファイルにする場合はHTMLの<HEAD> から </HEAD>の間に
<script type="text/javascript" src="ファイルのパス"></script>
を記述し、外部ファイルの拡張子をjsにする。あとは外部ファイルに実行内容のみ記述していけばよい。

動作の確認

JavaScriptが機能しているか確認するなら以下を記述。

<script>
document.write("JavaScriptはONです。");
</script>
<noscript>JavaScriptはOFFです。</noscript>

コメントアウト

作成日時やプログラム内容の補足文などプログラム文と認識させないコメント文。

一行の場合

// ここにコメント

複数行の場合

/*
 ここにコメント
*/

変数の定義

JavaScriptでは変数の型は存在するが自動で変換されるので使用するのに型の指定は必要なく、 事前に変数の使用宣言もした方が好ましいが無理にする必要もない。 もし変数の宣言をする場合はvarステートメントを使用して以下のようにする。
var aaa;
var bbb="あいうえお";
varステートメントを使用することでグローバル変数の扱いになりvarがない変数はローカル変数になる。 変数名は大文字と小文字で区別され、予約語や関数名、数字で始まるものなどでなければほぼ好きな名前で使用できる。

文字列の表記

文字列として扱いたい場合は " と " で囲みます。
"あいうえお"
また2つの文字列を結合したい場合は + で繋ぎます。
"あいう" + "えお"

JavaScriptの読み込みを遅延または非同期にする

JavaScriptの読み込みを遅延または非同期にすることでJavaScriptによるレンダリングの妨げを回避し、高速化できる。

async属性を使用して非同期にする

<script async src="abc.js">

HTML5ではインラインスクリプトには使用できません。

defer属性を使用して遅延させる

<script defer src="abc.js">

HTML5ではインラインスクリプトには使用できません。

ボタン

リンクをボタンでつくる

<INPUT type="button" value="ボタン1" onclick="location='リンク先のURL>

一度押したらもう押せないボタンをつくる

<INPUT type="button" value="クリック" onclick="disabled='true';value='もう押せないよ'">



※ただし画面を更新するとまた押せます(^^;)

指定したボタンを押さないと押せないボタンリンクをつくる

サンプル

<HEAD>~</HEAD>の間に
<script type="text/javascript">
<!--
function dis(formName,objName,flg) {
  objForm = eval("document."+formName);
  if(objName == "all"){
     for(i=0;i<objForm.length;i++){
           objForm[i].disabled = flg;
     }
  }else{
     for(i=0;i<objForm.length;i++){
       if(objForm[i].type == objName){
          objForm[i].disabled = flg;
       }else if(objForm[i].name == objName){
          objForm[i].disabled = flg;
       }
     }
  }
}
// -->
</script>
<BODY>~</BODY>の間に

<INPUT type="button" value="まずクリック" onClick="dis('test','button',false);disabled='true';value='もう押せないよ'">
<form name="test">
<INPUT type="button" value="やっとクリック" onClick="window.open('リンク先のURL', '_blank');disabled='false';value='もう押せないよ'" disabled='false'>
</form>


※URLの部分にはリンク先のフルパス(http://~)を記入します。

ステータスバーに流れる文字を表示させる

サンプル

<HEAD>~</HEAD>の間に
<script type="text/javascript">
<!--
var msg = "試作中 ぼちぼちとつくってます。(^o^;)";
msg = msg + "       ";
function statusMsg(){
    setTimeout("statusMsg()",200);
    msg = msg.substring(2,msg.length)+msg.substring(0,2);
    window.status = msg;
    return true;
}
//-->
</script>
body開始タグ内に
<body onload="statusMsg()">

直前に見ていたページに戻る(または進む)リンクをつくる

<a href="javascript:history.back()">戻る</a>
<a href="javascript:history.go()">進む</a>

戻る 進む

ウィンドウからフォーカスを取る

window.blur()

<a href="#" onclick="window.blur();">フォーカスアウト</a>

メッセージボックスの表示

OKボタンのみのメッセージボックスは
alert ( "ここにメッセージ内容" );
OKとキャンセルボタンのあるメッセージボックスの場合は
confirm ("ここにメッセージ内容");
また入力を求めるテキストボックスを表示されるには以下のようにする。
prompt ("ここにメッセージ内容");

TOPへ
戻る