見る、読む、教える（MIYOO！)MIYOO！から始まるMyアップデイト。ビジネスの背景となる教養（歴史・建物・祭り・書物・文化・IT知識・ゴルフ場・ドラマ）をストックしたサイトはマネージャーを目指す方や既に管理者の方も必見です。大人（定年前）からのプログラミング（初歩）TECHACADEMY３か月での学習成果③（Javascript編１）

２．【Javascript 】プログラムのポイント説明

⇒実際のプログラムを使ってみてください

2-1.

プログラミングで頻繁に使われる function ●●●(){ }　関数を宣言する　

function initMap() {～}

initMapでなく名前は自分で設定（宣言）すれば大丈夫です。

よく使われるグーグルのＡＰＩ（API とはアプリケーションとアプリケーションの間でデータをやり取りする方法）を使って、今回のDATAから抽出した物件をグーグル地図に挿入でるようプログラムする関数を宣言しています。

このプログラムでは最初「 { 」は２行目にあり、最後の「 }」は839行目にありますので、そこまでが含まれます。

｛～｝の中は試行錯誤しながらプログラムを追加追加していく内に、839行目迄になったという感覚です。初めから全て見通してプログラムは書けません。安心してください。

var initMap = function() {～}とも書けます。

initMapでなく名前は自分で設定（宣言）すれば大丈夫です。ただし、翌日みて、関数の内容がわかるような命名をします。

mapDatas = [];

[]はDATAを保管場所をmapDatasと名前を自分でつけました。

$(“#navbar a”).on(“click”,function(){～｝；

$(“#navbar a”) で、先ず＄()はHTML文の場所を指定します。その指定場所の名前が #navbar a ということです。

$(“# ～）は HTML文にあるidと紐づきます。

HTML文のなかにある　<div id= “navbar”>の更に<a>の部分に関連させますということになり、

$(“#navbar a”).on(“click”,function(){～};とは HTML文のなかにある　id= “navbar”の更に50行目から60行目にある全ての<a>の部分がクリックonされた時にfunction(){～｝の内容｛～｝を実行しますという意味になります。

$(“.navbar a”).on(“click”,function(){～};

#の部分を「.」に変えると、

これは全く違う意味になります。

＃はidに紐づき、「.」はclassに紐づきます。

この１つが間違うだけでプログラムは反応しなくなるので、注意する必要があります。同じ名前 navbar をid=”navbar“とclass=”navbar”とは設定しないほうが無難です。

ただし、敢えて設定し「プログラムを簡略化する意図」があれば問題ないですが、初歩の段階では避けたほうがベターでしょう。

このプログラムでは、class=”nav navbar-nav”のように似てますが少し違うネーミングをしています。

因みにclass= “nav navbar-nav” は

class=”nav” と class=” navbar-nav ” の２つの名前を設定して指示を分けれるようにしています。

varは、名前を付けて「●●です」いう宣言です。宣言しないとコンピューターから無視されます。

var searchResult1,
searchText1 = topWord,
targetText1,
hitNum1;　　　　

var searchResult1,searchText1 = topWord, targetText1,hitNum1;と同じことです。

var searchResult1;
var searchText1 = topWord;
var targetText1;
var hitNum1; を省略して書き、更に見やすいように段で分けています。区切りは「,」で最後に「;」が必要です。

var searchText1 = topWord,だけは、 topWord を searchText1 と宣言した searchText1 に代入しますという意味で、数学とここは同じです。

しかし「＝」とは別に、紛らわしい　「＝＝」や「＝＝＝」とかをプログラムする場面があります。

代入するのではなく、「＝＝」の左側と右側を比較して同じ種類であり、「＝＝＝」の左側と右側を比較して全て形式が同じであかを確認する場合に使います。こ辺りも初めの段階では理解に苦しむ１つです。

2-2.

Javascriptプログラムの中にコメントを書く場合には「//～」//を頭に書く。

HTMLプログラム文の場合には<!–><–>とし、CSSプログラム文は/* ～*/の～の中に書きます。

2-3.

$(‘#search-result__list1’).empty();

$(‘#search-result__list1’)は、＄は先ず、HTML、またはCSSプログラムに書かれていることを示します。

その書かれている場所はid= “search-result__list1 “で、その内容をempty(空)にするという意味です。

何故、空（から）にする必要があるかですが、$(“”)で指定した場所にプログラムした内容を実施するように記録されている為に、当然同じ処理を繰り返すことになりますが、前の処理はいらない場合にはその指示内容を消さないといけないというわけです。下に具体的に説明します。

例えば、ボタンを押すと「赤い」という文字を書くプログラムを書いたとします。もう一度ボタンを単純にクリックすると「赤い赤い」とかかれることになります。ですので、もう一度ボタンを押すと、初めに書いた「赤い」というプログラムを消す処理が必要になるということです。

2-4.

配列[数字]の意味　

var eki = ekiData[3];の解説

ekiをvarで宣言します。そして ekiData[3] をekiに代入するという意味ですが、

例えば、ekiData[3]に、下のDATAが格納されている場合には、

[“ディーグラフォート”,”千里中央,大阪府豊中市新千里西町１丁目１－１０”,”北大阪急行南北線” ,”千里中央駅”,”徒歩”,”4分”] のDATAを分解を下に示します。

0番[0]　”ディーグラフォート”

１番[1] “千里中央,大阪府豊中市新千里西町１丁目１－１０”

２番[2]　”北大阪急行南北線”

３番[3]　”千里中央駅”

４番[4]　”徒歩”

５番[5]　”4分”　　となります。

Ekidata[3]はEkidataに保存格納されている背番号「３」＝4番目にあるDATAという意味です。つまり左から数えて４番目

2-5.

自分で定義せずに既にセットされた定型の関数の例

 var EkiList = ekiNames.filter(function (x, i, self) {
           　　 return self.indexOf(x) === i;
     　　　　　 });

JavaScriptでは、無数に事前に設定された定型の関数が用意されています。その１つに

DATAが重複しないで配列に保存されるように設定された

filter()という関数があります

var ekinNmes = [東京,大阪,名古屋,大阪,静岡,福岡,名古屋,京都]

というDATAが ekinNmes に保存格納されていた場合に

DATAの数は８個ありますが、大阪と名古屋がダブッていますので、駅名としたら実質は [東京,大阪,名古屋,,静岡,福岡,,京都] の8DATAの６種類です。

DATAの数は減らず「種類」をフィルターにかけるという関数です。

エクセルでもフィルターにすると同じ種類は省かれますがあれと同じことです。

注意はDATAの個数は減らずにその場所に保たれています。ですから ekinNmes [3]は静岡ではなく大阪のままです。

2-6.

●●.length は　　　　　　　　　　　　　●●のDATAの数を知るためのプログラム

for (var i = 0; i < searchResult2.length; i ++) {~　～　~｝

i=0 から searchResult2.length の数未満迄｛～｝を繰り返すという意味です。

この searchResult2.length は、 searchResult2 に含まれる length 個数までi++でfor繰り返すということです。頻繁に .length は同じ書き方ででてきます。

もしこの .length が4であれば、i=0,i=1,i=2,i=3までとなります。小なりの「＜」を使うのは前述した、プログラムは基本、１番目のDATAは「０番」の背番号をもたせる為に１つ整数値を減らす必要があるからだけです。

2-7.

2-8.

2-9.

$(‘#●●’).append(~)；のプログラムの意味と$(‘.●●’).append(~) との違いを解説

hitNum2 = '【最寄駅】からの検索結果：' + searchResult2.length + '件見つかりました。';
      
      $('.search-result__hit-num2').append(hitNum2);

HTML文の中のidなら#,またはclassなら.で指定した場所の最後の部分に（~）の中のプログラムを付け加えますappend()という事。

2-10.

$(‘[name=example3]’).change(function() {~}よく使われるセレクトプログラムを解説

$(‘[name=example3]’)の意味は、HTML文の name=example3 にあるセレクトをチェンジする場合には｛｝の中の関数で定義された内容が指示されるということです。

2-11.

var searchText5 = $(‘[name=example3] option:selected’).text();の意味を解説

var searchText5 = $(‘[name=example3] option:selected’).text();

var searchText5 に $(‘[name=example3] option:selected’).text()を代入する指示；です。

先ず $(‘[name=example3] option:selected’) はHTML文にある name=example3の中にある選択 optionの中で selected 既に選ばれたtext()を searchText5 と宣言した変数に代入するという意味。

2-12.

searchResult5.push(targetText5);の push （）プログラムを解説します。

searchResult5.push(targetText5);の push() はDATAを押し込むというイメージです。つまり targetText5 という変数に格納されたDATAを searchResult5 という保存庫にpushしますという指示。

2-13.

$(‘[name=example4]’).prepend(‘<option>沿線からの駅を選択</option>’);の prepend (~)を解説

<option>●●</option> は●●という選択枝を表します。ここでは「沿線からの駅を選択」という内容が●●に当たります。仮に●●が空白の場合に空白の選択枝が作られます。

$(‘[name=example4]’).prepend(‘<option>沿線からの駅を選択</option>’);の prepend ()は()の中の <option>沿線からの駅を選択</option> の内容をHTML文の中にある$()で指示したname=example4 という場所に付け加えるという意味です。

2-14.

$(‘<div>’).text(searchResult5[i]).appendTo(‘#search-result__list5’);が意味するプログラムを解説します。

　　// 駅名検索結果をページに出力
 ①      for (var i = 0; i < searchResult5.length; i ++) {         
 ②        $('<div>')
 ③                 .text(searchResult5[i])
 ④                 .appendTo('#search-result__list5');
         }

①はsearchResult5に保存されている.length数未満まで｛｝の定義したプログラムを繰り返すのですが、そのプログラムの内容が②③④です。

②は$(‘<div>’)で③の.text(searchResult5[i])を囲む

④のappendTo(‘#search-result__list5’)は、HTML文のid=”search-result__list5″で指定したところに②③を実行することを①の回数だけ繰り返すという意味。

2-15.

2-16.

プログラムの中で文字を連結して使う例の解説

hitNum4 = ‘【’+searchText5+’/’+searchText6+’】からの検索結果：’ + searchResult6.length + ‘件見つかりました。’;

hitNum4 に　＝の　右側の　’～～～～～～～ ‘を代入する

2-17.

2-18.

DATAの中から指定した部分を切り取るプログラムとDATA同士を結合するプログラム

var place_timeData = place_time.splice( 5, 1, place_timeData_x ) ;

		     var j_place_time = place_time.join('/');

.splice( 5, 1, place_timeData_x ) 　DATAを分離し入れ替える

数字の５は６番目、数字の１は１個切り取り、その切り取った部分にplace_timeData_xという変数DATAを追加する。

.join(‘/’);　（）の中の ’ ’で囲んだ/でDATAを結合する

[“a”,”b”,”c”,”d”,”e”]というDATAが[a/b/c/d/e]になるという意味。

   他には   var array = ['2019', '07', '027'];
            var result = array.join('-'); 
            console.log( result );

ﾌﾟﾛｸﾞﾗﾑ結果　　　　　2019-07-27　　にDATAが変化する

2-19.

IF(){}elsif(){}プログラム

if(place_time[5]<=5&&place_time[4]=="徒歩")　　　{j_place_timeDate5.push(j_place_time);}
else if(place_time[5]<=10&&place_time[4]=="徒歩"){j_place_timeDate10.push(j_place_time);}
else if(place_time[5]<=15&&place_time[4]=="徒歩"){j_place_timeDate15.push(j_place_time);}
else if(place_time[5]<=20&&place_time[4]=="徒歩"){j_place_timeDate20.push(j_place_time);}
else if(place_time[5]>=21&&place_time[4]=="徒歩"){j_place_timeDate21.push(j_place_time);}

if(place_time[5]<=5&&place_time[4]==”徒歩”)　

もし　place_time[5] が５以下で　かつ＆＆　　place_time[4]==”徒歩” 　であるならば

ﾌﾟﾛｸﾞﾗﾑの{j_place_timeDate5.push(j_place_time);}を実行する

もしそうでなくelse if

place_time[5]<=10　でかつ&&　　place_time[4]==”徒歩”ならば

ﾌﾟﾛｸﾞﾗﾑの {j_place_timeDate10.push(j_place_time);}を実行する

もしそうでなくelse if ・・・・・・

見る、読む、教える（MIYOO！)

大人（定年前）からのプログラミング（初歩）TECHACADEMY３か月での学習成果③（Javascript編１）

２．【Javascript 】プログラムのポイント説明

2-1.

プログラミングで頻繁に使われる function ●●●(){ }　関数を宣言する

2-2.

Javascriptプログラムの中にコメントを書く場合には「//～」//を頭に書く。

2-3.

$(‘#search-result__list1’).empty();

2-4.

配列[数字]の意味

2-5.

自分で定義せずに既にセットされた定型の関数の例

2-6.

●●.length は　　　　　　　　　　　　　●●のDATAの数を知るためのプログラム

2-7.

2-8.

2-9.

$(‘#●●’).append(~)；のプログラムの意味と$(‘.●●’).append(~) との違いを解説

2-10.

$(‘[name=example3]’).change(function() {~}よく使われるセレクトプログラムを解説

2-11.

var searchText5 = $(‘[name=example3] option:selected’).text();の意味を解説

2-12.

searchResult5.push(targetText5);の push （）プログラムを解説します。

2-13.

$(‘[name=example4]’).prepend(‘<option>沿線からの駅を選択</option>’);の prepend (~)を解説

2-14.

$(‘<div>’).text(searchResult5[i]).appendTo(‘#search-result__list5’);が意味するプログラムを解説します。

2-15.

2-16.

プログラムの中で文字を連結して使う例の解説

2-17.

2-18.

DATAの中から指定した部分を切り取るプログラムとDATA同士を結合するプログラム

2-19.

IF(){}elsif(){}プログラム

2-20.

いいね:

MIYOO！から始まるMyアップデイト。ビジネスの背景となる教養（歴史・建物・祭り・書物・文化・IT知識・ゴルフ場・ドラマ）をストックしたサイトはマネージャーを目指す方や既に管理者の方も必見です。

２．【Javascript 】プログラムのポイント説明

2-1.

プログラミングで頻繁に使われる function ●●●(){ } 関数を宣言する

2-2.

Javascriptプログラムの中にコメントを書く場合には「//～」//を頭に書く。

2-3.

$(‘#search-result__list1’).empty();

2-4.

配列[数字]の意味

2-5.

自分で定義せずに既にセットされた定型の関数の例

2-6.

●●.length は ●●のDATAの数を知るためのプログラム

2-7.

2-8.

2-9.

$(‘#●●’).append(~)； のプログラムの意味と$(‘.●●’).append(~) との違いを解説

2-10.

$(‘[name=example3]’).change(function() {~}よく使われるセレクト プログラムを解説

2-11.

var searchText5 = $(‘[name=example3] option:selected’).text();の意味を解説

2-12.

searchResult5.push(targetText5);の push （）プログラムを解説します。

2-13.

$(‘[name=example4]’).prepend(‘<option>沿線からの駅を選択</option>’);の prepend (~)を解説

2-14.

$(‘<div>’).text(searchResult5[i]).appendTo(‘#search-result__list5’);が意味するプログラムを解説します。

2-15.

2-16.

プログラムの中で文字を連結して使う例の解説

2-17.

2-18.

DATAの中から指定した部分を切り取るプログラムとDATA同士を結合するプログラム

2-19.

IF(){}elsif(){}プログラム

2-20.

いいね:

MIYOO！から始まるMyアップデイト。ビジネスの背景となる教養（歴史・建物・祭り・書物・文化・IT知識・ゴルフ場・ドラマ）をストックしたサイトはマネージャーを目指す方や既に管理者の方も必見です。

プログラミングで頻繁に使われる function ●●●(){ }　関数を宣言する　

配列[数字]の意味　

●●.length は　　　　　　　　　　　　　●●のDATAの数を知るためのプログラム

$(‘#●●’).append(~)；のプログラムの意味と$(‘.●●’).append(~) との違いを解説

$(‘[name=example3]’).change(function() {~}よく使われるセレクトプログラムを解説