2년 전에 제 블로그에 Atom 이라는 에디터를 소개한 적이 있습니다.

( http://ironmask.net/231 ) 

이 때 당시, Firefox OS를 이용해서 프로젝트 개발을 시도한 때였기 때문에 갑작스레 JavaScript 와 Html 을 학부 때 이후로 

손대기 시작했었죠;;  이 때 jQuery라는 것도 처음 써보기도 했었구요 ㅎㅎ

웹프로그래밍이 2000년대에 붐이 일어났다가, 한 동안 잠잠해 있었던 것 같았습니다.

하지만, html5가 탄생되면서, html5 + CSS + JavaScript 조합이라는 것으로 급부상하고 있습니다.

특히, 스마트폰의 대중화에 따라 웹 근접성이 매우 좋아짐에 맞물려서 더욱 빛을 발하고 있어요 ^^

아무튼 각설하고, 이 때는 단순히 이런 툴이 있다고 소개만 했었습니다. ㅋㅋ

이제는 IoT 관련 프로젝트를 진행하다가, 디바이스의 설정 및 모니터링을 웹으로 해보고자

다시금 웹프로그래밍에 손을 대었습니다. ( html + JavaScript + PHP 조합 )

새롭게 툴을 찾다가 2년 전에 매우 잠깐 써봤던 Atom이 여전히 추천 툴 중에 하나 더군요 :)
(SublimeText, Bracket 와 함게 웹에디터 툴로는 세 손가락에 듭니다. ㅎㅎ)

또 장점으로는 오픈소스로 만들어진 툴이며, 패키지(플러그인)도 상당히 강력하고 지원 수도 많습니다.

쓸만한 패키지를 소개하면서 이 글을 마치겠습니다. ^^

Emmet - Tab키로 자동완성

Syntax Hint - 문법 오류를 잡아줌 Linter, linter-js, linter-html, linter-css, linter-php 

atom-beautify - 자동 정렬 

minimap, minimap-highlight-selecetd, minimap-cursorline - 조그마한 맵을 통해 전반적인 소스현황 모니터링 가능

pigments - 코드 내에 컬러를 직관적으로 보여줌

Remote-FTP - FTP로 외부디바이스에 있는 소스코드에 바로 접근 가능

 File - Setting - Editor 메뉴에 기본 설정 항목이 많습니다.  
 추천 내용으로는 http://dickymicky.blog.me/220950885317 을 참고해주세요 ^^ 

 여기서 패키지 검색을 하신 후, 인스톨 하시면 됩니다. ^^ 

 여기서는 인스톨 된 패키지 목록 확인이 가능해요~~ ^^ 

1. div 태그 초간단 레이아웃
http://blog.naver.com/susieredrum?Redirect=Log&logNo=150143093500

2. table 태그 초간단 레이아웃
http://sozoo4u.blog.me/220290918849

아래 참고..

http://programmingsummaries.tistory.com/325

http://inspiredjw.tistory.com/22

** setTimeout() 를 사용할 때 주의사항
--> 아래처럼, function()을 명시적으로 정의해서 패러미터로 넣어야 수행되더라..
     function() 을 명시적으로 넣는 대신, 바로 seTimeout(func1(), 10); 이런식으로 넣으니까 timer가 안걸리는데..
     if ( callback == 'function' ) {        

        setTimeout( function () { callback(); }, 10 );    

    }

JAVASCRIPT 

• 소개
  • HTML의 한계성을 극복하고 동적인 웹 페이지 제작을 가능하게 하는 기능
  • 문제점 및 한계
    • 브라의저의 버전에 따라 호환성에 문제가 있다
    • 익스플로러와 네비게이터에서는 다소 차이가 발생한다.
    • JavaScript의 표준이 없다.
  • 특징
    • JavaScript는 스크립트 언어이다.
    • C,C++,Java와 비슷한 문법을 지니고 있다.
    • JavaScript는 객체기반언어이다.
    • Event 중심으로 동작한다.
    • 플랫폼에 독립적이다.
  • 사용법

    • <Script Language=Javascript>

       <!--

      문장들.........;

      // -->

      </Script>

      <!-- 과 // -->는 자바스크립트를 지원하지 않는 브라우저에서는 주석으로 처리하라는 의미이다

      </Head> 위에나 BODY 내에 기술되면 된다.

• 연산자
  • 산술열산자
    • + 덧셈  -뺄셈  *곱셈  /나눗셈  %나머지  ++증가연산자  --감소연산자
  • 문자열연산자
    • +문자열 합치기  +=문자열 합치기
  • 논리연산자

    • ! NOT, 논리부정, 논리값의 반대를 취한다.

      && AND, 논리곱, 두 식이 모두 참일 경우에만 참을 리턴

      || OR, 논리합, 두 값중 하나라도 참이면 참을 리턴

  • 대입연산자

    • =   오른쪽의 연산결과를 왼편의 변수에 대입한다.

      += 왼편의 값과 오른편의 값과 합하여 왼편 변수에 대입한다.

      -=  왼편의 값에서 오른편의 값을 빼고 그 결과를 왼편 변수에 대입한다.

      *=  왼편의 값과 오른편의 값을 곱하여 왼편 변수에 대입한다.

      /=   왼편의 값을 오른편의 값으로 나눈다음 그 결과를 왼편 변수에 대입한다.

      %= 왼편의 값을 오른편의 값으로 나눈 다음 그 나머지를 왼편 변수에 대입한다.

  • 비교연산자
    • == 같다  != 다르다  > 크다  >= 크거나 같다  <작다  <=작거나 같다
  • 비트연산자

    • X&Y   X , Y 두 비트 모두가 1이면 1, 그렇지 않으면 0

      X | Y   X 또는 Y의 비트가 1이면 1, 그렇지 않으면 0

      X ^ Y  X , Y의 두 비트가 다르면 1, 그렇지 않으면 0

      ~X      X의 비트가 0이면 1, 그렇지 않으면 0

      X  <<  Y     X 를 Y 비트 만큼 왼쪽으로 Shift (최하위 비트 0적용)

      X  >>  Y     X 를 Y 비트 만큼 오른쪽으로 Shift (최상위 비트는 Shift전의 최상위 비트 값 적용)

      X  <<  Y     X 를 Y 비트 만큼 오른쪽으로 Shift (최상위 비트 0적용)

• 조건문
  • i f  문

    • if (condition) {statement1;}

      else {statement2;}

  • switch 문

    • switch (expt)

      {

                      case lavel1:

                             statement1;

                             break;

                      ....

                      case  labeln:

                                statementn;

                                break;

                      default:

                               statementk;

                               break;

      }

• 반복문
  • for  문
    • for ( 초기값; 조건식; 증가값) {   statement;}
  • while 문
    • whlie (조건식) {   statement;}
  • do  while 문
    • whlie (조건식) {   statement;}
  • laber  문
    • labelName;    statements
    • 프로그램의 특정 블럭에 대하여 식별자를 정의하는 문이다.
  • break 문
    • break;
    • break 문은 반복문이나 label 문을 탈출하도록 하는 문장이다.
    • 만약 label 문으로 탈출하고 싶으면 break label Name; 형식으로 기술하면 된다.
  • continue 문
    • continue;
    • continue 문은 반복문이나 label 문을 다시 시작하도록 하는 문장이다.
    • 만약 label 문을 다시 시작하고 싶으면 continue labelname; 형식으로 기술하면 된다.
• 함수
  • function 함수이름(인자){     명령문;     [return expression;] }
  • 빌트-인함수

    • 자바스크립트에 이미 포함되어 있는 함수들

      ecal(식) 문자열로 입력된 식을 계산하여 숫자로 리턴

      parselnt(문자열, n) 문자열의 값을 n진수 문자열로 생각하고 이를 10진수의 값으로 바꿔서 리턴

      parseFloat(문자열) 문자열의 값을 부동소수점 숫자로 리턴

      isFinite(변수) 변수가 수인지 판별해서 true/false 리턴

      isNaN(testValue) testValue가 숫자인지 아닌지를 판별해서 trua/false 리턴

      escape (문자열) ASCII 스트링을 URL로 인코딩

      unescape (문자열) escape의 반대

      escape 예제

• 객체
  • 생성될 객체이름 = new 객체이름(...) ;
• Global 객체
  • 빌트인 함수들 Global Method라고도 함
• 내장객체
  • Date 객체
    • 생성자

      • new Data() 현제 시간의 객체

        new Data(atring) "월 일, 년 시:분:초" 시간의 객체

        new Data(y, m, d) y:년, m:월, d:일 날짜의 객체

        new Data(y, m, d, h, m, s) y:년, m:월, d:일, h:시, m:분, s:초 시간의 객체

    • Methods

      • getYear() 년도 4자리를 리턴

        getMonth() 달을 리턴

        getDate() 일을 리턴

        getDay() 요일을 리턴(0.1,2,3,4,5,6)

        getHours() 시간을 리턴(0 에서 23)

        getMinutes() 분을 리턴(0에서 59)

        getSeconds() 초를 리턴(0에서 59)

        getTime() 70-1-1 00:00:00 을 기준으로 현시간의 밀리초 수를 리턴

        getTimezoneOffset() 로컬시간과 GMT 사이의 차이를 리턴

        parse(datestr) dataStr에 대하여 1970-1-1 00:00:00 을 기준으로 현시간의 밀리초

        setYear (년도) 년도 세팅

        setMouth(월) 월을 세팅

        setDate( 일) 일을 세팅

        setHours(시간) 시간을 세팅

        setMinutes(분) 분을 세팅

        setSeconds(초) 초를 세팅

        setTimes(시간) 시간을 세팅

        toGMTString() Date 객체의 날짜들 GMT 스트링으로 리턴

        toLocaleString() Date 객체의 날짜를 로컬 표현의 스트링으로 리턴

        UTC(y,m,d,h,m,s) 인자를 입력받아 밀리 초의 값 리턴

  • document
    • 속성

      • alinkColor     Alink 속성을 표시하는 스트링

        anchors    문자내의 애커들에 대한 배열

        applets    문서내의 애플릿들에 대한 배열

        bgColor   배경색깔의 속성값을 반영하여 자바스크립트 코드에서 수정 가능

        cookie  쿠키에 대한 레퍼런스

        domain   이 문서를 보내온 서버의 도메인 이름 스트링

        embeds   문서내의 내장 객체들에 대한 배열

        fgColor   문서내의 글자색깔 속성을 반영하는 스트링, 자바스크립트 코드에서 수정 가능

        forms   문서내에 존재하는 폼들에 대한 배열

        images   문서내에 존재하는 이미지들에 대한 배열

        lastModified    문서가 수정된 최근 날짜를 표시하는 스트링

        layers  문서내에 존재하는 레이어에 대한 배열

        linkColor  링크 속성을 표시라는 스트링

        links   문서내에 존재하는 링크들에 대한 배열

        plugins   브라우저 내에 설치된 플러그인들에 대한 배열

        referer   이 문서를 로드한 문서의 URL을 표시하는 스트링

        title   문서의 제목인 TITLE 속성을 반영하는 스트링

        URL   이 문서의 URL을 반영하는 스트링

        vlinkColor   vlink 속성을 반영하는 스트링

    • 매소드

      • captureEvents(이벤트타입들)    파라미터로 주어진 이벤트를 캡쳐할 것을 지시한다.

        close()    문서에 출력되는 스티림을 닫고 미출력된 문서의 나머지 부분을 화면에 출력

        getSelection()  현재 윈도우에서 마우스나 키보들로 선택된 문자열을 리턴

        handleEvent()   파리미터로 지정된 이벤트의 이벤트 핸들러를 호출

        open()   비어있는 새문서를 연다.

        releaseEvent()   지정된 타입의 이벤트를 더 이상 캡쳐하지 않도록 지정

        writeln()   write() 후에 "\n"을 추가하여 출력

  • window
    • 속성

      • defaultStatus     디폴트 상태바 메시지

        document     현재 나타나는 문서

        frame    윈도우 내의 프레임

        frame array   문서에 나타나는 윈도우 프레임 객체를 순서대로 나열한 배열

        history   윈도우 히스토리 리스트

        length  윈도우에서 프레임의 개수를 나타낸다.

        location   윈도우에서 나타나는 문서의 완전한 URL

        name   윈도우가 열릴 때 주어지는 이름

        opener    window,open이 현재 윈도우를 열도록 사용하는 스크립트의 윈도우를 참조한다.

        parent   현재 프레임을 포함하는 윈도우 프레임과 윈도우 객체의 프로퍼티이다.

        self   현재 윈도우나 현재 프레임

        status    상태바의 메시지

        top   현재의 프레임을 가지고 있는 최고 윈도우

        window   현재 윈도우나 현재 프레임

        toolbar    윈도우 틀바 객체에 대한 레퍼런스

        statusbar   윈도우 상태바 객체에 대한 레퍼런스

    • 매소드

      • alert()   경고 메시지를 가진 상자를 출력한다.

        back()   톱레벨 윈도우에서 최근 히스트로리로 돌아간다.

        blur()   윈도우의 포커스를 해제한다.

        captureEvent()   이벤트를 캡쳐할 것을 지시한다.

        clear In terval()   setInterval에 의해 설정된 타이머를 해제한다.

        clear Timeout()   setTimeout에 의해 설정된 타이머를 해제한다.

        close()   윈도우를 종료한다.

        con firm() 확인 메시지를 담은 상자를 출력한다.

        find()   윈도우의 본문에서 지정된 텍스트 스트링을 찾는다.

        forward()   히스트리 리스트에서 다음 URL을 로드한다.

        handleEvent()   파라미터에 지정된 이벤트의 이벤트 핸들러를 직접 호출한다.

        home()   브라우저에 설정된 홈 페이지를 로드한다.

        moveBy(폭,높이)    윈도우를 현재 위치에서 상대적인 량 만큼 이동한다.

        moveTo(x좌표,y좌표)   윈도우를 임의의 절대 위치로 이동한다.

        open()   새로운 웹 브라우저를 연다

        print()   윈도우의 내용을 프린트 한다.

        prompt()   프롬프트를 출력하고 입력창을 출력한다.

        releaseEvents()   캡쳐하기로 된 이벤트의 캡쳐를 해제한다.

        releaseBy(폭,높이)   윈도우를 현재 크기에서 상대적인 량만큼 크기를 변경한다.

        releaseTo(x좌표,y좌표)    윈도우를 임의의 크기로 변경한다.

        routeevent()   이벤트가 정상적인 경로로 전달되도록 한다.

        scrollBy(폭,높이)    지정된 량만큼 윈도우를 스크롤한다.

        scrollTo(x좌표,y좌표)   윈도우를 절대적인 위치로 스크롤한다.

        set Interval()   지정된 주기를 반복적으로 타이머 이벤트가 발생하도록 타이머를 설정한다.

        set Timeout()   지정된 시간이 지나면 1회적으로 타이머 이벤트가 발생하도록 타이머를 설정한다.

        stop()   윈도우에 문서의 로드를 중단한다.

• 데이터형
  • Number : 정수, 실수 등
  • 논리값 : True or False
  • String : 문자열
  • Null : 아무런 값도 존재하지 않는 경우
  • Undefined : 변수는 선언되었지만 어떤 값으로 초기화 되지 않는 경우
• 변수
  • 변수를 선언하는 방법
    • 변수이름 = 초기값;
    • var 변수이름;
    • var 변수이름 = 초기값;
  • 변수선언시 주의 사항
    • 첫번째 문자는 반드시 영문자 또는 "_"
    • 공백문자가 포함되어서는 안된다
    • 이미 자바 스크립트에서 사용되는 예약어는 변수로 사용할 수 없다
    • 자바스크립트는 대소문자를 깐깐하게 구별한다
  • 전역변수
    • 선택적으로 var를 사용해서 변수 선언
    • 전역변수를 특정 함수 내에서 사용하기 위해서는  this 라는 키워드를 사용하면 된다.
    • C에서는 ::를 앞에 붙여서 표현
  • 지역변수
    • 반드시 var 를 사용해서 변수 선언
• + - 상수
  • 특수문자

    • \\    Backslash

      \'    Single Quotation Mark

      \"    Double Quotation Mark

      \t    Tab

      \n   New Line

      \f    Form Feed

      \b   Backspace

      \r    Carriage Return

      C와 유사하다.

기타
• HTML 관련

  • html 문서 열 때 생성되는 객체

    window    최상위 객체로, 윈도우 마다 하나씩 존재하는 객체이다.

    document   HTML 문서마다 하나씩 존재하며, HTML 내용에 관한 정보를 가진다.

    상당히 자주 사용된다.

    history   현재 window에서 방문기록을 가지고 있는 객체이다.

    go, back    등의 메소드와 함께 사용된다.

    location   현재 HTML 페이지의 UTL에 관한 정보를 가지는 객체이다.

    navigator   현재 사용중인 브라우저의 이름과 버전등에 관한 정보를 지닌 객체이다.

    form    폼에 대한 정보를 가지고 있는 객체이다. form에 name을 붙여서 구별할 수 있다.

    하나의 document에 여러개의 form 객체를 생성할 수 있다.

    frme   frame 태그에 의해 생성된 객체이다.

    link   <A HREF="">로 표현된 객체. 링크마다 하나의 객체가 생성된다.

    image   이미지를 표현하는 객체

    layer   DHTML에서 지원하는 객체

    anchor   HTML 문서내의 앵커를 표현하는 객체 <A name="">

    area   HTML 문서내의 이미지 맵의 한 영역을 표현하는 객체

이벤트

• abort    onAbort    사용자가 이미지 로딩을 강제로 중단할 때

  blur     onBlur    윈도우,  폼 구성요소, 프레임이 포커스를 잃을 때

  change    onChange   Select, Text, Textarea 객체의 필드 값을 변경한 후 포커스를 잃을 때

  click    onClick    폼 구성 요소가 클릭될 때

  dblclick    onDblclick   폼 구성 요소나 링크를 더블 클릭할 때

  dragdrop    onDragDrop   사용자가 한 객체를 브라우저 윈도우 상으로 드롭할 때

  error    onError    문서나 이미지의 로딩시 오류가 발생할 때

  focus   onFocus    윈도우, 프레임, 프레임셋, 폼 요소가 포커스를 받을 때

  keydown   onkeyDown     사용자가 키를 누르는 순간

  keypress   onkeypress    사용자가 키를 누른 채 유지하는 동안

  keyup    inkeyUp  사용자가 누른 키를 놓는 순간

  load   onLoad   브라우저에 HTML 문서 로딩 직후 혹은 프레임셋 문서의 모든 프레임의 로딩이 마칠 때

  mousedown    onMouseDown    사용자가 마우스를 누르는 순간

  mousemove    onMouseMove    사용자가 마우스를 움직일 때 마다

  mouseover    onMouseOver   사용자가 마우스 커서를 이미지맵이나 링크 위에 올려 놓을 때

  mouseup    onMouseUp    사용자가 마우스 커서를 이미지맵이나 링크 위에서 내려 놓을 때

  move    onMove    사용자가 자바스크립트 코드에 의해 윈도우나 프레임의 위치가 이동될 때

  reset   onReset  사용자가 reset 버튼을 누를 때

  resize    onResize   사용자나 자바스크립트 코드에 의해 윈도우나 프레임의 크기가 조절되는 순간

  select    onSelect   사용자가 Text나 Textarea  객체의 필드 내의 텍스트 일부를 선택할 때

  submit  onSubmit    사용자가 submit 버튼을 누를 때

  unload    onUnload    사용자가 현재 HTML 문서 보기를 종단하고 다른 웹 사이트로 이동할 때

출처 : http://cafe.naver.com/dotnettree/4

JavaScript를 하면서, 가독성이 너무 떨어지는 것을 느낀 후...

회사동료를 통해 알게 된 Tool 인 Atom..

Source Insight 보다 훨씬 가볍고, 소스 구조 및 빠른 검색이 장점이다.
물론 기능은 좀 더 Light 한 것이 당연..

아래 링크를 이용해주시면 됩니다..

https://atom.io/

0. FFOS Browser - for Developer
https://nightly.mozilla.org/

1. manifest.webapp 파일에 대해
https://developer.mozilla.org/en-US/Apps/Build/Manifest

https://developer.mozilla.org/en-US/docs/Web/API/Web_Activities#Starting_an_activity

https://developer.mozilla.org/en-US/docs/Web/API/Web_Activities#Activity_handler_description

2. JavaScript 문법들
https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

3. IDL에 대해
https://developer.mozilla.org/en-US/docs/Glossary/WebIDL

https://developer.mozilla.org/en-US/docs/Mozilla/WebIDL_bindings

https://developer.mozilla.org/ko/docs/Creating_XPCOM_Components/An_Overview_of_XPCOM

https://developer.mozilla.org/en-US/docs/Mozilla/XPIDL

4. 빌드에 대해
https://developer.mozilla.org/en-US/Firefox_OS/Building_and_installing_Firefox_OS

5. require 관련
https://developer.mozilla.org/en-US/docs/Mozilla/ChromeWorkers/Chrome_Worker_Modules

6. Data Store 관련 (DB)
https://developer.mozilla.org/en-US/docs/Web/API/Data_Store_API/Using_the_Data_Store_API#Initializing_the_data_store

** 기타
http://www.cplusplus.com/doc/tutorial/

http://www.w3schools.com/

1. == 과 ===
== 는 1 == '1' 을 true로 출력한다. 즉, 데이터 타입이 달라도 의미상 값이 같으면 true로 처리한다.
이는 SW개발 상 바람직하지 못하므로, ===를 쓰는 것을 추천한다.
!= 과 !== 의 용도도 동일한 맥락이라고 생각하면 된다.

2. null 과 undefined 과 NaN
null은 값이 없는 상태를 명시적으로 정의한 것.
undefined는 실제로 값이 정의가 안된 것.(C에서는 전역변수면 default값이 들어가고, 지역변수는 쓰레기값 임)
NaN은 0/0 과 같은 연산의 결과로 만들어진 것 (C에서는 쓰레기 값이 들어가지..)
( null === undefined // false    null == undefined // true    NaN === NaN // false)

3. true 과 false
== 연산자는 숫자 1만을 true로 숫자 0만을 false로 간주한다. (물론, ===에서는 다른것으로 체크)
(C에서는 0을 false로 인식, 나머지 숫자들은 true이다..)

4. 

앞서 포스팅했던 이벤트 등록법은 순수 html 혹은 JavaScript를 이용한 방법이었습니다.

jQuery를 이용하면 아래와 같이 매우 간결하고 쉽게 이벤트 등록이 가능하므로,
매우 생산적! 이라고 할 수 있습니다. (프로그래머들은 간결한 것을 좋아하죠 :) )

opentutorials.org 사이트에서 참 많이 배우고 가는데요.
밑에 예시도 거기서 참조하였습니다. ㅎ

** selector를 이용한 이벤트 등록

** html 태그가 로딩되기 전에 script를 실행시키는 late binding
(onload 이벤트와는 다르다.)

** 다중 바인딩

1) 하나의 엘리먼트에 여러개 이벤트 등록

2) 이벤트에 따라 다른 핸들러 등록

3) chaining 기법도 가능
$('#target').on('focus', handler).on('blur', handler);

** 이벤트 제거 (off 함수 사용)

출처
https://opentutorials.org/module/904/6862
https://opentutorials.org/module/904/6888

1. 폼
submit : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다.
change : 폼 컨트롤의 값이 변경 되었을 때 발생, input(text,radio 등), textarea, select 태그에 적용
blur : 엘리먼트에 포커스가 생겼을 때
focus : 포커스가 사라졌을 때 발생

2. 문서 로딩
웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.

<script>

3. 마우스
아래 링크 참조
http://output.jsbin.com/pepib/4/

• click
  클릭했을 때 발생하는 이벤트. 
• dblclick
  더블클릭을 했을 때 발생하는 이벤트
• mousedown
  마우스를 누를 때 발생
• mouseup
  마우스버튼을 땔 때 발생
• mousemove
  마우스를 움직일 때
• mouseover
  마우스가 엘리먼트에 진입할 때 발생
• mouseout
  마우스가 엘리먼트에서 빠져나갈 때 발생
• contextmenu
  컨텍스트 메뉴가 실행될 때 발생

참고 출처
https://opentutorials.org/module/904/6762
https://opentutorials.org/module/904/6765
https://opentutorials.org/module/904/6766

아래 링크를 참조

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

기본적으로 배열이 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