//tips
嶋津様打ち合わせメモ
・$.ajaxなどはjquery関係なのでjqueryも調べる必要がある
・機能の不明点はコメントアウトを用いて少しずつ解明していけることを忘れない
//java理解
引き続きjavaの動作を確認していく。C#と同様にif~elseif~elseも同様に使える。
<script>
‘use strict’;
const answer = window.prompt(‘ヘルプを見ますか？’);
if(answer===‘yes’)
{
window.alert(‘タップでジャンプ’);
}
elseif(answer===‘no’)
{
window.alert(‘起動中’);
}
else
{
window.alert(‘yesかnoか’)
}
</script>
Answer部分は数字でも良いのでMath.floor(Math.random()*6);でランダムな0~5までの整数を生成して代入している。parseIntでは入力した状態の数字は文字なのでそれを整数に変換している。
const number = Math.floor(Math.random()*6);
const answer = parseInt(window.prompt(‘数字当て’)) ;
</script>
繰り返し作業の確認も行う。whileでiが１０以下の場合順に表示させるようにしている。こちらも動作は他の言語と同じよう。
let i = 1;
while(i <= 10)
{
console.log(i);
i = i+1
}
次はfunctionを作成する。これはC#とは少し異なる。関数やメソッドの作成の際はfunctionと関数名・引数で対応できるよう。returnで返り値を設定することも忘れない。
<script>
‘use strict’;
function total(price)
{
const tax =0.1
return price + price * tax
}
Console.log(‘値段は’+total(8000)+’円’);
</script>
total(8000)をコンソールの呼び出しの際用いている。
画面にも表示したいのでHTMLに出力する。
<section>
<p id = “output”></p>
</section>
<script>
‘use strict’;
function total(price)
{
cost tax = 0.1;
return price +price * tax
}
console.log(‘値段は’+total(8000)+’円’)
document.getElementById(‘output’).textContent = ‘値段は’+total(8000)+’円’;
</script>
これに他の値段も足す場合には、section内のidを増やし各idに対応するtextを埋め込めば良い。
<section>
<p id = “output”></p>
<p id = “output2”></p>
<p id = “output3”></p>
</section>
document.getElementById(‘output’).textContent = ‘値段は’+total(8000)+’円’;
document.getElementById(‘output2’).textContent = ‘値段2は’+total(2000)+’円’;
document.getElementById(‘output3’).textContent = ‘値段3は’+total(3000)+’円’;
これで順に記載されることになる。
ここからは文字や数字ではなく配列を用いて考える。
<script>
‘use strict’
let todo = [‘デザイン’,‘データ’,‘申し込み’,‘購入’]
console.log(todo[0]);
</script>
この配列全てのデータを読み込む場合には
for(let item of todo)
{
console.log(item);
}
とすることで全てのものを書き出すことができるC#とはofを使用するという点で異なる。
この配列に項目を追加したい場合には、pushを用い、
let todo = [‘デザイン’,‘データ’,‘申し込み’,‘購入’]
todo.push(‘歯医者’);
とすれば良い。.popで最後の項目削除、.shiftで最初の項目を削除なども覚えておく必要がある。
Htmlに反映させることを前提とすると、
let todo = [‘デザイン’,‘データ’,‘申し込み’,‘購入’]
todo.push(‘歯医者’);
for(let item of todo)
{
const li = `<li>${item}</li>`;
//const li = ‘<li>’+item+’</li>’;で代用可能
console.log(li);
}
ついに${}が登場した。
まず`で囲んだ文字列をテンプレート文字列と言い、これは文字列の中に変数を埋め込めるという特性がある。変数を埋め込む場合は${変数}と記述する。
また${}の中にファンクションを埋め込むことができる。
doument.getElementById(‘output’).textContent = `値段は${total(8000)}円`
と変更できる。
このほうが幾分すっきりかけることがわかる。
const total = `大人二人：${1800*2}円`
のように大人二人：3600円の数字の部分を計算式で入れておくこともできる。
リストの画面表示まで行わせられるように修正していく。
<section>
<h1>todo</h1>
<ul id= “list”>
</ul>
</section>
<script>
‘use strict’;
let todo = [‘デザイン’,‘データ’,‘申し込み’,‘購入’]
todo.push(‘歯医者’);
for(let item of todo)
{
const li = `<li>${item}</li>`;
document.getElementById(‘list’).insertAdjacentHTML(‘beforeend’,li);
}
</script>
これで画面にリスト表示ができた。
<ul id= “list”></ul>とすることでlistのidの部分を取得してliをjsの挿入内容に組み込むことで親要素のulに子要素のliを組み込む形が作られる。
ElementオブジェクトのtextContentプロパティではテキストの書き換えしかできないので、HTMLを挿入させるためにinsertAdjacentHTMLメソッドを使用する。
取得した要素.insertAdjacentHTML(‘挿入する場所’,挿入する要素)
挿入する場所のキーワードは決まっており、
beforebegin:取得した要素の開始タグ前に挿入
afterbegin:取得した要素の開始タグのすぐ後に挿入
beforeend:取得した要素の終了タグの直前に挿入
afterend:取得した要素の周力タグの後に挿入
となる。
今回はbeforeendを使用したため</ul>の直前に挿入されることになる。
<section>
<h1>todo</h1>
//beforebegin
<ul id= “list”>
//afterbegin
//ここに挿入することになるbeforeend
</ul>
//afterend
</section>
これはかなり便利なメソッド。
今度は小規模のオブジェクトの作成を絡めて考えていく。
今まではconsoleやwindowをオブジェクトとして操作してきたが、画面に表示する表などのブロック単位でのオブジェクトを使っていく。
<script>
‘use strict’;
let jsbook = {title:’JavaScript入門’,price:2500,stock:3}
</script>
オブジェクトの場合は配列のようにいちいち項目を’で囲まなくていい。
さらにこのオブジェクトの中身の項目を取り出すには
console.log(jsbook.title);
と、jsbookオブジェクトのプロパティであるtitleを.によって取得している。
他には
console.log(jsbook[‘price’]);
として取得する方法もある。.で取得する方法の方が幾分簡単である。
let オブジェクト変数名 = {プロパティ：データ,・・・}
のように表されることがわかった。
このプロパティのデータ自体を関数にすることもでき、下記のように表される。
let obj = {
addTax: function(num)
{
return num * 1.08;
}
};
このプロパティのことをjsではメソッドというよう。だいぶ今までのメソッドとはイメージが異なる。ただ、unityのメソッドなどはそもそもオブジェクトにscriptをアタッチする前提で作成していたので、やっていることは同じ。
オブジェクトの中身を全て取り出すには下記のようにforで中身のプロパティを取り出し処理する。
<script>
‘use strict’;
let jsbook = {title:’JavaScript入門’,price:2500,stock:3}
for(let p in jsbook)
{
console.log(item+’=’+jsbook[p]);
}
</script>
ここではofではなくinを使用。inはオブジェクトのプロパティを全て読み取る専用の繰り返し分となる。
ただ、オブジェクトの場合は配列とは異なり、読み取りの順序が必ずしも上から順になるとは限らないという点で配列とは異なる。
