쫑가 과정

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 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. 입력 유형과 특성의 다양한 조합 가능성으로 인해, 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다. input 유형 : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. developer.mozilla.org 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있다. 특성을 지정하지 않은 경우, 기본값은 text. See the Pen by jongha (@gajong) on CodePen. input 속성 : ..

목표 element를 click 했을 때 색상이 파란색이 되고 파란 element를 click하면 토마토색이 되게 한다. 작동원리 파악 todo -> click = blue blue todo -> click = tomato click event를 사용. 색상에 따라 만들 수 있는 조건을 확인. 어떤 식으로 작성해야 하는지 보자. See the Pen by jongha (@gajong) on CodePen. console을 보면 click 할 때마다 todo.style.color가 blue로 나오는 것을 확인할 수 있다. 그럼 todo.style.color가 blue이면 tomato가 되게 추가해보자. (작동원리 2번) condition에 따른 작동(if, else) See the Pen by jongha..

목표 화면에 작동하는 시계를 표시한다. 작동원리 파악 시간을 화면에 가져온다. 매 초마다 시간을 가져와 업데이트되게 한다. 시간 가져오기 Date - JavaScript | MDN JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다. developer.mozilla.org const date = new Date(); date.getHours(); // 시를 반환 date.getMinutes(); // 분을 반환 date.getSeconds(); // 초를 반환. 이 외에도 사용할 수 있는 여러가지 date method가 있다. 매초 시간가져오기...

데이터 받기 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다. : 입력 요소 - 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..