■　一人綴り

イロイロやってますが、停滞中。（モノが出来たらアップする感じですから...。）更新はしますが数が減るかも。

■　JavaScript（その３）

2017年01月18日 | プログラミング

　とりあえず、現状において、sumahoge-muya WEBもそう

なんですが、意外と使える部分が多い、JavaScriptについて

再び触れておこうかなと思います。

　

　とりあえず、HTML5.0になって、キャンバス要素が登場した

ので、CSSと組み合わせると色々できるようになっており、結構

変わっているのですが、WEB GLも含めてWEBで使うJavaS

criptの用途も結構広くなった気がします。

 

　あと、Unityや2Dゲーム開発環境のCocos 2DXや別のエ

ンジンでもJavaScriptベースのモノもありますから、選択肢と

して存在しています。

 

【　オブジェクト　】

 

　オブジェクト指向言語と言うのはそれに対して処理を行う

事でプログラムが成立しているので、従来のBASICのような

手続き型のモノとは異なります。この種類ですが、

 

├● 数値（Number）

├● 文字列（String）

├● 真偽値（Boolean）

├● 配列（Array）

├● 数学関数（Math）

├● 日付（Date）

├● 関数（Function）

├● 正規表現（RegExp）

 

● ウィンドウ（Window）

　├● ナビゲーター（Navigator）

　│├● プラグイン（Plugin）

　│└● MIMEタイプ（MimeType）

　├● フレーム（Frame）

　├● イベント（Event）

　├● ヒストリ（History）

　├● ロケーション（Location）

　├● スクリーン（Screen）

 

　● ドキュメント（Document）

　　├● レイヤ（Layer）

　　├● 画像（Image）

　　├● リンク（Link）

　　├● アンカー（Anchor）

　　├● アプレット（Applet）

　　├● フォーム（Form）

　　│├● テキスト（Text）

　　│├● パスワード（Password）

　　│├● ファイルアップロード（File）

　　│├● 隠し部品（Hidden）

　　│├● テキストエリア（Textarea）

　　│├● チェックボックス（Checkbox）

　　│├● ラジオ（Radio）

　　│├● ボタン（Button）

　　│├● サブミットボタン（Submit）

　　│├● リセットボタン（Reset）

　　│└● セレクト（Select）

　　│　└● オプション（Option）

　　└● エレメント（Elements）

　　　└● スタイル（Style）

 

 

となっています。見ての通りウインドウやフォームもそうですが、

CSSまで対応してるので、本当に多岐にわたってコントロール

が出来る訳です。

 

　つまり、これが、オブジェクトであり、型（クラス）になります。

 

　構文については、ここで既に出ていますが、

 

　オブジェクト名．メソッド名（パラメータ）

 

と言う書式があります。例えば、

 

　Window.alert(" Ｈｅｌｌｏ　Ｗｏｒｌｄ ");

 

などがそれです。つまり、それぞれのウインドウには、メソッド

でコントロールが可能になっており、それを行うパラメーターが

存在しています。つまり、

 

　■　メ　ソ　ッ　ド　：　動作

　■　パラメーター　　：　値

 

という関係性です。これとは別に、オブジェクトにはプロパティー

が存在し

 

　オブジェクト名．プロパティ名　

 

と言う書式になります。

 

　navigator.appName

 

などがそれになります。これを使う場合ですが、

 

　Window.alert(" ”+navigator.appName+" ");

 

 などになります。

 

このオブジェクトに対しての

 

　■　メソッド

　■　プロパティー

 

 

がそれぞれ存在し、結構な数があるのでそれを覚える必

要があります。

 

 

　あと、書式ですが、

 

　a=10;

　b=10;

　C=a+b;

　document.write(C);

 

と言う処理があったとします。これは代入と演算と表示ですが、

この一連の流れを文と呼びます。

 

　あと、処理において何をしているのかが解りにくいので、チェッ

クサム用として、コメントをつけることもできます。BASICはREM

で、'を使うのですが、これは、

 

/*

*　コメント

*/

 

のような感じで使います。行がまたがる場合はそうなんですが、

１行だと

 

//コメント

 

になります。

 

【　使用例　】

 

*/

*代入した数値を演算し表示するプログラム

*/

 

　a=10;　//aに10を代入

　b=10;　//bに10を代入

　C=a+b;　//a+bの結果をCに代入

　document.write(C);　//Cの数値を表示

 

と言う感じです。

 

呼び出しと実行

 

　以前も書きましたが、JavScriptをヘッダーに書いた場合、

 

　<SCRIPT>タグ

 

で呼び出します。記述ですが、

 

<script type="text/javascript">
<!--
window.alert("Ｈｅｌｌｏ　Ｗｏｒｌｄ");
// -->
</script>
 
で呼び出せます。ちなみに、古いブラウザの場合だと
 
<script language="JavaScript1.2">
<!--
document.write("Ｈｅｌｌｏ　Ｗｏｒｌｄ");
// -->
</script>
 
のような記述になりますが、1.2辺りの記述になります。
 
最初に書いた、"text/JavaScript"　が4.01なので、
基本的にこっちが現行の記述になります。
 
ちなみに、　4.10では
 
<html>
<head>
<title>JavaScript Sample</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
 
 
とヘッダーに書くように指定されています。
 
　こうした呼び出しは、ヘッダー記述だけでなく、外部呼出しも
可能で、外部スクリプトをHTMLから呼び出す事が出来ます。

 

【　サンプル　】

 

■　SAMPLE.js

 
function sample() {
    window.alert("Ｈｅｌｌｏ　Ｗｏｒｌｄ");
}

 

 

■　SAMPLE.html

 

<html>
<head>
<title>JavaScript Sample</title>
<script type="text/javascript" src="SAMPLE.js">
</script>
</head>
<body>
<form>
<input type="button" value="OK" onclick="sample()">
</form>
</body>
</html>

 

 

とすると、外部読み込みができます。とりあえず、呼び出しに

関連する部分を色違いにしてみたのですが、これでどういう

方式か理解できるのではないでしょうか？つまり、ボタン側

でクラスを呼び出して、ヘッダー側でファイルを呼び出してい

る状態です。この方式を使うと、処理が個別で大丈夫なモノ

を別に分ける事が可能になりますが、複数のモノを読み込

む場合には、

 
<script type="text/javascript" src="SAMPLE.js">
 <script type="text/javascript" src="SAMPLE１.js">
 
 
のように二つ記述する事になります。
 
 
　JavaScriptでは、マウスアクションなどにも対応しており、
 
　OnMouseOver
　ＯｎＣｌｉｃｋ
 
などがありますが、
 
<form action="#">
<input type="button" value="ＣＬＩＣＫ　ＨＥＲＥ！"
   onclick="window.alert('Ｈｅｌｌｏ　Ｗｏｒｌｄ')">
</form>

 

のような記述をすると、マウスの処理と同時にダイアログが

表示されます。

 

　当然、

 

<form action="#">
<input type="button" value="ＣＬＩＣＫ　ＨＥＲＥ！"
   onclick="window.alert('RETURN ＴＯＰ PAGE')" a hr
　ef="index.html">
</form>
 

のようなこともできます。あと、ハイパーリンクにダイレクトに

記述する方法もあり、

 

<a href="javascript:alert('Ｈｅｌｌｏ　Ｗｏｒｌｄ')">
　<img src="button1.gif">
</a>

 

という事もできます。

 

条件分岐

 

　IF文になるのは、多くの言語で共通なんですが、やはり

構文はそれぞれ異なり、Pythonでは

 

　IF 　条件式　真の処理　偽の処理

 

だったのですが、JavaScriptでは

 

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

 

となっています。つまり、

 

　if (a<1)｛

　document.write("Aは0以下");

　}else{

　document.write("Aは1以下");

 　}

 

と言う感じの構文になります。また、

 

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

 else{処理3}


というのがあり、

 

if (Ｘ < 5) {
    alert("未満");      
} else if (X > 20) {
    alert("超過");         
} else {
    alert("基準値");      
}

 

のようなこともできます。条件式ですが、これに比較で出てくる

超過・以上・同一・以下・未満（＞・＞＝・＝・＝＜・＜）のような

ものだといいのですが、こうした条件分岐には、比較演算子が

登場します。

 

 

 

 

【　比較演算子　】

 

■　a<b

　　・　aがb未満だと真、以上だと偽

 

■　a=<b

　　・　aがb以下だと真、超だと偽

 

■　a>b

　　・　aが超だと真、以下だと偽

 

■　a>=b

　　・　aがb以上だと真、未満だと偽

 
 
と、ここまでは問題がないと思います。単なる比較ですから。
特殊なのはここからで、

 

■　a==b

　　・　aがbと等しいだと真、等しくない場合だと偽

　　　　（＊）a=bとは異なる

 

■　a!=b

　　・　aがbと等しいだと偽、等しくない場合だと真

 

■　a===b

　　・　aがbと等しいだと真、等しくない場合だと偽

  　　　（＊）ただし、文字列と数字の比較の場合偽になる。
 
　　　　　　123=="123"　＝＞　真
　　　　　　（暗黙に変換するので真になる）
 
　　　　　　123==="123"　＝＞　偽
　　　　　　（文字と数値を区別するので偽）

 

■　a!==b

　　・　aがbと等しいだと偽、等しくない場合だと真

  　　　（＊）ただし、文字列と数字の比較の場合真になる。
 
　　　　　　123!=="123"　＝＞　偽
　　　　　　（暗黙に変換するので偽になる）
 
　　　　　　123!==="123"　＝＞　真
　　　　　　（文字と数値を区別するので真）
 

■　a&&b

　　・　aが真でかつbも真のとき真

     　　if((x==0)&&(y==0))alert("true");　

          ・・・xyともに0のとき

　　　　　　

■　a||b

　　・　aが真またはbが真のとき真

　　　　if((x==0)||(y==0))alert("true");　

　　　　・・・xyいずれかが0のとき

 

■　!a

　　・　aが真でなければ真


　　　　if(!(x==0))alert("true");　

　　　　・・・xが0以外のとき

 

■　a?b:c

　　・　aが真であればb、偽の場合はcを代入する

　　　　tx=(x<10)?"小さい":"大きい";　

　　　　・・・xが10未満なら「小さい」、10以上なら「大きい」

 

 

のようなのがあります。条件式において、数値の比較で

 

　===や!==は数字か文字かという厳格な審査をして判

断するので、条件を絞る場合に使え酢ですが、こんな感じの

処理があります。

 

 

 

　とりあえず、今回はオブジェクトとには、実行するメソッドと数値である

パラメーターが存在しており、処理がされていることと、プロパティーも存

在している事や、それを使った構文お呼び出しにヘッダー記述だけでなく

アクションに対してのリアクションをするようなタグ挿入型と外部呼出しに

ついて触れました。基本的ンいオブジェクト指向の言語は、このオブジェ

クトとは別に任意に型（クラス）を構築できるのですが、それが、

 

　Function クラス名（）

 

で宣言されるものになります。こうしたものに、メソッドやパラメ

ーターを加えた物を追加し構文する事になるのですが、その中

において、今回は、条件分岐のIFに振れました。条件におい

ては二者の比較においても一般的な比較では見かけない手法

も存在していますが、大小の対比と論理延安以外の者もその

中にあるわけです。

 

　前回forループについて触れましたが、これに関しては、

do while などがあるので、この辺りについてforのループも

含めて次回振れようかなと思います。

 

 

　

 

 

 

 

 

 

 

 

 


最新の画像［もっと見る］