JavaScript

 JavaScript(「情報Ⅰ」教材)
           
 
特徴 JavaScriptとはWebブラウザ向けに開発されたプログラミング言語。

プログラム(JavaScript)の入力方法  
メモ帳を開く

 
  拡張子をhtmlにする

 
JavaScriptの重要事項

プログラム作成上の基本ルール   演算子 
① 原則、半角英数字で記述する。大文字と小文字は区別される。 
② 文(一つの命令)の終わりには「;(セミコロン)」をつける。 
③ 文字列は半角の「'(シングルクォーテーション)同士で囲む。 
④ 必要な場所にインデントを付けてわかりやすくする。 
⑤ プログラムを説明するためのコメントは、1行の場合は「//」を先頭に置き、
  複数行の場合は「/*」と「*/」で囲む
重要語句
prompt
('表示文字列','初期値') 
キー入力した文字列を取得 
 alert(表示データ) データを窓に表示 
  文字列の結合 
 
 
 注意点 変数を使用したプログラミング 
 
・「a=2」はaと2が等しいという意味ではなく、左辺のaに右辺の2を代入するという意味。
・「a==b」はaとbが等しいという意味。
・「i++」と「i=i+1;」 は同じ機能 で 意味は、iを一つずつ増やすことを示している。
変数「var」
変数とは、数値や文字列などのデータを保管するようなもの

var 変数名=値; 






 フローチャート プログラム   アルゴリズム  例題
 


 次
 処理1
処理2
 上から下へ記述された処理を実行する(ここでは処理1の後に処理2)。 例題1
名前を入力すると「こんにちは~さん」と示するプログラムを作成しなさい。
解答・解説

練習問題1
次のようなプログラムを作成しなさい。
①Hello,Worldを表示する。
②2+3の値を表示する。
解答・解説




 
条件式が1つの場合
if  (条件) {
 処理1;
}else{
 処理2;

 
 
件式が2つの場合
if (条件1) {
 処理1;
}else if(条件2){
 処理2;
}else{
 処理3;
} 









  条件が真(Yes)の時(条件が成立するときは処理1を実行し、儀(N o)の時(条件が成立しないとき)は処理2を実行する。
条件式が1つの場合
例題2 
入力した数値が50未満の場合は「50未満」を表示し、50以上の場合は「50以上」を表示するプログラムを作成しなさい。
解答・解説
例題3  
数値を入力し、その数値が奇数か偶数かを判定するプログラム。
解答・解説
練習問題
約数かどうかを判定するプログラム。
解答・解説


条件式が2つ以上の場合
例題4
身長(cm)と体重(kg)を入力させ、 BMI値を求め、低体重・普通体重・肥満を判定するプログラムを作成しなさい。
解答・解説
練習問題
1を入力するとHello.を表示し、2を入力するとHi!を表示する。そうでなければAnotherと表示されるプログラム。
解答・解説





 
 for 文の記述方法
for (初期設定;条件;再設定){
  処理;



 while 文の記述方法
初期設定;
while(条件){
処理

再設定;
  条件が真の間、ループの始端と終端の間にある処理を繰り返し実行し、儀になるとループから抜ける。
 初期設定でループ変数に初期値を設定し、再設定でループ変数の値を増減する。
 途中で繰り返しを中断するにはループ内にbreak;を入れる。
例題3
1から5までの整数の和を表示するプログラムを作成しなさい。
解答・解説

練習問題4
①5個のデータ 1,2,3,4,5,の合計と平均を求めるプログラムを作成しなさい。
解答・解説


Helloを10回表示するプログラムを作成しなさい。
(繰り返し処理をする
。)
解答・解説





配  列    関  数 検索のプログラム 整列のプログラム 
 配列とは、同じ型の変数をいくつも集めて  
一つの名前を付けたもの。一つひとつの変数
を要素という。配列の要素は、配列名と
番号で表す。この番号を添字(インデックス)
という。
 配列を使用するには、配列名と型、大きさを
宣言する必要がある。 
  関数とは、定められた一定の処理を定義し、
それを呼び出すと一連の処理が実行される仕組み。
組み込み関数
(あらかじめ用意された呼び出すだけで利用できる関数)  
例 alert ,document.write , prompt , Number
・ユーザ定義関数とは、ユーザーが作成する関数
 探索とは、配列などから目的の値を見つけること。
線形探索とは、端から順に目的の値である探索値を
探し出すアルゴリズム。

 二分検索とは、データが昇順または降順に整列されている
配列に対して、検索範囲を半分に狭めることを繰り返して
探索値を絞り込んでいくアルゴリズムである。
 
 
考え方
 一次元配列の意味  一次元配列の例
 配列の最初の要素を
[0番目]とするため、
添え字は0から始まる。





 
例題1 Webブラウザに下図のように表示する
プログラムを作成しなさい。
 3
63
27
  解答・解説
一次元配列(プログラムの実行)



次元配列
 ニ次元配列の意味

i行j列の要素はa[i][j]で表す。

例題2下図のようにWebブラウザに表示する
プログラムを作成しなさい。 

あいうえお
かきくけこ
さしすせそ

解答・解説

ニ次元配(プログラムの実行)



 例題3配列への数値の複数入力
整数である数値を半角の「,」で
区切りながらキーボードから複数入力した時、その和を表示するプログラムを作成しなさい               
解答・解説 
配列への数値の複数入力したときの和
(プログラムの実行)

関数化するメリット
・処理を部品化して再利用することで
プログラムの作成を効率化できる。

例題1
三角形の面積計算のプログラムを、
底辺と高さを引数として、求めなさい。

解答・解説

三角形の面積(プログラムの実行)

prompt('底辺','') 




関数(area)を用いたプログラムに変更


三角形の面積関数areaを用いて
(プログラムの実行)


関数について
 組み込み関数の例  prompt('底辺','') 



用語の意味
引数とは関数に引き渡す値
仮引数とは、呼び出される(関数の定義)側の引数。
実引数とは、呼び出す側の引数
戻り値(返り値)とは、関数内で処理した結果を呼び出す側
に戻す値をいう。

グローバル変数:関数の外側でvarを付けて宣言した変数。
(プログラム全体が有効範囲)
ローカル変数:関数内でvarを付けて宣言した変数。
(関数の内側のみ有効い範囲)


線 形 検 索 

例題1                         
5個の整数「57、16、99、10、45」の中から
線形探索で探索値を探し、最初に見つかった
場所を表示するプログラムを表示しなさい

考え方
個数は1から数えるが、配列の添え字を基準に考えるため、ここでは0から数えるようにしている。また、反復処理(ループ)の途中で検索値が見つかった場合は,breakによりループから抜ける。


解答・解説
線形探索のプログラム(プログラムの実行)



二 分 検 索
 

例題2











































 
交換法による整列

例題1

研究中



選択法による整列

例題2




















































 


  JavaScriptはWebブラウザ上で、この様に使われています。
デジタル時計  モニターがデジタル時計になります。
 現在の年・月・日・曜を表示する  クリックした時の年・月・曜がモニターに表示されます。
 「BMI」計算アプリ  身長(㎝)・体重(kg)を入力すると、BMIの数値と瘦せ型・普通体重・肥満度(1~4)の結果が表示されます。
 「心理テスト」アプリ  あなたが大切にしているものを表示されます
  ゲームで学ぶJavaScrip
スライドパズル 空白の上下左右にあるタイルをクリックするとそのタイルが移動します。1~15まで順番になるように並べるゲームです。
神経衰弱 カードを2枚めくって一致するペアを見つけるカードゲームです。すべてのペアを揃えるまでの経過時間が表示されます。
リバーシ マウスのクリック(またはタップ)で石を置いて相手を挟んでひっくり返し、数の多いほうが勝ちというゲームです。
ビリヤード