Javascript 정리 ③

✨ 변수, 사칙연산 과제

---

💡 이자율 계산

 첫 예금액이 5만원 미만이면 이율이 연 15퍼센트,
첫 예금액이 5만원 이상이면 이율이 연 20퍼센트가 되는데
변수에 예금액을 넣으면 2년 후의 총 예금액을 콘솔창에 출력되도록 해라

 

js

var 예금액 = 10000;
var 미래예금액 = 0;

if(예금액>50000){
	미래예금액= 예금액*(1.2)*(1.2);
}
else{
	미래예금액= 예금액*(1.15)*(1.15);
}
console.log(미래예금액)

😏 생각해 볼 점: 거듭제곱하려면 **을 사용하면 된다. var 미래예금액 = 예금액 * (1.15) ** 2; 이런식으로 작성할 수 있다.

---

💡 커피 리필양 계산

마신 커피의 2/3만큼 총 2번 리필해주는 카페가 있다. 처음 주문한 커피 양에 따라 최대한 마실 수 있는 커피를 콘솔창에 계산해주는 코드를 작성하라. 예를 들어, 처음에 90ml주문하면 첫 리필은 60ml, 두번째리필은 40ml를 해준다

js

	var first = 360;
        var maxCoffee = first+ first*(2/3)+ first*(2/3)*(2/3);
        console.log(maxCoffee);

🤔 주의점: 아무생각없이 var maxCoffee = first*(2/3)*(2/3); 이런식으로 쓰지 않을것. 문제를 잘 읽어보면 첫번째의 리필이 더해지고 두번째의 리필이 더해지는 것을 알수 있다.

---

💡 퀴즈 UI 만들기

답을 맞추면 alert('성공');
답을 3번 찍어서 못맞추면 alert('바보') 를 띄워주자

html

<p>태조 이성계가 태어난 년도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>

<script>
    var cnt=0;
    document.getElementById('send-answer').addEventListener("click", function () {
        if(document.getElementById("answer").value == "1335"){
            alert('성공');
            cnt=0;
        }else{
            cnt++;
            if(cnt>2){
                alert('바보');
            }
        }
    });
</script>

---

💡 무한커피리필

위의 문제에서 커피리필을 무한으로 해준다면 처음 담아주는 커피가 360ml일때 총 몇 ml의 커피를 마실 수 있을까?

무한으로 담아줄 수 있다면 

var maxCoffee = first+ first\*(2/3)+ first\*(2/3)\*(2/3)+first\*(2/3)\*(2/3)\*(2/3)+first\*(2/3)\*(2/3)\*(2/3)\*(2/3)+ ....

이런식으로 끝이 없을 것이다.
이것을 무한 등비급수의 합이라고 한다

다행히 2/3은 -1초과 1미만이므로 값이 수렴하고 그 합은 first*1/(1-2/3)이 될 것이다.
이에 따라 코드를 짠다면 다음과 같다.

	var first = 360;
        var maxCoffee = first*(1/(1-2/3));
        console.log(maxCoffee);

그러나 결과는 원래 1080이 나와야 하나, 부동 소수점 연산의 한계때문에 콘솔창에는 1079.999999가 뜨게 된다. 그러므로 toFixed를 사용해 반올림해준다.

	var first = 360;
        var maxCoffee = (first*(1/(1-2/3))).toFixed();
        console.log(maxCoffee);

toFixed에 대한 자세한 설명은 하단에 서술할 예정이다

---

✨ setTimout 타이머

---

🔎 setTimeout

 

setTimeout(function(){},1000)

1000ms 후에 코드를 실행하라는 뜻

setTimeout(function(){document.querySelector(".alert").style.display='none'},5000)

이런식으로 작성하면 5초뒤에 해당 div가 숨겨진다.

 

html

    <div class="alert alert-danger">
        5초 이내 구매시 사은품 증정!
    </div>

js

setTimeout(function(){document.querySelector(".alert").style.display='none'},5000)

setInterval(function(){},1000)

→ 1초 마다 코드 실행됨

---

📋 1초마다 1씩 감소되는 코드

html

    <div class="alert alert-danger">
        <h id="num">5</h>
        초 이내 구매시 사은품 증정!
    </div>

js

  initialTime=5;
  function timer(){
    initialTime--;
    document.getElementById("num").innerHTML=initialTime;
  }
  setTimeout(function(){document.querySelector(".alert").style.display='none'},5000)
  setInterval(timer,1000)

🤔 주의할 점: js에서 setInterval(timer(),1000) 이렇게 작성하고 왜 안되나 싶었다.. 괄호를 붙이지 않아야 올바르게 호출된다.

---

✨ 정규식으로 이메일 형식 검증

---

🔎 문자 검사

'문자'.includes('찾을단어')

이런식으로 문자를 검사할 수 있다.

/abc/.test('abcdef')

/정규식/.test(정규식으로 검사해볼문자)
들어있으면 true, 없다면 false를 출력한다

/[a-d]/.test('aefg')

이런식으로 작성할 수 있다.

/\S/.test('abcde')

아무문자가 있느냐.. true를 출력

/^a/.test('abcde')

a로 시작하는지 검사

/e$/.test('abcde') 

e로 끝나는 지 검사

/(e|f)/.test('abcde') 

e또는 f가 있는 지 검사

/a+/

a와 일치하면 반복해서 찾아달라는 말. ex. aaaaa

/\S+k/

문자 여러개 다음에 k가 있느냐를 검사
aaaaak
ccck 이런걸 찾을 수 있다.

/\S+@\S+\.\S+/

이런식으로 작성하면 이메일 형식을 검사할 수 있다. (ex. dkffsda@naver.com)
\S+ 이런식으로 작성하는 이유는 여러개의 문자가 나열될 수 있기 때문

---

📋  폼 전송시 형식 검증

js

  document.querySelector("form").addEventListener("submit", function (e) {
    if (document.getElementById("email").value == "") {
      e.preventDefault();
      alert("이메일을 입력하세요");
    }else if(!/\S+@\S+\.\S+/.test(document.getElementById("email").value)){//이메일 형식 못지킬 경우
      e.preventDefault();
      alert('이메일 형식을 지켜주세요');
    }
    if (document.getElementById("pw").value == "") {
      e.preventDefault();
      alert("비밀번호를 입력하세요");
    } else if (document.getElementById("pw").value.length < 6) {
      e.preventDefault();
      alert("비밀번호를 6자 이상 입력하세요");
    } else if(!/[A-Z]/.test(document.getElementById("pw").value)){//대문자가 없을 경우
      e.preventDefault();
      alert("대문자를 입력해주세요");
    }
  });

---

✨ 캐러셀(이미지 슬라이드)

브라우저 폭 ==100vw

화면이 꽉 차게 된다.

float : left;

왼쪽으로 배치

<div style="overflow: hidden"\>

넘치는 요소를 숨겨달라

transform: translateX(-100vw);

옆으로 100vw씩 넘겨달라

transition:all 1s;

애니메이션 주기

---

📋 버튼 눌러 좌우 이미지

인스타그램 같죠? 🤓

html

    <div style="overflow: hidden">
        <div class="slide-container">
            <div class="slide-box">
                <img src="food1.jpg">
            </div>
            <div class="slide-box">
                <img src="food2.jpg">
            </div>
            <div class="slide-box">
                <img src="food3.jpg">
            </div>
        </div>
    </div>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

js

  document.querySelector(".slide-2").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform = "translateX(-100vw)";
  });
  document.querySelector(".slide-3").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform = "translateX(-200vw)";
  });
  document.querySelector(".slide-1").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform = "translateX(0vw)";
  });

css

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

---

📋 이전, 다음 버튼 추가

html

<div style="overflow: hidden">
        <div class="slide-container">
            <div class="slide-box">
                <img src="food1.jpg">
            </div>
            <div class="slide-box">
                <img src="food2.jpg">
            </div>
            <div class="slide-box">
                <img src="food3.jpg">
            </div>
        </div>
    </div>
    <button class="prev">이전</button>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>

js

  document.querySelector(".slide-2").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform =
      "translateX(-100vw)";
  });
  document.querySelector(".slide-3").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform =
      "translateX(-200vw)";
  });
  document.querySelector(".slide-1").addEventListener("click", function () {
    document.querySelector(".slide-container").style.transform =
      "translateX(0vw)";
  });
  var nowPic = 1; //현재보고있는 사진
  document.querySelector(".prev").addEventListener("click", function () {//이전버튼
    if (nowPic > 1) {
      document.querySelector(".slide-container").style.transform =
        "translateX(" + -100 * (nowPic-2) + "vw)";
      nowPic--;
    }
  });
  document.querySelector(".next").addEventListener("click", function () {//다음버튼
    if (nowPic < 3) {
      document.querySelector(".slide-container").style.transform =
        "translateX(" + -100 * nowPic + "vw)";
      nowPic++;
    }
  });

css

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

---

✨ 자바스크립트 주의점

---

🔎 소수점 연산시 주의

 

console.log(1.1+0.3)

1.4가 나오지 않고 1.40000000001 이렇게 나오는데, 2진법의 문제다.
그래서 소수점 연산은 이런 오차가 발생한다.

---

🔎 소수점 반올림

위의 문제를 해결하기 위해서는 toFixed를 사용해 해결할 수 있다.

console.log( (1.1 + 0.3).toFixed(1) );

숫자.toFixed(소수뒤의 자릿수)
이런식으로 사용할 수 있고, 0에서 100까지의 값을 쓸 수 있다. 위의 식은 소수점 1자리수까지 반올림하여 1.4의 결과가 나온다.
매개변수 자리에 아무것도 없으면 0이 들어간다.
🤔주의점: 문자로 변환되므로 숫자로 쓰고 싶을 경우 숫자로 변환시켜야 한다.

---

🔎 숫자로 변환

parseFloat('100')

실수(not mistake)로 변환해준다

parseInt('100')

정수로 변환해준다.

---

💡 분,초를 입력하면 ms단위로 바꿔주기

 

        function StoMs(min,sec){
            return (min*60+sec)*1000;
        }
        console.log(StoMs(1,30));
        console.log(StoMs(2,10));

---

💡 가격을 파라미터로 입력하면 10% 할인가 알려주기

 

        function discount(price,ifFirst){
            var finalPrice=(price*0.9).toFixed(1);
            if(ifFirst==true){
                finalPrice-=1.5;
            }
            return finalPrice;
        }
        console.log(discount(70,false));
        console.log(discount(10,true));