분류 전체 보기 1305

생활코딩 javascript 정리 - 이벤트 타입 폼(form)

36. 이벤트 타입 아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 1 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다. 37. 폼 폼과 관련된 이벤트 타입을 알아보자. 1) submit submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.form 태그에 적용된다. 아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다. name var t = document.getElementById('target'); t.addEventListener('submit', function(event){ ..

세븐나이츠 -천상계 여포 브브 공덱(170816)

여포 각성으로 핫한 여포 브브 공덱을 분석해보겠습니다. 앞줄 에이스 라이언 키리엘 뒷줄 여포 에이스 먼저 에이스입니다. 장비는 다음과 같습니다. 속속 생생 권능+소랄 세공 / 치뎀증 속보 피해량 / 전장3옵 공격력 잠재는 출혈 저항 감전 저항 마비 저항이네요. 그다음 브브입니다. 속속 반반 진노+턴감세공 / 치확 반격 속보 / 전장3옵 공격력 잠재는 즉사저항 반격확률 만능형뎀증 입니다. 그다음 라이언입니다. 속속 생생 축복+중랄세공 / 치뎀증 속보 치확 / 전장 3옵 공격력 잠재는 쿨증 저항 기절효과저항 만능형뎀증 입니다. 그다음 키리엘 입니다. 속속 생생 축복+권능세공 / 약공확률 치뎀증 속보 /전용장비 3옵 방어 잠재는 즉사방어 기절방어 만능형뎀증입니다. 마지막으로 여포입니다. 약약 반반 불사+권능세..

생활코딩 javascript 정리 - 기본동작의 취소

35. 기본동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. 1) inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. prevent event on opentutorials 2) property 방식 리턴 값이 false이면 기본동작이 취소된다. (실행) prevent event on opentutorials document.querySelector('a').onc..

생활코딩 javascript 정리 - 이벤트 등록방법(inline)

31. 이벤트 등록방법(inline) 인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 32. 이벤트 등록방법(프로퍼티 리스너) 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할..

생활코딩 javascript 정리 - 이벤트

30. 이벤트 1) 이벤트란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. DOCTYPE html> onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. 2) event target target은 이벤트가 일어날 객체를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다. 3) event type 이벤트의 ..

생활코딩 javascript 정리 - 문서의 기하학적 특성

29. 문서의 기하학적 특성 1) 요소의 크기와 위치 우선 엘리먼트의 크기를 알아내는 방법을 살펴보자. body{ padding:0; margin:0; } #target{ width:100px; height:100px; border:50px solid #1065e6; padding:50px; margin:50px; } Coding var t = document.getElementById('target'); console.log(t.getBoundingClientRect()); 화면에 표시된 모습은 아래와 같다. 즉 엘리먼트의 테두리와 body 태그 사이의 거리가 50px이다. 그리고 테두리를 포함한 엘리먼트의 크기는 300px이다. 이 값을 알아내고 싶을 때 사용하는 API가 getBoundingClie..

생활코딩 javascript 정리 - Text 객체 값 API 및 Text 객체 조작 API

27. Text 객체 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있는데 이번 시간에는 값을 가져오는 두개의 API를 알아본다. (둘 다 같은 의미임) nodeValue data html css JavaScript var t = document.getElementById('target').firstChild; console.log(t.nodeValue); console.log(t.data); 출처 : https://opentutorials.org/course/1375/6745 28. Text 객체 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. 아래는 조작..

생활코딩 javascript 정리 - Text 객체

26. Text 객체 1) 소개 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다. Hello world Hello world var t1 = document.getElementById('target1').firstChild; var t2 = document.getElementById('target2').firstChild; console.log(t1.firstChild.nodeValue); try{ console.log(t2.firstChild.nodeValue); } catch(e){ console.log(e); } console.log(t2.nextSibling..

생활코딩 javascript 정리 - Document 객체

25. Document 객체 1) 소개 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. //document 객체는 window 객체의 소속이다. console.log(window.document); //document 객체의 자식으로는 Doctype과 html이 있다. console.log(window.document.childNodes[0]); console.log(window.document.childNodes[1]); 2) 주요 API 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은..

생활코딩 javascript 정리 - 문자열로 노드 제어

24. 문자열로 노드 제어 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 그런데 이 방식은 복잡하고 장황하다. 좀 더 편리하게 노드를 조작하는 방법을 알아보자. 1) innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS function get(){ var target = document.getElementById('target'); alert(target.innerHTML);//HTML소스코드를 바로 보여줌 } function set(){ var target = document.getElementById('target'); target.innerHTML = "JavaS..

반응형