初めてのJavaScriptプログラミング

JavaScriptでできること・できないこと

株式会社フラッツ
天方貴久

2009/4/20

クライアントサイドJavaScriptの制限

- PR -

　JavaScriptは本格的なプログラミング言語として使えるだけの能力を持っています。そういう意味では、ほかの言語と同じようなことを実現できるといえるでしょう。しかし、Webブラウザなどの実行環境の制限によってできないこともあります。

　例えば、WebブラウザでJavaScriptを実行する場合には、セキュリティ上の制約でJavaScriptからクライアントマシン上のファイルを読み込んだり、書き出したりすることはできません。

　これは、ウイルスやスパイウェアのような悪意のあるプログラムをJavaScriptでうっかり実行して、クライアントPCに被害を与えたり、情報を盗み見られたりしないようにするための制限です。

　このように、操作できるプログラムやデータを制限してプログラムを実行する環境をサンドボックスと呼びます。Webブラウザ上で利用されるJavaScriptはこのサンドボックスで実行されます。

JavaScriptの利用シーン

　JavaScriptは、初心者にも使いやすく、オブジェクト指向などを利用した本格的なプログラミングもできることから、アプリケーションの組み込みスクリプトなどで採用されています。そのいくつかを紹介したいと思います。

●ActionScript
アドビ システムズのFlashやFlexのスクリプティング言語であるActionScriptはJavaScriptを拡張して作られています。
●HTA（HTML Application）
マイクロソフトのInternet Exproler 5以降で利用できる機能で、HTMLやVBScript、JavaScriptを利用して、簡易的なデスクトップアプリケーションを作れます。
●Aptana Jaxer
サーバサイドJavaScriptの1実装です。Webアプリケーションのサーバ側もJavaScriptで記述できます。

早速JavaScriptプログラミング！

　それでは、プログラミングをするための環境を整えましょう。といっても、環境としては、お使いのテキストエディタと一般的なWebブラウザがあれば十分です。本連載では、Windows XPのIE 7を前提に解説をしていきますが、環境に応じて読み替えてください。

　Webブラウザとエディタの準備ができたら、JavaScriptで最もシンプルなプログラムを動作させてみましょう。エディタにコード1の内容を入力して、index.htmlというファイル名で保存してください。

　ファイルを保存するときの注意点として、文字コードに注意してください。本連載では、文字コードはUTF-8を前提としています。Windowsのメモ帳でファイルを保存する場合は、メニューの「ファイル」の「名前をつけて保存」を選んで、保存する際に文字コードを「UTF-8」にして保存します。

JavaScriptのひな型 index.html
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
</HEAD>
<BODY>
<script type="text/javascript"><!--
document.write('JavaScriptで文字列を表示');
//-->
</script>
</BODY>
</HTML>

　このファイルをWebブラウザで開くと、JavaScriptが実行されます。実際にIE 7でindex.htmlを開くと以下のような表示になります。

●IE 7で上記のファイルを開いた場合
JavaScriptのひな型

　それでは、入力したコードを見ていきましょう。

　まず、<HTML>と</HTML>でくくられた部分は、HTML要素の内容となります。

　HTML要素の内容は大きく<HEAD>〜</HEAD>のHEAD要素と<BODY>〜</BODY>のBODY要素から成ります。HEAD要素には、HTML文章のヘッダ情報を、BODY要素にはHTML文書の本体を記述します。

　JavaScriptを記述する場所として、HEAD要素の中に記述する方法と、BODY要素の中に直接記述する場合がありますが、ひな型ではBODY要素の中に、

<script type="text/javascript"><!--
document.write('JavaScriptで文字列を表示');
//-->
</script>

と直接記述しています。

　この<script type="text/javascript">〜</scirpt>でくくられた部分がJavaScriptのコードです。「type="text/javascript"」のtype属性が指定されていますが、これはscript要素の内容がJavaScriptであることをWebブラウザに伝えています。

　<script>要素の中に「<!--」と「//-->」という記述があるのにお気づきでしょうか。これはJavaScriptのコードではなく、HTMLのコメントの書式になります。この記述で囲まれた部分はHTMLのコメントとして扱われ、見た目として表示されなくなります（JavaScriptのコードとしてはコメントアウトされません）。

　最近のWebブラウザでは、このようにコメントアウトしなくてもJavaScriptのコードは表示されません。しかし、古いWebブラウザでは、この記述を忘れると、JavaScriptのコードがWebブラウザ上に表示されてしまう可能性があります。そのため、古いWebブラウザでも不用意にJavaScriptのコードが表示されないように、HTMLのコメントで囲んでいるのです。

document.writeメソッド−HTML文書への文の出力

　さて、お待ちかねのJavaScriptのコード解説です。

document.write('JavaScriptで文字列を表示');

という、たった1行のコードが、この連載での初めてのJavaScriptコードになります。

　このコードは、書き出したい文を「'」でくくって指定すると、Webブラウザ上に表示することができます。上記のサンプルでは、「'」でくくられた「JavaScriptで文を表示」という文がWebブラウザに書き出されました。

書式：document.write([書き出したい文]);

　今回は、ここまでです。物足りないと思われる方のために宿題を出しておきましょう。第2回で解説します。

  • document.writeの代わりにalertで表示してみてください
  • JavaScriptの変数の宣言方法と、数値リテラル、文字列リテラルとは何でしょうか。調べたら、実際に使ってみてください
  • JavaScriptの演算子について調べ、実際に使ってみてください
  • JavaScript部分を別ファイルに分離する方法を調べてみてください
prev
2/2
  

Index
JavaScriptでできること・できないこと
  Page1
プログラミングを学びたいと思ったら
JavaScriptは、Webコンテンツに動きを与えた
JavaScriptを使うことで表現力が向上する
Page2
クライアントサイドJavaScriptの制限
JavaScriptの利用シーン
早速JavaScriptプログラミング！
document.writeメソッド−HTML文書への文の出力

index 初めてのJavaScriptプログラミング

TechTargetジャパン

Coding Edge フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH