2週目のプログラミング<java script>
function = 関数の意味を持っていて、同じことを繰り返すこと。
alert = 確認のボタンとして、メッセージを指定できる。
=>world.alert('') , alert('')とも使える。
onclick = 使用者が要素をクリックしたら、実行。
ex)
<button onclick = 'hey()'>ボタン<button>
console.log = 開発者が実際まともに作動するか確認をするツル。
let = 変数
ディクショナリー = {要素1、要素2、要素3、… }ディクショナリーは中括弧の中で使われる。
=>要素としては、key, valueのセットで構成されていて:で繋がる。
$ = jqueryに接することができる。
ex)
$('選択').動作関数();
jquery
fetch("url").then(res => res.json()).then(data => {})
fetch中のurlをjson形式に変えてdata変換する。
繰り返し文
function checkResult() {
let fruits = ['りんご', 'なし', 'かき', 'みかん', 'すいか']
$('#q1').empty()
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
letはリストの形で中には果物の種類がある。
foreachは繰り返し文で中に変数を指定し、出力する。
・append() = 選択された要素の最後に新しい要素を追加する。
・empty() = 既存の内容を消す。
ディクショナリー
let people = [
{'name': '太郎', 'age': 24},
{'name': '花子', 'age': 30},
{'name': '伸夫', 'age': 12},
{'name': '夏美', 'age': 15},
{'name': '和人', 'age': 18},
{'name': '玲奈', 'age': 36}
]
$('#q2').empty()
people.forEach((a) => {
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}は ${age}歳です。</p>`
$('#q2').append(temp_html)
})
peopleの変数をディクショナリー形式作成して繰り返し文で既存の内容を変える。
条件文
function q1() {
fetch("http://spartacodingclub.shop/en/global_air/osaka").then(res => res.json()).then(data => {
let forecasts = data['data']['forecast']
$('#names-q1').empty()
forecasts.forEach((a) => {
let date = a['day']
let ave = a['avg']
let temp_html = ``
if(ave > 60){
temp_html = `<li class="bad">${date} : ${ave}</li>`
}else {
temp_html = `<li>${date} : ${ave}</li>`
}
$('#names-q1').append(temp_html)
})
})
}
forecastsの中のdataはfetchのurlの中のデータ。
データ中のdayとavgをそれぞれの変数に指定し、条件文を通じて60が超えるdayとavgの色を変える。
2週目の課題:気温追加
作成したサイトに気温追加
授業まとめ
jqueryについて詳しく学ぶことができてよかった。
他の用語や使い方はもっと勉強して身に着けるように補充が必要。