1週間の振り返り
先週に比べて毎日とはいかないが少しの時間を確保しきりのいいところまで事前勉強の時間に充てることができた。ただ、やっぱりその日の体調などもあって毎日の習慣化にすることはまだ時間がかかりそうだなーと感じた。先週よりも少し難易度が上がっているため少し余裕をもって勉強に取り組めたと思う。
1週間で学んだこと
2週目は、以下の言語の基礎分法の説明および簡単な練習を行いました。 元々javascriptは現在働いている会社の研修で基礎は学んでいたのでそこまで躓くこともなく こういうのあったなーと感覚で復習をしている感じでした。 ただ、研修で学んだ時はjqueryの具体的な使用方法とかあんまりイメージがつかなかったですが 今回の学習でどのようにjqueryを使用しよりシンプルにコードを記載してくのかが分かりました。【学んだ言語】
- java script
- jquery
- Fetch
以下はそれぞれの言語で覚えておきたいコードを記載していく。
- java script
Webページの開発者ツールを使用しコンソールで確認したいときに使用
prac.html
console.log('Hello World!')
リスト型で変数を作成するとき
prac.html
let a = ['りんご', 'なし', 'かき', 'みかん']
ディクショナリー型で変数を作成するとき
prac.html
let b = {"name" : "太郎","age" : 30}
繰り返し各要素を取り出したいとき
prac.html
let fruits = ['りんご','なし','かき','みかん']
fruits.forEach((a) => {
console.log(a)
})
条件分岐を使用したいとき
prac.html
let age = 24
if (age > 20) {
console.log('成人です')
} else {
console.log('未成年です')
}
条件分岐でよく使用する理論演算子一覧
| 意味 | 記号 |
|---|---|
| より大きい | > |
| より大きいか等しい | >= |
| より小さい | < |
| より小さいか等しい | <= |
| 等しい | == |
| 等しくない | != |
| AND | && |
| OR | ｜｜ |
| NOT | ! |
※ORの記号表示上の都合で全角になっていますが、実際は半角で使用します。
- jquery
あらかじめ作成されているjavascriptのコードのことを指す。
javascriptのコードだけだと複雑になるためより直観的にコードを記載できるが、
使用する際にはインポートを行う必要があるので注意。
インポート方法は、<head>と</head>の間に以下の通り挿入すれば使用可能
prac.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
.append()を使用すると各要素から1つずつ取り出した文字に変更しHTML上に表示させることが可能
すでにコードとして記載されている文字を初期化する際には.empty()を使用する
prac.html
function checkResult() {
let fruits = ['りんご','なし','かき','みかん','すいか']
$('#q1').empty()
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
- Fetch
javascriptで使用できる関数の1つで外部からデータを取得するときに使用する。
・Fetch(""):ダブルクォーテーションの間に取得したいデータのURLを
記載することで指定したページに通信リクエストを送信できる
・res ⇒ res.json() :通信リクエストで受け取ったデータを
「res」という名前を付けJSON形式にする
基本形の形
prac2.html
fetch("ここにURLを入力").then(res => res.json()).then(data => {
console.log(data)
})
- 注意点
通信リクエストのURLがhttpの場合、GitHub側で配布した際にセキュリティの関係で正常に表示できないケースがある。その場合は、以下のコードを<head>内に入れることで解決できる。
prac2.html
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />