'Frontend/Vanilla JS' 카테고리의 글 목록

🚀 호이스팅(Hoisting)

호이~ 호이 둘리는 초능력 내친구🤦🏻‍♂️

javascript에서 호이스팅(Hositing)은 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 만한다.

🔗 예제

console.log(a)
var a = 10

개발자가 코드를 이렇게 작성을 할 경후 자바스크립트의 Parser에 의해서 호이스팅이 자동적으로 일어난다. 개발자가 작성한 코드는 위와 같지만, 컴퓨터가 인식할 때는 아래와 같다.

var a;
console.log(a);
a = 10;

변수 선언 뿐만 아니라 함수 선언 시에도 똑같다.

println();
println2();

//함수 선언문
funtion println(){
	console.log("Hello World~ This function is println !");
}

//함수 표현식
var println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

var println2;

funtion println(){
	console.log("Hello World~ This function is println !");
}

println();
println2(); // undefined


println2 = funtion(){
	console.log("Hello World~ This function is println2 !");
};

호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다. 이 둘의 차이점은 나중에 알아보자.

하지만 javascript가 es6로 들어오면서 let, const가 생겼고 호이스팅에도 약간의 변화가 생겼다.

호이스팅의 동작을 간단하게 요약하자면 2단계로 볼 수 있다.

변수명만 위로 끌어올린다.
undefined를 할당한다.

맨위의 예제의 var를 const으로 바꾼다면 어떨까?

console.log(a);
const a = 20;

위에서도 말 한것과 같이 var에서는 두 단계의 동작을 실행했다. 하지만 const 는 다른 결과를 보여주고 있다.

const는 var에서 동작하는 2 단계 중 첫 번째 단계만 실행한다. 단지 변수명만 위로 끌어 올리고 undefined를 할 당하지 않기 때문에 위와 같은 에러가 발생하는 것이다. 즉 호이스팅은 하나 TDZ에 걸리게 되는 것이다.

📢

게시글은 개인 공부 목적으로 작성되었습니다.

게시글의 대한 피드백은 언제나 환영하고 감사할 따름입니다.

저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

바닐라 자바스크립트 계산기 만들기 (0)	2020.08.13
바닐라 자바스크립트 슬라이더 만들기(2) (2)	2020.08.08
바닐라 자바스크립트 슬라이더 만들기(1) (4)	2020.08.08

🚀 바닐라 JS 계산기

바닐라 자바스크립트로 간단한 계산기를 만들어 보았다. 은근히 신경써주어야 할 부분들이 많았다.. 코드가 너무 지저분 해...... 리팩토링이 필요해 !

🍙 CSS & HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
        <div class="result"><input type="text" class="show" value="0"/></div>
        <button class="cancle" data-Type="ac">C</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operation" data-Type="operator">+</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operation" data-Type="operator">-</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</dbuttoniv>
        <button class="operation" data-Type="operator">*</button>
        <button class="zero number">0</button>
        <button class="operation" data-Type="equals">=</button>
        <button class="operation" data-Type="operator">/</button>
    </button>
    <script src="src/index.js"></script>
  </body>
</html>

body {
  font-family: sans-serif;
  background-color: black;
}

button {
  color: white;
  font-size: 20px;
}

input {
  background-color: black;
  color: white;
  width: 95%;
  height: 60px;
  text-align: right;
  font-size: 40px;
  border: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: black;
  color: white;
  padding: 10px;
}

.result {
  grid-column: 1/4;
}

.zero {
  grid-column: 1/3;
}

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(48, 47, 47, 0.925);
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.operation {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: orange;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

.cancle {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  margin: 3px;
  height: 60px;
  border-radius: 10px;
}

🍙 결과 화면

🍙 Javascript

// <⚠️ DONT DELETE THIS ⚠️>
import "./styles.css";
// <⚠️ /DONT DELETE THIS ⚠️>

const buttons = document.querySelectorAll("button");
const input = document.querySelector(".show");

let result = "";
let operCheck = false;
let numberCheck = true;
let equlasCheck = true;

function init() {
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      switch (button.dataset.type) {
        case "operator":
          const oper = button.innerText;
          operator(oper);
          break;
        case "ac":
          clear();
          break;
        case "equals":
          calc();
          break;
        default:
          const number = button.innerText;
          displayNumber(number);
          break;
      }
    });
  });
}

function displayNumber(number) {
  operCheck = true;
  const current = input.value;

  //계산 끝난 후 초기화
  if (equlasCheck) {
    //연산자 눌렸을 시 계산기 값만 초기화
    if (numberCheck) {
      input.value = current === "0" ? number : input.value + number;
    } else {
      input.value = number;
      numberCheck = true;
    }
    result += number;
  } else {
    equlasCheck = true;
    input.value = number;
    result = number;
    console.log(result);
  }
}

function calc() {
  // 지속적으로 계산기 값 누르는 거 확인
  if (input.value === "0") {
    clear();
  } else {
    //마지막이 연산자로 끝나는 지 확인
    if (!operCheck) {
      alert("Calculation is unavailable because of operation.");
    } else {
      // 계속 눌렸을 때 변경
      if (equlasCheck) {
        const final = eval(result);
        input.value = `RESULT : ${final}`;
        result = "";
        equlasCheck = false;
        operCheck = false;
      } else {
        clear();
      }
    }
  }
}

function operator(oper) {
  if (!operCheck) {
    alert("Operation Error.");
  } else {
    operCheck = false;
    result += oper;
    numberCheck = false;
  }
}

function clear() {
  input.value = 0;
  result = "";
  operCheck = false;
  equlasCheck = true;
}

init();

저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까? (0)	2020.08.29
바닐라 자바스크립트 슬라이더 만들기(2) (2)	2020.08.08
바닐라 자바스크립트 슬라이더 만들기(1) (4)	2020.08.08

🚀 허접한 슬라이더

결과 보기 Click

> 허접한 슬라이더(1)

🌵 추가사항

이미지 아래 원 추가
3초 후 이미지 자동 변경

🌵 앞으로..

타인이 구현한 방식 알아보기
다른 형식의 슬라이더 만들기

slider.js

//Current DIV
let current = 1;

//Call by btn class
const btnPre = document.querySelector(".pre"),
btnNext = document.querySelector(".next");

//button Next
function handleNextEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");

    current = current + 1 < 6 ? current + 1 : 1;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnNext.addEventListener("click", handleNextEvent);

//button Pre
function handlePreEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    let circle = document.querySelector(`.circle__0${current}`);
    target.classList.remove("showing");
    circle.classList.remove("showing__circle");
    
    current = current - 1 > 0 ? current - 1 : 5;
    
    target = document.querySelector(`.slider__0${current}`);
    circle = document.querySelector(`.circle__0${current}`);
    target.classList.add("showing");
    circle.classList.add("showing__circle");
}
btnPre.addEventListener("click", handlePreEvent);

function init(){
    setInterval(handleNextEvent, 5000);
}

init();

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Slider</title>
    <body>
        <div class="slider">
            <div class="slider__01 showing"><img src="images/1.jpg"></div>
            <div class="slider__02"><img src="images/2.jpg"></div>
            <div class="slider__03"><img src="images/3.jpg"></div>
            <div class="slider__04"><img src="images/4.jpg"></div>
            <div class="slider__05"><img src="images/5.jpg"></div>
            <div class="slider__bg"></div>
        </div>

        <div class="circles">
            <div class="circle circle__01 showing__circle"></div>
            <div class="circle circle__02"></div>
            <div class="circle circle__03"></div>
            <div class="circle circle__04"></div>
            <div class="circle circle__05"></div>
        </div>

        <div class="btn__div">
            <span><button class="pre">👈</button></span>
            <span><button class="next">👉</button></span>
        </div>

        <script src="slider.js"></script>
    </body>
  </head>

style.css

/*slider item*/

img {
    width: 400px; height:200px;
}

.slider{width: 400px; height:200px; position: relative; margin-bottom: 10px;}
.slider__01{ position: absolute; }
.slider__02{ position: absolute; }
.slider__03{ position: absolute; }
.slider__04{ position: absolute; }
.slider__05{ position: absolute; }
.slider__bg{ position: absolute; width: 400px; height:200px; background-color: black; z-index: 0; }

/*btn*/
.btn__div{text-align:center; width: 400px;}

/*function*/
.showing{ z-index: 1; animation: fadeIn 0.5s linear; }

/*circle*/
.circles{width: 400px; position: relative; margin-bottom: 50px;}

.circle{
  position: absolute;
  width: 10px; 
  height: 10px; 
  background-color: gray;
  border-radius: 50%;
}

.circle__01{ left:10%; }
.circle__02{ left:30%; }
.circle__03{ left:50%; }
.circle__04{ left:70%; }
.circle__05{ left:90%; }

.showing__circle{width:13px; height:13px;}

/*animation*/
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까? (0)	2020.08.29
바닐라 자바스크립트 계산기 만들기 (0)	2020.08.13
바닐라 자바스크립트 슬라이더 만들기(1) (4)	2020.08.08

🚀 버튼 슬라이더

Vanilla JS + HTML + CSS

> 완성본 보러가기

약속 시간이 제법 남아서 카페에서 오랜만에 코딩을 했다. 그동안 배운 바닐라 JS를 이용하여 슬라이더를 만들어 보기로 했다.

근데 이렇게 하는게 맞나...?

(생각해보니 이런식이면 배열로 하는게 더 편했을듯...)

🎮 Screenshot

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>Practice</title>
    <body>
        <div class="grand">
            <div class="slider">
                <div class="slider__01 showing"><img src="images/1.jpg"></div>
                <div class="slider__02"><img src="images/2.jpg"></div>
                <div class="slider__03"><img src="images/3.jpg"></div>
                <div class="slider__04"><img src="images/4.jpg"></div>
                <div class="slider__05"><img src="images/5.jpg"></div>
                <div class="slider__bg"></div>
            </div>
            <div class="btn__div">
                <span><button class="pre">👈</button></span>
                <span><button class="next">👉</button></span>
            </div>
        </div>
        <script src="slider.js"></script>
    </body>
  </head>

style.css

/*slider item*/
img {
    width: 400px; height:200px;
}

.slider{width: 400px; height:200px; position: relative; margin-bottom: 10px;}
.slider__01{ position: absolute; }
.slider__02{ position: absolute; }
.slider__03{ position: absolute; }
.slider__04{ position: absolute; }
.slider__05{ position: absolute; }
.slider__bg{ position: absolute; width: 400px; height:200px; background-color: black; z-index: 0; }

/*btn*/
.btn__div{text-align:center; width: 400px;}

/*function*/
.showing{ z-index: 1; animation: fadeIn 0.5s linear; }

/*animation*/
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

slider.js

//Current DIV
let current = 1;

//Call by btn class
const btnPre = document.querySelector(".pre"),
btnNext = document.querySelector(".next");

//button Next
function handleNextEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    target.classList.remove("showing");
    current = current + 1 < 6 ? current + 1 : 1;
    target = document.querySelector(`.slider__0${current}`);
    target.classList.add("showing");
}
btnNext.addEventListener("click", handleNextEvent);

//button Pre
function handlePreEvent(){
    let target = document.querySelector(`.slider__0${current}`);
    target.classList.remove("showing");
    current = current - 1 > 0 ? current - 1 : 5;
    target = document.querySelector(`.slider__0${current}`);
    target.classList.add("showing");
}
btnPre.addEventListener("click", handlePreEvent);

저작자표시

'Frontend > Vanilla JS' 카테고리의 다른 글

호이스팅(Hoisting)이란 무엇일까? (0)	2020.08.29
바닐라 자바스크립트 계산기 만들기 (0)	2020.08.13
바닐라 자바스크립트 슬라이더 만들기(2) (2)	2020.08.08

좌충우돌 IT이야기