どうも未経験４０代おっさんです。
お久しぶりです、４０代おっさん頑張っています( ´∀｀ )
早いものでもう学習を始めて２週間が過ぎようとしています。
今週習った事
さて今週学習したのはjavaScriptです。
今使っているこのQiitaにもこのjavaScriptが使われています。
投稿するってボタンを押すと、「記事」と他のタグが出ると
思いますが。これもjavaScriptの機能です。
javaScriptの特徴
・フロントエンドに働きかけるプログラムである。
・HTMLに動的な動きをつけれる。
大きく言うとこの２個ですね。（実際はもっと色々あるのでしょうが）
記入例
<script>
//「変数とは？」何でもどんな形にもなる「箱」
//「変数の宣言方法」変数を「宣言」又は「作る」には 「let 好きな変数名」
//「リストの書き方」リストの書き方は 「let 変数名(又はリスト名とも呼ぶ)=[(大かっこ)要素]
//例 let a = ['リンゴ','ミカン','モモ']
//「ループ文の書き方」
/*リスト名.forEach((好きな変数名（iが使われることが多い？？）) => {
ここに処理（今回は「ブラウザーのコンソールに出力せよ」と書いてあります。
console.log(i)
})
*/
</script>
だいぶ雑ですがま～こんな感じです。（基礎文法は）
さて実際にこのjavaScript「だけ」で書こうとすると
コードも長くなるし、凄く見づらくなります。
モコモコ:「こんなに複雑に書けないよ～スパルタモン💦」
スパルタモン:「大丈夫、そんな時はコレ」
そんなスパルタモンが提案したのがコチラ。
JQuery
簡潔に言うと短いコードでjavaScriptを使えるように
したもの？？です。ついでに今から貼るコードに
fetchって言葉が出で来るので先に説明します
fetch
簡単に言うと「特定のサイト」から「データ」を
「抽出」するものって認識を持っていると
この後の記載例が分かり易いかと。
記載例
<script>
//ここでID「q1」が命名されたタグがおされたらを定義
function q1() {
//ここで元となるデータの参照URLを貼り付けて、それを「JSON」という形に加工して
fetch("http://spartacodingclub.shop/en/global_air/osaka").then(res => res.json()).then(data => {
//ここで変数「forecasts」に「２次元配列」を渡し。
let forecasts = data['data']['forecast']
//ここでID「names-q1」の中の<li>タグを全て消して
$('#names-q1').empty()
//ここで変数「i」に「１次元配列の辞書(ディクショナリー)」を渡す(ループ文で)
forecasts.forEach((i) => {
//ここでディクショナリー(又は辞書型)の「day」の中身を取り出す
let days = i['day']
//ここでディクショナリー(又は辞書型)の「avg」の中身を取り出す
let avgs = i['avg']
//ここのループ文で新たにＩＤ「names-q1」の<li>タグに変数名「days」と「avgs」の要素の中身を出力させている。
let temp_html = ``
if (avgs > 60) {
temp_html = `<li class="bak"> ${days} : ${avgs}</li>`
} else {
temp_html = `<li> ${days} : ${avgs}</li>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
ここに出てきた「$]の記載がある部分が「,jquery」です
もちろんこの機能を使うには「パス」を書く必要があります。
そのコードがコチラ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
さてそんな今週の学習して作った課題がコレ↓
(前回との違いが分かりにくいですがサイトをリロードすると気温の部分の
温度が変わります)
https://github.com/mokomokosparta/mypage.git