쫑가 과정

목표 input 입력값을 화면에 띄워보자. 작동원리 파악 form, input 만들기. submit한 후에 form이 사라진다. 입력값이 저장되고 꺼내 쓸 수 있다. 1. submit 후 form 숨기기 form 숨기기 See the Pen by jongha (@gajong) on CodePen. submit하면 form은 사라졌지만 사용자 이름이 console에는 기록됐다. h1태그 숨기기 현재 h1은 공백으로 나와있는 것이라 처음에 hidden으로 숨겨놓아야 한다. h1 class를 hidden으로 지정하고 id를 greeting으로 한다. See the Pen by jongha (@gajong) on CodePen. h1을 JavaScript에서 사용할 수 있게 변수로 만들어준다. submit이 작..

preventDefalut() preventDefault는 어떤 event의 기본 행동이든지 발생되지 않도록 막는 거다. event.preventDefault(); 기본 행동이란 어떤 function에 대해 브라우저가 기본적으로 수행하는 동작. form은 submit 하면 브라우저는 기본적으로 페이지를 새로고침 하도록 되어있다. 예시 하나 더 HTML에 a 태그를 추가해서 링크로 이동하지 않게 해 보자. google.com anchor(link)의 기본 동작은 클릭 시 다른 페이지로 이동하는 것이다. 클릭시 알람이 뜨는 event를 작성해보면 const link = document.querySelector("a") function clicklink() { alert("Don't go link!") } l..

function Afunction(a) { console.log('hi ' + a); } Afunction("Dalbong") function은 ()로 실행하고 그 안의 정보를 argument가 받아온다. function onLoginSubmit() { console.log(loginInput.value); } loginForm.addEventListener("submit", onLoginSubmit) 현재는 argument를 사용하고 있지 않다. addEventListener를 활용할 때 argument가 있다면 어떤 정보를 받아올까? const loginForm = document.querySelector("#login-form") const loginInput = document.querySelec..

데이터 받기 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. developer.mozilla.org See the Pen by jongha (@gajong) on CodePen. 아무거나 입력해서 제출하고 console.dir을 살펴보면 입력값이 value 부분에 적혀있다. input value value부분이 내가 입력한 값이다. const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelect..

className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다. Element.className - Web API | MDN className 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다. developer.mozilla.org 구조 var cName = elementNodeReference.className; elementNodeReference.className = cName; 예제 let elm = document.getElementById('item'); if(elm.className === 'active'){ elm.className = 'inactive'; } else { elm.className = 'active'; } 풀이) id=item을 변수 elm로..

이벤트 입문 - Web 개발 학습하기 | MDN 이벤트(event)란 당신이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 당신이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것 developer.mozilla.org 무언가를 프로그래밍하고 있는 시스템에서 무언가 발생하는 거다. 예를 들어 글자를 마우스로 클릭했을 때 글자 색상이 변하는 식이다. event 종류 찾아보기. 1. mdn Event reference | MDN This topic provides an index to the main sorts of events you might be interested in (animation, clipboard, workers..