インターネット論/インターネット・リテラシー 第21回[2001/11/29]
 

JavaScript



課題製作について    期限は12月20日(木) す。



 Webのページの表現力を高めるための技術として、今回はJavaScript を紹介します。
JavaScriptは当初Netscape社が開発したLiveScriptを発展させ,Javaを開発したSun社との協力によって生み出されました。JavaScriptはHTML文書の中に埋め込まれるので、CGIスクリプトのようにページとは独立したプログラムをサーバー側に作る必要は無く、ページを作るユーザーにとってはより簡単なものにになります。
今回もいくつかのサンプルを取り上げるだけなのでJavaScriptについての詳細は例えば以下のリンク集を参照して下さい。

  Find'X -- JavaScript 記述法,リファレンス,ツール,サンプル集,リンク集,メーリングリスト --

  コンピュータとインターネット > ソフトウェア > プログラミングツール > プログラミング言語 > JavaScript

 これらのリンク集の中からは、例えば以下のページは初心者でも「すぐ使える」サンプルがたくさん置いてあるのでお勧めです。

簡単!コピーで使える JavaScript ライブラリ

200 簡単JavaScript

なお、JavaScriptの方言問題を解決するためにECMAという国際標準化団体の規格がECMAscript として審議中です。


サンプル1

 
このHTMLのソースは以下のようになる。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta name="Author" content="Kan Sakamoto">
   <meta name="GENERATOR" content="Mozilla/4.75 [ja] (WinNT; U) [Netscape]">
   <title>JavaScriptsample1</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.open('subwindow.html','','scrollbars=1,resizable=1,width=200,height=300');
<!---->
</SCRIPT>
<h1>
Main Window</h1>

</body>
</html>

赤字の部分がJavaScript です。

Composerでは上記の赤字の部分を 編集ツールバーの「HTML<ソース> 」で入力していきます。
もちろんサブウィンドウのページsubwindow.htmlComposerで別に作っておきます。
 
 

サンプル2

 
このHTMLのソースは以下のようになる。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
   <meta name="Author" content="Kan Sakamoto">
   <meta name="GENERATOR" content="Mozilla/4.75 [ja] (WinNT; U) [Netscape]">
   <title>JavaScriptsample2</title>
</head>
<body>
&nbsp;
<h1>
Main Window</h1>
<a href="http://www.wakhok.ac.jp/" onMouseover="window.open('http://www.wakhok.ac.jp/','','scrollbars=1,resizable=1,width=500,height=600')"
>稚内北星学園のホームページです。</a>
</body>
</html>

赤字の部分が JavaScriptです。

Composerでは上記の赤字の部分を「リンク」ボタン で「リンクのプロパティ」ウィンドウを出した後、「詳細編集」で「詳細プロパティエディタ」ウィンドウを出し「JavaScriptのイベント」タブで「属性」onmouseoverを選び「値」に window.open('http://www.wakhok.ac.jp/','','scrollbars=1,resizable=1,width=500,height=600') を入力します。
 



今後課題制作を進めながらも、実習時間にはHTMLの補足など新しいことも勉強していきます。実習時間に欠席しないようにしてください。 出席日数も成績に関係します

題製作」とは別に授業の「 実習課題」も合わせて後期は評価します。



課題のページに進む