Develop record

*{ font-size: 30px; } body{ display: flex; justify-content: center; align-items: center; height:80vh; background-color: black; color: white; } .clock{ border: 1px solid white; border-radius: 10px; text-align: center; width: 360px; padding: 50px 0; margin: auto; } .today{ margin-bottom: 10px; } .time{ margin-top: 10px; } const todayDiv = document.getElementById("today") const timeDiv = document.g..

- 현재 도메인의 로컬 저장소에 접근 할 수 있게 해주는 속성 - 로컬 저장소 : 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간 => 데이터를 영구적으로 보관 가능 (브라우저를 껐다 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아 있도록 할 수 있음) - 데이터 보관 시 : 데이터의 이름과 데이터의 실제 값을 각각 지정(key, value) => 문자열 형태의 데이터만 보관 가능 - 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근 - 이름이 같은 데이터(key가 같은)를 중복 저장 불가 => 이름이 같을 시 추후에 저장한 데이터로 덮어 씌워짐 메소드명 기능 사용 예 setItem 키와 밸류를 전달받아 저장 setItem("key","value") getItem 전달받은 키에 해당하는 밸류..

Element.classList - 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성 안녕하세요 const p = document.querySelector('p') console.log(p.classList) 메소드 기능 사용 예 add 지정한 클래스 값 추가 add("new_class") remove 지정한 클래스 값 제거 remove("old_class") item 인덱스를 이용해 클래스 값 반환 item(1) toggle 클래스 값 토글링(있으면 제거, 없으면 생성) toggle("some_value") contains 지정한 클래스 값 존재 여부 확인 contains("is_contains") replace 기존 클래스를 새 클래스로 대체 replace("old","new")..

setTimeout - 정해진 시간이 지나고 나면 주어진 함수를 실행해주는 타이머 메소드 setTimeout (실행할_함수, ms_단위의_시간) // 1000ms 가 지나고 나면 함수를 실행! (한번) setTimeout(function(){ console.log("재미있다") },1000) setInterval - 일정한 시간 간격에 따라 함수를 반복 실행할 수 있또록 해주는 타이머 메소드 - 0이 아닌 숫자를 반환 : 타이머의 ID setInterval (반복_실행할_함수, ms_단위의_시간) // 500ms 마다 함수를 반복 실행! setInterval(function(){ console.log("안녕하세요") },500) clearInterval - 타이머의 ID를 clearInterval 메소드..

- 세 개의 항을 이용해 결과를 반환 - if문의 단축 형태로 사용 - 첫 번째 항인 조건식의 결과에 따라 남은 두항 중 하나를 반환 조건식 ? 참일 경우의 결과 : 거짓일 경우의 결과 - 조건식 : 조건 역할을 하는 표현식 - 참일 경우의 결과 : 조건식의 결과가 참일 경우 반환될 값 - 거짓일 경우의 결과 : 조건식의 결과가 거짓일 경우 반환될 값 축구 야구 농구 PICK const select = document.querySelector('select') const button = document.querySelector('button') button.addEventListener('click', function(){ console.log(select.value) //select는 사용자가 직접 선..

value - 사용자가 요소(input, select 등)에 입력한 값에 접근 - 요소의 텍스트에 접근 : textContent, innerText - 읽기, 쓰기 가능 - form에 포함된 입력 요소의 name을 통해 value에 접근 가능 preventDefault() - form에서 이벤트가 제출되는 submit 이벤트가 발생하면 action 속성의 url로 리다이렉트 되지만, preventDefault()를 통해 기본 기능을 차단 할 수 있다 //대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) //대상 요소의 사용자 입력값을 "변경값"으로 수정 target.value = "변경값" //button을 누르면 value 속성으로 읽기 const textIn..

createElement - 지정된 이름의 HTML의 요소를 만들어 반환 - dom 에 추가해주는 작업을 거쳐야 함 appendChild - DOM 내 개별 요소('노드')에 자식 요소를 추가할 때 사용하는 메소드 target.appendChild(자식으로 추가할 요소) const p = document.createElement("p") //p 태그 생성 document.body.appendChild(p) //문서의 body 태그 안에 자식으로 추가 appendChild append 타켓 요소에 자식 요소를 추가 추가한 자식 노드를 반환 반환 데이터가 없음 노드 객체만을 추가 요소에 노드 객체 또는 문자열을 자식 요소로 추가 PUSH const button = document.getElementById(..

- 이젠에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재 => remove() - 같은 리스너(타겟)에대해 다수의 핸들러를 등록할 수 있음 - 추가적인 옵션 사항들이 제공 이벤트 객체 - 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터 - 이벤트 발생 시, 이벤트 핸들러가 호출 될 때 이벤트 객체가 전달 -> 이벤트 핸들러 함수의 매개변수를 통해 이벤트 객체를 받을 수 있음 // click 이벤트가 발생하면 함수를 호출 target.addEventListener('click',function(){}) // click 이벤트가 발생하면 함수를 호출 // + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입 target.addEventListener(..

- 사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건 - 이벤트 핸들러 : 이벤트가 발생되면 실행될 코드 블록 - 이벤트 핸들러 등록 : 이벤트 핸들러 역할을 수행할 함수를 정의하는 것 => event handler register : 이벤트가 발생하면 이 함수를 호출해라! - 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 다름 const inputType = document.querySelector("#typing") const inputClick = document.querySelector("#push") const handleTyping = function(){ console.log("타이핑 되고 있어요") } const handleClick = function(){ co..

- '호출될 수 있는 코드 조각' - 함수를 호출해야 사용가능 - 함수 호출시 반드시 함수명 뒤에 소괄호() - 함수 안에서 선언한 변수는 함수 안에서만 사용 가능 - 선언식은 함수 정의보다 호출문을 앞서 작성 가능, 표현식은 불가 const 함수명 = function(){ //함수명이 없는 함수에 함수명을 따로 붙임 //함수의 기능을 표현한 구문 } => 선언 후, 함수명은 중괄호 안의 기능 대신 사용 가능 const sayHello = function(){ let number = 3 + 3 console.log(number) } sayHello() //함수 호출! => 함수 호출 시, 함수의 이름 뒤 반드시 소괄호!! 함수명 규칙 - 함수의 기능을 적절하게 표현할 수 있는 이름을 사용 -명사보다는 동..