JavaScript (52) 썸네일형 리스트형 [여덟번쨰] JavaScript - Web Browser / 이벤트 II 이벤트키보드를 눌렀을 때 텍스트가 입력되는 것은 기본적으로 웹브라우저가 가지고 있는 API 라고 할 수 있다.input 태그를 불러왔을 때 submit 버튼을 누르면 데이터가 전송되는 것도a href 태그를 클릭하면 URL로 이동하는 것도기본 이벤트 동작들즉 API브라우저들의 구성요소들이 우리가 원하는 작업이 실행될 수 있도록 하는 것이 이벤트 - 동작 취소하기.checked 됬을 때 return false를 해주면 실행되지 않도록 해서동작의 취소 기능을 구현한다. 이벤트 타입- 폼 form form이라는 이벤트 안에 submit을 만든다.submit : 사용자가 입력한 폼의 정보들을 서버로 전송하는 명령change : 텍스트 입력창에 입력을 하면 그대로 입력blur : 포커스를 뺏을 때focus : 포.. [일곱번째] 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.. 이전 1 ··· 3 4 5 6 7 다음
