コンピュータプログラミング

末広ページへ　このコーナーの目次へ　最新情報

　このページは、岐阜大学 工学部 応用精密化学科夜間主コース２年のクラスの授業の内容です。

　

講師：

　斎藤末広（岐阜大学非常勤）

　岐阜大学教育学部教育学科治療教育コース卒業後、ソフトハウス、株式会社テスクを経て、現在、日本総合ビジネス専門学校、助教授。

目標：

　リテラシー（タッチタイプ，メールの操作）
　プログラミングの基礎

授業の進め方

　タッチタイプの練習，メール操作によって，パソコンに親しむ。
　JavaScriptの作成を通じて，プログラミングの基礎を身につける。

課題

　１　タッチタイプで目標数値をクリア

　美佳タイプのローマ字単語で，手元を隠して，45 字/分で合格。毎授業，常時テスト（学生証必要）可能，締切は，最後の授業

　　４月中であれば，３５字/分で合格
　　５月中であれば，４０字/分で合格

　２　JavaScriptプログラムの作成

　教科書のプログラムを作成する。

　３　期末テスト

　プログラムの基礎を問う。

教科書・参考資料

　教科書『JavaScript入門』河西朝雄著，技術評論社

　Winパソコン基本操作：チェックリスト
（日本総合ビジネス専門学校社会人向け短期パソコン習得講座用から）

　『驚異のブラインド・タッチ』増田忠 著　参考サイト：増田式キーボード学習法

　キーボード練習プログラム　ミカタイプ：美佳のタイプトレーナ　ダウンロード

　メールマガジン『JavaScript&Javaで目指そう！基本情報技術者試験』

強く薦めること

　この授業で、パソコン、インターネットを自分の道具にすること。そのためには、キーボードを見ずにたたけるようにすること、さらに、自分用のパソコンを手に入れ、すぐにでも自分の道具して使用を開始することである。

　また、自分の学習パターンにインターネットを利用することを組み入れること。

１4回目(9/13)　ホームページ公開　その２

　HTMLとJavaScriptを自力で作成できるようにする。

　MyWatch を index.htm に組み込む。

本日の特別課題

　　spage@yscon.co.jp に今までの授業の感想を1Fの実習室から送ること。（遅くとも９月１５日まで）

期末テスト

　コンピュータを自分の勉強にどのように役立てることができるか。自分なりの方法を３つ述べよ。

 HTML

　ホームページを作成するための言語。基本の形は，<定義>○○</定義>の形。この定義をブラウザ（IEやNS)が読みとって，ページを組立る。

 JavaScript

　HTMLに組み込まれて，動作，計算をする。順に関数を実行していくように記述される。

<HTML>  </HTML> HTML で書かれたプログラムであることを宣言する。
<HEAD> </HEAD> ページ全体の定義。ページの見出し等を記述する。
<BODY> </BODY> ページに表示されるもの。本体部
<H1> </H1> 一番上の階層の見出し
<H2> </H2> n番目の階層の見出し。数が増えるに従って，見出しの大きさが小さくなる。<H4>で本文と同じ大きさ。
<A>　</A) ページに埋め込む。リンク，メール先，画像等
　その他 　レファレンス

１3回目(9/6)　ホームページ公開　その１

　自分のホームページを公開する。

１2回目(7/5)　MyWatch作成　その２

　自分専用の時計を作成する。

課題

　現在のタイマ機能付き時計の他に，３秒タイマボタンを追加する。

　ボタンの表示は，"３秒タイマ"，ボタンを押したら，timer03start()　を開始する。timer03()も作成する必要あり。

１１回目(6/28)　MyWatch作成 その１

　自分専用の時計を作成する。　例題１７を機能アップする。

基本課題

 　曜日に (月）のようにカッコをつける

　ストップウォッチの表示枠を小さくする。

応用課題

　「ストップウォッチ再開」機能を追加。停止をしたあとも，計っていて，再開する機能。

１0回目(6/21)　My電卓作成（三角形の面積）

　自分専用の特殊な電卓を作成する。

　例：三角形の面積


　f.d.value は，f と言う名のフレーム部分のdの値の意味 

　a = f.a.value * 1 は，a枠の文字を数字に変換して，変数 a にする。

  s(s-a) をプログラムにするときは，s * (s - a)

　x{6-(y-3)}÷4　をプログラムにするときは，x * (6 - (y -3)) / 4

　カッコは，( ) のみ。足す，引く，かける，割る，は，+ - * /

本日の課題

　円の面積の電卓を作成する。「三角形の面積」を修正する。

ヒント

　１　円の面積は，半径をrとすると，πr2

　２　πは，Math.PI

　３　Xの二乗は，Math.pow(X, 2)

　４　漢字を使用するのは動いてから

９回目(6/14)　イベントとフォーム部品

イベント

　プログラムは開始したら自動的に始まり処理をして終わるというのが従来の処理パターン。画面に向かって対話型で処理をするようになり，指示待ち→指示→実行→指示待ちという処理増えている。このような指示を受け付けるような処理を向いたプログラムの構造をイベント駆動型という。

　クリックする，値を選ぶ等をイベントが発生したという。

　例

　練習問題８のサインカーブを表示するプログラムは，従来型（バッチ型）

　例題１８は，イベントを待っており，ボタンクリックというイベントで処理を開始する。イベント駆動型

　画面より指示を受け付けるためにホームページ上に，フォーム部品を配置する。

フォーム

　ホームページに場所を「フォーム」として定義する。そこにフォーム部品（オブジェクト）を配置する。

<FORM NAME = "MyForm">
    今日の日時：
    <INPUT TYPE = "BOX"  SIZE = 60 NAME="disp"><BR>
</FORM>

フォーム部品いろいろ

　テキスト枠　

　ボタン　

　ラジオボタン ZIP 77.7　 RADIOi 79.9　 GIFU 90.0

　チェックボックス　 ZIP 77.7　 RADIOi 79.9　 GIFU 90.0

　セレクトボックス　

本日の実習　クリックイベント

１　例題１８(rei18.htm)を動作させる。p89

２　rei18.htm をコピーして，練習１８(ren18.htm) 作成する。<body> </body>も入れておくこと。できるだけ，コピー＆貼り付けを利用すること。

　ヒント

　(1)(←丸１のつもり） msg = msg + c の形式で，文字列に追加できる。
　(2)は，cls は，消去(clear)の意味

８回目(6/7)　オブジェクト

　プログラム内の機能単位　オブジェクト。オブジェクトを利用してプログラムを組み立てる。

オブジェクト，ロボットのたとえ

　命令に従って，状況を判断しながら仕事をしてくれる。

オブジェクト，孫悟空のたとえ

　分身の術がつかえる。

オブジェクトの２つの構成物

　メソッド　　　　仕事の手順，関数の形で表現
　プロパティ　　値を保持，変数の形で表現

書式

　オブジェクト名.メソッド名( )

　　例　x = Math.pow(2, 3)     // 23 を s に代入する。

　オブジェクト名.プロパティ名

　　例　y  = Math.PI * 3 * 3 // 半径３の面積:

分身の術

　var 分身の名前　＝ new オブジェクト名

  var xToday    = new Date();                     //分身が生まれたときの時刻を保持
  var xTestDate = new Date(2001,10-1,21)　//2000年9月21日を保持

　xToday, xTestDate は，Date オブジェクトの分身（インスタンス）

　Date オブジェクトのメソッド，プロパティは，p72

  Dateオブジェクトの分身，xToday，xTestDate は，それぞれの日付時刻を管理してくれて，日付の引き算とかもやってくれる。

　この分身は，Dateクラスの一員である。分身を作ることができる，オブジェクトはクラスになる。

<script>

  var xToday    = new Date();
  var xTestDate = new Date(2001,10-1,21); // 月の数え方に注意
  xNokori = (xTestDate.getTime() - xToday.getTime()) / (60*60*24*1000);
                                               // 分母は1日のミリ秒数

  document.write("<h2><CENTER>");
  document.write("情報処理技術者試験まで，<br>");
  document.write(Math.ceil(xNokori), "日<br>");
  document.write("お楽しみはこれからだ。");
  document.write("</h2></<CENTER>");

</script>

　

本日の実習

１　例題１７(rei17.htm)を動作させる。p80

<FORM NAME = "MyForm">
今日の日時：
<INPUT SIZE = 60 NAME="disp"><BR>
</FORM>

は，

　
　今日の日時：

　を表示するプログラム(HTML)。

２　rei17.htm をコピーして，練習１７(ren17.htm) 作成する。

　ヒント

　(1)(←丸１のつもり）には，分身の術
　(2)は，メソッド

７回目(5/31)　関数，メッソド，仕事に名前をつける。

　いくつかの作業をまとめて仕事名とします。仕事名で，指示ができます。

　function 仕事名 {
　　作業１；
　　作業２；
　　作業３；
  }

  数学の用語から，「関数=function」をいただきました。

　この仕事する人（ロボット）を明確にした場合，○○がするメソッドと言われるます。また，別のプログラム言語，たとえば，Visual Basic やPASCALでは，手続きと呼ばれることもあります。

仕事名＝関数名＝メッソド名（＝手続き名）

　自分で作成することもできるし，事前に用意されているものもたくさんあります。

　例：
　documet.write は，documetオブジェクトがする write という仕事(メソッド）
　Math.sin は，Math(数学)オブジェクトがする sin という仕事(メソッド)，いわゆる三角関数のsin関数

　JavaScriptでは，通常，自分で関数を作成（定義）するときは，ヘッド部（<HEAD> </HEAD>）で行い，使うときは，本体部(<BODY> </BODY>)で行います。

　教科書のp28,p29では，関数 spc を作成（定義）してます。spc という仕事(関数）は，指示された文字分の空白を作ります。

本日の実習

１　例題５(rei5.htm)を動作させる。"Welcom to xxx " は，"Hello<BR>" だけでよい。

２　rei5.htm をコピーして，ren8.htm として，sin 関数と spc 関数 と write関数を利用して，練習問題８(p45-46)を完成させる。

　ヒント

　(1)(←丸１のつもり）には，10*Math.sin( x * 3.14/180) + 10 が入る。コピー＆貼り付けすること。
　(2)は，文字一文字。どの文字が入るか自分で考えること。変数名です。
　(3)は，spc(?) が入る。? は自分で考えること。変数名です。　

６回目(5/24)　if 文

　仕事１をするかどうか，判断する。

　if (条件式) {
　　仕事１
　}

　仕事１をするか，かわりに，仕事２をするか判断する。

　

 if (条件式) {
　　仕事１
 } else {
　　仕事２
 }

本日の実習

１　教科書p23 例題３(rei3.htm)を動作させる。

２　　を　img2.gif として保存し，練習３(ren3.htm)を完成させる。

練習３の解説

　document.write("<IMG SRC = 'img2.gif' WIDTH =", x, "% HEIGHT =", x, "%>"):

は，x = 2 のとき

　document.write("<IMG SRC = 'img2.gif' WIDTH = 2% HEIGHT =2%>"):

となり，img2.gif を幅，縦，ともにホームページの　2%　の大きさにするという意味になる。

コツ

できるだけ入力せず，コピーで済ます。

　１　前回作成したプログラムをコピーして，作成を開始する。

　２　よく似たところは，コピーしてから，修正する。

プログラムの３つの流れ

　順番，繰り返し，判断

プログラムの部品

　文(for, if)，変数，条件式

　

５回目(5/17)　繰り返しと変数

for文

　for ( i =0 ; i < 3; i ++){

  }

教科書p16

　img1.gif として保存する

変数

　変化する数を利用する。

教科書p19

４回目(5/10)　プログラム入門

ハードウェアとソフトウェア

専門用語 Windowsでは ゲーム機
ハードウェア パソコン本体，キーボード，表示装置，マウス，フロッピー等 ゲーム本体，ゲームパッド，テレビ，カートリッジ，メモリカード
ソフトウェア
（プログラム+データ）		 Windos2000，インターネットエクスプロラー，ユードラ ロゴ画面，ファイナルファンタジー

ソフトウェア（プログラム）の種類，データ

専門用語 Windowsでは ゲーム機
オペレーティングシステム（OS) Windos2000 ロゴ画面
アプリケーションプログラム インターネットエクスプロラー，ユードラ ファイナルファンタジー，DDR
データ ホームページ，電子メールのメール ゲームの途中経過，音楽

プログラムとは

　運動会のプログラム，料理のレシペ

　人間とコンピュータとの約束，コンピュータの言葉

原始プログラムと機械語プログラム

JavaScript入門

　参考，Ｊマガ第１号

課題

　自分の次の誕生日までの日数を表示する。J01-02を利用すること。

３回目(4/26)　キーボード練習，ローマ字入力，ホームページの見方

ローマ字の入力方法

　漢字変換の状態，全角半角，カタカナ，英字変換，文節の区切り

ホームページの見方

　yahooの使い方

　Googleの使い方

キーボード練習

２回目(4/19)　キーボード練習

全角と半角の違い

美佳タイプ練習

　ダウンロードの仕方

１回目(4/12)　授業の説明

　授業の受け方、単位の取り方（タッチタイプ、プログラム課題）、期末テストあり。

プログラムソース枠

プログラム名
<script>

  var xToday    = new Date();
  var xTestDate = new Date(2001,10-1,21); // 月の数え方に注意
  xNokori = (xTestDate.getTime() - xToday.getTime()) / (60*60*24*1000);
                                               // 分母は1日のミリ秒数

  document.write("<h2><CENTER>");
  document.write("情報処理技術者試験まで，<br>");
  document.write(Math.ceil(xNokori), "日<br>");
  document.write("お楽しみはこれからだ。");
  document.write("</h2></<CENTER>");

</script>
(再利用可能)
spage@yscon.co.jp

末広ホームへ このコーナの目次へ