JavaScript Vueは少ししか勉強していません残念ながらjsに移り、reactionを1人で学ぶ前に、最終的にはフレームワークやライブラリの基礎言語が重要だと感じたので、さらにJSを学びたい!
モダンjavascript本で理論を学び、理論だけを学ぶよりも、これを運用すれば学習効果が倍増すると考え、udemiでこの授業を発見し、現在授業中です.
3つ目のプロジェクトはまだ完成していませんが、この授業ではJS文法についての紹介はほとんどありませんが、このようにこれを使ってこのようにプロジェクトを作成することを学ぶことができてよかったです.最も重要なのは、フレームワークやライブラリがない場合、JSのみを使用することです.学習効果を高めるために、授業のほかに簡単なスキルも追加しました.

1. Form Validator

ユーザー名、email、passwordの最小および最大長を指定し、emailの場合、フォーマットに一致するかどうかを確認し、2つのパスワードが一致することを確認します.
エラーが発生した場合は、成功した状況に応じて枠線に異なる色を付けます.エラーが発生した場合は、その部分のエラー文を表示します.

1.運転画面

1）メイン画面

2）電子メールフォーマットエラー

3)何も入力していないとき

2.プロジェクトで学んだこと

1) test()

指定された文字列が正規表現を満たしているかどうかを決定し、trueまたはfalseに変換します.

function checkEmail(input){
  const re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
  if (re.test(input.value)) {
    showSuccess(input);
  } else {
    showError(input, 'Email is not valid')
  }
}

2) charAt()

このセクションの文字列を読み込みます.Pythonの[]と同じ
cf)substring(a,b):charatは1文字を読み出しますが、サブ文字列を読み出します.substring(1,3)-インデックス番号1からインデックス番号3までの文字列を読み込みます.

function getFieldName(input) {
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}

3) slice()

配列の最初から最後までの浅いコピーを新しい分割オブジェクトに戻します.元の配列は変更されません.
slice(begin,end)-endは含まれません.例えばspice(1,4)は1番から3番です.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// 2번부터 끝까지
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// 2번부터 4번까지(4번 미포함)
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

2. Movie Seat Booking

座席を選択すると、映画の価格や選択した座席数によって、次のテキストがリアルタイムで変更されます.
LocalStorageにデータを格納し、リフレッシュしても選択した座席と映画情報を保持します.

1.運転画面

1）メイン画面

2）座席選択時

2.プロジェクトで学んだこと

1) localStorage

localStorageは文字列のみをサポートし、キーと値の形式で値を格納するため、配列を保存する場合はJSON.stringify()JSONオブジェクトをStringオブジェクトに変換できます.逆に、localstorageからJSに値をロードする場合、JSON.parse()関数を使用して文字列オブジェクトをJSONオブジェクトに変換できます.localStorage.setItem(key, value):キーとvalueを入力してlocalStorageに保存localStorage.getItem(key):この鍵を返す値を格納localStorage.removeItem(key):この鍵が格納されている値を削除localStorage.clear():ストレージ内のすべての値を削除

function setMovieData(movieIndex, moviePrice){
  localStorage.setItem('selectedMovieIndex', movieIndex);
  localStorage.setItem('selectedMoviePrice', moviePrice);
}

// Update total and count
function updateSelectCount(){
  const selectedSeats = document.querySelectorAll('.row .seat.selected');
  //spread snytax
  const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));
  localStorage.setItem('selectedSeats',JSON.stringify(seatsIndex));
  const selectedSeatsCount = selectedSeats.length;
  count.innerText = selectedSeatsCount;
  total.innerText = selectedSeatsCount*ticketPrice;
}

2) CSS - perspective

サブエレメントを観察するパース距離の値を設定します.
透視図の数字が大きいほど、遠くから見る感じがします.

3.その他のタスク

個人的にresetボタンを作成しました.RESETボタンを押すと、LocalStorageに格納されているすべての座席と映画情報を初期化できます.

function resetSelected(){
  localStorage.clear();
  seats.forEach(seat =>{
    seat.classList.remove('selected');
  })
  updateSelectCount();
}

reset.addEventListener('click', event => resetSelected());

3. Custom Video Player

ビデオプレーヤーを直接カスタマイズします.
下の再生ボタンをクリックするとPlayとPauseアイコンが変わり、Stopボタンをクリックすると動画が停止し、再生時間が0にリセットされます.
LocalStorageにデータを格納し、リフレッシュしても選択した座席と映画情報を保持します.

1.運転画面

1）メイン画面

2）ビデオ再生時

2.プロジェクトで学んだこと

1) HTML - input range

スライドバーを調整して範囲内の数値を選択できる入力フィールドです.

max:入力要素の最大値を指定する

min:input要素の最大値を指定する

Step:input要素に入力できる数字の間隔を指定します

value:input要素の初期値を指定する

<input type="range" id="progress" class="progress" min="0" max="100" step="0.1" value="0">

2) Video

Play、pauseなどは見たことのある関数や属性がたくさんあります.

currentTime:現在の再生時間を秒単位で返す

duration:現在のオーディオ/ビデオを返す秒長

const video = document.querySelector('#video');

function toggleVideoStatus(){
  if(video.paused){
    video.play();
  } else {
    video.pause();
  }
}

function updateProgress(){
  progress.value = (video.currentTime / video.duration) * 100;

  //get min

  let mins = Math.floor(video.currentTime / 60);
  if(mins < 10){
    mins = '0' + String(mins);
  }

  let secs = Math.floor(video.currentTime % 60);
  if(secs < 10){
    secs = '0' + String(secs);
  }

  timestamp.innerText = `${mins}:${secs}`;
}

3.その他のタスク

Fast fowardとRewindボタンを作成し、各ボタンを押して、現在のビデオ時間に+5,-5秒です.現在視聴時間が5秒未満の場合は0に設定します.

function forwardVideo(){
  video.currentTime += 5
}

function backwardVideo(){
  if (video.currentTime < 5){
    video.currentTime = 0;
  } else{
    video.currentTime -=5;
  }
}