🙌
精神と時の部屋日記4 | jsチュートリアル
JavaScriptとは
- 目的:JavaScriptとは何か基本をしる
- 動的なコンテンツ更新
- API application programming interface
- browser api
- DOM API:HTMLとCSSの操作
- Geolocation API とか色々
- 3rd party API
- twitter apiとか
- jsのようとはDOM APIを介してhtmlとcssを変更しUIを更新すること
- ブラウザのタブは個別に実行。他には干渉できない
- サーバーサイド:サーバー上で実行され結果がブラウザに
- クライアントサイド:ユーザのコンピュータで実行されるコード
- script要素でhtmlに追加される
- <script src="xxxxx.js" defer></script>
- スクリプトの読み込みタイミング重要
document.addEventListener('DOMContentLoaded', () => {
// …
});
- 外部ではdefer属性を使ってる
- スクリプトのブロッキング問題
- async属性ページ内のスクリプトが互いに独立して実行され、ページ内の他のスクリプトに依存しない場合に使える
- defer属性スクリプトがDOMに依存している場合例えばページの1つ以上の要素を変更する場合に便利
- コメントは//
- スクリプトのブロッキング問題とは
- 最近のwebサイトはhtmlよりもスクリプトが重い。処理に時間がかかる
- ブラウザがスクリプトに遭遇するとDOMの構築を中断しスクリプトをすぐに実行してしまう。ここで二つの問題が起こる。スクリプトはそれ以降のDOM要素を認識できないためハンドラーの追加が出来なくなる。ハンドラーは特定のイベントが起こる際に実行される関数のこと。例えば以下のような関数が相当する
const button = document.querySelecter("button");
buttun.addEventListener("click", ()=>{
alert("ボタンがクリックされました！")；
});
- もう一つの問題はページの先頭に重いスクリプトがあるとページブロックが行われる。利用者は待たないといけなくなる。
- そのための回避策としてページ末尾にスクリプト置くか、defer,async属性がある。
- defer属性はブラウザにスクリプトを待たないように指示する。バックグラウンドでスクリプトがロードされ、DOMが構築されたのちに実行される
- async属性はスクリプトが完全に独立していることを意味する。ブラウザはスクリプトをブロックせず、待たず、また、asyncスクリプトもそれらを待たない。つまり、asyncスクリプトはバックグラウンドでロードされ準備次第実行される。DOMと他のスクリプトは相互に待たない。このような非同期のスクリプトは独立したサードパーティのスクリプトを組み込む際に便利。広告などを。(スクリプトが外部に依存していなければ非同期でいい。)
jsのループ
for (let i = 1 ; i<21 ; i++) { console.log(i)}
- 初期値iがよく使われる
- 条件 i<21でループ回る
- 増分 i++インクリメントこれはiに１をたす。コードが実行されるたびにconsole.log()を使用してコンソールに出力
const resetParas = document.querySelecterAll(".resetParas p");
for (let i=0; i<resetParas.length; i++){
resetParas[i].textContext="";
}
- このコードではdiv class="resetParas"に含まれるp要素全てのをquerySelecterAll()メソッドで取得してループを用いて中身を消去してる。
オブジェクトについて
guessField.focus();
- focus()メソッドを使ってあげると該当要素に自動でカーソルを合わせてくれる。
- jsでは全てのものはオブジェクト。一箇所に関連する機能をまとめたもの。
const guessField = document.querySelector(".guessField");
この参照を得るためdocumentオブジェクトのquerySelector()メソッドを使用。これはある情報(必要な要素を選択するCSSセレクタ)を受け取る。cssセレクタはpとかh1とか。guessFieldにinputの要素の参照が得られたよってinput要素のメソッドの一つであるfocus()メソッドでテキストフィールドにカーソルが当てられるようになる自動で
jsのトラブルシューティング
目的:シンプルな問題を修正する
エラーの種類
- 構文エラー 記述エラー
- 論理エラー 正しい書き方でも意図した通り動かないやつ
- SyntaxError: missing ; before statement はセミコロン抜け
- SyntaxError: missing ) after argument listは括弧の閉じ忘れ
- SyntaxError: missing : after property idはオブジェクトの書き方が悪い
必要な情報を保存する変数
- 目的:js変数の基礎理解
変数とは
- value値の入れ物 持っている値は変更できる 文字列や数字だけでなくなんでも格納。関数全体も格納できる。
変数の宣言
- var または varキーワード
- jsでは命令の行末に;を書かないといけない
- 今実行している環境に値が存在するかどうか変数名を入力して確かめられる。
- 初期化ex)
let myDog="Rover";
いろいろ
- var古いlet使う。varだと読みづらいコード巻き上げとかかけちゃう
- 値は入れ直せる
- 数値型 クォーテーションマークいらん
- 文字列型
- 真偽値
- 配列
let dog = { name : 'ポチ', breed : 'ダルメシアン' };
dog.name
- 動的型付け jsは他の言語と違って格納するデータ型を指定しないでいい。
- jsの定数 変更できない値
- constで定数を格納
jsの基本演算
- 目的:jsでの数値処理を知る
- 整数integer
- 浮動小数点数float 少数以下と少数桁を持つやつ39.33848とか
- 倍精度浮動小数点数double 倍桁数多い少数2進数とかも指定できる
- numberオブフェクト便利で色んなメソッドある
- 文字列型として格納されてる数字が計算できなくて困る時。フォーム入力に入力されてinput typeがtextである場合に起こリガチ解決法は以下
let myNumber="74";
myNumber +3;
答えは743となる
Number(myNumber)+3;
77
- インクリメントデクリメント++ -- 前後どっちでもいける実行順が変わる
- 代入演算子
- 比較演算子true or false
- == や!=は値のみtrue or false ===や!==は値とデータ型をtrue or false
- 二つの状態を行き来するような操作をトグルという
テキストjs
- 目的:jsでの文字列の扱いを知る
- 文字列は引用符で囲まれてなければ変数名かプロパティだと解釈される囲むこと。
- エスケープ\で文字列の一部だと認識させる。
const bigmouth='I\'ve got no right to take my place...';
console.log(bigmouth);
- 文字列の連結テンプレートリテラルバックスティック文字`を使用
const greeting=`Hello`;
- 上記は通常の文字列のように動作するが${}文字の中に変数を入れることができ、変数の値が結果に挿入される
const name="Chris";
const greeting=`Hello,${name}`;
console.log(greeting);
- 二つの変数を結合も可能
const one="Hello, ";
const two="how are you?";
const joined=`${one}${two}`;
console.log(joined);
- コンテキストでの連結
<button>押してみて!</button>
const button=document.querySelector("button");
function greet(){
const name=prompt("あなたの名前は？");
alert(`こんにちは ${name} さん、初めまして！`);
}
button.addEventListener("click", greet);
- window.prompt()関数を使用してテキスト入力できるポップアップダイアログを表示。name変数へ文字列格納してalert()関数を使用してバックスティック文字を利用した連結を行なって挨拶メッセを表示してる
- +でも結合できる。
const greeting="a";
const name="b";
console.log(greeting+", "+name);
console.log(`${greeting},${name}`);
- 下の方が可読性が上がる
- 数値と文字数
- データの型を変えたい場合
- Number()関数は渡されたデータを数値に変換する。
const myString="123";
const myNum=Number(myString);
console.log(typeof myNum);
- toString()関数は反対のメソッド。
- 文字列に式を含める
const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
(score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."
- 複数行の文字列
const output = `I like the song.
I gave it a score of 90%.`;
console.log(output);
/*
I like the song.
I gave it a score of 90%.
*/
- 改行文字は\n
便利な文字列メソッド
- 目的:文字列がオブジェクトであることを理解して、オブジェクトで使用できる基本的なメソッドを使って文字列を操作する方法を身につける。
- jsではほとんどのものがオブジェクト。
let string="this is my string.";
- string変数は文字列オブジェクトのインスタンスとなり、大量のプロパティとメソッドが使用できるようになる。
メソッド - よく出るやつ
- lengthプロパティ文字数計
let browserType="mozilla";
browserType.length;
- 文字列変数[x];でその番目にある文字が返ってくる
- 文字列変数[変数.length-x];でも表示できる
- indexOf()メソッド部分文字列探してあったら場所、ないなら-1
browserType.indexOf("zilla");
2
- slice(x,y);文字列抽出
- toLowerCase() toUpperCase()小文字と大文字変換。
xxx.toLowerCase();
- replace()部分入れ替え xがyにいれかわる。値自体は変化しない。
browserType.replace("x","y"); - 更新するなら
browserType=browserType.replace("x","y");
練習
- Christmasの文字列が入ってる文章のみ表示したい。
- if (変数.indexOf("Christmas")!==-1){を用いて書くとできる。
- 単語の最初を大文字にしたい。あとは小文字に。
- 最初の文字を大文字にする。
- []かsliceで１文字目を変数に格納し、replaceで変数x,変数x.toUpperやって終わり
- 既存部分から文字列を作成する
- sliceで3文字目まで格納してindexOfで;を探し、inputをindexOfを格納した変数+1でスライス。3文字目までと都市名の変数を:挟んで連結させる。``
配列
- 目的:配列とは何か、どのように操作するのか知る
- 配列はリストのようなオブジェクト リスト内の値に個別アクセス可
- 配列はなんでも格納できる 変数 数値 文字列 配列
let shopping = ['パン', '牛乳', 'チーズ', 'ハム', '麺'];
shopping;
- 配列の中に配列がある時その配列は多次元配列
let sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];
random[2][2];
- randomの3番目の3番目取得したいなら2これ
- 項目数を調べるにはlength ループに多用される
let sequence = [1,2,3,4,5,6,7];
for (let i=0; i<sequence.length; i++){
console.log(sequence[i]);
}
- 便利な配列メソッド
- 文字列と配列を相互に変換する
- split()メソッド 文字数を分割するポイントを引数とする
- join()はその逆でポイントで繋げる。 toString()も可能だが非推奨
let myData = '札幌,仙台,東京,名古屋,大阪,博多';
let myArray = myData.split(',');
myArray;
let myNewString = myArray.join(',');
myNewString;
- 追加と削除
- 最後push(),先頭unshift()で削除最後pop(),先頭shift()で削除
練習
-
for(let i=0; i<xxx.length; i++){}for回しながら{}内を処理
-
:で区切りたいならsplit()
-
[]で場所指定して変数に格納。
-
文字列結合ならyyy=aaa+bbb+"文字列";でおけい
-
変数を最初に追加したいなら配列の
xxx.unshift(yyy);
- 追加するのがpush()これは最後にunshift(）が最初に
- 削除するのがpop()これは最後を消す。shift(）これが最初を消す
Discussion