Dev.FrontEnd (51) 썸네일형 리스트형 [일곱번째] JavaScript - Web Browser / 이벤트 I 이벤트자바스크립트의 하이라이트! 이벤트란 말 그대로 사건. 웹 브라우저 상에서 일어나는 사건을 말한다.- 이벤트 타겟(event target) : 이벤트가 발생하는 태그- 이벤트 타입(event type) : onclick ...- 이벤트 핸들러 : 실행될 코드 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다.크게 3가지 등록방법이 있다. 1. inline 방식태그안에 이벤트가 속성으로 직접 들어가 있다.태그에 직접 기술되어 있기 때문에 어떤 이벤트가 있는지 알기 쉽다.HTML의 정보로서의 목적에 어긋난다.또한 복잡한 코드를 삽입할 수 없다. 2. 프로퍼티 리스너이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식event || window.event;even.. [여섯번째] JavaScript - Web Browser / 문서의 기하학적 특성 문서의 기하학적 특성 1. 요소들간의 관계여러 가지 Element들의 크기 , 위치 ,.getBoundingClientRect() 메서드 top : 최상단으로부터 문서의 시작점과의 거리left : 최좌측으로부터 문서의 시작점과의 거리height : 문서의 엘리먼트의 세로 길이width : 문서의 엘리먼트의 가로 길이 = padding + border (margin값을 포함하지 않는다.)right : 최좌측으로부터 문서의 끝나는 지점까지의 거리bottom : 최상단으로부터 문서의 끝나는 지점까지의 거리 ClientWidth ClientHeight : 테두리를 제외한 값 offsetParent : 위치 측정에 기준이 되는 객체를 출력 cf) CSS의 박스 모델을 되돌아보면 이해가 쉽다. 2. 뷰포트(View.. [다섯번째] JavaScript - Web Browser / Node Node 객체. 각각의 객체들에게 관계를 부여하는 API가 있다.body 태그의 첫번째 자식start.firstChild는 줄바꿈이다. 보통 이런 식.그래서 #text가 출력된다. 놓치지 말것!노드 타입. 1. Node 관계 API Node.childNodes자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild첫번째 자식노드 Node.lastChild마지막 자식노드 Node.nextSibling다음 형제 노드 Node.previousSibling이전 형제 노드 2. 노드 종류 API노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 생긴다.이런 경우에 사용할 수 있는 APINode.nodeTypenode의 타입을 의미한다.- 각각의 숫자에 해당하는.. [네번째] JavaScript - Web Browser / jQuery JavaScript 와 jQuery의 비교를 살짝 보고 // >> jQuery 라이브러리란? 현재 시점에서 가장 많은 사람들이 사용하는 자바스크립트 라이브러리.라이브러리란 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어적은 코드로 많은 일을 할 수 있는 효율성을 보인다!DOM이 할 수 없는 것을 제이쿼리가 할 수 있는 것은 아니다.제이쿼리에 DOM이 담겨져 있으므로.제이쿼리만 사용한다면 라이브러리 바깥 쪽에 있는 기능을 알지 못할 수 있다.인간은 도구를 사용한다! 라이브러리를 적재적소에 활용할 줄 알아야 한다. CDN = Contents Delivery NetworkjQuery 파일을 따로 다운받지 않아도 jQuery를 연동해서 사용할 수 있다. src="//code.// 앞에 http가 생략.. [세번째] JavaScript - Web Browser / DOM Document Of ModelDOM (1) 제어대상을 찾기document : 문서 전체를 의미하는 객체 1. document.getElementsByTagName 메소드 사용유사배열을 가져온다. var lis = document.getElementsByTagName('li');for(var i=0; i ul객체를 찾으면 된다.(document로 하는게 아닌) 2. class 적용하여 개체찾기document.getElementsByClassName인자로 전달된 값에 해당하는 클래스에 속해있는 개체를 찾아서 유사배열에 담는다. 3.ID적용하여 개체찾기 var li = document.getElementById.. [두번째] JavaScript - Web Browser / BOM Browser Object Model of Javascript BOM 1. 사용자와 커뮤니케이션1) alert경고창을 띄운다.alert가 실행되고 있으면 다음 로직이 실행되지 않는다.이건 confirm 이나 prompt도 마찬가지이다.Debugging 용도로 많이 사용됬지만 요즘엔 개발자 도구의 발전으로 주로 console.log를 사용하여 Debugging한다. 2) confirm예/아니오 를 묻는 대화상자를 띄운다.예 일 경우에는 true를 return.아니오 일 경우엔 false를 return. if(confirm('ok?')){ alert('ok'); } else { alert('cancel'); }이렇게 사용한다.로직의 흐름을 분기시키는 역할. 3) prompt대화상자 안에 텍스트 상자를 생성... [첫번째] JavaScript - Web Browser / 기본 웹브라우저 상에서의 자바스크립트 Javscript를 로드하기html은 html끼리JS는 JS끼리 모여있는게 유지보수하기 편하다. html 은 정보에 집중JS 는 제어에 집중 1) inline 방식한줄에 HTML 태그와 Javascript 언어를 모두 작성한다.정보와 제어방식이 함께 있어서 유지보수가 불편하다. 2) 로 끼어두기하지만 여기서도 html문서내에 JS 구문이 남아있기에 불편 3) 외부 파일 로드 방식(src 속성 이용) +) script 태그의 위치 :head 태그에 위치Uncaught TypeError: Cannot read property 'addEventListner' of nulljs태그를 발견을 하면 외부에 있는 js파일을 다운로드를 받은 다음에 나머지 내용을 실행한다.그말은var h.. [네번째] JavaScript - Basic / 객체 지향 언어 객체 지향 언어로서의 자바스크립트객체지향생성자와 newthis상속prototype표준 내장 객체의 확장배열의 확장Object데이터 타입 0. 객체지향객체란 서로 연관된 변수와 함수를 그룹핑한 container 이다.객체 내 변수를 프로퍼티/객체 내 함수를 메소드/ 라고 부른다.객체 지향의 핵심은 객체라는 단단한 테두리 안에 서로 연관된 메소드와 변수를 모아서정리하는 것이다. 1. 생성자와 new생성자는 객체를 만드는 역할의 함수다.자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴한다. 일반적인 객체지향 언어에서 생성자는 클래스의 소속이다.하지만 자바스크립트에서 객체를 만드는 주체는 함수다... 이전 1 ··· 3 4 5 6 7 다음
