javascript17 [node.js] 이벤트 이벤트Node.js 의 큰 특징 중 하나는 이벤트 기반 비동기 프로그래밍이 가능하다는 점이다. 자바스크립트는 다른 프로그래밍 언어와 비교했을 때 함수 생성과 이벤트 연결이 굉장히 쉬우므로 이벤트 기반 프로그래밍을 하기 좋다. 큰 개념on(eventName, eventHandler) - 이벤트를 연결하는 메서드.emit() - 이벤트를 실행할 때 사용.EventEmitter 객체 – 이벤트를 연결할 수 있는 모든 객체의 어머니. 기존의 자바스크립트 이벤트연결 load를 이벤트 이름 또는 이벤트 타입 이라고 한다. 또한 매개변수로 입력한 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다. node.js에서 이벤트 연결// process 객체에 exit 이벤트를 연결합니다.process.on('exit', f.. 2017. 3. 9. [node.js] 기본 내장모듈 기본내장모듈 node.js는 기본적으로 여러 가지 모듈을 제공한다. 꼭 알아둘 개념개념설명node.js문서node.js의 주요 기능을 설명하는 문서다url모듈인터넷 주소를 다루는데 사용Query String 모듈url 객체의 쿼리를 다루는 데 사용한다.util 모듈node.js의 보조 기능을 모아두었다.crypto 모듈해시 생성과 암호와를 수행한다.File System모듈파일을 다룬다. node.js 문서를 보는 곳https://nodejs.org/dist/latest-v6.x/docs/api/ 1. os모듈 예)// 모듈을 추출합니다.var os = require('os'); // 모듈을 사용합니다.console.log(os.hostname()); //호스트 이름 리턴console.log(os.type.. 2017. 3. 8. [node.js] 입문 1.node.js 란?웹프로그래밍에는 스레드라는 것이 있다. 스레드는 하나의 프로그램 내부에서 실행되는 실행 흐름 단위를 말한다. 장점사용자에 대한 응답성 향상동시에 작업을 완료시킴 사용하는 곳네트워크 웹서버 또는 데이터베이스 통신시간이 오래걸리는 작업 단점많은 스레드로 코드 실행을 제어하면 복잡해지고 버그가 발생할 수 있다.스레드를 삭제하려면 삭제할 때 발생할 수 있는 문제와 처리 방법을 알아야 한다. 이러한 스레드의 단점을 해결하고자 내부적으로 node.js는 스레드를 알아서 처리하고 외부적으로는 스레드를 신경 쓰지 않고 개발할 수 있게 만든 소프트웨어 플랫폼이다. 차이?기존 웹 서버는 대부분 스레드를 기반으로 하는 동기 방식으로 네트워크 입출력을 처리한다. 반면 node.js는 이벤트를 기반으로 하.. 2017. 3. 7. [자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1 그동안 정리했던 자바스크립트 내용으로 아주 작고 작은 프로젝트를 만들어 보자!이 시점에서 계속 이론만 배우면 지루하다.작은 프로젝트로 흥미를 돋우기 위해서 배웠던 내용을 응용해서 만들 수 있는 과제(?)를 기획해 보았다.아래코드를 보기 전에 한번 생각 해보세요~ 테이블 칸에 있는 사진에 마우스를 올리면 해당 사진이 확대되어 나타난다. [사진에 마우스를 올려보세요]123456789 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 table{width:500px;height:500px;} td{border:sol.. 2017. 2. 28. [자바스크립트 기초 ]이벤트의 종류와 개념 1 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우resize브라우저의 창 크기를 조정했을 때scroll사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.이벤트설명keydown사용자가 키를 처음 눌렀을 때 keyup키를 땔 때 keypress사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생이벤트설명click사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때dbcl.. 2017. 2. 26. [자바스크립트 기초]DOM 문서객체모델의 이해 2 DOM탐색하기 페이지에 요소 노드가 존재한다면 다음 5가지 속성을 이용하여 다른 요소들을 선택할 수 있다. 이런 과정을 DOM 탐색이라고 한다. parentNode – 이 속성은 부모 노드를 찾는다.previousSibling – 이전 노드를 찾는다.nextSibling - 다음 노드를 찾는다firstChild - 첫 번째 자식 요소를 찾는다.lastChild – 마지막 자식 요소를 찾는다. (요소가 존재 하지 않을 때는 null 이 리턴된다.)(IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 문자를 텍스트로 취급하기 때문에 리턴하는 값은 브라우저에 따라 달라지게 된다.) 이전&다음 이웃 요소.HTML List Buy groceries fresh figspine nutshoneybalsamic vi.. 2017. 2. 25. [자바스크립트 기초]DOM 문서객체모델의 이해1 문서 객체 모델은 브라우저가 HTML 페이지의 모델을 생성하고 이 페이지가 브라우저 창에 보여지는 동안 자바스크립트를 이용하여 웹페이지의 내용에 접근하고 수정하기 위한 방법을 명시하고 있다. HTML 페이지에 대한 모델 구성하기브라우저는 웹 페이지를 로드한 후 , 이 페이지에 대한 모델을 메모리에 생성한다. HTML 페이지에 접근하고 수정하기DOM은 모델 내의 각 객체에 접근하고 내용을 수정하기 위한 속성과 메서드들을 정의하고 있다. 내용을 수정하면 브라우저에서 사용자가 보게 될 내용이 변경된다. DOM은 브라우저가 DOM트리를 이용하여 이 모델을 구성하는 방법을 명시한다.DOM이 객체 모델이라고 불리는 이유는 모델이 객체를 이용하여 구성되기 때문이다. 웹 페이지에 대한 모델로서의 DOM 트리브라우저는 .. 2017. 2. 24. [자바스크립트 기초]함수 메서드 객체 함수와 메서드함수는 특정 작업을 수행하기 위해 필요한 일련의 구문으로 구성된다. 메서드는 함수와 동일하지만 객체 내에 만들어진다는 점이 다르다. 객체실제 세계를 모델화하기 위해 객체를 사용한다.객체는 속성과 메서드로 구성된다. 내장객체브라우저는 인터랙티브한 웹 페이지를 개발하기 위한 도구의 역할을 수행하는 다양한 종류의 객체들을 제공한다. 함수란 무엇인가?함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재사용할 수 있다. 기본적인 함수var msg = '안녕하세요'; //함수 생성function updateMessage() { var el = document.getElementById(.. 2017. 2. 23. [자바스크립트 기초] 자바스크립트의 기본 명령어 구문: 스크립트는 컴퓨터가 단계별로 수행할 수 있는 일련의 명령이다.이 중 각각의 명령이나 단계를 구문이라고 한다.구문은 세미콜론으로 끝나야 한다. //구문var today = new Date();var hourNow = today.getHours();var greeting; // { } 코드블록의 시작과 끝을 알려준다. 구문은 코드 블록 내에 작성한다. if (hourNow > 18) { greeting = 'Good evening!';} else if (hourNow > 12) { greeting = 'Good afternoon!';} else if (hourNow > 0) { greeting = 'Good morning!';} else { greeting = 'Welcome!';}document.w.. 2017. 2. 18. [자바스크립트 기초] 스크립트 왕기초 개념 2 자바스크립트 언어는 html과 css와 함께 사용된다. 콘텐츠 계층.html 파일페이지의 구조를 만들고 의미를 부여한다. {css}콘텐츠가 보여지는 방법을 서술한다.(배경, 테두리, 글꼴, 색상 등) javascript()페이지의 동작을 변경하며 역동성을 부여한다. * 기본적인 자바스크립트 코드 작성하기 지금은 몇시? 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 인사 지금은 몇시? var today =new Date(); var hourNow=today.g.. 2017. 2. 17. [자바스크립트 기초] 스크립트 왕기초 개념 1 기초중의 기초 !! 컴퓨터는 데이터를 이용하여 세상을 표현하기 위한 모델을 만든다! 호텔, 자동차 같은 객체는 개발자가 데이터만 잘 만들고 전달해 주면 컴퓨터는 우리가 원하는 명령을 실행해서 작업을 수행할 수 있다. 객체와 속성컴퓨터에서 실제 세계에 존재하는 물리적인 물체는 다양한 종류(type)의 객체(object)로 표현된다. 개발자라면 그 객체들을 인스턴스라고 표현할 것이다.객체는 다음과 같은 정보를 가진다. 속성, 이벤트, 매서드 이 세 가지가 결합하여 객체를 표현하는 모델을 구성한다. 속성(특징): 자동차를 예를 들면 자동차의 속도, 색상, 크기 등이 속성이다. 속성은 이름과 값, 즉 name과 value로 구성된다. 예) 자동차의 속성이름 : 값제조사: 현대속도: 60km색상: 검정 실제 세계.. 2017. 2. 16. 왕 기초 자바스크립트 - 함수 var 처음만든함수 = function () { console.log("안녕하세요!");}; 처음만든함수();// 안녕하세요! ================== var 인사하기 = function (이름) { console.log("안녕하세요 " + 이름 + "님!");}; 인사하기("아이유");// 안녕하세요 아이유님! 인사하기("수지");// 안녕하세요 수지님! ==================var 고양이그리기 = function (반복횟수) { for (var i = 0; i < 반복횟수; i++) { console.log(i + " =^.^="); }}; 고양이그리기(5);// 0 =^.^=// 1 =^.^=// 2 =^.^=// 3 =^.^=// 4 =^.^= ==================.. 2016. 12. 29. ★자바스크립트 연습 문제 (노드) 3 # http://msdn.microsoft.com/ko-kr/library/d1et7k7c(v=vs.94).aspx# 노드관련 메서드 document.createElement("태그명") document.createTextNode("텍스트") 객체명.insertBefore(newChild,refChild) 객체명.replaceChild(newChild,oldChild) 객체명.removeChild(oldChild) 객체명.appendChild(newChild) 객체명.parentNode 객체명.childNodes 객체명.previousSibling 객체명.nextSibling 버튼을 누르면 4.dd 가 출력될 수 있도록 소스코드를 작성하시오. aa bb cc [an] var liTag=document.c.. 2016. 12. 27. 9.자바스크립트 기초 문법 (노드메서드) # nodeName 1 2 3 # tagName[ex] aaa bbb ccc # var 변수=document.getElementById("id이름");[ex] aaa bbb ID를 입력하세요~ ----------------------------------------------------------- aaa bbb ID를 입력하세요~ [ex] aa jafkldsjfl;ajdfk cc [ex] [ex] [ex] 1 2 3 4 5 6 [ex] 123 [ex] 가나다 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737.. 2016. 12. 27. 8.자바스크립트 기초 문법 (confirm&prompt&parseInt&이벤트처리&String&DATE) # 확인대화상자 # 입력대화상자 # 문자열을 정수로 바꾸는 함수 [ex] [ex] [ex] # 함수1 선언적함수2 내부함수3 익명함수 [ex] ---------------------------- [ex] # 이벤트처리[ex] [ex] [ex] [ex] -------------------------------------------------------------- ------- # 태그[ex] http://www.naver.com">연결 [ex]a.html====== 연결 b.html====== 가나다라마바사 [ex] 버튼 ------------------------------- 글자 # 태그[ex] # String[sy] 변수=문자열.charAt(인덱스); 변수=문자열.indexOf(문자열); 변수=문자.. 2016. 12. 26. ★자바스크립트 연습 문제1 아래소스코드를 for문으로 바꾸시오. 1 2 3 4 5 6 7 8 9 10 아래소스코드를 for문으로 바꾸시오. 버튼을 누르면 h1태그의 border-style을 solid로 border-color를 yellow로 바꾸시오. abc 테이블만들기 줄 칸 abc 아래소스코드를 for문으로 바꾸시오. 함수를 하나로 처리하시오. onmouseover 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041.. 2016. 12. 21. 4.자바스크립트 기초 문법 (객체 선언&배열&form) 1. 2. 3. 4. 5. 6.. 필드1 필드2 필드3 7. 클릭 8. 이름: 직급 : 확인 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511.. 2016. 12. 20. 이전 1 다음
