korean IT student

html2canvas는 밑에 홈페이지에서 .js에서 받을 수 있다. html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 위의 라이브러리를 이용하여 이미지 서버에 업로드하기 편리하다. 먼저 canvas에 ref를 정의하여 준다. 그리고 canvas에 그려진 그림을 @click 한다.(클릭 함수 구현) - 위의 함수를 통하여 this.$refs.canvas1 html정보를 가져온다. - document.getElementByI..

기본적인 callback 함수와 promise를 사용한 함수를 보면 promise를 사용한 함수가 더 직관적으로 보기 편한 것을 알 수 있다. 가장 중요한 차이점은 변수 a 와 변수 b를 로그를 보면 알 수 있듯이 b는 promise를 반환한다. promise는 비동기상황을 일급값으로 다룬다. Promise는 다음 중 하나의 상태를 가집니다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. Promise의 then을 통해 계속 값을 이어 나갈 수 있다.

키보드 이벤트 - keydown : 사용자가 키를 처음 눌렀을 때 (키가 눌린 동안 계속 발생한다.) - keyup : 사용자가 키에서 손을 뗄 때 - keypress : 사용자가 눌렀던 키의 문자가 입력되었을 때 나타난다. 마우스 이벤트 - click : 사용자가 마우스를 올린 곳에 버튼을 눌렀다 뗄 때 나타난다. - mousedown : 사용자가 마우스 버튼을 누르고 있을 때 - mouseup : 사용자가 마우스 버튼을 뗄 때 - mousemove : 사용자가 마우스를 움직일 때 - mouseover : 사용자가 어떠한 요소에 마우스를 움직였을 때 - mouseout : 사용자가 어떠한 요소 바깥으로 마우스를 움직일때 포커스 이벤트 - focus, focusin : 포커스를 얻었을 때 - blur, ..

JSON.stringify() 와 JSON.parse()를 알아보자. JSON.stringify()은 JSON 객체를 문자열로 변환시켜 준다. JSON.parse()은 반대로 생각하면 된다. 문자열 -> JSON 객체 먼저, test1변수에 자바스크립트 객체를 선언한다. data 변수에 stringify()메서드를 사용하여 결과값을 보자. data변수에 JSON형식의 문자열로 바꿘것을 확인할 수 있다. data2 변수에 parse메서드를 사용하면 결과값에 문자열에서 JSON객체로 변환 것을 확인할 수 있다.

ES6에서는 간편하게 메서드를 추가할 수 있는 문법이 생겼다.test1과 test2의 차이점을 보면 알 수 있다. (메서드 사용법)

문자열 값을 다룰 때 주로 String 객체의 속성이나 메서드를 사용한다. 또한 String 객체는 전역 객체 이므로 스크립트의 어디서나 사용 가능하다.문자열 내의 각문자에는 인덱스 번호라고 부르는 번호가 자동 생성 예제를 보며 이해를 하자.

Node 객체- 모든 DOM객체는 Node 객체를 상속 받는다. 관계 API- 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다. Node.childNodesNode.firstChildNode.lastChildNode.nextSiblingNode.previousSiblingNode.contains()Node.hasChildNodes() 노드의 종류Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다. Node.nodeType -노드의 종류에 따라서 정해진 상수가 존재한다.for(var name i..

Element 객체-엘리먼트를 추상화한 객체이다. 식별자API-문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API Element.classList - classname보다 편리하다.Element.className -클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다.Element.id -단 하나만 등장할 수 있는 식별자이다 java Element.tagName -해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다. java 조회API-엘리먼트의 하위 엘리먼트를 조회하는 API Element.getElementsByClassNameElement.getElementsByTagNameElement.querySelectorElement.querySelectorAll 속성API-엘리..

DOM문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다.document.getElementsByTagName 예제) html html html document.getElementsByClassName 예제) css document.getElementById 예제)css document.querySelector 예제) html html html html html html 라이브러리- 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다,jquery - DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jquery를 이용해서 객체를 조회하는 방법에 대해서 설명$('li').css('color','red');$..

BOM(Browser Object Model)웹브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단이다. 전역객체 Windowwindow.alert =alert //window란 전역객체 사용자와 커뮤니케이션 하기alert('') confirm('ok?') - true or false 실행 예제) prompt - 사용자가 입력한 값을 받아서 자바스크립트가 얻어낼수있는 기능 Location 객체문서의 주소와 관련된 객체로 window 객체의 프로퍼티다. 이 객체를 이용해서 원도우의 문서 URL을 변경할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다.console.log(location.toString(), location.href(); -현재 url값cons..