JavaScriptでできること・できないこと初めてのJavaScriptプログラミング(2/2 ページ)

» 2009年04月20日 00時00分 公開
[天方貴久株式会社フラッツ]
前のページへ 1|2       

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

 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を開くと以下のような表示になります。

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

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

 まず、<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部分を別ファイルに分離する方法を調べてみてください
前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

注目のテーマ

Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。