프로그래밍/JavaScript

프로그래밍/JavaScript

[ES6] JavaScript 문자열 ( string )

startsWith const str = "Hello, What is your name?"; console.log(str.startsWith("Hello")); // return => true console.log(str.startsWith("Helloo")); // return => false startsWith 는 문자열이 인자로 준 값으로 시작되는지 확인할 수 있는 함수이다. endsWith const str = "Hello, What is your name?"; console.log(str.endsWith("?")); // return => true console.log(str.endsWith("!")); // return => false endsWith 는 문자열이 인자로 준 값으로 끝나는지 확..

프로그래밍/JavaScript

[ES6] JavaScript 스코프 ( scope )

let function FuncA() { for(var i = 0; i < 5; i++) { console.log(i); } console.log(i); } 위의 코드를 실행했을 때 C#이나 C++과 같은 다른 프로그래밍 언어에서는 7번 줄에서 소멸된 변수인 i 를 사용하기 때문에 오류가 난다. 하지만 JavaScript 에서는 변수의 범위를 함수의 블록 범위로 보기때문에 오류가 나지 않고 5라는 값이 출력이 된다. 이와 같은 문제를 해결하기 위해서 도입된 변수 선언 방법이 let이다. let 은 C# 또는 C++ 같은 언어에 와 같은 범위의 변수를 선언하게 된다. 그래서 아래의 소스코드에서는 오류가 출력된다. function FuncA() { for(let i = 0; i < 5; i++) { cons..

프로그래밍/JavaScript

JavaScript 클로저 ( Closer )

function funcA() { var text = "Hello"; return function () { console.log(text); } } var funcB = funcA(); funcB(); 위의 예제에서처럼 자바스크립트에서는 함수를 객체로 표현하기 떄문에 함수를 값으로 사용할 수 있고 내부함수에서는 외부함수의 필드에 접근할 수 있다. funcA 함수를 실행하면 text 변수를 출력하는 익명함수가 반환되고 이값을 funcB 에 넣은뒤 실행하면 Hello 라는 값이 console 에 출력된다. 클로저란 내부함수가 외부함수의 필드에 접근할 수 있고, 외부함수는 외부함수의 필드에 접근하는 내부함수가 소멸될 때까지 소멸되지않는 특성을 의미한다.

프로그래밍/JavaScript

JavaScript 모듈 ( Module )

모듈이란 바닐라 자바스크립트에서는 존재하지 않는 개념으로 프로그램을 구성하는 작은 로직들을 의미한다. //index.html 위의 예제 코드에서 printHello 함수가 자주 사용되고 이 함수를 호출하려는 곳이 여러 곳일 때 위의 예제처럼 함수가 정의되어있으면 유지보수가 어렵고 사용되는곳마다 이 함수를 정의해주어야 한다. 이럴 때 모듈이 사용된다. // printHello.js function printHello() { alert("Hello"); } //index.html 위의 예제에서는 printHello 함수를 새로운 js 파일에 정의하고 js 파일을 index에서 불러와 사용하고 있다. js 파일의 이름은 원하는 파일명을 사용하면 된다.

프로그래밍/JavaScript

JavaScript 객체 ( Object )

객체 생성 // 객체 생성 방법 1 var member = { 'info' : {'name': 'MAJG', 'level': 100, 'human': true}, 'print' : function() { for(key in this.info) { console.log(`key : ${key}, value : ${this.info[key]}\n`); } } }; // 객체 생성 방법 2 var member = {}; member['info'] = {'name': 'MAJG', 'level': 100, 'human': true}; member['print'] = function() { for(key in this.info) { console.log(`key : ${key}, value : ${this.inf..

프로그래밍/JavaScript

행정구역지도 만들기

나는 예제가 많이 제공되고있는 카카오의 지도 API 를 활용하였다. 지도의 생성및 활용법은 http://apis.map.kakao.com/web/ 에서 가이드를 따라하면된다. 여기서는 이전 게시글에서 활용및 수정하였던 대한민국행정구역 SHP 파일을 사용한다. FTP 경로에 이전게시글에서 만든 geoJSON 파일과 index.html, mapcontrol.js 를 업로드한다. 각 소스코드 파일들을 아래와 같이 작성한다. index.html mapcontrol.js var map; function Initialization(_map) { map = _map; } function DrawPolygon() { $.getJSON("geo.json", function(geojson) { var data = geoj..

MAJG
'프로그래밍/JavaScript' 카테고리의 글 목록