본문 바로가기

분류 전체보기

 (94)
JS JSON.stringify(), JSON.parse() JSON : JavaScript Object Notation : 데이터를 전달할 때, 자바스크립트가 다룰 수 있도록 object로 바꿔주는 기능 object를 string으로 변환해주기도하고, string을 object로 바꿔줄 수 도 있음 JSON.stringify() : 자바스크립트 object를 string으로 바꿔줌 ->localStorage는 value를 string으로만 받을 수 있기때문에 사용 JSON.parse(): string을 자바스크립트 object로 바꿔줌 JSON.stringify() ++forEach : array에 담겨있는 것들 각각에 한번씩 함수를 실행시켜줌
JS local storage localStorage.setItem : 데이터 저장 ex) test란 이름의 key값을 정하고 이에 123이란 값을 저장 localStorage.getItem : 데이터 불러오기 local storage : 작은 정보를 유저 컴퓨터에 저장하는 방법 ex) console 창에 localStorage.setItem("soyeong",true); 하면 Application> storage에 key soyeong value true 들어간걸 볼 수 있음. 다시한번 console 창에 localStorage.getItem("soyeong") 하면 ture 값 출력됨
JS classList classList는 메소드를 가진다 즉, 함수를 사용할 수 있다. add, remove, contain, toggle... ex) const title = document.querySelector("#title"); title.className = '클래스이름추가'; = title.classList.add('클래스이름추가'); title.className = ''; = title.classList.remove('클래스이름추가'); title.classList.contains = '클래스이름추가'; -> class name에 '클래스이름추가' 라는 class있는지 확인 -> Work! 일 때 add해주면 Work! remove해주면 다시 Work! title.classList.toggle = functio..
JS event.preventDefault 이벤트 전파 중지 event.preventDefault :현재 이벤트의 기본동작 중단 ex) a 태그 - 페이지를 이동시킴 submit 태그 - form 안에 있는 input을 다른곳으로 전송 event.preventDefault 는 그 동작들을 중단시킨다. ++ event.stopPropagation() :자식 이벤트가 부모에게 전파될 때 막아주기 위해 사용
JS 이벤트 생성 *인라인 방식* html태그에 직접 이벤트 생성 *프로퍼티 리스너 방식* 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트 등록하는 방식 자바스크립트와 html 분리할 수 있다는 점에서 선호되지만 addEventListener 방식이 더 좋음 *addEventListener* 이벤트 등록하는 가장 권장되는 방식 이 방식은 여러개의 이벤트 핸들러를 등록할 수 있다.
JS 이벤트 종류 자바스크립트 이벤트 종류 (타입) · 기본 이벤트 ㅇ 요소에 개발자가 굳이 이벤트를 연결하지 않았음에도 기본적으로 실행되는 이벤트 - a 요소를 클릭 => 해당 경로로 페이지 이동 - 브라우저 화면에서 우측 마우스 버튼을 클릭 => ContextMenu 나타남 - form 요소 내 submit 버튼을 클릭 => 지정된 경로로 내용을 전송함 * 두개의 결과는 같음 * · 마우스 이벤트 ㅇ click (onclick) : 마우스 버튼 클릭하고 버튼에서 손을 뗌 - ex) 요소.onclick = "이벤트 처리기"; - ex) 요소.addEventListener("click", 이벤트 처리기 또는 콜백함수); ㅇ dblclick (ondbclick) : 마우스 버튼을 두 번 연속 더블 클릭 함 ㅇ mousedo..
JS Date 객체 ★추가정리 날짜와 시간에 관련된 처리 - new 연산자 let 이름 = new Date(); ->현재 date 불러오기 METHOD 기능 getDate 1부터 31일까지 날짜 반환 getDay 요일(0-6) 을 숫자로 반환 0=일요일 1=월요일 ->switch가 기본적으로 필요함 getFullYear 4자리 숫자의 연도를 반환 getMonth 월(0-11)을 반환 0=1월 1=2월 getHours 시간(0-23)을 반환 getMinutes 분을 반환 getSeconds 초를 반환 getMilliseconds getMillisecond를 반환 getTime 1970년 1월 1일 이후의 시,분,초를 반환 const date = new Date(); 로 현재 시간 가져오기 필수! setInterval (fn,..
JS 배열 내장 함수 * forEach : 배열 안 원소 출력* 배열안에 있는 원소들 모두 출력하기 똑같은걸 forEach로 출력하기 축약해서 이렇게도 표현 가능 * formap : 배열 안 원소 변환할때 * 배열에 있는 내용을 전체적으로 변환시켜줌! 똑같은걸 formap로 출력하기 * indexOf 원하는 항목이 몇번째 원소인지 찾아주는 함수 ≒ findIndex * 배열 안의 값이 문자열이나 숫자 boolean일 때 * findIndex 몇번째 원소인지 찾아주는 함수 ≒ indexOf * 배열 안의 값이 객체이거나 어떤 조건으로 찾을 때 -> 특정조건을 확인해서 그 조건이 일치한다면 일치하는 원소가 몇번째인지 알려줌 * find : findIndex 랑 비슷, 찾아낸 값이 몇번째인지 X 찾아낸 값 자체를 반환 * * fi..

티스토리툴바