반응형 프로그래밍 개발/JS 웹33 CSS+Javacript - 슬라이더 메뉴 구현하기 메뉴바가 메뉴 아이콘을 클릭하면 슬라이더 기능으로 튀어나오고 닫기 버튼을 누르면 다시 들어가는 슬라이드 메뉴를 간단하게 구성해보았다. HTML HOME Menu 2 Menu 3 Menu 4 Menu 5 Close 메뉴바를 구성하는 문서중 Close는 닫기 버튼이므로 onclick="closeLetfMenu();라는 함수를 일단 선언해 주었다. 추후 자바스크립트 부분에서 조정할 수 있다. 또한 메뉴바를 열기전 메뉴 클릭 버튼에는 onclick="showLeftMenu();라는 함수를 선언해주어 자바스크립트에서 조정하도록 해두었다. CSS CSS 부분은 메뉴가 움직이는 슬라이드 기능 구현을 담당하고 있다. CSS 부분은 컬러와 폰트에 신경을 조금 써서 비율과 시각에 대해 알맞게 디자인해보았다. transto.. 2020. 12. 15. Javascript - Drag and Drop 기본 구현하기 마우스로 클릭 후 드래그해서 다른 곳으로 드랍하는 기능을 간단한 자바스크립트 코드로 구현해보았다. HTML 이미지를 드래그와 드랍을 하기 위해서는 html 태그에 드랍할 장소의 태그에 ondrop="drop(event)"을 각각 붙여줘야한다. 그리고 드래그할 이미지 태그에 드래그를 시작하는 요소라는 의미로 ondragstart="drag(event)"을 붙여준다. 또 드랍할 위치 태그에 allowDrop(event)는 다른 이벤트가 발생하는 것을 방지 하기 위한 함수이며 이는 자바스크립트에서 제어한다. CSS 아주 간단한 드랍 드래그 위한 박스를 두 개 만들었다. Javascript 함수 allowDrop()의 안에 preventDefault() 메소드는 다른 이벤트가 발생하는 것을 방지해주는 역할을 한.. 2020. 12. 9. Javascript - 모달창 만들기 기본 간단한 자바스크립 코드를 이용하여 열기 버튼을 클릭하면 모달창이 등장하고 닫기 버튼을 누르면 다시 모달창이 꺼지는 페이지를 구성해보았다. CSS 여기서 중요한 부분은 #modal 부분에 display:none;을 해주어 홈페이지를 열었을때 미리 모달창이 뜨지 않게 일단은 설정하였다. 열기 버튼을 눌렀을 때 모달창이 등장하게 자바스크립트 부분에서 제어할 수 있을 것이다. Html 열기 확인 실행 완료되었습니다! 닫기 JS getElementById 메소드를 사용하여 id 값이 modal_opne_btn인 열기 버튼 요소를 가져와 .onclick 이벤트를 사용하여 클릭하였을 때 function() 함수가 발동되도록 하였다. 닫기 버튼 또한 마찬가지이다. 버튼을 클릭 한 후 getElementById 메소드을.. 2020. 12. 1. Javascript 네트워크 통신 - JSON JSON SON(JavaScript Object Notation)의 약자로 JavaScript에서 객체를 만들 때 사용하는 표현식을 의미한다. 이 표현식은 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작다. JSON API JSON.parse() : 인자로 전달된 문사열을 자바스크립트의 데이터로 변환한다. JSON.stringify() : 인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다. Ajax와 JSON 우선 아래 코드와 같이 서버 쪽에서는 타임라인의 리스트를 콤마로 구분해서 전달한다. ↓ 결과 Asia/Seoul,America/New_York 클라이언트 측에서는 이 결과를 받아서 처리한다. ↓ 위 코드에서 중요한 것은 아래 코드 부분이다. var _tzs = xhr.resp.. 2020. 11. 27. Javascript 네트워크 통신 - Ajax 네트워크 통신 자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법인 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 예를 들자면 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있는 Ajax는 웹에플리케이션을 구축하는데 중요하다. Ajax Ajax는 Asynchronous JavaScript and XML의 약자다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신.. 2020. 11. 27. Javascript 이벤트 타입 - jQuery on API 사용법 jQuery on API 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. 또 순순 자바스크립트와 코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해주기 때문이다. on의 기본적인 문법. .on( events [, selector ] [, data ], handler(eventObject) ) event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의 하위 엘리먼트를 이벤트 대상으로 필터링함 data : 이벤트가 실행될 때 핸들러로 전달될 데이터를 설정함 handler : 이벤트 핸들러 함수 selector selector 파라미터는 이벤트 대상을 필.. 2020. 11. 26. Javascript 이벤트 타입 - 마우스 마우스 이벤트 타입 웹브라우저는 마우스와 관련해서 다양한 이벤트 타입을 지원한다. click : 클릭했을 때 발생하는 이벤트. dblclick : 더블클릭을 했을 때 발생하는 이벤트 mousedown : 마우스를 누를 때 발생 mouseup : 마우스버튼을 땔 때 발생 mousemove : 마우스를 움직일 때 mouseover : 마우스가 엘리먼트에 진입할 때 발생 mouseout : 마우스가 엘리먼트에서 빠져나갈 때 발생 contextmenu : 컨텍스트 메뉴가 실행될 때 발생 아래의 예제처럼 쓰인다. 자바스크립트 문서의 일부분. t.addEventListener('click', handler); t.addEventListener('dblclick', handler); t.addEventListener.. 2020. 11. 26. Javascript 이벤트 타입 - 문서 로딩 문서 로딩 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다. jinseok 위의 코드의 실행결과는 null이다. 왜냐하면 스크립트 문서보다 아래쪽에 위치한 jinseok가 로딩되기 전에 자바스크립트가 실행되었기 때문이다. 이를 해결하기 위한 방법은 아래와 같이 스크립트를 문서 끝에 위치시키는 것이 있지만 또 다른 방법은 load 이벤트 타입을 이용하는 것이다. ↓ jinseok 그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다. 하지만 DOMContentLoaded는 문서에.. 2020. 11. 26. Javascript 이벤트 타입 - 폼(form) form 폼 submit submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ※ 위에서 event.preventDefault();은 전송을 취소하는 동작 취소 명령이다. change change는 폼 컨트롤의 값이 변경 되었을 때 발생하는 이벤트다. input(text,radio,checkbox), textarea, select 태그에 적용된다. blur, focus focus는 엘리먼트에 포커스가 생겼을 때, blur은 포커스가 사라졌을 때 발생하는 이벤트다. 다음 태그를 제외한 모든 태그에서 발생한다. , , , , , , , , 2020. 11. 26. Javascript 이벤트 - 기본동작의 취소 기본동작의 취소 웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다. 폼에서 submit 버튼을 누르면 데이터가 전송된다. a 태그를 클릭하면 href 속성의 URL로 이동한다. 이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다. inline 이벤트의 리턴값이 false이면 기본 동작이 취소된다. 이벤트 발생 방지 블로그 property 방식 리턴 값이 false이어도 기본동작이 취소된다. addEventListener 방식 이벤트 객체의 preventDefault 메소드를 실행해도 기본 동작이 취소된다. ※ ie9 이하 버전에서는 event.return.. 2020. 11. 23. Javascript 이벤트 전파 - 버블링과 캡처링 이벤트 중첩에 대하여 HTML 태그는 중첩되어 있다. 따라서 특정한 태그에서 발생하는 이벤트는 중첩되어 있는 태그들 모두가 대상이 될 수 있다. 만약 중첩된 HTML 태그들에 이벤트가 등록 되어 있다면 중첩된 이벤트가 어떻게 처리 되는지 확인 할 수있다. ↓ 이벤트 전파 위의 코드의 결과를 보면 제일 부모인 HTML부터 차례대로 깊숙이 들어가 taget까지 전파되는 것을 확인 할 수 있다. 이렇게 이벤트가 부모에서부터 발생해서 자식으로 전파되고 있는 방식을 캡처링(capturing)이라고 한다. ie 낮은 버전에서는 작동하지 않기 때문에 많이 사용하지는 않는다. ※ 위 코드에서 this.nodeName의 this는 이벤트 헨들러인 handler의 함수를 호출하게 한 이벤트 타겟인 버튼 input 태그 값.. 2020. 11. 23. Javascript 이벤트 - 등록방법 등록방법 이벤트 프로그래밍을 하기 위해서는 이벤트의 대상에 이벤트 핸들러를 등록해줘야 한다. 웹브라우저에서는 크게 3가지 종류의 등록방법을 제공한다. inline 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 바람직한 방법이라고 할수는 없다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다. 프로퍼티 리스너 프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점이 있다. var t =.. 2020. 11. 23. Javascript 이벤트 이벤트 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 위의 코드는 onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. event target target은 이벤트가 일어날 객체를 의미한다. target은 버튼 태그에 대한 객체가 된다. event type 이벤트의 종류를 의미한다. 위의 예제에서는 click이 이벤트 .. 2020. 11. 23. Javascript 문서의 기하학적 특성 문서의 기하학적 특성 CSS 등으로 만들어낸 요소들의 위치와 크기를 알아낼 수 있다. 요소의 크기와 위치 Coding 요소의 엘리먼트 크기와 위치 등의 값을 알아내고 싶을 때 사용하는 API가 getBoundingClientRect인 것을 이용하면 된다. (※getBoundingClientRect의 width 값을 IE는 제공하지 않는다.) 또 엘리먼트의 위치를 의미하는 top, right의 값을 정하는 기준이 그 부모가 아니라 body이다. 그리고 이를 명시적으로 확인할 수 있는 방법은 offsetParent 속성을 호출하는 것이다. 만약 부모 중 CSS position의 값이 static인 td, th, table 엘리먼트가 있다면 이 엘리먼트가 offsetParent가 된다. Viewport 뷰포트.. 2020. 11. 23. Javascript Text 객체 - 조작 API 조작 API 텍스트 노드가 상속 받은 CharacterData 객체는 문자를 제어할 수 있는 다양한 API를 제공한다. appendData() : 인자에 입력된 데이터를 텍스트 마지막 끝에 붙여놓는다. deleteData() : 입력한 데이터를 받은 인자의 start 와 end value 값이 (start value 값)번째 문자 이후부터 시작하여 (end value 값)번째까지 텍스트를 삭제하도록 한다. insertData() : 입력한 데이터를 받은 인자의 start value 값이 (value 값)번째 문자 사이에 데이터 텍스트가 들어가게 된다. replaceData() : 입력한 데이터를 받은 인자의 start value와 end value 값이 (start value 값)번째 문자 사이의 데이터.. 2020. 11. 20. Javascript Text 객체 - 값 API 값 API 텍스트 노드는 DOM에서 실질적인 데이터가 저장되는 객체이다. 따라서 텍스트 노드에는 값과 관련된 여러 기능들이 있다. nodeValue data html css JavaScript 2020. 11. 20. Javascript Text 객체 Text 객체 텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. kim jin seok kim jin seok 값 텍스트 노드의 값을 가져오는 API data nodeValue 조작 appendData() deleteData() insertData() replaceData() subStringData() 생성 docuemnt.createTextNode() 2020. 11. 20. Javascript Document 객체 Document 객체 Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. createElement() createTextNode() 문서 정보 API title URL referrer lastModified 2020. 11. 20. Javascript Node 객체 - jQuery 노드 변경 API jQuery 노드 변경 API jQuery를 이용해서 노드를 제어할 수있다. jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있다. 참고 http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, .. 2020. 11. 20. Javascript Node 객체 - 문자열로 노드 제어 문자열로 노드 제어 노드 변경 API에서는 여러 메소드를 이용해서 노드를 제어하는 방법이 있지만 문자열로 제어하는 노드 제어는 좀 더 편리하게 노드를 조작하는 방법이다. innerHTML innerHTML는 문자열로 자식 노드를 만들 수 있는 기능을 제공한다. 또한 자식 노드의 값을 읽어올 수도 있다. HTML CSS outerHTML outerHTML은 선택한 엘리먼트를 포함해서 처리된다. HTML CSS innerText, outerText innerHtml, outerHTML과 다르게 이 API들은 값을 읽을 때는 HTML 코드를 제외한 문자열을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. HTML CSS insertAdjacentHTML() 좀 더 정교하게 문자열을 이용해서 노.. 2020. 11. 20. Javascript Node 객체 - 노드 변경 API 노드 변경 API 노드 추가 appendChild(child) : 노드의 마지막 자식으로 주어진 엘리먼트 추가 insertBefore(newElement, referenceElement) : appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가된다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야 하는데 이것은 document 객체의 기능이다. 아래 API는 노드를 생성하는 API이다. document.createElement(tagname) : 엘리먼트 노드를 추가한다. document.createTextNode(data) : 텍스트 노드를 추가한다. HTML CSS 노드 제거 노드 제거를 할때 메소드는 삭제 대상의 부모 노드 객체의 것을 실행(.. 2020. 11. 20. Javascript Node 객체 - 노드 종류 API 노드 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName이다. Node.nodeType : node의 타입을 의미한다. Node.nodeName : node의 이름 (태그명을 의미한다.) Node Type 노드의 종류에 따라서 정해진 상수가 존재한다. for(var name in Node){ console.log(name, Node[name]); } ↓ 결과 ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NOD.. 2020. 11. 20. Javascript Node 객체 - 노드 관계 API Node 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다. Node.firstChild : 첫번째 자식노드 리턴. Node.lastChild : 마지막 자식노드 리턴. Node.nextSibling : 다음 형제 노드 리턴. Node.previousSibling : 이전 형제 노드 리턴. Node.parentNode : 속해 있는 부모 리턴. html css JavaScript JavaScript Core DOM BOM 2020. 11. 20. Javascript Node 객체 Node 객체 Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. 주요기능 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() 노드의 종류 Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다. Node.nodeT.. 2020. 11. 20. javascript Element 객체 - jQuery 속성 제어 API jQuery 속성 제어 API Element의 API에 해당하는 기능을 jQuery에서는 어떻게 구사 가능하다. 속성제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 'attr'이다. 또한 removeAttribute에 대응되는 메소드로는 'removeAttr'이 있다. 블로그 attribute와 property DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다. URL jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 이런 것이 라이브러리를 사용하는 의의라고 할 수 있다. ↓ jin seok 2020. 11. 19. javascript Element 객체 - 속성 API 속성 API 속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 속성을 제어하는 API는 아래와 같다. 여기서 name은 class, href, title 등등의 여려 종류로 예를 들 수 하다. Element.getAttribute(name) : name의 속성의 값을 가져온다. Element.setAttribute(name, value) : name의 value값을 설정한다. Element.hasAttribute(name); : name 속성의 존재여부를 true, false로 판단한다. Element.removeAttribute(name); : name을 삭제한다. ↓ 예시 블로그 속성과 프로퍼티 모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 .. 2020. 11. 19. javascript Element 객체 - 조회 API 조회 API 조회 API는 엘리먼트를 조회하는 기능이다. 지금까지 document.getElementsBy 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. Element 객체 역시도 getElementsBy 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다. html css JavaScript JavaScript Core DOM BOM 찾고자 하는 엘리먼트를 참조하는 객체를 생성("var active")한다. 이 생성한 객체에서 getElementsByClassName 메소드를 통해 HTMLcollection을.. 2020. 11. 19. javascript Element 객체 - 식별자 API 식별자 API HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용되는데 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다. Element.tagName 해당 엘리먼트의 태그 이름을 알아낸다. 하지만 태그 이름을 변경하지는 못한다. html css JavaScript Element.id 문서에서 id는 단 하나만 등장할 수 있는 식별자다. 그 id의 값을 읽고 변경하게 한다. html css JavaScript Element.className 클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다. html css JavaScript Element.classList className에 비해서 훨씬 편리한 사용성을 제공한다. html css JavaScript 2020. 11. 19. javascript Element 객체 Element 객체 Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. DOM의 계층구조에서 Element 객체의 위치는 아래와 같다. 주요기능 식별자 문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API .. 2020. 11. 19. Javascript DOM - HTMLElement HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 예제1 HTML CSS JavaScript 위의 코드의 결과로 알 수 있는 것은 document.getElementById : 리턴 데이터 타입은 HTMLLIELement document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection 즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다. 예제2 jin seok blog HTML CSS JavaScript 위 결과를 통해서.. 2020. 11. 17. 이전 1 2 다음 반응형
