[JS] 스크립트 & 반복문

in JavaScript




스크립트 태그의 위치

위에서부터 한줄씩 읽혀지는(=실행되는) 코드의 특성상 자바스크립트와 html의 순서에 에러가 뜨는 경우가 사실 빈번하게 일어난다.

자바스크립트에서 엘리먼트들을 선택하는 코드가 실행이 되었는데 html가 아직 dom에 올라가지 않아서(=화면에 그려지지않아서)

자바스크립트가 ‘??요소 어딨음???’ 이라면서 에러를 뱉는건데

이럴때는 링크로 연결한 자바스크립트의 위치를 변경시켜주면 된다.

보통은 <head> 안에 넣는데 엘리먼트들이 DOM에 다 렌더링 되고 난 이후에 실행하게 하고 싶으면 맨 아래 바디태그 위에다 넣으면 된다.

근데 정말로 개발자들 사이에서는 script는 ‘‘헤드태그에 넣어야지’’ 라고 하시는 분들이 꽤 있고 뭔가 정해져있는 룰같은거여서..

헤드태그안에 넣곤하는데, 그때 최상단에 넣어도 렌더링 이후에 실행되도록 도와주는 녀석이 있다.

바로 defer

<script src="./script.js" defer></script> 이렇게 넣어주면 에러없이 잘 동작한다.

코드는 무조건 위에서부터 아래로 내려간다는 개념을 알고있으면 이해하기 쉬워짐



반복문

for문

for(let i = 0; i< 10; i++){
	console.log(i)
}

while문

let i = 0; //최초식은 밖에 선언해주어야 함
while(i < 10){
	console.log(i)
  i = i + 1;
}

대신 종료조건 제대로 설정하지 않으면 콜백지옥에서 벗어날 수 없을거시야…

for in 문 : 객체에서 값 꺼낼때

const object = { a: 1, b: 2, c: 3 };

for (const 변수 in object) {
	console.log(변수)
}

for of 문 : 배열에서 값 꺼낼때

for(let 변수 of 배열){
	console.log(변수);
}

setTimeout : 일정 시간 이후에 실행한다

setTimeout(() => console.log("5초 후에 실행"), 5000);

setInterval : 일정 시간마다 실행

setInterval(() => console.log("1초마다 실행"), 1000);

clearInterval : setInterval함수에 의해 실행된 반복작업 중단

  • setInterval 에서 생성시킨 intervalId를 매개변수로 받는다.
let intervalIdArr = [];

const starter = () => {
  const intervalId = setInterval(counterMaker, 1000);
  intervalIdArr.push(intervalId);
};

const setClearInterval = () => {
  for (let i = 0; i < intervalIdArr.length; i++) {
    clearInterval(intervalIdArr[i]);
  }
};



Session Storage

  • key-value 형태로 저장. 로컬 환경에 데이터 저장
  • 세션(웹페이지 접속 상태에 따른 단위) 단위로 구분되며 활용
  • 브라우저, 탭을 종료하면 영구 삭제


Local Storage

  • key-value 형태로 저장. 로컬 환경에 데이터 저장

  • 도메인 단위로 구분되며 활용

  • 브라우저 자체를 종료해도 존재

    //로컬스토리지에 데이터 저장
localStorage.setItem('saved-date', targetDateInput);
  
//로컬스토리지에서 해당하는 데이터 가져오기
localStorage.getItem('saved-date');












© 2018. by sora

Powered by sora