웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수

array(push, pop, slice, join, concat, splice, shift)

date(날짜)

+교재보고 훑어보기

 

number, string, array, object(객체)

열심히 공부~

---

소수점 자르기

<script>
  let num = Math.random() * 10; //랜덤한 숫자가 뜸
  console.log(num);
  console.log(
    num.toFixed(2), //소수점 2자리
    num.toFixed(3) //소수점 3자리
  );
</script>

 

 

가위바위보 만들기

 

switch 문

//숫자 1,2,3에 맞춰서 가위,바위,보를 출력
if (comNum == 1) {
  comResult = '가위';
}
if (comNum == 2) {
  comResult = '바위';
}
if (comNum == 3) {
  comResult = '보';
}


//이런 상황에서는 switch문이 더 가독성이 좋음
switch(comNum){
  case 1 : comResult = '가위'; break; //switch문은 계속 실행하기때문에 끝내줘야함
  case 2 : comResult = '바위'; break; //break;
  case 3 : comResult = '보'; break;
}

 

switch (comNum) {
  case 1: comResult = '가위'; break;
  case 2: comResult = '바위'; break;
  case 3: comResult = '보'; break;
  default : comResult = '오류'; //모두 실행되지 않았을 때 실행, 생략가능
}

 

+

comResult를 출력했는데 계속 아무것도 안나오거나 undefined가 나왔는데

값을 주기도 전에 출력을 해버려서 안나오는거였다!!!!!!!!

switch (comNum) {
  case 1: comResult = '가위'; break;
  case 2: comResult = '바위'; break;
  case 3: comResult = '보'; break;
  default: comResult = '오류'; //모두 실행되지 않았을 때 실행
}

elComNum.textContent = comResult;
//실행됨

elComNum.textContent = comResult;
switch (comNum) {
  case 1: comResult = '가위'; break;
  case 2: comResult = '바위'; break;
  case 3: comResult = '보'; break;
  default: comResult = '오류'; //모두 실행되지 않았을 때 실행
}
//실행안됨

이걸 왜 꼭 가르쳐 주는건가 했더니 정말이기 때문....

 

 

function stringNum(num) { //명령함수
  let result;
  switch (num) {
    case 1: result = '가위'; break;
    case 2: result = '바위'; break;
    case 3: result = '보'; break;
    default: result = '오류';
  }
  return result;
}

컴퓨터와 유저에 중복되는 조건을 재사용하기 위해서 함수 선언

 

function stringNum(num) {
  let result;
  switch (num) {
    case 1: result = '가위'; break;
    case 2: result = '바위'; break;
    case 3: result = '보'; break;
    default: result = '오류';
  }
  return result;
}
elComNum.textContent = stringNum(comNum); //컴퓨터 값
elUserNum.textContent = stringNum(userNum); //유저 값

return result가 없으면 값이 안나옴!

 

 

//유저에게 입력 값을 받아서도 가능
function stringNum(num) { 
  let result;
  switch (num) {
    case 1: result = '가위'; break; //숫자열
    case 2: result = '바위'; break;
    case 3: result = '보'; break;
    default: result = '오류';
  }
  return result;
}

let userNum = Number(prompt('1(가위),2(바위),3(보) 중에 하나를 입력하세요!',"예:1"));
//문자열을 받기때문에 숫자열로 바꿔주기

elComNum.textContent = stringNum(comNum);
elUserNum.textContent = stringNum(userNum);

 

 

//승부 결과 확인하기

function winner() {
  if (comNum == userNum) {
    return ("무승부!"); //무승부일 때
  } //아래 코드에 붙여서 써도 됨!
  if (comNum == 1 && userNum == 2) {return("사용자 승!")}
  else if (comNum == 3 && userNum == 1) {return("사용자 승!")}
  else if (comNum == 2 && userNum == 3) {return("사용자 승!")} //사용자가 이기는 경우의 조건
  else {return("컴퓨터 승!")} //나머지는 컴퓨터가 이기는 경우
}
elResult.textContent = winner();

 

//삼항 조건 연산자 - 연속된 조건문 처리하기

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// 위의 코드는 아래의 코드와 동일합니다.

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

+삼항 조건 연산자 사용해서 간편히 쓸 수도 있을 듯!

+열받아 하지말고 오타를 잘 확인하자........

 

 

코드를 끼리끼리 있도록 정리 잘하기~

변수끼리 함수끼리~

 

 

---

 

selector

<script>
  //tag selector
  const elTodayTag = document.getElementsByTagName('li')

  //class selector
  const elTodayClass = document.getElementsByClassName('today'); 

  const elToday = document.getElementsByClassName('today'); //htmlCollection이 찍힘
  const elToday = document.getElementsByClassName('today')[0]; //ul태그만 찍힘
  console.log(elToday);
</script>

 

const elToday = document.querySelector('.today'); //class
const elToday = document.querySelectorAll('.today li'); //여러 개도 가능
const elToday = document.querySelector('#today'); //id
const elToday = document.querySelector('div'); //태그
//querySelector는 CSS 문법을 사용해서 다양하게 선택할 수 있음

 

---

 

날짜함수

활용 > 이벤트 시작, 종료, 오늘동안 보지 않기

<script>
const elToday = document.querySelectorAll('.today li');
let today = new Date();
let week = ['일','월','화','수','목','금','토'];
console.log(today);
elToday[0].textContent = today;
elToday[1].textContent = today.getFullYear();
elToday[2].textContent = today.getMonth(); // 0~11
elToday[3].textContent = today.getDate();
elToday[4].textContent = week[today.getDay()]; //0~6
elToday[5].textContent = today.getHours()+"시";
elToday[5].textContent += today.getMinutes()+"분";
elToday[5].textContent += today.getSeconds()+"초";
</script>