Language (58) 썸네일형 리스트형 [Javascript] Form Form 은 사용자가 입력한 정보를 서버로 전송하게 해주는 HTML태그 이벤트 1. submit 입력한 값을 제출 하는 이벤트를 가진다. 위의 예시는 입력한 값이 없을 때 제출하게 되면 경고창이 뜨게 하는 코드이다. 일단 폼 태그의 엘리먼트를 t라는 객체로 확보하고 t에 이벤트 리스너 메소드를 이용한다. ( 폼의 이벤트 리스너 속성) 그리고 첫번째 인자는 폼태그의 속성값중 하나인 submit 두번째 인자는 함수를 입력한다. 조건문을 이용하여 value 프로퍼티의 길이가 0인지 확인 하여 처리한다. event.prventDefault는 이벤트의 작동을 중지시키는것! 2. change 만약 input의 값이 변화했을때 발생하는 메소드 form태그 하위 태그인 input태그 엘리먼트를 변수 t에 저장하고 이벤.. [JavaScript] 브라우저 이벤트 기본동작의 취소 웹 브라우저의 구성요소들은 각각 기본적인 동작방법을 가지고 있다. 예를 들면 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력되고 폼에서 submit 버튼을 누르면 데이터가 전송되며 a 태그를 클릭하면 href 속성의 URL로 이동한다. 방법은 다음과 같다.체크 박스가 True라면리턴값을 false값을 준다. 이는 태그의 이벤트를 마비시키는 역할을 한다. 이벤트 연습해보자 프로퍼티 리스너프로퍼티 리스너 방식. 특이점은 없다. 이벤트 리스너특이한거 있다. return false가 아닌event.preventDefault(); 이벤트 객체에 preventDefault()를 호출한다. [JavaScirpt]버블링과 캡처링 만약 input태그 fieldset태그 body태그 html태그에 eventListener를 부여했다고 하자. 그럴때 input의 event를 실행시키게 되면 event의 영역인 fieldsetfieldset의 영역인 bodybody의 영역인 html이각각 실행 될 것이다. 이것이 위에서 아래로 진행된다면 캡쳐링 아래에서 위로 진행된다면 버블링이다. 1. 캡처링다음은 캡처링의 예제이다. 결과는 위 코드와 같은데 콘솔부분만 설명해보자면event.target.nodeName은 그 이벤트(마우스클릭)의 타겟이된 객체의 노드네임을 호출하고this.nodeName은 이벤트(핸들링?리스너?)가 실행된 노드네임을 호출한다. 그리고 결과값으로 다음과 같이 나오는데여기서 HTML BODY FIELDSET INPUT순으로.. [JavaScirpt]이벤트 등록(addEventListener) 1. addEventListener사용방식은 위의 코드와 같다.1.이벤트리스너를 달아줄 객체 = t그리고 괄호는 순서대로(이벤트, 리스너)이다. 해석해보면객체t에 이벤트리스너를더하는데(클릭이벤트를통해서이고, 경고문을 출력하는 기능이다.)이다. 2. 이벤트 리스너를 쓰는 이유 위의 코드는 프로퍼티 리스너이다.이 프로퍼티 리스너는 한 객체의 이벤트에 하나의 리스너밖에 가질 수 없다. 고로 클릭이벤트 발생시에 alert(2)만 출력 될 것이다. 그래서 위의 코드와 같이 이벤트 리스너를 쓰는것을 권장한다. 클릭이벤트 발생시에alert(1)과 alert(2)가 동시에 실행된다. 3. 하나의 리스너로 여러 이벤트리스너 실행하기. t1과 t2 다른 객체이지만하나의 리스너를 사용하고 있다. [JavaScirpt]이벤트 등록 1. inline방식 태그에 이벤트를 설치하는 방식 예시 onclick="alert('Hello world') 그런데 아래 4번째 라인을 살펴보자 this.value를 호출하라고 되어있는데 여기서 this란 함수가 속해있는 객체를 의미한다. 고로 4번째 라인은 alert함수가 속해있는 태그 엘리먼트, 객체의 value값을 출력하게 되어진다. 2.프로퍼티 리스너 해석 t라는 변수에 target이라는 id를 가진 태그를 리턴하고 그 t라는 객체에 onclick이라는 약속된 자바스크립트 객체 속성에 함수를 지정해서 그 함수를 실행시킨다. 다음 빨간 박스가 이벤트핸들러이다. 그리고 이 이벤트핸들러는 첫번째 파라미터로 이벤트 객체라는 것을 전달 받기로 약속되어 있음. 이 이벤트 객체는 프로퍼티로 타겟이라는것을 가.. [JavaScript] 이벤트 용어 용어 정리 event : 무언가 행위가 발생할 때, 실행되는 행위 eventTarget : 이벤트가 일어날 행위의 대상 (예를 들어 버튼) eventType : ~했을 때(onclick, onchange와 같은 것) eventHandler : ~했을 때 일어나는 행위(alert와 같은것) [JavaScript]Element의 위치 및 크기 알아내기 var t = document.getElementById('target');console.log(t.getBoundingClientRect()); 위 코드에서 getBoundingClientRect()메소드는 콘솔에 이런 값을 리턴하는데 이는 위치와 크기에 관한 리턴값이다. 위의 사각형이 target엘리먼트의 형태인데 top과 bottom left right는 각각 BODY태그에서 얼마나 떨어져 있는지 width와 height는 엘리먼트의 텍스트 노드 + 패딩값 + 보더값을 나타낸다. 만약 엘리먼트가 중첩되어 있다면 어떻게 될까?위와 같이 엘리먼트를 중첩했을 때 coding 엘리먼트와 문서와의 거리는 200px이다. getBoundingClientRect를 호출해보자. 뭐 결과는 같다. 예외가 있다면 t.. [Javascript] Text API 총 네가지 API를 살펴보자 첫번째 버튼은 callAppendData()라는 함수를 호출한다. callAppendData는 target엘리먼트에 appendData 메소드를 실행한다. appendData는 data.value를 파라미터로 두는데 이는 첫번째 input박스의 value값이다. 결론적으로 Cording everybody!(target엘리먼트) 뒤에 value값이 추가된다. 두번째 버튼은 callDeleteData()라는 함수를 호출한다. target엘리먼트에 deleteData 메소드를 실행한다. deleteData메소드는 첫번째 값 두번째 값 모두 정수를 파라미터로 받으며, 순서를 뜻한다. 만약 target.deleteData(5,5);라면 Cording everybody!에서 다섯번째 인.. 이전 1 2 3 4 5 6 7 8 다음
