아래 링크를 참조

https://opentutorials.org/module/904/6769

버블링과 캡쳐링은 addEventListener() 사용 시, 3번째 인자에 따라 구분된다.
true이면 캡쳐링이며, false 혹은 인자를 비워두면 버블링이다.

버블링 : 중첩된 태그에 등록된 이벤트를 가장 안쪽 태그부터 수행
캡쳐링 : 중첩된 태그에 등록된 이벤트를 가장 바깥쪽 태그부터 수행

웹브라우져 호환때문에도 그렇고, 거의 버블링을 사용한다.

http://output.jsbin.com/yozax/1/  <-- 웹 상에서 코드수정이 가능한 site 굿!

위 코드에서 이벤트 실행 전파를 막는 방법도 있다.
아래의 핸들러를 정의한 후에 이벤트 등록 시에 사용하면 가능한다.
아래 코드를 추가 및 수정하면, body 태그의 이벤트 까지만 호출된다.

참고출처 : https://opentutorials.org/module/904/6768

event target
->target은 이벤트가 일어날 객체를 의미한다.

event type
->이벤트의 종류를 의미한다.
   (https://developer.mozilla.org/en-US/docs/Web/Reference/Events)

event handler
-> 이벤트가 발생했을 때 동작하는 코드를 의미한다. 
    위의 예제에서는 alert(window.location)이 여기에 해당한다.

출처 : https://opentutorials.org/module/904/6629

** 이벤트 등록방법

1. inline : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
<input type="button" onclick="alert('Hello world');" value="button" /> <input type="button" onclick="alert('Hello world, '+this.value);" value="button" />

2. property listener : 
이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식
event 객체에는 여러가지 정보가 담겨있다!!(console.dir(event); 확인)

// I.E 8이하 버젼 호환을 위해서는 아래와 같이 추가 예외처리 필요

3. addEventListener() :
가장 권장하는 방식. 한 target에 여러 이벤트 등록 혹은 정의해 놓은 한 이벤트 핸들러를 여러 객체에 등록할 수 있다.

출처
https://opentutorials.org/module/904/6759
https://opentutorials.org/module/904/6760
https://opentutorials.org/module/904/6761

2008년 8월말 블로그 개설

2008년 ~ 2009년 대학시절 마지막 정리 & 취업준비 용도로 블로그 이용

2010년 12월 ironmask84.net 으로 도메인 포워딩

2010년 ~ 2014년
회사 취업 후 회사업무, 취미, IT 관련 포스팅
블로그 카테고리 구체화
심혈을 기울인 스킨 선택
사이드바 소극적 이용
구글애드센스 시도와 실패
나눔고딕 적용!! (http://hangeul.naver.com/index.nhn  와 http://jeeni.tistory.com/3 참조)

(포스팅 때는 글씨체 선택이 안되는데 css파일에 url 혹은 블로그에 폰트파일업로드 해서 본문영역부분에 폰트를
 적용해서 포스트를 view 할때는 나눔고딕으로 보임..  그리고 view하는 기기에 나눔고딕이 설치되어있어야 함.)
 
2015년 7월 ironmask.net 으로 도메인 포워딩

2015년 6월부터!!
HTML5 + JavaScript + CSS 에 대한 업무지식이 필요해짐에 따라 다시 의욕 충천!
사이드바 깔끔정리
티스토리 플러그인 적용!! (그 동안 관심이 없었다니 ㅠㅠ..  상당히 유용하다..)
양질의 포스팅
취미의 다각화

2016년 
생각만큼 포스팅을 못하였으나...
나름 꾸준히 진행 중... 그래도 많이 초라함 ㅠㅠ
계획했던 포스팅들을 계속 이어갈 계획
처음 본? 결산 페이지 : http://www.tistory.com/thankyou/2016/tistory/182876

2017년
2월 18일 10만 조회 돌파!! (기념 초대장 배포 진행 ^^)
2월 20일 카테고리 대폭 정리
3월        카테고리 Jquery 적용 (미포스팅 카테고리 숨김)
6월        구글 애드센스, 애널리틱스 적용, 반응형 웹 스킨 적용(Fastboot 스킨)
7월        반응형 웹 스킨 적용 후 Customizing, Addthis 공유버튼 적용, 구글맞춤검색 적용(애드센스 하위메뉴)
8월        공감과 광고 유도 메세지 서식 적용, 티에디션 다시 적용, 광고 최적화 중,  RSS 부분공개, 저작권 관련 처리!!
             웹마스터 도구를 활용한 ironmask.net 활성화 진행 (사이트맵 등록, RSS 등록 포함)
10월       본문 내에 상단 및 하단 광고 조정, 메인페이지 광고 크기 조정, 본문 하단 광고 조정
             일치하는컨텐츠 광고 적용(광고옵션이 아직 안떠서, 광고활용은 못하고 있음... 정확한 조건이??..)
11월       포탈사이트 ZUM에 검색등록, 댓글 캐릭터 사진 카카오 프렌즈 적용
12월       일치하는컨텐츠 광고옵션 적용
2017년 결산 페이지 : http://www.tistory.com/thankyou/2017/tistory/182876

2018년
1월        15만 조회 돌파 기념 초대장 배포!!
4월        네이버이웃커넥터 코드를 ironmask.net으로 새로 받아서 이웃추가 배너로 새로 적용
9월        반응형 웹 스킨이긴 하지만, 글을 PC에서 쓰고 모바일로 보면 불편감이 크므로,
            이를 해결할 방법 모색하기 (접기 기능 등 활용 필요)
10월      웹페이지 속도가 느리다.. 이를 해결할 방법 모색
            스피드는 ( https://testmysite.withgoogle.com ) 참고

2019년
1월        30만 조회 돌파!!
2월        티스토리 자체 https 보안강화 패치로 인해 fastboot 스킨에 사이드메뉴 오류 발생 해결
             (https://sunstar2.tistory.com/1919 블로거님 참고함.)
6월        키워드 검색순위 방법 도입 (https://ironmask.net/482 참고)

---- 향 후 계획----
카테고리 정리
스킨 최적화(HTML + CSS)
프로그래밍, 맛집, 여행, 기타, IT Security

여행 다녀온지 2년이 넘었지만, 이제서야 첫 업뎃 ㅠㅠ

이번 캄보디아 여행 준비하면서..

익스피디아 에서 숙소 예약한 것이 생각났다!!

이번 캄보디아 여행 숙소도 익스피디아로 할까 생각중!!

호텔은 홍콩 도심 중심이었는데, 정확한 위치는 가물가물.. 차차 다시 확인해보기로 하고,
지금 봐도 꽤 숙박료가 비싸네 ㅋㅋ 
그래도 꽤나 쾌적해던 걸로 기억함.

차차 업뎃하기로 하고 오늘은 숙소 정보 사진 한장 올림 :)

기본적으로 배열이 0,1,2 ... 와 같이 숫자를 인덱스로 해서 값을 담아내는 그릇이라고 하면,
JavaScript에서의 객체는 이 인덱스가 숫자도 가능하지만, 문자로도 가능한 점이 특징이다.

따라서, 타 프로그래밍 언어에서는 연관배열(associative array) 또는 맵( map), 딕셔너리(Dictionary)라는 데이터 타입이 객체에 해당한다.

ex)

var val1 = {};    // {}; 의 표현이 객체 생성이다.  []; 표현은 배열!

val1.val1 = 'ironmask';
val1.ironmask = 100;
val1['iromask2'] = 90;
==> Object {val1: "ironmask", ironmask: 100, ironmask2: 90}
==> val1['val1'] 은 "ironmask" 를 리턴
      val1['va'+'l1'] 과 같은 표현도 가능
      val.val1 과 같이도 사용 가능
===> 따라서, 'val1' 을 key라고 하고, 값을 value 로 부르는 경우가 많다.

한번에 값들을 정의하는 경우
// 이렇게 객체 내에 속성과 메소드를 그룹화해서 사용가능하므로, 이것이 JavaScript의 객체지향
var val1 = {
       'list' : {'ironmask' : 100, 'LG' : 90, 'Samsung' : 80}
       'show' : function() {
                  alert("hello world");
        }
}
val1['show']();  // 함수는 이렇게 사용

* Tip 
for(var key in val1) {    // for in 문이라고 한다. (배열에서도 동일하게 사용 가능)
console.log(val1[key]);   // key를 순회하면서, key에 대응하는 값들을 찍어준다.
}

그 동안, C, JAVA가 주력 언어였고..
C++도 학부시절에 기본 A~Z 까지는 배웠기에,
어느정도 절차적, 객체지향에 대해 개념이 있다고 생각해왔습니다만..

이번에 HTML5 를 접하게 되면서, 학부 때 잠깐 접한 JavaScript를 공부 중인데,
아직 적응이 안되고 있는 중 임요....

기존 알고 지낸 프로그래밍 언어의 함수의 용도는 동일하나,
쓰임새가 너무 자유자재라..
정리를 위해 아래 몇몇 Case를 올립니다.
(출처 : https://opentutorials.org/module/532/6508  참조)

1. 변수 Case
1) function a(){}
2) a = {

2. 매개변수 Case

3. 리턴 값 Case

4. 배열 Case

그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

Element객체와 jQuery

document.getElementById : return type은 HTMLLIELement
document.getElementsByTagName : return type은 HTMLCollection (유사배열)
-> 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection return
constructor 혹은 constructor.name 로 확인 가능

var li = document.getElementsByTagName('li');
var li2 = $(li);
위와같이 jQuery function 인 $(); 로 둘러싸면, return type이 jQuery 가 되지만,
복수일 경우 유사배열로 잡히며, li2[0], li2[1]... 각각은 HTMLLIELement 타입이 된다.
-> l1.constructor.name, li2.constructor.name, li2[0].constructor.name  로 확인 가능

document.getElementById('target').getAttribute(name);
==> ==> $('#target').attr(name);
document.getElementById('target').setAttribute(name, value) ;
==> $('#target').attr(name, value);

document.getElementById('target').hasAttribute(name);

document.getElementById('target').removeAttribute(name);
==> $('#target').removeattr(name);

Node 객체

Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild : 첫번째 자식노드
Node.lastChild : 마지막 자식노드
Node.nextSibling : 다음 형제 노드
Node.previousSibling : 이전 형제 노드

** Node 와 Node.nextSibling.previousSibling는 같다.  (이런 식으로 Chaining 식으로 사용 가능)

Node.nodeType node의 타입을 의미한다.
Node.nodeName node의 이름 (태그명을 의미한다.)

** 2015_08_28 추가!

querySelector() 이용 시, 태그의 class 속성 접근 시 매우 편리

this.calls.querySelector('.handled-call.incoming .additionalContactInfo');
위와 같은 방식으로 calls라는 변수(어느 태그값을 가져온 변수 document.getElementById 등 이용) 하위에
태그들 중 handled-call.incoming 클래스를 가진 녀석의 하위에 있는 녀석들 중 additionalContactInfo 클래스를 가진 녀석이 리턴된다.

attribute(HTML의 속성) VS property(JavaScript의 속성)

$().attr(jQuery를 통해 attribute 제어) VS $().prop(jQuery를 통해 property 제어)
=> setAttribute(), getAttribute == $().attr
   removeAttribute() == $().removeAttr

* property 방식을 사용하는 것이 더 속도가 빠르다고 한다.
* 그렇다면, property를 사용하는 것이 더 장점이 있다는 뜻인데..

  하지만, attr에서 사용하는 이름과 약간 다른 부분이 있는 문제가 있다.

  이를 jQuery에서는 교정해주는 아주 훌륭한 기능이 있다.
  즉, 아래 둘다 같은 결과를 리턴하게 된다.
  $('#t1').prop('className', 'important'); // className는 property 방식
  $('#t1').prop('class', 'important');     // class는 attribute 방식

나는 요즘 화두가 되고 있는 삼성물산과 제일모직의 합병에 관심을 많이 가지고 있다..

합병의 거대한 시너지가 목적이 아니라, 삼성그룹의 안정적인 승계를 위해 억지스런 합병을 진행하려한다고 맹비난하는 이들도 적지 않으며 좋지않게 보이기는 나도 마찬가지다.

제일모직의 지분을 많이 가지고 있는 이재용 씨가 삼성물산과 합병을 통해 삼성물산이 가지고 있는 삼성전자 4%등의 지분이 손아귀에 들어오게 되면, 삼성그룹의 왕으로 군림할 수 있다는 취지인 것 같다.

정식으로 재산 상속을 하게되면, 얼마만큼의 세금을 내야 하기에 이토록 많은 소액주주들의 반대에도 불구하고, 거행하려는 것일까..  미국의 대표적 재벌 빌게이츠나 워렌버핏과 비교했을 때 사회에 환원하는 정도가 부끄럽지 아니한가..

ISS 라는 가장 권위있는 국제 자문기관에서도 합병이 부당하다는 공지를 냈음에도,
현재 추세로 봤을 때, 정부 및 공공기관은 대한민국의 막강 대기업 삼성쪽에 손을 들어주는 것 같아 보이며, 이에 따라 언론은 당연히? 일방적인 삼성편을 들고 있어 보인다. 엘리엇이라는 미국의 헤지펀드사가 많은 지분을 가지고 반대편에 나섰으며, 이에 국내의 많은 소액주주들이 위임중에 있다.
다만, 타 외국세력의 움직임이 아직 미지수이다..

몇 일 전에 '수박합병' 이라는 우스광스런 말이 떠돌고 있다..
이것이 무엇이냐 하면, 삼성물산에서 직원들을 풀어서 삼성물산 주식을 한 1000주 이상 쯤 가지고 있는
소액주주들을 대상으로 한 손엔 수박을 들고 한 손엔 위임장을 가지고 가정집 방문하여, 합병찬성을 권유하고 있는 것이다..  이것만 봐도 삼성이 합병을 위해 얼마나 사활을 걸고 있느냐를 알 수 있다...

더욱 놀라운 것은....
오늘 포털사이트 네이버 메인 화면에서 왼쪽 중간쯤에 위치한 배너광고다....

아래에 몇몇의 내용이 있다.
과연 0.35 : 1 의 합병비율과 같은 비율의 주가를 기준으로 합병일에 딱 맞춰질까??

주식매수청구권은 굳이 이번 주주총회에서 반대 의결권을 표명하지 않아도
즉, 기권을 하여도 행사할 수 있다는 언급을 통해 반대표를 저지하고 있어 보인다.

7/17에 있을 주주총회의 결과와 함께 앞으로의 삼성물산 행방이 아주 흥미롭게 다가온다..
삼성이 이번 기회를 통해 사회에도 많은 환원도 하며,
국민들에게 사랑 받는, 국민대표기업이 되는 발걸음의 시작이 되길 바란다.

나 또한 삼성물산의 주주이며,
아직 중립에 있는 처지이지만, 수 많은 소액주주들을 응원합니다.

네이버 메인 배너 

삼성물산 합병관련 내용

DOM Tree는 아래와 같다.

그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

ex) HTMLLIElement : http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-74680021

* jQuery를 이용하면, 이러한 관계를 잘 몰라도 JavaScript 코딩이 수월하다.

즉, document.getElementById('ironmask').tagName 는 HTMLLIElement라는 객체를 반환합니다.
위 상수를 $()로 둘러싸게 되면, Jquery 타입을 갖게 됩니다.
아래처럼 대입해놓고, constructor 속성을 찍어보면 확연히 확인 가능합니다.

var sample = document.getElementById('ironmask').tagName
var j_sample = $(document.getElementById('ironmask').tagName)
console.log(sample.constructor)

1. 항공권

2. 예방접종

http://blog.naver.com/cyh266/220292412710
-> 황열병 접종, 파상풍 접종, 말라리아 약 처방, 장티푸스 접종, (A형간염, B형간염은 항체가 있으므로 패스)
     여친 풍진은 덤..
     -> 황열병 접종은, 인도차이나 4개국을 방문하기 6일 이내 황열병이 도는 나라를 방문한 경우 예방접종 증명서가 필요하며, 아프리카 및 남미 대륙에서 오는 경우가 이에 해당합니다. (또한 반대로, 아프리카 및 남미 대륙으로 입국하는 경우 해당국가에서 황열예방 증명서를 요구하기도 합니다.) 국내에서 출국하는 자의 경우 해당되지 않습니다.

결국, 보건소 방문 - 장티푸스 접종 무료, 말라리아 약 처방(4000원) + 약 값 (43000원)

3. 숙소

4. 가이드비용

첫째날 : 반데이스라이 + 톤레삽 호수 투어 (가이드 + 차량) 1인당 60달러
둘째날 : 앙코르와트, 앙코르톰, 따프롬 등 중요유적 (가이드 + 툭툭이) 2인해서 65달러, 1인당 32.5달러
셋째날 : 프놈꿀렌 + 뱅밀리아 (차량 + 기사) 2인해서 85달러, 1인당 42.5달러

==> 60 + 32.5 + 42.5 = 1인당 135달러

5. 공연 + 마사지 + 식비 + 기념품

6. 준비물
-> 옷/속옷, 냉장고바지, 샌달, 운동화, 여권, 비자용 사진, 휴대폰, 작은 가방, 캐리어, 모자, 수영복, 휴지/물티슈, 상비약(감기, 소화제, 후시딘 등), 1회용 마스크, 썬크림, 썬글라스, 모기기피제, 모기약, 두건, 손수건, 우의, 우산, 세면도구

http://dytlcmzl720.blog.me/220387837107

캄보디아 비자 : 공항이나 국경에 도착해서 발급하는 도착비자이며, 관광비자 30일은 30$, 15일은 25$

환전 : http://rage0524.blog.me/110189887863  
       (김해공항 외환은행 인터넷환전 최대 90% 우대, 서울역과 동급)

여행자 보험 : 

네이버 까페지기 블로그 : http://blog.naver.com/penink8

태사랑 : http://www.thailove.net/

소피악 (렌트 및 가이드 전문) : http://blog.naver.com/ssp_2011
소피악 후기 -> http://thailove.net/bbs/board.php?bo_table=cam_tuktuk&wr_id=4383&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EC%86%8C%ED%94%BC%EC%95%85&sop=and

여행 후기 : http://blog.naver.com/park968444/220309965272
http://blog.naver.com/mizi0216/220295250085
http://blog.naver.com/shenaneco/220402810726
http://younggenius.blog.me/30182593422

SIM Card
1) cell card
http://t-eng.tistory.com/129
http://t-eng.tistory.com/173
http://blog.naver.com/ifollowhim/80207269710

==================== 여행 다녀온 후

7. 총 정산
49,000 (광명->부산 행은 친구가 대신 줌) + 항공권 383,400 / 2 +  호텔 95,238 / 2 + 말라리아 약 47,000 / 2 +
보험 12,000 = 324,200 원

400 달러 모두 소진 ㅋㅋ => 47만 정도 (유적 입장료, 관광료, 식비, 기념품)

324,200 + 470,000 = 794,200원

약 80만원 정도로 캄보디아 3박 5일 여행 끝~~~

jQuery는 JavaScript에서 사용되는 편리하고 강력한 라이브러리 입니다.

자세한 내용은 아래 링크를 참고 하시면 됩니다. :)
-> http://jquery.com

* jQuery의 API 참고
-> https://api.jquery.com

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있고,
jQuery는 객체를 조회할 때 CSS 선택자를 이용합니다.

jQuery 라이브러리 사용 (jQuery’s CDN)
--> html 코드에 아래 코드를 추가하면 된다. :)
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

jQuery의 기본 Syntax
$('CSS의 선택자').css('color', 'pink');

$('li').css('color', 'pink');
====================================================================================

 $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다.
====================================================================================

* jQuery에서 attr과 prop의 차이!!
-> attr은 html의 attribute 실제 값을 리턴, prop는 그에 매칭되는 JavaScript의 property값을 리턴

DOM과 jQuery의 비교 Sample
아래의 코드는 동일한 결과를 가져오는데,  jQuery가 훨씬 편리한 것을 알 수 있다.

1. DOM을 사용한 경우

            var lis = document.getElementsByTagName('li');
            for(var i=0; i<lis.length; i++){
                lis[i].style.color='pink';   
            }

2. jQuery를 사용한 경우 (jQuery에서는 아래 한 라인으로 암시적 반복이 수행된다.)

            $('li').css('color', 'pink')

jQuery의 Chaining 문법
아래의 Chaining 문법을 통해 여러가지의 css 설정 적용이 한 Line 에서 가능하다. (멋짐..)

         $('#active').css('color', 'red').css('textDecoration', 'underline');
/* active 라는 id를 가진 요소에 red와 underline을 적용 */

jQuery의 조회 범위 제한 문법
아래와 같이 여러가지 방법을 통해 범위 제한 및 CSS 적용이 Chaining가 가능하다.

/* Javascript Sample */
console.info("hello world");

저는 3개의 블루투스 이어폰을 가지고 있습니다...

HBS-700, HBS-730, HBS-900 !!

모두 LG 블루투스 이어폰으로 멋지죠..

처음 700 제품을 사용할 당시 너무 편하고 좋았습니다.

문제는 AS 죠....

테크데이타 라는 OEM 회사를 둔 제품이어서..

2014년 초에 700 제품 수리 한 번 받은 적이 있습니다.
작은회사라, 택배를 보내서 수리 받고 택배로 다시 전달 받았었죠...
아래 링크 참조..
http://windwaker.net/1080#comment14496277

이번엔 또 700 제품에서 소리가 한쪽이 안나서..
AS맡기려 했더니....
2014년 언제 부턴가, LG서비스 센터에서 수리 해주나 봅니다..
악평이 좀 있어 걱정이네요.. 아래 링크 참조..
http://blog.naver.com/makerjoy1?Redirect=Log&logNo=220052419852

사실 700과 730은 여친에게 넘어갔다는 것이 함정... :)

나중에 AS 후기 올리겠습니다...
--> 2017년 6월 14일인 현재까지도 수리를 안하고 있었어요 ㅋㅋㅋ...
     다만 2016년에 HBS-900이 고장나는 바람에... LG서비스센터에서 수리를 맡겼고..
     한쪽이 문제였는데 양쪽다 케이블상태가 안좋다고 하여 양쪽다 갈고 3~4만원 들었던 기억이 있네요..
     당일 수리 가능하고..  900부터는 줄을 잡아당기는 것 때문인지 고장이 좀 잘 날 수 있을듯...