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について詳しく学ぶことができてよかった。
他の用語や使い方はもっと勉強して身に着けるように補充が必要。

いいなと思ったら応援しよう!