[JS] 객체/모듈/ UI&API /Javascript와 정규표현식

day024·2024년 10월 17일

HTML&CSS&JS

목록 보기
8/15

생활코딩 - 자바스크립트(JavaScript) 기본

객체

8. 객체(dictionary)

  • 인덱스로 문자를 사용하고 싶다면 객체(dictionary)를 사용해야 함.
    -다른 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

8.1 객체의 생성

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
var grades = {};
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;
var grades = new Object();
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

ex) sorialgi라는 이름(key)으로 저장된 값을 가져오는 법이다. 

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']);
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
alert(grades['sorialgi']);

8.2 객체와 반복문

  • 객체에는 객체를 담을수도 있고, 함수도 담을 수 있다. 
var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}
//결과 
key :   egoing value : 10
key :   k8805 value : 6
key :   sorialgi value : 80

8.3 객체 지향 프로그래밍

  • 서로 연관되어있는 관계를 그룹핑해 두는 것 
var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

9. 모듈

9.1 모듈이란

코드의 분리로 얻을 수 있는 장점

  • 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
  • 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
  • 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
  • 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)

순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다.
하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.

9.2 모듈의 사용

main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function welcome(){
            return 'Hello world'
        }
        alert(welcome());
    </script>
</body>
</html>

greeting.js

function welcome(){
    return 'Hello world';
}

main.html main.html을 수정한다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

JavaScript와 HTML은 완전히 다른 문법을 가진 언어다.
따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 HTML 태그가 script 태그를 통해 구분해서 알려줘야 한다.

브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다.
greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있다.

9.2.1 Node.js에서 모듈의 로드

node.circle.js (로드될 대상)

var PI = Math.PI;
  
exports.area = function (r) {
return PI * r * r;
};
  
exports.circumference = function (r) {
return 2 * PI * r;
};

node.demo.js (로드의 주체)

var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
           + circle.area(4));

//실행결과
F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js
The area of a circle of radius 4 is 50.26548245743669

9.3 라이브러리

  • 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.
  • 프로그래밍의 세계에는 휼룡한 라이브러리가 많다. 좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.

https://jquery.com/

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

10 UI&API

10.1 UI

User Interface의 약자, 사용자가 컴퓨터 시스템과 상호작용할 때 사용되는 방식으로 사용자는 시스템에서 필요한 작업을 요구하고, 시스템은 사용자의 요구(명령)을 받아 처리한다.

10.2 API

Application Programming Interface의 약자로 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다.

레퍼런스와 튜토리얼
프로그래밍을 공부하기 위한 자료는 크게 레퍼런스(reference)와 tutorial(안내서)가 있다. 통상 튜토리얼은 언어의 문법을 설명하고, 레퍼런스는 명령어의 사전을 의미하다. 본 수업은 자바스크립트에 대한 일종의 안내서라고 할 수 있고, 자바스크립트 사전은 레퍼런스라고 할 수 있다.

자바스크립트의 API
자바스크립트의 API는 크게 자바스크립트 자체의 API와 자바스크립트가 동작하는 호스트 환경의 API로 구분된다.

자바스크립트 API 문서
ECMAScript (표준문서)
자바스크립트 사전 (생활코딩)
자바스크립트 레퍼런스 (MDN)
jscript 레퍼런스 (MSDN)

호스트 환경의 API 문서
웹브라우저 API
Node.js API
Google Apps Script API

11.Javascript 와 정규표현식

정규표현식(regular expression): 문자열에서 특정한 문자를 찾아내는 것

11.1 컴파일

컴파일은 검출하고자 하는 패턴을 만드는 일이다. 우선 정규표현식 객체를 만들어야 한다.
객체를 만드는 방법은 두가지 방법
1. 정규표현식 리터럴 :

var pattern = /a/

2. 정규표현식 객체 생성자 :

var pattern = new RegExp('a');

+) 정규표현식 리터럴은 코드가 간결하고 고정된 패턴에 적합하지만, 동적 패턴 생성에는 부적합하다.
객체 생성자는 동적으로 패턴을 생성할 수 있는 유연함을 제공하지만, 코드가 길어지고 이스케이프 처리가 필요하다.

11.2 객체의 사용

정규표현식을 컴파일해서 객체를 만들었다면 이제 문자열에서 원하는 문자를 찾아 낼 수 있다.

RegExp.exec()

console.log(pattern.exec('abcdef')); // ["a"]

실행결과는 문자열 a를 값으로 하는 배열을 리턴한다.

console.log(pattern.exec('bcdefg')); // null

인자 'bcdef'에는 a가 없기 때문에 null을 리턴한다.

RegExp.test()
test는 인자 안에 패턴에 해당되는 문자열이 있으면 true, 없으면 false를 리턴한다.

console.log(pattern.test('abcdef')); // true
cnosole.log(pattern.test('bcdefg')); // false

문자열 객체의 정규표현식

String.match()
RegExp.exec()와 비슷하다.

console.log('abcdef'.match(pattern)); // ["a"]
console.log('bcdefg'.match(pattern)); // null
String.replace() //치환

문자열에서 패턴을 검색해서 이를 변경한 후에 변경된 값을 리턴한다.

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef

11.3 옵션

정규표현식 패턴을 만들 때 옵션을 설정할 수 있다.

i : i를 붙이면 대소문자를 구분하지 않는다.

var xi = /a/;
console.log("Abcde".match(xi)); // null
var oi = /a/i;
console.log("Abcde".match(oi)); // ["A"];

g : g를 붙이면 검색된 모든 결과를 리턴한다.

var xg = /a/;
console.log("abcdea".match(xg));
var og = /a/g;
console.log("abcdea".match(og));

11.4 캡쳐

캡쳐: 그룹을 가져와서 사용하는 기능/개념

괄호안의 패턴은 마치 변수처럼 재사용할 수 있다.
이 때 기호 $를 사용하는데 아래 코드는 coding과 everybody의 순서를 역전시킨다.

var pattern = /(\w+)\s(\w+)/; // \s : 공백
var str = "coding everybody";
var result = str.replace(pattern, "$2, $1");
console.log(result);

11.5 치환

아래 코드는 본문 중의 URL을 링크 html 태그로 교체한다. 

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

결과는 아래와 같다.

생활코딩 : <a href="http://opentutorials.org/course/1">http://opentutorials.

정규 표현식이란?

profile
day024
개발하는 감자
이전 포스트

[JS] 반복문/함수/배열

다음 포스트

[JS] 함수지향

0개의 댓글