Javascriptについて１

JavaScriptについて

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

Javascriptの開発環境

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

開発を始める前に

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

（IEの場合）

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

（chromeの場合）

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

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

記入の仕方

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

①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);

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

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

定数

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

constを付けて宣言する。

const TEISU = 3;

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

関数

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

関数名は小文字

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

使用するときは

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

例：

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

HTMLファイル

<form>
<input type="button" value="ボタン１" onclick="aisatu()"><br>
<input type="button" value="ボタン２" 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 (条件式) { 処理１ } else { 処理２ }

<script>
var n = 5;

if (n < 3) {
  alert("３より小さいです！");
} else {
  alert("３以上です！");
}
</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は２通りにしか分岐できませんでしたが、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月";

LotosLabo

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

Javascriptについて１