웹사이트개발

2018년 6월 21일 목요일

[JavaScript 예제] 065 배열/객체의 내용을 순서대로 처리하기

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>배열/객체의 내용을 순서대로 처리하기</title>
</head>
<body>
  <ul id="list"></ul>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  $(function() {
    var animal = [
      { name: '프렌치불독',
        type: '강아지'},
      { name: '요크셔테리어',
        type: '강아지'},
      { name: '닥스훈트',
        type: '강아지'},
      { name: '스코티시폴드',
        type: '고양이'},
      { name: '포메라니안',
        type: '강아지'},
    ];

    $.each(
      animal,
      function(index, value) {
        // '고양이'가 발견되면 출력을 중지
        if(value.type == '고양이') { return false; }
        $('<li></li>')
          .append(value.name)
          .appendTo('#list');
      }
    );
  });
  </script>
</body>
</html>

2018년 6월 20일 수요일

[JavaScript 예제] 064 해시/객체들 병합하기

객체/해시(연관 배열)를 결합하려면 jQuery의 $.extend 메소드를 이용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>해시/객체들 병합하기</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  var data1 = { id:10, name:'Ava' }
  var data2 = { age:40, married:true }
  var data3 = { blood:'A', name:'David' }

  $.extend(data1, data2, data3);
  console.log(data1);
  // 결과: {id: 10, name: "David", age: 40, married: true, blood: "A"}
  </script>
</body>
</html>

같은 이름 멤버가 존재하는 경우 나중의 것으로 덮어쓴다.

위의 경우에서 data1의 내용을 변경하지 않을려면 다음과 같이 한다.

var merged = $.extend({}, data1, data2, data3);

[JavaScript 예제] 062 배열 가지고 놀기

배열의 요소를 추가/삭제

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>배열 가지고 놀기</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  var data = ['팬더', '토끼', '코알라'];
  data.push('땅콩');
  data.unshift('강아지');

  console.log(data.toString()); // 결과: 강아지,팬더,토끼,코알라,땅콩
  console.log(data.pop());      // 결과: 땅콩
  console.log(data.toString()); // 결과: 강아지,팬더,토끼,코알라
  console.log(data.shift());    // 결과: 강아지
  console.log(data.toString()); // 결과: 팬더,토끼,코알라
  </script>
</body>
</html>

push() / pop() 메소드

배열의 끝 요소를 넣고 뺀다

unshift() / shift() 메소드

배열의 첫 요소를 넣고 뺀다

배열에 배열을 연결하기 ( concat() 메소드 )

배열 결합 ( 배열.join([구분문자]) )

배열 일부 빼내기 ( 배열.slice(시작위치 [,종료위치]) )

배열의 내용 치환하기 ( 배열.splice(시작위치, 요소수 [, 치환후의요소, ...] )

배열의 요소 정렬하기

배열.sort(function(m, n) {
...정렬규칙...
})

2018년 6월 12일 화요일

[JavaScript 예제] 055 정규 표현 사용

분류	패턴	매칭하는 문자열
기본	xyz	'xyz'라는 문자열
	[xyz]	x, y, z 중 1개의 문자
	[^xyz]	x, y, z 이외의 1개의 문자
	[a-z]	a~z 사이의 1개의 문자
	x\|y\|z	x, y, z 중 하나
양 지정	x*	0문자 이상의 x("to*"는 "t", "to", "too" 등에 일치)
	x?	0또는 1문자의 x("to?"는 "t", "to"에 일치)
	x+	1문자 이상의 x("to+"는 "to", "too" 등에 일치)
	x{n}	x와 n회 일치("[0-9]{4}"는 4자리 숫자)
	x{n,}	x와 n회 이상 일치("[0-9]{4,}"는 4자리 이상의 숫자)
	x{m,n}	x와 m~n회의 일치("[0-9]{2,4}"는 2~4자리 숫자)
위치 지정	^	앞부분이 일치
위치 지정	$	끝부분이 일치
문자 세트	.	임의의 1문자에 일치
	\w	대문자/소문자의 영문자, 숫자, 언더스코어(_)에 일치 ("[A-Za-z0-9_]"와 동일)
	\W	문자 이외에 일치("[^\w]"와 동일)
	\d	숫자에 일치("[0-9]"와 동일)
	\D	숫자 이외에 일치("[^0-9]"와 동일
	\n	개행(라인 피드)에 일치
	\r	복귀(캐리지 리턴)에 일치
	\f	폼피드에 일치
	\t	탭 문자에 일치
	\v	수직 탭에 일치
	\s	공백 문자에 일치("[\n\r\t\v\f]"와 동일)
	\S	공배 이외의 문자에 일치("[^\s]"와 동일)
	\~	'~'에서 나타내는 문자

JavaScript에서 이들의 정규 표현식 패턴을 해석하고 검색 등 기능을 제공하는 것은 RegExp 객체의 역할이다.

RegExp 생성자

var 변수 = new RegExp(정규표현, 옵션)

정규 표현 리터럴

var 변수 = /정규 표현/옵션

정규 표현식 옵션

문자열 전체에 매치하는가

대문자/소문자의 구분을 무시하는가

개행 코드를 행 첫머리/행의 끝으로 인식하는가(여러행일 경우)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>정규 표현</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  // test 메소드
  var ex = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/gi;
  var str1 = '샘플 파일은 http://www.Infopub.co.kr/에서 다운로드 할 수 있음';
  var str2 = '질문은 "게시판"으로 부탁드림';
  console.log(ex.test(str1)); // 결과 : true
  console.log(ex.test(str2)); // 결과 : false

  // search 메소드
  console.log(str1.search(ex)); // 결과 : 7
  console.log(str2.search(ex)); // 결과 : -1

  // match
  var str = str1;
  str += '질문은 HTTP://www.infopub.co.kr/로 부탁함';

  var result = str.match(ex);
  for(var i=0, len = result.length; i<len; i++) {
    console.log(result[i]);
  }
  // 결과
  // http://www.Infopub.co.kr/
  // HTTP://www.infopub.co.kr/

  // 정규 표현으로 문자열 치환
  var ex1 = /(http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?)/gi;
  console.log(str1.replace(ex1, '<a href="$1">$1</a>'));
  // 결과 : 샘플 파일은 <a href="http://www.Infopub.co.kr/">http://www.Infopub.co.kr/</a>에서 다운로드 할 수 있음

  // 정규 표현으로 문자열 문할
  var ex2 = /[\s\n\t]/gi;
  console.log('JavaScript Project'.split(ex2));     // 결과 : (2) ["JavaScript", "Project"]
  console.log('JS\n커뮤니티'.split(ex2));           // 결과 : (2) ["JS", "커뮤니티"]
  console.log('JS      Power프로젝트'.split(ex2));  // 결과 : (7) ["JS", "", "", "", "", "", "Power프로젝트"]
  </script>
</body>
</html>

2018년 6월 11일 월요일

[JavaScript 예제] 045 반올림 & n진수 구하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>반올림</title>
</head>
<body>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script>
  // 소수점 이하 수치 반올림하기
  console.log(Math.ceil(4.56));   // 결과 : 5
  console.log(Math.ceil(-4.56));  // 결과 : -4
  console.log(Math.floor(4.56));  // 결과 : 4
  console.log(Math.floor(-4.56)); // 결과 : -5
  console.log(Math.round(4.56));  // 결과 : 5
  console.log(Math.round(-4.56)); // 결과 : -5

  // 임의의 자릿수에서 소수점을 반올림하기
  var num = 123.456;
  console.log(num.toFixed(2));    // 결과 : 123.46
  console.log(num.toFixed(5));    // 결과 : 123.45600
  console.log(num.toPrecision(5));  // 결과 : 123.46
  console.log(num.toPrecision(8));  // 결과 : 123.45600

  // n진수 구하기
  num = 255;
  console.log(num.toString(2));   // 결과 : 11111111
  console.log(num.toString(16));  // 결과 : ff
  console.log(num.toString(36));  // 결과 : 73
  </script>
</body>
</html>

난수 구하기

console.log(Math.floor((Math.random() * 100) + 1));

2018년 5월 29일 화요일

[JavaScript 예제] 044 계층을 가진 네임스페이스 정의하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>계층을 가진 네임스페이스 정의하기</title>
</head>
<body>
  <script>
  var namespace = function(ns) {
    // 네임스페이스를 '.'로 분할
    var elems = ns.split('.');
    var parent = window;

    // 이후 네임스페이스를 차례로 계층화하면서 등록
    for(var i=0, len=elems.length; i<len; i++) {
      parent[elems[i]] = parent[elems[i]] || {};
      parent = parent[elems[i]];
    }

    return parent;
  };

  // Myapp.Recipe.Samples 네임스페이스를 등록
  var ns = namespace('Myapp.Recipe.Samples');
  // 네임스페이스 예하에 클래스를 정의
  ns.MyClass = function() {};
  var c = new ns.MyClass();
  console.log(c instanceof Myapp.Recipe.Samples.MyClass); // true
  </script>
</body>
</html>

[JavaScript 예제] 043 클래스 이름 충돌 피하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>클래스 이름 충돌 피하기</title>
</head>
<body>
  <script>
  var Info = Info || {};  // Info가 비어 있는 경우에만 새로운 이름 공간을 작성

  Info.Person = function(name, birth) {
    this.name = name;
    this.birth = birth;
  };

  Info.Person.prototype.toString = function() {
    return this.name + ' _ _ ' + this.birth;
  }

  var p = new Info.Person('이정우', new Date(1981, 5, 16));
  console.log(p.toString());
  </script>
</body>
</html>