javascript11 [Javascript] 페이지 이동 후에도 값 유지하기 자바스크립트 변수에 저장해둔 값을 페이지 이동 후에도 이용하고 싶을 때가 있다. var something = ... 방식으로 저장해둔 값은 페이지 이동 후에는 사라지기 때문에 다른 방식을 이용해야 한다. 이 경우 쿠키를 이용하는 것이 일반적으로 알려져 있지만, 그 외에도 다른 방법을 찾아보았다. 1. window.localStorage 브라우저를 재실행해도 값을 유지하는 저장방식이다. 이 점이 장점으로 작용하는 경우도 있겠지만, 나는 그 장점에 비해 단점이 더 크다고 생각한다. 페이지를 보여주는 것이 자바스크립트의 역할이라는 점을 고려했을 때, 브라우저를 재시작해도 유지되는 변수는 자바스크립트 단에서 건드리지 않아야 한다는 것이 내 생각. 그래도 일단은 방법을 정리해둔다. // 변수의 저장 var myN.. 2021. 5. 27. 이벤트 특정 요소에 이벤트 추가하기 - on() $(요소).on(이벤트 종류, 함수); 요소에 이벤트 종류가 일어날 경우 함수를 실행한다. 예) // id가 btn인 요소를 click하면 $("#btn").on("click", function () { // console에 출력 console.log("button is clicked"); }); $("")의 선택자는 css 선택자와 동일하다. 이벤트의 종류 click - 클릭 dblclick - 더블클릭 mouseup - 마우스 클릭 후 버튼을 뗄 때 mousedown - 마우스 버튼이 내려갈 때 mouseover - 마우스 커서를 위에 올릴 때 keyup - 키보드를 눌렀다 뗄 때 keydown - 키보드를 누를 때 change - 내부 요소가 변경될 때 (예.. 2021. 2. 25. n초 후 실행하기, n초마다 실행하기 메소드를 n초 후 실행하기 // 3초 후에 "3초 땡"을 콘솔에 출력 setTimeout(function () {console.log("3초 땡")}, 3000); 3초 후에 메세지를 출력 setTimeout(메소드, 시간); Javascript의 최상위 객체인 window의 메소드 setTimeout()을 이용한다. 시간은 ms(1/1,000 초) 단위로 입력한다. 메소드를 n초 마다 실행하기 var i = 0; // 0, 1, 2, 3... 을 1초마다 출력 var intervalId = setInterval(function () { console.log(i++) }, 1000); // 반복 중지하기 clearInterval(intervalId); 1초마다 높아지는 숫자 setInterval(메소드,.. 2021. 2. 22. 객체 Object 객체의 사용 // Object 객체인 product의 생성 var product = new Object(); // product.키 = 속성; product.pName = "Dry Mango"; product.type = "Pickle"; product.ingredient = ["mango", "sugar"]; 객체의 선언 및 속성 추가하기 객체는 키 값을 사용하여 속성을 저장 및 식별한다. 속성에는 모든 자료형이 올 수 있다. 공백이 포함된 Key // objTest라는 이름의 객체 생성 var objTest = new Object(); // I love you 라는 키에 javascript 속성 추가 objTest["I love you"] = "javascript"; Key로 I love you를 가.. 2021. 2. 22. 이벤트의 정보 가져오기 var btn = document.getElementById("btn"); btn.onclick = function(e) { // 콘솔에 이벤트 정보를 출력한다. console.log(e); // 콘솔에 이벤트가 발생한 html태그의 정보를 출력한다. console.log(e.target); // this 는 이벤트가 발생한 대상 자신을 가리킨다. // this 를 이용하여 이벤트가 발생한 대상의 속성값을 바꿔줄 수 있다. this.style.backgroundColor = "red"; this.style.color = "white"; } 함수의 인자값에 e를 넣어주면 이벤트에 관한 정보가 e에 담기게 된다. 2021. 2. 19. 이전 1 2 3 다음