LotosLabo

プログラミング技術とか気になった情報を載せていきます

Javascriptについて1

JavaScriptについて


Webブラウザなどの利用に適したスクリプト言語です。静的な表現しか出来なかったWebページに動きをつける役割を果たすもの。

Javascriptの開発環境


Cresent eveとか、Style Note、ただのテキストエディタでも構いません。
後はEclipseでもVisual StudioやApata Studioでも使えます。

開発を始める前に

Webブラウザのjavascriptが有効であるか確認をします。


IEの場合)

インターネットオプション → セキュリティタブ→セキュリティレベルのレベルカスタマイズ → アクティブスクリプトを有効にする


chromeの場合)

設定 →高度な設定(詳細設定) → コンテンツの設定 → javascriptを有効にする

初期設定では有効になってると思いますので大丈夫です。


記入の仕方

javaScriptは大きく分けて4つの場所に記入することが出来ます。



①HTMLファイルのヘッダー内
body部分より前に読み込まれます

こちらはjavascriptに対応していないブラウザ対策向け

<script type="text/javascript">
<!--
記入
// -->
</script>


通常はこっちで書いていく

<script>
  ここにJavaScriptのソースを記入
</script>


②HTMLファイルのbody内

ヘッダー内と同じ


③HTMLファイルのタグ内

<a href="jsソース">クリック</a><br>
<form>
<input type="button" value="Click!" onClick="jsソース">
</form>


④外部ファイル

元のHTMLファイルのヘッダー内にリンクを挿入して外部から読み込む

<head>
<script type="text/javascript" src="JSファイル"></script>
</head>


外部ファイルは.jsとしてファイルを保存する


基本プログラム

コメント

// これはコメントになる

/* コメント
  コメント */



アラートで文字を表示


alert("文字");


例:

<script>
alert("こんにちは");
</script>


画面を開いた時にアラートを表示させる


アラートで数字や計算結果を表示


alert(2+1);


計算結果が表示される。


アラートの改行の仕方


alert("こんち\nこんば");

\nで途中で改行されます。


文字を表示する


document.write(文字列など);

<script>
document.write("こんちは");
</script>


ブラウザ上に表示される


ちなみにscriptはjavascirptがONの時だけ表示されることであり、
OFFの時はnonscriptでOFFの時でも表示される。


★文字以外も出力できる


document.write(10+20);

計算結果が表示される


変数の宣言

var test;


(中身を指定)

var test = 10;
var test = "こんち";

var 変数名 = 初期値


★変数の利用
<script>
var test = 10;
var test1 = 12;
alert(test + test1);
</script>



文字をつなげる


var konti = "こんにちは";
var konba = "こんばんは";

document.write(konti + konba);

  1. でつなげることが出来る。


また、文字と数字もつなげることが可能です。


定数


定まった数なので、代入した数字や文字を入れ替えができない。

constを付けて宣言する。


const TEISU = 3;


基本大文字での記入をする。


関数


function 関数名( 引数 ) { 処理 }

関数名は小文字

<script>
function konti(){
alert("おはよう");
alert("こんにちは");
alert("こんばんは");
}
</script>



使用するときは

基本は konti() と関数名を書く


例:

ボタンクリックイベントに使う

HTMLファイル

<form>
<input type="button" value="ボタン1" onclick="aisatu()"><br>
<input type="button" value="ボタン2" onclick="aisatu()">
</form>


引数


()内に数値などを記入して値を渡す。
returnは値を呼び出し元に戻す処理をしています。

<script>
function test(a){
return a*a;
}
</script>


<script>
document.write("2の2乗は" + test(2) + "です。");
</script>


出力:

2の2乗は4です

条件式

if文


if (条件式) { 処理 }

<script>
var n = 5;
if(n > 3){
 alert("3より大きいです");
}
</script>


nが3より大きいかを比べる。

一行だけの式はこう書く


if(n>3) alert("3より大きいです");


if else文

if (条件式) { 処理1 } else { 処理2 }

<script>
var n = 5;

if (n < 3) {
  alert("3より小さいです!");
} else {
  alert("3以上です!");
}
</script>



複数のif文


複数のifを重ねて書くことも出来ます。

<script>
var n = 3;
if (n == 2) {
 alert("nは2です");
} else {
 if (n == 5) {
  alert("nは5です");
}else {
 alert("nは2と5ではありません");
 }
}
</script>


switch文


ifは2通りにしか分岐できませんでしたが、switch文では何通りにも分岐できる。


switch ( 条件式 ) {
case 値1 : 処理1; break;
case 値2 : 処理2; break;

default : 処理3; break;
}



条件式の結果がcase:の後に記入された値に合致すれば、それ以降の処理をする。
またbreak;を入れてswitch分を抜け出す。
defaultはどのcaseにも合致されなかった場合に処理される。



例:

<script>
//曜日取得
var today = new Date();
var week  = today.getDay();
//条件分岐
switch (week) {
  case 0: document.write("今日は日曜日です!"); break;
  case 1: document.write("今日は月曜日です!"); break;
  case 2: document.write("今日は火曜日です!"); break;
  case 3: document.write("今日は水曜日です!"); break;
  case 4: document.write("今日は木曜日です!"); break;
  case 5: document.write("今日は金曜日です!"); break;
  default : document.write("今日は土曜日です!"); break;
}
</script>


for文


for ( var i = 初期値; 繰り返し条件; i++ ){ 処理 }

条件を満たしている間、処理を繰り返す



例:

<script>
for (var i=1 ; i<=10 ; i++){
  document.write("繰り返し文です。<br>");
}
</script>



continueとbreak


break
繰り返し文から抜け出します。


continue
以下の処理をスルーして、繰り返し文の先頭に戻ります。


例:

<script>
for(var i=1 ; i<=10 ; i++){
  if(i==3) continue;
  if(i==7) break;
  document.write(i+"回目の繰り返しです!<br>");
}
</script>



while文


while ( 繰り返しの条件 ) { 処理 }
条件を満たしている間、中括弧内の処理を繰り返します


例:

<scirpt>
var num=10;
while ( num <100){
 num++;
}
document.write(num);
</script>


numが100になるまで繰り返す


配列を使う

★配列を宣言

var 配列名 = new Array()


★配列の値の指定方法


var test new Array("1月","2月","3月");

var test new Array(
"1月",
"2月",
"3月"
);

var test = new Array();

test[0] = "1月";
test[1] = "2月";
test[2] = "3月";