자바스크립트49 자바스크립트 객체 예제 //방법1.function Car(name,color){this.name = name;this.color = color;this.show = function(){console.log(name, color)}} var car1 = new Car('morning','blue');car1.show(); //방법2. 프로토타입 이용 function BigCar(name, color){this.name = name;this.color = color;} BigCar.prototype.show = function(){console.log('bigcar' ,this.name , this.color)}//자식 객체 1var bigcar1 = new BigCar('churare','white');bigcar1.show().. 2018. 10. 15. 자바스크립트로 블록체인 구현 강좌 11 - 나만의 비트코인 발행하기 자바스크립트로 블록체인 구현 강좌 11 - 나만의 비트코인 발행하기지난 포스팅에서 하나의 네트워크에서 블록체인이 어떻게 작동이 되는지 살펴보았다. 이번포스팅에서는 여러개의 노드, 즉 컴퓨터들이 참여를 할때 블록체인 데이터가 어떻게 기록되는지 살펴보겠다.순서1. api.js 파일 이름을 networkNode.js 로 변경하자. 2. networkNode.js 파일 윗 부분에 동적 포트관련 변수 선언해준다.//동적 포트 package.json script 객체에서 2번째 방에 들어있는 데이터 3001,3002,3003 ...3005var port = process.argv[2];3. app.listen 을 아래와 같이 바꿔 준다.//동적 포트app.listen(port,function(){ console.l.. 2018. 5. 31. 자바스크립트로 블록체인 구현 강좌4 - 나만의 비트코인 발행하기 자바스크립트로 블록체인 구현 강좌4 - 나만의 비트코인 발행하기 지난 포스팅에 이어서 이번시간에는 저번 포스팅에서 작성한 마지막 블락 가져오기 함수와 새로운 트랜젝션 생성하기 함수를 test.js 에서 한번 찍어 보겠다. 그리고 트랜잭션과 새로운 블락이 생겼을 때 , 그리고 새로운 블록이 생긴 이후 트랜잭션 데이터는 어떻게 변하는지 이 관계를 살펴보도록 하자. test.js로 이동해서 새로운 블락을 생성하는 함수와 새로운 트랜젝션을 생성하는 함수를 하나씩 작성한다. //blockchain.js 모듈을 이곳에서 가져다 쓰겠다.const Blockchain = require('./blockchain') //위에서 가져온 모듈의 객체를 만든다.const bitcoin = new Blockchain(); //새.. 2018. 5. 26. 자바스크립트로 블록체인 구현 강좌2 - 나만의 비트코인 발행하기 자바스크립트로 블록체인 구현 강좌2 - 나만의 비트코인 발행하기 지난 포스팅에서는 자바스크립트로 블록체인 구현을 위한 셋팅과 자바스크립트의 데이터구조와 프로토타입에 대한 기본 지식을 알아보았다. 이번에는 지난번 포스팅에서 구현한 내용을 직접 console.log로 찍어보면서 대충 아~ 이런거구나 하고 감을 잡아보자blockchain.js 모듈화 하기//블록체인 데이터 구조function Blockchain(){ this.chain = []; this.newTransactions = [];} //블록체인 프로토 타입 함수 정의Blockchain.prototype.createNewBlock = function(nonce,previousBlockHash,hash){ //새 블록 객체 const newBlock.. 2018. 5. 25. [자바스크립트 객체지향] 3 객체와 프로퍼티 종류 정리 객체의 이해 자바스크립트 객체는 프로퍼티가 키/값 쌍으로 되어 있는 만큼 해시 맵에 빗대어 생각하면 이해하기 쉽다. 객체 프로퍼티에 접근할 때는 점 표기법 또는 각괄호 표기법 중 무엇을 해도 상관없다. 프로퍼티에 값을 할당하면 언제든 객체에 새 프로퍼티를 추가 할 수 있으며 delete 연산자를 사용하면 언제든 프로퍼티를 제거할 수 있다. 프로퍼티의 존재 여부는 프로퍼티 이름과 객체를 in 연산자와 함께 사용하면 알 수 있다. 이때 고유 프로퍼티만 확인하고 싶다면 모든 객체에 대 포함되어 있는 hasOwnProperty()를 사용하면 된다. 모든 객체 프로퍼티는 기본적으로 열거 가능하다. 열거 가능하다는 말은 for-in 반복문이나 Object.keys()를 사용할 때 볼 수 있다는 뜻이다. 프로퍼티는 .. 2017. 6. 22. [자바스크립트 객체지향] 1 원시타입과 참조타입 정리 원시타입과 참조타입 자바스크립트에서는 원시 타입(primitive type) 참조 타입(reference type)이라는 두 가지 자료형을 제공한다.숫자, 불린값, null과 undefined는 원시 타입이다. 객체, 배열, 함수는 참조 타입이다.원시 타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을 보관한다.참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다. 참조는 참조 타입 데이터의 주소이지 해당 데이터의 값이 아니다.원시 타입 변수 복사각 변수 간에 원시 타입 데이터를 복사할 경우 데이터의 값이 복사된다. 다음 예제를 보자.var x = 100; // 원시 .. 2017. 6. 19. [node js] 자바스크립트 페이지이동 & 뒤로 가기 *자바스크립트 뒤로가기 쿼리 뒤로가기 *서버에서 auth 객체를 view 에 던져서 존재하면 페이지를 보여주고 없으면 location.href로 바로 페이지 강제 이동 2017. 6. 15. [node js] 자바스크립트 동적구현&함수에 값넣고 호출 할때 에러해결 동적쿼리 생성 output += ''; } 문제는 음...동적쿼리를 생성하고 ...ajax로 값을 받아와서 동적 쿼리에 넣어 그 값을 함수에 던져준다...숫자는 잘들어가지는데 문자를 던지니깐 계속 에러가 났다.출력해보니..... undefind 하면서 정의 할 수 없다고.. 3시간 넘게 삽질했다.. 그래서 구글링!!!인자 사이에 \'' 요런걸 넣어라네.....갈길이 멀다.ㅠㅠ *참고acceptedYou need to wrap the input item.store_code with quotation marks; otherwise, it tries to treat it as a variable, not a string:html += ''; 2017. 6. 14. [생활코딩 함수] 함수 호출 5 1. 2. 2017. 6. 5. [생활코딩 함수] arguments 4 1. 2. 2017. 6. 2. [생활코딩 함수] 값으로서의 함수 2 1. 2 3 4. 2017. 5. 31. [생활코딩 함수] 유효범위 1 2 3 4. 5 6 7. 8 9. 2017. 5. 30. [초미니프로젝트] 자바스크립트 연락처 저장하기 구현 [2] 하...일단 저장하기 성공....완전빡샘..추가하기 누르면 위의 사진처럼 빈 행이 생긴다.빈행의 칸을 클릭하면 활성화 되고 값입력 가능하다값입력후 저장하기 누르면 객체 형태로 배열에 저장된다.하...ㅜㅜ 자바스크립트 dom 개념인데..이렇게 헤메다니..분발하자!!!!!!!!!!!!!!! 연락처 목록 번호이름 나이연락처주소직업취미 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107.. 2017. 5. 23. [초미니프로젝트] 자바스크립트 연락처 구현 준비 [1] 그동안 자바 스크립트 사용을 오래 안했네.. 감이 가물가물...몽땅 잃어버리기전에 간단한 프로그램하나 만들어봐야겠다.아주간단한 배열, 함수, 객체 반복문, 조건문 같은 개념 이용해서 연락처 리스트 만들어보기! 프로그램 예) 연락처 리스트 이름 나이 연락처 주소 직업 취미 홍길동 28 010-1234-5678 서울시 관악구 신림로 18 학생 볼링 김귀남 29 010-5468-5466 서울 종로구 인사동길 100 학생 축구 김동글 30 010-6879-7866 서울 관악구 신림로 14 학생 복싱 추가하기 저장하기 찾기 삭제 1 추가하기 누르면 위에 표에 칸이 생긴다. 2 추가된 빈간이 생긴곳에 마우스 클릭을 하면 텍스트가 활성화되면서 글을 적을 수 있다. 3 저장하기를 누르면 리스트에 뿌려진다. 4 텍스트 .. 2017. 5. 22. 1-2 자바스크립트로 우편번호 문제를 해결해보자 우편번호 정렬 문제를 해결해보자.알고리즘을 그려야 하지만 간단한 문제일 것 같아서 글로만 순서를 작성해 봤다.버튼1#우편번호 전체 개수 출력1.텍스트 칸에 5자리 우편번호를 입력 받는다.1-1. 앞뒤 공백 자르기를 통해서 입력된 우편번호를 3자리로 만들고 문자열 합치기로 전체 값을 하나로 합친다.2.우편번호 총개수를 파악한다.3.배열에 집어 넣는다. 버튼2#우편번호 중복제거 버튼구현4. 우편번호 중복값을 제거 한다.5. 버튼을 누르면 중복 제거된 우편번호의 개수를 출력한다. (우편번호 중복제거를 하지 않고)버튼3# 우편번호별 개수를 파악해서 테이블에 출력와...대박 1-2시간안에 끝날 줄 알았는데... 총 5시간 정도 걸린것 같다. 아오...... 위의 그림에서 우편번호부분을 드래그해서 메모장에 옮긴다음.. 2017. 3. 28. [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] 외부모듈 필수개념개념설명ejs.모듈/jade 모듈웹 페이지를 동적으로 생성하는 템플릿 엔진 모듈supervisor 모듈파일의 변경 사항을 자동으로 인식하고 종료 후 다시 실행forever 모듈웹 서비스 장애와 같은 예외 상황을 대비하고자 만들어진 모델npm install 모듈외부모듈을 설치할 때 사용/설치한 모듈은 내장모듈처럼 사용가능npm init 명령node.js 프로젝트를 생성할 때 사용package.json 파일node.js 프로젝트의 환경 설정 정보를 담은 파일 node.js는 npm 기반으로 모듈을 공유한다. 설치 $ npm install 모듈명 외부모듈 사용// 모듈을 추출합니다.var ejs = require('ejs');var jade = require('jade'); ejs 모듈ejs 모듈은 템.. 2017. 3. 11. [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. [자바스크립트 기초]제이쿼리 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. [자바스크립트 기초]함수 메서드 객체 함수와 메서드함수는 특정 작업을 수행하기 위해 필요한 일련의 구문으로 구성된다. 메서드는 함수와 동일하지만 객체 내에 만들어진다는 점이 다르다. 객체실제 세계를 모델화하기 위해 객체를 사용한다.객체는 속성과 메서드로 구성된다. 내장객체브라우저는 인터랙티브한 웹 페이지를 개발하기 위한 도구의 역할을 수행하는 다양한 종류의 객체들을 제공한다. 함수란 무엇인가?함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재사용할 수 있다. 기본적인 함수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 2 다음
