今週学ぶことJavascript, jQuery, Fetch
JavaScriptとは
プログラミング言語の1つで、ブラウザが理解できる言語。
大まかに分けるとHTMLは骨組み、CSSは飾り付け、JavaScriptは動きの役割
Javaとは全く違うもの、インドとインドネシアぐらい。
ポップアップを表示させたり、console.logでデベロッパーツールのコンソール内に情報を表示させたり出来る。
変数や関数を使い、代入や計算などが出来る。詳しくは後述
変数、基本演算
変数とは値を入れておく箱である。
変数の代入（a=2）とは「右にあるものを左に入れる！」
'a'という箱に'2'という数字を入れる。
JavaScriptではletを使い値を代入する。
値を変更する場合はletを用いず変数名(a)と値(下記の場合'Bob')を記述するだけでいい。
数字以外にも文字列を格納することも出来る。その場合''で文字列を囲う必要がある。
let a = 2
a = 'Bob'
演算子を使えば格納した値の計算や、文字列の連結を行うことも出来る。
let a = 2
let b = 3
console.log(a+b) // 5 と出力される
let c = 'Java'
let d = 'Script'
console.log(c+d) // 'JavaScript' と出力される
おまけ
四則演算の他にもいろんな関数がある。
- たとえば, '割り算の余り'を求めたい場合
let a = 20
let b = 7
a % b = 6
- また、特定の文字で文字列を分けたい場合
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 私たちが知りたかったこと！
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 簡単に書くこともできる！
リストとディクショナリ
- リストとは順番を持つデータ。数える場合は0から数える。リストの1つ目の値は[0]
let a_list = [] // リストを宣言。 変数の名前(a_list)は適当でOK！
//または,
let a = ['田中','鈴木','佐藤','佐々木'] // で宣言可能
console.log(a[1]) // 鈴木
console.log(a[0]) // 田中
//リストの長さ(入っている数)を求める
console.log(a.length) //4
- ディクショナリとはkey(ラベル)とvalue(内容)のセット
let a_dict = {} // ディクショナリ宣言。 変数の名前(a_dict)は適当でOK！
// または,
let a = {'name':'太郎','age':27} // で宣言可能
console.log(a)//Objectとして{'name':'太郎','age':27}が格納されたものが表示される。
console.log(a['name']) // 太郎
//(a.name) でも同じ結果
console.log(a['age']) // 27
//(a.age) でも同じ結果
- リストとディクショナリの組み合わせ
let a = [
{'name':'太郎','age':27},
{'name':'花子','age':15},
{'name':'伸夫','age':20}
]
console.log(a[0]['name']) //太郎
// (a[0].name) でも同じ結果
console.log(a[1]['age']) //15
// (a[1].age) でも同じ結果
顧客情報など管理する情報が増えてきた場合一つずつ格納してると、とても手間だし見ずらい
let customer_1_name = '太郎';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '花子';
let customer_2_phone = '010-4321-4321';
ディクショナリを活用すれば人物ごとに分けて記述出来るのでまとまって見やすくなる。
let customer_1 = {'name': '太郎', 'phone': '010-1234-1234'};
let customer_2 = {'name': '花子', 'phone': '010-4321-4321'};
更にリストを活用すれば、記述がとても簡単で見やすい。
let customer = [
{'name': '太郎', 'phone': '010-1234-1234'},
{'name': '花子', 'phone': '010-4321-4321'}
]
JQueryとは
JavaScriptのライブラリのこと。JavaScriptを使いやすくするためのツール、仕組みみたいなもの。
JQueryを使うことによって、コードの記述を簡略化・短縮することが出来る。
HTMLのhead内にスクリプトタグでJQueryCDNを読み込むことによって使用が可能となる。
<head>
<script scr="ここにCDNのURL"></script>
</head>
使い方
cssと同様に、jQuery を書くときにも”要素を指定して" →操作します。
例）特定のインプットボックスの値を→持ってきて！
例）特定のdivを→見えないようにして！
cssではセレクターとしてclassを使いましたが、
jQueryでは、id値を介して特定のボタン、インプットボックス、div などの要素を指定します。
Fetchとは
APIを取得するコマンドの一種で、JavaScriptインターフェイスです。（？）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
下記メモ、後ほどまとめる
【関数の概念が曖昧な方は必見！】
数学の関数を思い出してください。
y = f(x)
プログラミング言語で使われる関数は数学と似ています。
実行結果 = 関数名(パラメータ)
まとめ
・数学の関数とプログラミング言語の関数は似ている
・数学の関数は必ずxが必要
・プログラミングの関数はx(パラメータ)がなくても大丈夫
【JavaScriptのデータ型について】
var
・重複宣言できる。
・var a = 10; var a = 20;の文法が許される
・宣言後、データを変えることができる。
・var a = 10; a = 20;の文法が許される
・自由度と柔軟性が高いため、使うときは注意が必要とされる。
・条件分岐や繰り返し文の中に宣言する場合、外から操作できる。
let
・重複宣言できない。
・宣言後、データを変えることができる。
・let a = 10; a = 20;の文法が許される
・ES6から追加されたデータ型
・条件分岐や繰り返し文の中に宣言する場合、外から操作できない。
const
・重複宣言できない。
・宣言後、データを変えることもできない。
・ES6から追加されたデータ型
・条件分岐や繰り返し文の中に宣言する場合、外から操作できない。
【演算子】
+：足し算
-：引き算
*：掛け算
/：割り算
%：割り算の余り（modular演算）
【比較演算子】
※条件分岐と繰り返し文で使われる
a < b：aはbより小さい
a <= b：aはbと同じまたはより小さい
a === b：aとbはデータ型を含めて完璧に一致している
a !== b：aとbはデータ型を含めて完璧に一致してない
a == b：aとbはaのデータ型基準で一致している
a != b：aとbはaのデータ型基準で一致してない
a > b：aはbより大きい
a >= b：aはbと同じまたはより大きい
【論理演算子】
※条件分岐と繰り返し文で複数の条件を取り扱う際に使われる
a>=3 && b>=3：aとbは3以上である。
a>=3 || b>=3：aまたはbは3以上である。
!a：true/falseの値で主に使われる。既存の値を否定する。
課題
１週目で作ったページに天気情報を載せる。
VS Codeの方では正しく表示されるが、
GitHubの方では温度(API)の部分が表示されない。なぜ？
今回の課題で使った課題用APIのURLがhttpsではなくhttpだったためGitHubにブロックされた様子。
通常のAPIではhttpsを使用しているため、実際使うときは問題ないそう。