공부기록용

1. 본론에 들어가기전 에 대해 간략하게 설명하자면, 은 사용자로부터 값을 입력을 받는 양식을 만들기 위해서 사용한다. , , , 등과 같은 다양한 입력 요소들을 포함할 수 있다. 닉네임 : 이메일 : 비밀번호 : 제출 const signupForm = document.querySelector('form'); signupForm.addEventListener('submit', event => { event.preventDefault(); // * console.log('제출이 완료되었습니다.'); }); 주요 속성 action: form 데이터를 제출할 서버의 URL을 지정합니다. method: form 데이터를 서버로 전송하는 방식을 지정합니다. 주로 GET 또는 POST 방식을 사용합니다. encty..

Element.classList 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. (태그를 통해 만들어진 요소에서 클래스의 목록만 뽑아내는 속성이 바로 이 classList) 반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다. ▶내용실습◀ 실험용 테스트 add remove toggle // Javascript // querySelector로 요소들 모두 선택 const h1 = document.querySelector('h1') const addBtn = document.querySelector('#add') const removeBtn = document.querySelector('#remove') const toggleBtn = document.querySelect..

window 객체 관련 메소드들로 1s = 1000ms인 ms단위를 사용한다. setTimeout정해진 시간이 지나고 나면 주어진 함수를 실행 해주는 메소드 setTimeout(실행할 함수, ms_단위의 시간)//100ms가 지나고 난뒤 함수를 실행하겠다.(1초)setTimeout(function(){ console.log("재미있다")}, 1000) ▶내용실습◀setTimeout(function(){ console.log(1234)}, 2000)console에 2초 뒤에 1234가 나타나게된다. setInterval일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드setInterval(반복 실행할 함수, ms_단위의 시간)// 500ms마다 함수를 반복 실행한다setIn..

삼항 연산 삼항 연산은 이름 그대로 세 개의 항을 이용해 결과를 반환하는 연산이다. 보통 if문의 단축 형태로 사용되기 때문에, 삼항 조건 연산식이라고도 부른다. 조건식의 결과에 따라 남은 두 항 중 하나를 반환한다. 조건식? 참일_경우의_결과 : 거짓일_경우의_결과 조건식 : 조건 역할을 하는 표현식 참일_경우의_결과 : 조건식의 결과가 참일 경우 반환될 결과 거짓일_경우의_결과 : 조건식의 결과가 거짓일 경우 반환될 결과 ▶내용실습◀ let result; result = 3 < 2 ? "true" : "false" // true 또는 false가 결과에 따라 이 문항을 대체하게 됨 console.log(result) 축구 야구 농구 PICK // Javascript const select = docu..

, 처럼 사용자로부터 입력을 받는데 사용되는 요소(입력요소)들이 있고 여기세어 사용자가 입력한 값을 읽어들일 때는 요소의 value속성에 접근한다 요소의 덱스트에 접근하기 : textContent 또는 innerText 사용자가 요소에 입력한 값에 접근하기 : value 입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기이다. // 대상 요소의 사용자 입력값을 읽어 콘솔에 출력 console.log(target.value) // 대상 요소의 사용자 입력값을 "변경값"으로 바꾸자 target.value = "변경값" form은 여러 입력 요소를 포함할 수 있으며 form요소로부터 여러 입력 값을 읽을 수 있다. form안에 여러개의 입력 요소를 포함시키고, 각 입력 요소의 값을..

Event'사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건'을 의미한다.ex. 웹 상에서의 버튼을 클릭했다_클릭 이벤트, 키보드를 눌렀다_키다 이벤트, 입력 폼의 내용을 제출했다_제출 이벤트 등등 각각의 이벤트들은 이벤트 핸들러(handler)를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라고 한다. (이벤트 핸들링 이라고도 함)/*웹 사용자가 button요소를 클릭했을 때, 경고 다이얼로그 박스를 띄워 환영의 메시지를 보여주고 싶다면*/const handleClick = function(){ //handleClick가 다이얼로그박스를 호출하는 기능을 가..