JavaScript 1

JavaScript
JavaScriptの例
配列の利用
課題1

JavaScript

特徴

HTML内に記述されるインタプリタ言語
クライアントサイドで実行
webページを動的に制御
オブジェクト指向言語
C言語に類似した文法

基本的な記述方法


      <script type="text/javascript">
            ここにJavaScriptのコードを記述する
      </script>

例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
  </head>

  <body>
    <script type="text/javascript">
      document.write("<h1>こんにちは</h1>");     // JavaScript
    </script>
  </body>
</html>

JavaScriptの例

上のHTMLファイルで表示されるページ

ヘッダ部

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta http-equiv="Content-Script-Type" content="text/javascript">

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">;

charset=UTF-8: 記述する漢字コードを指定
演習室で使用するLinuxシステム(Fedora 8) で作成するテキストファイルは，
通常，Unicodeで保存される

    <meta http-equiv="Content-Script-Type" content="text/javascript">

JavaScriptを使用することを宣言

body部

    <script type="text/javascript">
          ...
    </script>

scritタグで挟んで JavaScript を記述する

      document.write("<hr>");
      document.write("<h1>JavaScriptのテスト</h1>");
      document.write(
        "<img src='http://www.t-kougei.ac.jp/inc/header/img/head_logo.gif'>"
	);
      document.write("<hr>");
      document.write(navigator.appName);

document.write(...)で書き出したものがHTML文章と解釈される
document.write(...): 関数

navigator.appName: 変数

JavaScriptを使用した

      <script type="text/javascript">
         document.write("<h1>JavaScriptのテスト</h1>");
      </script>

と、HTML

      <h1>JavaScriptのテスト</h1>

では同じものが表示される。

配列の利用

上のHTMLファイルで表示されるページ

変数

	  var today, sec, n;

変数の宣言

      var 変数 [, 変数 ...];
      var 変数 = 初期値;

型の指定はない
データの型
1. プリミティ型
  - 数値
  - 文字列
  - 論理値
  - Null
  - 未定義値(undefined)
2. 参照型
  - オブジェクト
  - 配列
  - 関数

配列

	  var color = new Array();
	  color[0] = "red";
          ...

配列変数の宣言と利用

オブジェクト指向

	  today = new Date();

Dateオブジェクトを生成し、変数 today に代入する

	  sec  = today.getSeconds();

today(Dateオブジェクト)のメソッドgetSeconds()を呼び出す．
today変数にメッセージ getSeconds() を送り，返された値を変数 sec に代入する

	  document.bgColor = color[sec % color.length];

documentの属性 bgColor に値を代入する
color.length：配列変数 color の要素数(.length)
sec % color.length： sec を color.length で割った余り

Dateオブジェクト

初期化(コンストラクタ)

内容

Date() 現在の日時で初期化

Date("文字列") 日時を指定して初期化

Date(年, 月, 日) 指定した年月日で初期化

	内容
Date()	現在の日時で初期化
Date("文字列")	日時を指定して初期化
Date(年, 月, 日)	指定した年月日で初期化

メソッド

メソッド名	内容
toString()	日時を文字列に変換して返す
getDay()	曜日を整数値で返す(0--6)
getMonth()	「月」を整数値返す(0-11)
getDate()	「日」を整数値返す
getHours()	「時」を返す
getMinutes()	「分」を返す
getSeconds()	「秒」を返す
setDate()	「日」をセットする

[例] 1年後の曜日を調べる

      var theDay = new Date();
      theDay.setFullYear(theDay.getFullYear()+1);
      document.write(theday.getDay());

[例]

date()	現在の日時で初期化
date("JUN 18, 2007")	2007年6月18日に初期化
date(2007,5,18)	2007年6月18日に初期化

Arrayオブジェクト

初期化

空の配列を生成する．
```
      var 変数名 = new Array();
```
要素数を指定して配列を生成する．各要素の値はundefined（未定義）．
```
      var 変数名 = new Array(要素数);
```
要素を指定して配列を生成する．指定した引数が各要素の値となる．
```
      var 変数名 = new Array(要素1, 要素2, ...);
```

プロパティ

プロパティ名内容

length 配列の長さ

プロパティ名	内容
length	配列の長さ

メソッド

メソッド名	内容
concat(配列1, ...)	引数に指定した配列(配列1 ...)を連結したものを返す
slice(開始位置,[終了位置])	開始位置から終了位置(省略時は最後)までをコピーした配列を返す
splice(開始位置,要素数,要素1, ...)	開始位置から要素数で指定した要素を要素1, ...で置き換える
push(要素1, ...)	要素を配列に追加する
pop()	最後の要素を取り除き，取り除いた要素を返す
shift()	先頭の要素を取り除き，取り除いた要素を返す
unshift(要素1, ...)	配列の先頭に要素を追加する
reverse()	要素の順序を逆転する
sort([sortFunction])	並べ替え(sortFunctionは省略可[小さい順])
join([分離文字:)	各要素を分離文字で連結した文字列で返す．引数を省略したときは「,」が分離文字となる
toString()	各要素をカンマ「,」で連結した文字列を返す
toLocalString()	各要素をカンマ「,」で連結した文字列を返す

課題1

以下の処理を行う Web ページを JavaScript を使用して作成しなさい．

作成する Webページは指定された名前のファイルに保存し，ブラウザにより，正常に動作することを確認すること．

ファイルはホームページの public_html/acss2/ディレクトリ内に置くこと．

「JavaScriptの例」と同じ内容のページを ex1-1.htmlファイルに作成し，動作を確認することで， JavaScriptの基本的な記述を理解せよ．
現在の日付と時刻を調べ，表示するページを作成せよ．ただし，表示する文字サイズ (font size) は，「秒」の値を 7 で割った余りに1を加えた大きさとすること．
[<Hn>...</Hn>タグを使用ただし， n=「秒」を7で割った余り+1]
このぺーじはファイル ex1-2.html に保存すること．
時間に余裕がある場合には，次の問題にも取り組んで下さい．
2番目の課題(ex1-2.html)に加えて「曜日」も併せて表示するよう機能を拡張したページを ex1-3.html に作成せよ．

Dateオブジェクトの保持する曜日は getDay() メソッドにより数値で取り出すことができる． (0が日曜日，1が月曜日，... 6が土曜日)
返された値に応じて曜日を表示する工夫が必要である．


アップロードの確認 -->  http://pc-www.tpu-pc.t-kougei.ac.jp/~c0....../acss2/ex1-1.html

学部> 学科> 研究室> 授業