javascriptの基本操作【まとめ】 - webサイト制作の勉強@迅

javascriptの基本操作

皆さんこんにちは、今日はjavascriptの導入から、基礎までをざっとやっていきたいと思います。この記事は自分用のまとめになりますので、説明をざっくりした感じで進めると思いますのでご了承ください。

javascriptの基本操作

javascriptの記述方法

●HTMLファイル内に記述する方法

→任意の場所に<script>タグを記述し、その中にコードを記述していく。

(例)

var x =10;

console.log(x);

</script>

●外部の.jsファイルにコードを記述して、その外部ファイルをHTMLファイルから読み込む方法

(例)HTMLファイルから読み込む

+===============================================+

javascriptが実行されるタイミング

htmlファイルを上から順番に実行していき、スクリプトが出現した時点で、スクリプトを解析し始めます。ですので、スクリプトをhtmlが読み込み終わった後に、スクリプトを実行させたい場合は、意図的にタイミングをずらすか、記述位置を変更する必要があることを覚えておきましょう。

+===============================================+

変数の扱い

■変数宣言

var 変数名;

■変数の初期化を同時に行う場合

var 変数名 = 値 ;

■変数の扱いに関して意識しておきたい注意点

→予約語は使用不可、又予約語となりそうなものも使用は控えるべきである。

→先頭文字に0~9は使用不可

→大文字小文字は区別される

文字列の扱い

文字列とは、ダブルクォーテーション（またはシングルクォーテーション）で囲まれた文字の集まりです。

■文字列を囲むクォーテーションのいい例とエラーがでる例：同じ種類のクォーテーション同士は中に入れられないのがわかりますね。

”文'字'列”→正解

'文"字"列'→正解

"文"字"列"→エラー

'文'字'列'→エラー

+===============================================+

変数の出力と計算

■コンソールへの出力

console.log();

(例)

var price = 2000;

console.log(price);

→実行結果：コンソール画面上に、2000と出力される。

■ブラウザへの出力

document.write();

※タグも含めて出力できるが、エスケープシーケンス及びHTMLのタグは文字列として、（）内に入れて上げる必要がある。

(例)

var strGreeting = 'HelloWorld';

document.write("<p>" + strGreeting + "</p>");

→実行結果：ブラウザ上にHelloWorldと出力される。

※+は文字列を連結させる、文字列連結演算子です。+はこの他にも算術演算子（数値と数値を加算する）や、単行演算子（++でインクリメントさせる)といった使い方もあります。

■代入演算子（=）

javascriptに限った話ではないのですが、＝は、右辺の結果を左辺に代入する役割を持ちます。

var x = 2+3;

これは、右辺の2+3の結果である数値の5を、宣言したxという変数に代入する作業です。この作業を変数の初期化といったり、変数に値を格納すると言ったりもします。

■算術演算子を用いた計算

var num ;

num = 2+3 ; // 5 【+=加算】

num = 8-2 ; // 6 【-=引き算】

num = 3*6 ; // 18 【*=掛ける】

num = 2/2 ; // 1 【/=割る】

num = 3%2 ; // 1【%=割った余りを求める】

+===============================================+

ビルトインオブジェクト（組み込みオブジェクト）の利用方法

ビルトインオブジェクトとは、javascript実行環境下にあらかじめ用意されているオブジェクトのことです。特定の処理を行うのに便利な変数や関数をまとめてあり、それらにアクセスしてその機能を利用することが出来ます。

例えば、数値の扱いに適したNumberオブジェクトや、計算処理に適したMathオブジェクト、日付等の扱いに適したDateオブジェクトがあります。

★実際にビルトインオブジェクトである、Dateオブジェクトを使ってみましょう。

※Date()オブジェクトは new演算子で、インスタンス化してあげる必要があります。

var dat = new Date(); // Dateオブジェクトをインスタンスとして生成

console.log( dat.toLocaleTimeString() ); // 何時何分何秒を取得してコンソール側に出力

Dateオブジェクトには、他にも便利な関数等が用意されています。

例えば、

.getDay() →曜日を0-6で取得

.getDate() →何日かを取得(1-31)

.getFullYear() →年を取得(4桁まで)

.getHours() →時を取得

.getMinutes →分を取得

.getSeconds →秒を取得

etc...

主要なビルトインオブジェクトの詳しい使い方はこちらを参照下さい。

Date - JavaScript | MDN

Math - JavaScript | MDN

Number - JavaScript | MDN

+===============================================+

乱数を扱う

乱数をMathオブジェクトのrandom関数を使って生成してみましょう。

１～10の乱数を取得するには、

========================================

Math.floor(Math.random () * 10) + 1

========================================

→Math.random ()は、0以上~1未満の擬似乱数を実行結果として返します。

→Math.floor()は、簡単に言うと切り捨てを行います。引数が正でも、負でも、引数より小さい整数を返します。

※Math.floor()関数は、こちらに詳しい情報が掲載されています。

floor関数 - Mathクラス - JavaScript入門

ですので、1~xまでの乱数を取得したい場合は、

========================================

Math.floor(Math.random () * x) + 1

========================================

という具合になります。

+===============================================+

関数

関数とは、引数と呼ばれる値を受け取って、一定の規則を持った処理を加え、実行結果を返すものです。

関数は、宣言部分に処理を記載し、その宣言した関数を実行させるには、関数の呼び出しと言うものが必要になります。

■書式

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【関数宣言（関数定義）】

function 関数名(仮引数1,仮引数2){

処理を書くところ;

return 戻り値;

}

※仮引数及び、return 戻り値;は処理によって必要がない場合もありますので、必須ではありません。

※function内の仮引数はvarで宣言する必要はありません。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

【関数の呼び出し】

関数名(実引数1,実引数2);

■使用例

function addFunc(x,y){

var result = 0 ;// 癖で初期化、0を代入する必要はありません。

result = x+y ;

return result ;

}

console.log( addFunc(3,6) );

</script>

→実行結果：コンソール画面に、9と表示されます。

解説：addFuncという名前の関数を作り、その関数は仮引数としてx,yという2つの値を受け取れるようにしています。そして、実引数から送られてきた値が格納されている2つの仮引数同士を加算して、ローカル変数として、用意した変数resultに格納します。そのresultという変数の中身（値）を実行結果として、returnを使い戻り値として返します。よって、コンソール上には9と表示されるという感じです。

即時関数

先程ご紹介した関数は、宣言と、呼び出しを分けているものでしたが、即時関数は、宣言と呼び出しを一緒にした関数となります。ですので、宣言と同時に呼び出される関数とも言えます。また関数名を設定しないので、即時関数は、無名関数の一種であるともいえます。

■書式

(function (仮引数1,仮引数2){

処理を書く;

return 戻り値 ;

})(実引数1,実引数2);

→関数に名前が無いのが特徴で、実引数を渡して、仮引数で受取り、処理を行った結果を返します。関数定義そのものを（）で囲んで、最後に();と言う形で実引数を渡してあげる事ができます。

■使用例

var result1 ;

result1 = ( function (x,y){

var result2 = 0 ;// 癖で初期化、0を代入する必要はありません。

result2 = x+y ;

return result2 ;

} )(3,6);

console.log( result1 );

</script>

無名関数

無名関数は関数名を持たない関数です。関数定義自体を変数に代入することが出来ます。その関数定義が代入された変数は、関数のように呼び出すことが出来ます。

■使用例

var result1 ;

result1 = function (x,y){

var result2 = 0 ;// 癖で初期化、0を代入する必要はありません。

result2 = x+y ;

return result2 ;

}

var ans = result1(3,6);

console.log( ans );

→実行結果：コンソール画面に9と表示される。

+===============================================+

警告ダイアログの表示

■書式（※window.は省略可）

window.alert("警告ダイアログに表示する文字列");

OKのみを問います。スクリプトの処理がアラートの箇所でストップしてしまう点に注意が必要です。

確認ダイアログの表示

■書式（※window.は省略可）

window.confirm("確認ダイアログに表示させる文字列");

OKorキャンセルを問います。OKが押されると、trueという値を返します。キャンセルが押されると、falseという値が返されます。

入力ダイアログの表示

■書式（※window.は省略可）

window.prompt("入力ダイアログに表示させる文字列","初期値");

ユーザーに入力させる為のダイアログを表示させます。警告ダイアログと同じく、スクリプトの処理が入力ダイアログの箇所で、止まりますので注意が必要です。

指定したURLにジャンプする

■書式

location.href = "URL" ;

■使用例

tof = confirm("googleのページに移動してよろしいですか？");

if( tof == true ){

location.href = "http://www.google.co.jp/" ;

}

</script>

+===============================================+

配列

【配列の宣言と初期化】

①配列の要素数を指定しないで宣言する場合

var ary = new Array();

var ary = [];

②配列の要素数を指定して宣言する場合(今回は3つ分作るという想定です)

var ary = new Array[3];

var ary = [,,];

③配列の宣言と初期化を同時に行う場合その1

var ary = new Array("東京","大阪","北海道");

④配列の宣言と初期化を同時に行う場合その2

var ary = ["東京","大阪","北海道"];

【配列の参照方法】

aryという配列変数のインデックス番号0のところに、値として、東京という文字列が格納されます。同様にインデックス番号1のところに、大阪という文字列が値として格納されます。アクセスする場合は、ary[0]というように、インデックス番号（添字とも言う）を指定して値を参照する。

+===============================================+

連想配列

連想配列とは、インデックス番号の代わりに、キー名を参照して値にアクセスする配列。

※値は文字列であれば、シングルorダブルクォーテーションで囲む必要があります。

【連想配列の宣言と初期化】

①var 連想配列名 = { キー1 : 値1 , キー2 : 値2 , キー3 : 値3 } ;

②var 連想配列名 = new Object();←new Object();の部分は、new Array();でも可

　連想配列名['キー名'] = 値 ;

【連想配列の参照方法】

①ドットシンタックス記法

連想配列名.キー名

↓

対応するキー名の値を取得

②ブラケット記法

連想配列名[ 'キー名' ]

↓

対応するキー名の値を取得

+===============================================+

繰り返し処理

①for文

■書式

for(初期化;条件;変化式){

繰り返される処理;

}

→条件がtrueなら処理を実行する。初期化は最初の1回目のみ通る。条件式がfalseになると、繰り返し処理をやめてループを抜ける。

■配列と相性が良いのでこのような使い方も出来ます。for文で使う変数と、配列の添字を対応させることで、配列の要素数分繰り返すことが出来る。

var ary = new Array("教育","勤労","納税");

document.write("<p>国民の三大義務とは");

for(var i = 0 ; i < ary.length ; i++ ){

document.write( "[" + ary[i] + "]" );

}

document.write("である。</p>");

</script>

→実行結果：ブラウザ上に、国民の三大義務とは、[教育][勤労][納税]である。と表示される。

②while文

■書式

while(条件式){

処理;

(変化式;)

}

条件式がtrueなら、処理を繰り返す。変化式がないと、無限ループとなり危険な場合があります。

★for文とwhile文の特徴：for文、while文は条件式を評価してから1回目の繰り返しを行います。その為、場合によっては、一度も繰り返し処理を行わない場合がありますが、次にご紹介する、do{}while();という繰り返し命令は、必ず1回処理を行ってから条件式を評価します。この違いを認識した上で、続きをやっていきましょう。

③do...while文※while(条件式)の後のセミコロンのつけ忘れに注意して下さい。

■書式

do{

処理;

}while(条件式);

又は、

処理;

while(条件式);

④for...in文

■書式

for( var キー格納変数 in 連想配列名 ){

キー分だけ処理を繰り返す。

キー1,キー2,キー3...と順番にループ毎に、キー格納変数にキーを格納していく。

値にアクセスする方法↓

連想配列名[キー格納変数]; ※注意：キー格納変数にはクォーテーション不要

※for-in文の中でドットシンタックス記法を使うと挙動が変になりました。だめっぽいです。

}

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

■【連想配列の復習】

値は文字列であれば、シングルorダブルクォーテーションで囲む必要があります。

【連想配列の宣言と初期化】

連想配列とは、インデックス番号の代わりに、キー名を参照して値にアクセスする配列。

①var 連想配列名 = { キー1 : 値1 , キー2 : 値2 , キー3 : 値3 } ;

②var 連想配列名 = new Object();←new Object();の部分は、new Array();でも可

　連想配列名['キー名'] = 値 ;

【連想配列の参照方法】

①ドットシンタックス記法

連想配列名.キー名

↓

対応するキー名の値を取得

②ブラケット記法

連想配列名[ 'キー名' ]

↓

対応するキー名の値を取得

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

■continue文

[ 書式 ]

continue;

continueが実行されると、continue;より下の処理を実行せずに、次のループ処理に入る。

■break文

[ 書式 ]

break;

breakが実行されると、実行中のループから抜ける。

+===============================================+

分岐処理(if文/switch文)

■if文書式（条件式の評価により、処理を分岐させる）

if(条件式){

条件式がtrueの時に通る処理;

}

else if(条件式2){

条件式がfalseだが、条件式2がtrueの時に通る処理;

}

else{

条件式と条件式2がfalseの時に通る処理;

}

■switch文書式（評価式と合致するcaseの値を探して、合致したらそのcase内の処理を実行して抜ける。どのcaseの値とも合致しなかった場合は、defaultの処理を通る。）

switch (評価式){
case 値1:
    実行する文;
    break;
case 値2:
    実行する文;
    break;

~~省略~~

default:

実行する処理;
break;
}

// 最後のbreakは必要ないと言われればそれまでですが、癖で付けています。

■使い分け

どっちを使おうか迷ったら、二分岐程度ならif文、多分岐ならswitch文を使おうという具合に、最初のうちは気軽に考えておいてもらっても大丈夫です。実行速度やソースの可読性を考えるのは使い慣れた頃でも全然大丈夫です。

+===============================================+

グローバル関数

ParseInt関数

ParseInt("文字列")→文字列を整数に変換します。

ParseInt("文字列",基数)→基数で指定した進数で、文字列を整数に変換します。

※文字列の先頭の文字が、数値に変換できる文字ではない文字だった場合、NaNを返します。（+,-,A~F,数なら変換可能とみなされる）

※基数には、2,8,10,16を指定できます。

【使用例】

var x = ParseInt("5"); // 変数xに数値の5が代入されます。

※また、第二引数には基数を指定して、変換する数値の進数を指定できます。

var x = ParseInt("11",16); // 変数xに11を16進数として解釈して、数値の17を代入する。

ParseFloat関数

簡単にいえば、小数点も扱える、ParseInt関数です。役割は、同じく文字列を数値に変換します。

ParseFloat("文字列")→文字列を数値に変換します。（小数点も扱える）

【使用例】

var x = ParseFloat("18.55"); // 変数xには、数値の18.55が代入される。

isNaN関数

■書式

isNaN(評価する値);

isNaN関数とは、評価する値が、NaNであれば、trueを返し、それ以外ならfalseを返します。

【前提として必要な知識】

変数を初期化していないと、中の値は文字列のundefinedでしたね。

そして、undefinedは、数値のNaNになります。NaNは非数を表します。

isFinite関数

■書式

isFinite(評価する値);

isFinite関数は、評価する値が有限であるかを調べます。有限であれば、trueを返し、無限であれば、falseを返します。

+===============================================+

イベントハンドラ

イベントハンドラとは、指定したイベントを検出し、そのイベントに対するjavascriptの処理を呼び出すものです。また、この仕組みをイベント駆動型モデルと言ったりします。

ブラウザ上の部品（要素）に属性のように記述することにより実現します。

主要なイベントハンドラはこちらに詳しく記載されていますので、詳しく知りたい方はこちらをオススメします。

■書式

<イベントの対象となる要素イベントハンドラ="javascriptの処理;" >

【主要なイベントハンドラの実例】

①body内が全て読み込まれたら、コンソール画面にページが読み込まれましたと表示させる場合

②選択項目が変更されたタイミングでコンソールに項目が変更されましたと表示させる場合

</select>

③マウスホバーとマウスアウトを検知する例。

④フォーカスが当たったときと、フォーカスが外れた時を検知する例

他にもクリックを検出するonclickといったイベントハンドラがあります。

+===============================================+

window.openでサブウィンドゥを表示する

■書式

window.open('サブウィンドゥのURL','サブウィンドゥの名前','オプション');

■window.openについての使い方はこちらのURLからどうぞ

新しいウィンドウを開く(open) - ウィンドウ(window) - JavaScript入門

■使用例：サブウィンドゥをボタンにより、開いたり、閉じたりできるコードです。

事前準備として、indexJsTimer.htmlというページを用意しておきましょう。あるいは、なにか他のページのURLを入れても大丈夫です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascriptOpen</title>

function subWindowOpen(){
subWindow = window.open('indexJsTimer.html','サブウィンドウ名','width=600,height=300,scrollbars=no,location=yes');
console.log('サブウィンドゥを開きました。');
}
function subWindowClose(){
if( subWindow && !subWindow.closed ){
subWindow.close();
console.log('サブウィンドゥが閉じられました。');
}
}
</script>
</head>

■補足

subWindow変数の中身が閉じられている状態のときの値が subWindow.closeです。ですので、subWindow変数の中身の値が、subWindow.closedではない時（つまりサブウィンドゥが開いてる時）のみ、サブウィンドゥを閉じる処理を実行してあげれば安全となります。

+===============================================+

window.setTimeoutで一定時間後に処理を行う

■書式

window.setTimeout("実行する処理",ミリ秒指定した時間);

ミリ秒指定した時間後に、1回だけ処理を実行する。

+===============================================+

window.setIntervalで一定時間毎に処理を行う

■書式

window.setInterval("実行する処理",ミリ秒指定した時間);

又は、

window.setInterval(

function(){

実行する処理;

} ,ミリ秒指定した時間

);

ミリ秒指定した時間毎に、処理を実行する。

■使用例

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>javascriptTimer</title>
<script type="text/javascript">
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// 【 Javascript講座】
// 　　１：一定時間毎に処理をするsetInterval関数を使ってみよう
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

var timerId;