javascript入門

javascriptに関して。


超初歩的なことから自分メモ。

JavaScript とは、Netscape Communications 社が開発したプログラミング言語でHTMLに組み込むだけでウェブページにインタラクティブな動作などをさせることができる言語のひとつ。

Javascriptはブラウザ側で処理を行うので、例えばcgiのようなサーバサイドプログラムより処理スピードがはやいのが利点です。

テキストエディタがあれば気軽にプログラムを書けて、ウェブブラウザで動作確認もできる非常に簡単に開発環境を構築できる言語です。

名称についてJAVAと関係あるのか?と思われる人もなかにはいると思いますが、JavaScript は元々 LiveScript という名前で開発されていましたが、Java が流行しはじめたことや、Netscape 社と Sun 社が技術提携したこともあり、JavaScript と名前を変えた、ということだけです。

なお、Javascriptにもいくつかのバージョンがあり、ブラウザによってバージョンサポート状況もことなるので、開発においてはターゲットブラウザでの動作確認が必須となります。

一時期上記のようなブラウザ間の互換性やセキュリティの問題等で敬遠される時期がありましたが、現在ではAjaxといわれる手法が登場したのを契機に見直され、現在では様々なサイトで用いられています。

http://ja.wikipedia.org/wiki/JavaScript

ウィキペディアにて互換性の問題や、後述するDOMとの関係性等の記載があるので参照されたい。


書き方について

JavaScript は、通常 <script>~</script>の間に記述します。


<script type="text/javascript">
<!--
window.alert("Hello!!");
// -->
</script>

※JavaScript に未対応のブラウザが、スクリプト部分を HTML の一部として画面に表示してしまうのを防ぐために、スクリプト全体を でコメントアウト
※HTML4.01 では language 属性が却下され、代わりに type 属性が必須属性として定義された
※Internet Explorer 4.0、Netscape Navigator 3.0 以降では、JavaScript を下記のように記述することができる。


<a href="javascript:alert('Hello!!')">Click Me</a>

Click Me

が、基本的にはbody内に記載するのは好ましくなく、基本的にはhead内や別ファイルに記載したい。

1 ソースが読みづらくなること
2 直接書くと同じ処理がでてきても使い回すことができないこと

などの理由があります。

また

Javascriptは大文字小文字を区別する。
半角英数字のみ
処理の区切りには「;」
変数や関数など任意に命名できる場合は

1 数字ではじまる
2 半角英数字とアンダーバー以外の文字
3 予約語(break case catch continue default functionなどなど)

を避けなければならない。

予約語一覧

abstract
boolean
break
byte
case
catch
char
class
const
continue
default
do
double
else
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
var
void
while
with


以上の決まりを守ること。

オブジェクト

javascriptは「何が何をどうするのか」「何はどの状態」ということを指定することです。
javascriptでは例えば

ウィンドウの > ドキュメント(ウェブページ)の > フォームの > ボタン

をクリックしたらどうする、

といったようにオブジェクトに対して指示を与える言語です。
ウィンドウ、ドキュメントといったものがオブジェクトにあたります。

さらにオブジェクトには
ナビゲーターオブジェクトとビルトインオブジェクトがあり、

ナビゲーターオブジェクト

ナビゲータープロジェクトは下記のように階層構造を持っています。(みれば至極真っ当な階層構造なのでわかりやすい)

window document Form text
      textarea
      password
      fileUpload
      Hidden
      Button
      Submit
      Reset
      Radio
      Checkbox
      Select
      Option
    Area  
    Anchor  
    Applet  
    Image  
    Layer  
    Link  
  Frame    
  history    
  location    
screen      
event      
navigator Plugin    
  MimeType    
       
       
       
       
       

下位オブジェクトに指示を与えるには.で区切って順にオブジェクトを書いていく必要がありますが、最上位の「window」オブジェクトは省略できます。

ビルトインオブジェクト

ビルトインオブジェクトとは簡単にいうとjavascriptであらかじめ定義されているオブジェクトのことで以下のようなものがあります。

オブジェクト名説明
Array配列を作成し、操作するオブジェクト。
Date日付や時間の取得や設定を行なうオブジェクト。
Math数値計算関連のオブジェクト。
String文字列に対して修飾や検索を行なうオブジェクト。
Function関数の作成や操作を行なうオブジェクト。
Objectユーザ独自の新しいオブジェクトを作成するオブジェクト。
Boolean真(true)の値と、偽(false)の値を作成するオブジェクト。
Number最大値などの属性を持った数値を作成するオブジェクト。
RegExpRegularExpression と同じ。 正規表現関連のオブジェクト。

ナビゲーターオブジェクトを使用するにはページ内の要素なのでそのまま使えますが、ビルトインオブジェクトはnew演算子を利用して

new オブジェクト名();

と新たに生成する必要があります。

function 関数名(パラメータ) 定義内容=
関数を定義する。関数名は省略することができる。
また、関数名はfunctionの直後に書くだけでなく、functionの戻り値を変数に代入し、それを関数とすることもできます(どちらでも結果は同じ)。
また、Functionでも同様に定義することができます。

functionは生成するオブジェクトのひな形としても定義することができる(コンストラクタとして機能します)。この場合、thisを使って生成するオブジェクトのプロパティやメソッドを定義する。
生成されたオブジェクトのプロパティやメソッドを継承するにはprototypeを使う。

変数

javascriptにおいて変数は非常に多用します。

変数には文字列や数値を代入することができ、便利。

変数を宣言する。
JavaScriptでは関数内で


var=

とvar宣言した場合、その変数はローカル変数になる。また、varを付けて宣言した変数はdelete命令では削除できなくなる。

ローカル変数は宣言された関数内でのみ参照できます。

例:

<head>
<script type="text/javascript">
var a = 5;
var b = 5;
function func () {
    var a = 10;
    b = 10;
}

document.write("a:" + a + " - b:" + b + "<br>");
func();
document.write("a:" + a + " - b:" + b);
</script>
</hrad>
<body>
</body>
</html>


function func()でb=10はグローバル変数なのでfunc();以降反映されるが、a=10はvar a=10とローカル変数としているので、func();以降でもfunc();内ではないので反映されずに「5」の値となる。

また、JavaScript 1.7ではブロック内でのみ有効な変数を指定するためのletが用意されている。Firefox 2などで使用できる。
変数宣言はカンマで区切って一度にまとめて設定することができる。この時にvar a=1, b, c=4, d=e=f=9のように代入もまとめて行うことができる。


var 変数名 ; 変数名 = 値 ;


または


var 変数名 = 値 ;


と書きます

Javascript/jQuery | | トラックバック(0) |
Share |

トラックバック(0)

トラックバックURL: http://www.spiral-records.com/mt/mt-tb.cgi/1098

Facebookコメントプラグイン

Powered by Movable Type 4.261

Tumblr : log long long time ago