바닐라JS

1. 버튼

클릭 함수 실행

버튼 클릭하면 글자 색 변하기

▽ 코드

const t = document.getElementById('target');
  function clickbtn(){
    t.style.color = "#add";
  }
t.addEventListener('click', clickbtn);

2. 계산기

test

▽ 코드

//계산기 함수
const calculator = {
    plus : function(a, b){
        return (`${a}+${b}= ${a+b}`);
    },
    minis : function(a, b){
        return (`${a}-${b}= ${a-b}`);
    },
    multiple : function(a, b){
        return (`${a}*${b}= ${a*b}`);
    },
    divide : function(a, b){
        return (`${a}/${b}= ${a/b}`);
    },
    remainder : function(a, b){
        return (`${a}%${b}= ${a%b}`);
    },
    power : function(a, b){
        return (`${a}**${b}= ${a**b}`);
    }
}
const answer =[
  calculator.plus(5,5),
  calculator.minis(1,87),
  calculator.multiple(5,6),
  calculator.divide(68,5),
  calculator.remainder(234,5),
  calculator.power(3,2)
]

document.getElementById('codecalc').innerHTML = answer;

3. 클릭시 변경

Click

if문 / if-else

  1. 글자 클릭하면 원래 색상값 받아오기
  2. 글자 색이 처음 지정 색과 같으면, 변경
  3. 글자 색이 처음 지정 색과 다르면, 원래 값으로 변경

▽ 코드

const changeColor = document.getElementById("changeColor");
const Basic_color = "rgb(255, 170, 255)";
const Othder_color = "rgb(170, 221, 170)";
function handler(){
  const nowColor = changeColor.style.color;
    if(nowColor === Basic_color){
      changeColor.style.color = Othder_color;
    }else{
      changeColor.style.color = Basic_color;
    }
  }
  
changeColor.addEventListener('click',handler);

4. class추가, 제거

Click

if문 / if-else 2

  1. 글자 클릭하면 원래 색상값 받아오기

▽ 코드

const changeToggle = document.querySelector("#changeToggle");
const clickClass = "clickadd";

function handlerClick(){
  const btnClass = changeToggle.className;
  // const hasClass = changeToggle.classList.contains(clickClass);
  // console.log(hasClass)
  // if(!hasClass){
  //   changeToggle.classList.add(clickClass);
  // }else{
  //   changeToggle.classList.remove(clickClass);
  // }

  changeToggle.classList.toggle(clickClass) //같은 기능

}

function init(){
  changeToggle.addEventListener('click',handlerClick);
}

init();

5. 자동 반복 setInterval

00:00

setInterval

  1. 일정 시간마다 반복
  2. setInterval(함수,실행시간 간격)
  3. 삼항연산자

▽ 코드

const clockContainer = document.querySelector('.js-clock');
      clockTitle = clockContainer.querySelector("span");

//현재 시간 얻기
function getTime(){
  const date = new Date();
        minutes = date.getMinutes();
        hours = date.getHours();
        seconds = date.getSeconds();
        clockTitle.innerText = `${
          hours < 10 ? `0${hours}` : hours
        }:${
          minutes < 10 ? `0${minutes}` : minutes
        }:${
          seconds < 10 ? `0${seconds}` : seconds
        }`;
}

function init2(){
  setInterval(getTime,1000);
}

init2();

6. 사용자 정보 기억(로컬 스토리지)

  1. 로컬 스토리지 정보 : 관리자도구 > Application > Local Storage
  2. 키값명 변수로 지정
  3. display : block/none 클래스 명 변수로 지정
  4. loadName()

    저장된 값(이름)의 존재 여부를 판단해 각각의 경우에 따라 실행되는 함수

    • localStorage.getItem() : 로컬 스토리지에 저장된USER_LS이름 얻기
    • const currentUser = localStorage.getItem(USER_LS); - 이름값 얻기를 변수로 지정
    • if문 설정 - 값이 있을 때 / 없을 때
    • 값이 있을 때 = askForName() -값을 묻는 객체 보이게하기 + submit(엔터)시 handleSubmit함수 실행
    • 값이 없을 때 = paintGreeting(값) - 이름 변경, 색변경
  5. paintGreeting(text)

    저장된 값이 있을 때 실행되는 함수

    • 제출 후, form(입력창)-hide
    • greeting(결과 문구창)-show
    • greeting.innerText = `${text}, Do It!` - 결과 문구창 텍스트 변경
  6. askForName()

    저장된 값이 없을 때 실행되는 함수

    • form(입력창) 보이게하기 -show
    • 제출시(엔터) handleSubmit함수 실행
  7. handleSubmit(event)

    입력한 값이 로컬 스토리지에 전환될 수 있도록 하는 함수(저장x, 저장될 수 있도록 만들어줌)

    • 이벤트 초기화(원래 있던 기능 제거)
    • 입력한 값을 변수로 지정
    • 입력한 값에 paintGreeting() 함수 실행
    • 입력한 값에 saveName() 함수 실행 - 로컬스토리지에 저장
  8. saveName(text)

    입력한 값을 로컬 스토리지에 저장

    • setItem = 저장
    • getItem = 불러오기
    • localStorage.setItem(USER_LS,text) - 입력한 text를 USER_LS라는 키의 값으로 저장
    • 키 = 값
    • USER_LS(유저이름) = 입력한 값

▽ 코드

const jsform=document.querySelector('.js-form');
      input = jsform.querySelector('input');
      greeting = document.querySelector('.js-greetings');
const USER_LS = "currentUser"; // 키값이름 변수지정
      SHOWING_CN = "showing";//block - 클래스 명 변수지정

function saveName(text){
  localStorage.setItem(USER_LS,text); //로컬 스토리지에 텍스트 명 저장
}

function handleSubmit(event){
  event.preventDefault(); // 이벤트 초기화(엔터 치면 새로고침)
  const cValur = input.value; //입력한 텍스트 변수지정
  paintGreeting(cValur); // 입력한 텍스트 색 변경(paintGreeting함수 실행)
  saveName(cValur)// 입력한 텍스트로 이름 저장 (saveName함수 실행)
}     

function askForName(){
  jsform.classList.add(SHOWING_CN); //block -클래스명 추가(show)
  jsform.addEventListener("submit",handleSubmit); //submit할 때 handleSubmit함수 실행
}
function paintGreeting(text){
  jsform.classList.remove(SHOWING_CN); //block -클래스명 제거(hide)
  greeting.classList.add(SHOWING_CN); //block -클래스명 추가(show)
  greeting.innerText = `${text}, Do It!`//greeting에 텍스트 변경

}
function loadName(){
  const currentUser = localStorage.getItem(USER_LS); //로컬 스토리지에 저장된USER_LS이름 얻기(getItem)를 변수로 지정
  if(currentUser === null){
    // 값이 없을 때
    askForName(); //값을 묻는 객체 보이게하기 + submit(엔터)시 handleSubmit함수 실행
  }else{
    // 값이 있을 때
    paintGreeting(currentUser); //이름 변경, 색변경
  }
}

function init3(){
  loadName(); //함수실행
}
init3(); //함수실행

7.TO Do List

if문 / if-else

  1. 글자 클릭하면 원래 색상값 받아오기

▽ 코드