RAREZONE.COM

TOP - JavaScript - Hard - Server - このサイトについて
TOP JavaScript 基本の基本

基本の基本

JavaScriptについて
出来ること
記述の基本
バージョン
扱えるデータ
演算子の種類


JavaScriptについて


JavaScriptはネットスケープ社とサン・マイクロシステム社が 共同で開発したスクリプト言語です。 JavaScriptは、クライアントサイドスクリプトです。 簡単に言うと、受けている側(Webを閲覧している側)の Webブラウザで動作するという意味です。
その対の位置にあるのがサーバーサイドスクリプトと言えます。
CGIやASP、PHPがそれに当たります。

▲TOPへ


JavaScriptで出来ること


JavaScriptを使えば、HTMLだけでは表現できなかった 動きのある表現ができます。 Ex.時間によって表現を変えたり、オンマウスで画像を変えたり・・

また、CGIでできなかった処理やCGIで行っていた処理の一部を Webページ上で行う事ができます。 そうする事により、サーバーの負荷を減らしたり レスポンスの速度を上げる結果になります。

▲TOPへ


JavaScript記述の基本


HTMLファイルへのJavaScriptの記述方法は2つあります。
HTMLファイルに直接記述する方法と外部JavaScriptファイルを呼び出す方法です。
また、JavaScriptに対応していないブラウザへの配慮や、
スクリプト中に注釈(コメント)を入れる場合の記述方法にもルールがあります。


HTMLファイルに直接記述する方法

HTMLファイルにJavaScriptを記述するには以下の様に記述します。

<SCRIPT LANGUAGE="JavaScript">
<!--
JavaScriptのSource ←ここにスクリプトを書きます
//-->
</SCRIPT>

JavaScriptに対応していないブラウザの為にコメントタグで囲んでいます。
  <!--」と「//-->」でスクリプト記述を囲んでいますね。
こうしておけば、未対応のブラウザでSourceが丸見え〜なんて
かっちょ悪い事態になるのを防げます。

尚、JavaScriptのバージョンを指定する場合「JavaScript」を
JavaScript1.1」や「JavaScript1.2」等に書き換えてください。
※「JavaScript1.0」の場合は「JavaScript」と記述します。
しかし、ブラウザによって対応していないバージョンの場合
スクリプトは実行されません。


外部JavaScriptファイルを呼び出す方法

対応しているブラウザは、IE4.0以降、NN3.0以降からです。
Scriptファイルには、JavaScriptのSourceコードのみを記述します。
ファイルの拡張子は「.js」にします。
例えば「test.js」というファイル名で作った場合。
HTMLファイルには次のように記述して、呼び出します。

<SCRIPT SCRIPT LANGUAGE="JavaScript" SRC="test.js"></SCRIPT>

外部ファイルを呼ぶ場合、設置するサーバー側にMIMEタイプを設定する必要があります。
MIMEタイプの設定は「.htaccess」ファイルで設定します。
「.htaccess」による設定が許可されている場合、ご自分で設定してください。
許可されていない場合は、サーバー管理者に問い合わせると良いでしょう。
「.htaccess」ファイルの設定は、
「.htaccess」ファイルに「AddType application/x-javascript.js」と
1行追加(及び記述)するだけです。

尚、JavaScriptのバージョンを指定する場合「JavaScript」を
JavaScript1.1」や「JavaScript1.2」等に書き換えてください。
※「JavaScript1.0」の場合は「JavaScript」と記述します。
しかし、ブラウザによって対応していないバージョンの場合
スクリプトは実行されません。


JavaScriptに対応していないブラウザへのメッセージ表示

JavaScriptを無効にしている、あるいは対応していなブラウザへ
何かメッセージを表示したい場合には、下のように記述します。

<NOSCRIPT>
このページはJavaScriptが使われています! ←ここにメッセージを書く
</NOSCRIPT>



スクリプト内のコメント記述

JavaScriptを記述している時にコメント文を書きたい場合があります。
そんな時は、以下の様にしてコメントを書きます。

<SCRIPT LANGUAGE="JavaScript">
<!--
//コメント文この「//」以降の1行はコメントとして扱われます
var a=1;  /*←※これは変数の設定*/
if(a==1){
document.bgColor="#0000ff";
}
/*また、複数行の場合はこうやって/**/で囲んで書くと
改行してもコメント文として扱います*/
else{
document.bgColor="#ff0000";
}
//-->
</SCRIPT>

▲TOPへ


JavaScriptのバージョン


JavaScriptにはいくつかのバージョンがあります。
「LANGUAGE="JavaScript"」と記述した場合、
JavaScript1.0以上対応の全ブラウザでスクリプトが実行されます。
しか〜〜し、それでは上位バージョンの拡張された命令が実行されません。
それ以外のバージョンを指定した場合、そのバージョンに未対応のブラウザ
では、スクリプトは実行されませんので気をつけて下さい。
私は面倒なのでやっていませんが、ブラウザによって振り分けるとか
そんな技を使うとか使わないとか・・・。
いや予算があればやりますよ!やりますとも!ええ!やりますとも!w


JavaScript対応表

language属性の値 IE4 IE5 NN3 NN4.0〜4.05 NN4.06〜
JavaScript
JavaScript1.1 △Mac版は
3.1以降
JavaScript1.2  
JavaScript1.3      
○とか書いてありますが、一部動作しないものもあるみたいです。
そこらへんは、試してみてください 。(ぉぃ

▲TOPへ


JavaScriptで扱えるデータ


JavaScriptで扱えるデータを紹介します。 大きく分けて4つに分類できます。


扱えるデータ表

内容
数値 整数[10進数(正・負)、8進数、16進数]
浮動小数点[10進数(正・負)、べき乗の識別子と指数を持った10進数]
文字列 「"How are you"」のようにダブルクォーテーションで囲む
「'ようよう!'」のようにシングルクォーテーションで囲む
「"12345"」のように数字をダブルクォーテーションで囲んでも文字列になる
「""」のように何も書かないと空文字となる
下の表の特殊記号も文字列です
▼特殊記号一覧表
記号 役割 記号 役割
\b バックスペース \r キャリッジリターン
\f フォームフィード \t タブ
\n 改行 \\ バックスラッシュ
論理値 論理値は、「true(真)」もしくは「false(偽)」の
どちらかを持っている値のことをいいます
null null値は「何もない」ということを示す値です
文字列の「空文字」や「0」とは異なります

▲TOPへ


JavaScriptで使う演算子の種類


JavaScriptで使う様々な演算子を紹介します。
値を足したり引いたり、一定の条件で計算をしたり・・。
そんな事をしながらプログラムの処理をします。
その、式の表現に使うための記号を「演算子」といいます。


算術演算子

足したり引いたりする「演算子」を算術演算子といいます。

記号 役割 記号 役割
= 変数に値を代入する / 除算
例「a/b」・・・aをbで割る
+ 加算
例「a+b」・・・aとbを足す
% 除算の余りを求める(小数点以下切り捨て)
例「a%b」・・・aをbで割った余り
- 減算または負の値
例「a-b」・・・aからbを引く
++ 値を1増やす(インクリメント)※
* 乗算
例「a*b」・・・aとbを掛ける
-- 値から1引く(デクリメント)※

※「インクリメント」と「デクリメント」の用法
内容 内容
a=b++ aにbを代入してからbの値を1増やす a=++b bの値を1増やしてからaに代入する
a=b-- aにbを代入してからbの値を1減らす a=--b bの値を1減らしてからaに代入する



代入演算子

代入演算子はとは、基本的に代入演算子の右辺(=の右側)
に記述されている値や式を左辺に記述されている変数に
代入する処理を行います。

内容 内容
a=b bをaに代入する a*=b aにa*bを代入する
a+=b aにa+bを代入する a/=b aにa/bを代入する
a-=b aにa-bを代入する a%=b aにa/bの余り剰余を代入する



比較演算子

比較演算子は右辺と左辺の値を比較する時に使います。
左右の値を比較して、真であったら「true」の値が返され、
偽であったら「false」の値が返されます

内容 内容
a==b aとbが等しい a!=b aとbが等しくない
a>b aがbよりも大きい a<b aがbよりも小さい
a>=b aがbよりも大きいか等しい a<=b aがbよりも小さいか等しい



論理演算子

論理演算子とは右辺、左辺の条件式を評価して、
それぞれ成り立っているかどうかで「true(真)」か
「false(偽)」を返します。

内容
条件式a&&条件式b aかつb(AND)
aとbが成り立っていたら真
条件式a||条件式b aまたはb(OR)
aかbのどちらかが成り立っていたら真
!条件式a aが真の場合は偽、aが偽の場合は真(NOT)
a>=b aがbよりも大きいか等しい



文字列演算子

文字列演算子は連結演算子です
文字列と文字列の間に+を使用すると、その2つの文字列を連結します。

内容
"文字列A"+"文字列B" 文字列Aと文字列Bを連結する
a+="文字列B" aの後に文字列Bを追加する



条件演算子

条件式によって、2つある値のうちのひとつの値を返します。

(条件式)? 値1 : 値2

(条件式)? 値1 : 値2

条件式の部分は、評価すると論理値(trueかfalse)が
返される式にする必要があります。
真(true)ならばこの式が返す値が「値1」になり、
偽(false)ならばこの式が返す値が「値2」になります。

【条件演算子の利用例】
<SCRIPT LANGUAGE="JavaScript">
<!--
kotoba="はじめまして";
v=(kotoba=="はじめまして")?"はじめましてと言っています":"はじめましてと言っていません";
document.write(v);
//-->
</SCRIPT>


【応用実例】
貴方からのあいさつをここに書いてみて下さい。
※実際に動作しまっす。

ソース

↓ここから
<SCRIPT LANGUAGE="JavaScript">
<!--
function kotoba(){
h=document.Youform.you.value;
v=(h=="はじめまして")?"こちらこそはじめまして〜(=^^=)":"「はじめまして」って言ってよ〜〜";
alert(v);
}
//-->
</SCRIPT>

↑ここまでを <HEAD>〜</HEAD>内に記述して

↓ここからがフォーム部分
貴方からのあいさつをここに書いてみて下さい。
<BR>※実際に動作しまっす。
<FORM NAME="Youform">
<INPUT type="text" NAME="you" size=20><BR><BR>
<INPUT type="button" value="書いたら押す" onClick="kotoba()"><BR><BR>
</FORM>

↑ここまでを<BODY>〜</BODY>内に記述しまっす。

こんな感じでやるとちょっと面白いかも・・
そうでもないか・・・(ぉぃ

その他にも「演算子」あるみたいですが・・・あとは本で勉強してください。(更にぉぃ
私もよく分かってないんですよね・・・ふう・・


演算子の優先順位

算子は同時に使ったときにどれが先に実行されるのかという
優先順位が決まっています。

↑優先度高い
括弧「()」
積・商・剰余「*、/、%」
和・差「+、-」
比較演算子「<、<=、>、>=」
等価演算子「==、!=」
論理積「&&」
論理和「||」
条件演算子「?:」
代入演算子「=、+=、-=、*=、/=、%=」
↓優先度低い

▲TOPへ



[お問い合わせ:hermana@rarezone.com]
Copyright(c)2003 RAREZONE All Rights Reserved.