자바스크립트 기초27 [node.js] express 모듈2 http 모듈과 express 모듈로 만든 서버의 가장 큰 차이점은 express 모듈은 request 이벤트 리스너를 연결하는데 use() 메서드를 사용한다는 것.이유는 use() 메서드는 여러번 사용할 수 있다. 그리고 use() 메서드의 매개변수에 function(request,response,next){} 형태의 함수를 입력한다. next는 다음에 위치하는 함수를 의미한다. 예)// 모듈을 추출합니다.var express = require('express'); // 서버를 생성합니다.var app = express(); // 미들웨어 설정(1)app.use(function (request, response, next) { console.log("첫 번째 미들웨어"); next();}); // 미들.. 2017. 3. 13. [node.js] express 모듈 1 express 모듈 http 모듈로 웹 서버를 생성하면 많은 일을 직접 처리해야 하므로 기존에 서버 생성 개념에 익숙하지 않다면 어렵다. express 모듈은 http 모듈에 여러 기능을 추가해서 쉽게 사용할 수 있게 만든 모듈이다. 개념개념설명express 모듈http 모듈처럼 사용할 수 있지만 훨씬 더 많은 기능이 있는 외부모듈미들웨어express모듈 use()메서드의 매개변수에 입력하는 함수를 말한다.router 페이지 라우팅을 지원하는 미들웨어static지정한 폴더에 있는 내용을 모두 웹서버 루트 폴더에 올릴 때 사용morgan웹요청이 들어왔을 때 로그 출력cookie parser요청쿠키를 추출body parserpost 요청 데이터를 추출한다.connect-multipartymultipart/f.. 2017. 3. 12. [자바스크립트 기초]제이쿼리 4 폼 요소 선택하기셀렉터설명:buttonbutton 및 type 특성값이 button인 요소들을 리턴:checkboxtype 특성이 checkbox인 input 요소들을 리턴:checked체크박스 및 라디오 버튼들중 체크된 요소들 리턴:disabled비활성화된 모든 요소 리턴:enabled활성화된 모든 요소 리턴:focus현재 포커스를 가진 요소 리턴:file모든 파일 입력 요소들을 리턴한다.:image모든 이미지 요소들을 리턴한다.:input모든 button, input select textarea 요소들을 리턴한다.:password모든 비밀번호 입력 요소들을 가져온다.:radio모든 라디오 입력 요소들을 가져온다.:reset모든 리셋 버튼 요소들을 가져온다.:selected선택된 모든 요소들을 가져온다.. 2017. 3. 5. [자바스크립트 기초]제이쿼리 3 event 객체모든 이벤트 처리 함수는 event 객체를 전달받는다.이 객체는 발생한 이벤트와 관련된 메서드와 속성을 가지고 있다. 예)$(‘li’).on(‘click’,function(e){ eventType = e.type;}); 1.event 객체에 매개변수 이름을 지정한다.2.함수 내에서 event 객체를 참조하기 위해 이 이름을 사용한다.3. 익숙한 마침표 표기법을 이용하여 객체의 속성과 메서드를 사용한다. 속성설명type이벤트의 종류which불려진 버튼이나 키data이벤트가 발생했을 때 함수에 전달된 추가 정보들을 가지고 있는 객체표현식target이벤트가 발생한 dom요소pageX뷰포트의 왼쪽 모서리로부터 마우스까지의 위치pageY뷰포트의 상단으로부터 마우스까지의 위치timeStamp 메소드설.. 2017. 3. 4. [자바스크립트 기초]제이쿼리 2 요소의 콘텐츠 가져오기.html() 메서드와 .text() 메서드는 요소의 콘텐츠를 조회하는 기능과 수정하는 기능을 모두 제공한다. 이 페이지는 요소의 콘텐츠를 조회하는 방법에 초점을 맞춘다. .html()jQuery 객체집합으로부터 정보를 조회할 목적으로 이 메서드를 호출하면, 첫 번째 요소와 그 하위 노드들의 html 코드만을 얻게 된다. 예) $(‘ul’).html(); 메서드는 다음의 코드를 리턴한다. fresh figs pine nuts honey balsamic vinegar 반면, $(‘li’).html() 메서드는 다음 코드를 리턴한다.fresh이 경우 첫 번째 요소의 콘텐츠만 리턴된다.모든 요소값을 조회하려면 .each() 메서드를 사용한다. .text()jQuery 객체집합으로부터 텍스.. 2017. 3. 3. [자바스크립트 기초]제이쿼리 1 #요소의 선택jquery는 dom 쿼리 대신 간편하게 css 스타일의 셀렉터를 이용하여 요소를 선택하는 방법을 제공한다. #작업실행jqury는 dom 트리를 수정하기 위한 기능이나 요소에 애니메이션 효과를 적용하는 기능, 여러 요소에 대해 루프를 수행하는 기능 등을 모두 한줄의 코드로 작업할 수 있는 메서드를 제공한다. #이벤트 처리jquery는 구 버전의 브라우저를 특별히 고려하지 않고도 손쉽게 선택된 요소에 이벤트 리스너를 등록할 수 있는 메서드를 제공한다. jquery 란 무엇인가? jquery는 웹페이지에 포함시킬 수 있는 자바스크립트 파일이다. css 형식의 셀렉터를 이용하여 요소를 찾을 수 있으며, 그런 후에는 jqeury 메서드들을 이용하여 해당 요소에 원하는 작업을 수행할 수 있다. 1.c.. 2017. 3. 2. [자바스크립트 기초 ]이벤트의 종류와 개념 2 이벤트의 흐름HTML 요소는 다른 요소의 내부에 중첩된다. 그래서 링크에 마우스를 가져가거나 클릭하면 그 부모 요소에도 마우스를 가져가거나 클릭한 셈이 된다.이벤트 버블링이벤트가 사용자의 동작에 직접적으로 영향을 받은 특정 노드로부터 시작하여 가장 무관한 요소를 향해 바깥으로 전파되어 나가는 방식이다. 대부분의 브라우저가 기본적으로 지원하는 방식이다. => => => => 이벤트 캡쳐링이벤트가 가장 바깥쪽의 노드로부터 시작해서 안쪽으로 전파되어 들어오는 방식이다. => => => => 현재의 모든 브라우저들은 기본적으로 이벤트 캡쳐링 대신 이벤트 버블링을 사용한다. 리스너를 사용하는 경우 addEventListener () 메서드의 마지막 매개변수에 설정하는 값에 따라 발생한 이벤트의 전파 방향을 선택할.. 2017. 3. 1. [자바스크립트 기초] 함수 이벤트 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. [자바스크립트 기초] 스크립트 왕기초 개념 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. 12.자바스크립트 기초 문법 (FORM) //예졔)================================ //예졔)================================ //예졔)================================ //예졔)================================aabbcc def //예졔)================================ aa bb cc //예졔)================================http://www.daum.net">다음http://www.naver.com">네이버http://www.yahoo.com">야후 //예졔)================================과정 목록 java javascript oracle //예졔)========.. 2016. 12. 29. 11.자바스크립트 기초 문법 (window) # window의 open메서드 a.html====== b.html====== 장영실 # window.close() a.html====== b.html====== 장영실 # window.opener[ex]a.html====== b.html====== # setTimeout, setInterval, clearTimeout, clearInterval 초 var 객체=document.getElementById("문자열id이름");[ex] window.opener[ex]a.html====== b.html====== frame태그 a.html====== b.html====== b.html문서입니다. c.html====== c.html문서입니다. 예)a.html====== b.html====== b.html문서입니.. 2016. 12. 29. 왕 기초 자바스크립트 - 함수 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. 10.자바스크립트 기초 문법 (노드메서드 2) 마우스를 따라다니며 그림이 움직인다. 2. document 구조 (배열) 3. name으로 접근 가능하다 # var 변수=document.getElementById("id이름"); ----------------------------------------------------------- # http://msdn.microsoft.com/ko-kr/library/d1et7k7c(v=vs.94).aspx # 노드관련 메서드 document.createElement("태그명") document.createTextNode("텍스트") 객체명.insertBefore(newChild,refChild) 객체명.replaceChild(newChild,oldChild) 객체명.removeChild(oldChild) 객체.. 2016. 12. 27. ★자바스크립트 연습 문제 (노드) 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. 9.자바스크립트 기초 문법 (정규표현식&아이디체크&위치표시) 1. 2 .3. 다음으로 이동 4. 영단어 : 5. 사이트를 선택하세요 네이버다음 구글 6. 사이트를 선택하세요 사이트를 선택하세요 네이버다음 구글 7. 마우스 이벤트 8 이름 : .9 이름 : 전화번호: 아이디 이름 이메일 .10 과일선택선택하세요사과배바나나 .11 위치정보 .12 위치정보 .13 파일읽기 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111.. 2016. 12. 23. 7.자바스크립트 기초 문법 (exception&문자열) 1. 2. 3. 4. 1부터 100까지확인5. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160.. 2016. 12. 21. 6.자바스크립트 기초 문법 (문자열&아이디체크&배열) 1. 아이디 : 검사 2 3 4 입력 : 결과 : 5 6 7 8 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615.. 2016. 12. 21. 4.자바스크립트 기초 문법 (객체 선언&배열&form) 1. 2. 3. 4. 5. 6.. 필드1 필드2 필드3 7. 클릭 8. 이름: 직급 : 확인 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511.. 2016. 12. 20. 3.자바스크립트 기초 문법 (for문&구구단) 1 2 3 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616.. 2016. 12. 20. 2.자바스크립트 기초 문법 if 문 &form 1a: b: 2 첫번째 정수: 두번째 정수 : 합계 : 3. 클릭하세요 4. 숫자 숫자 : 추측횟수:힌트: 5. 숫자 숫자 : 추측횟수:힌트: 정답: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014.. 2016. 12. 19. 1.자바스크립트 기초 문법(요소에 접근&대화상자&배열&함수) 1. 인라인 자바스크립트 2. 3. 4. 2. test var s; //변수 선언(자료형이 없음) s = 100; // 가변자료형(우변의 데이터형에 따라 결정) document.write(s+" "); //웹브라우저에 출력 s="홍길동"; document.write(s+" "); 3. 문자 var s = "Hello World" var t = "How are you "+ "today"; //문자열 연결 document.write(s+" "); document.write(t+" "); //대문자로 변환 document.write(s.toUpperCase()+" "); // 소문자로 변환 document.write(s.toLowerCase()+" "); 4. 연산 function test(x,y){ x= p.. 2016. 12. 19. 이전 1 다음
