- 개발자답게 사용하는 Chrome Browser_1~2

크롬 브라우저 사용 TIP
- 소스코드 확인_1 : 우클릭 → 페이지 소스 보기 ( 페이지 소스 보기를 누른 그 순간의 소스코드만 볼 수 있습니다. 동적인 소스가 아니다.)
- 소스코드 확인_2 : 윈도우 F12 / MAC alt + cmd + i
개발자 도구
- Network : 페이지에서 어떤 파일들을 받는지 확인 하는 용도 : 페이지를 구성하는 요소를 알 수 있다.
- Element : 페이지의 소스 코드를 확인 하는 용도
- Console : 간단한 자바스크립트 실습,페이지로부터 받은 메시지를 확인 등의 용도
  - console.log(”출력하고 싶은 내용”);
  - var 변수_이름 = 변수에_담고싶은_데이터; (변수=데이터를 담는 공간)
  - shift + enter : 여러 줄을 작성하는 방법(들여쓰기)
- Source : 웹페이지를 구성하는 파일들이 트리 형식으로 되어 있습니다. JavaScript 디버깅 용도
  - Watch : 원하는 값의 변화나 코드사용을 확인하는 용도(=값 확인 용도)
    
    → 원하는 코드를 복사한 후 watch에 붙여넣기 하고 변화 이후 watch를 새로고침하여 확인합니다.
  - BreakPoints : breakpoint를 한 이후 만약 해당 코드와 관련된 내용의 변화가 있을 경우 브라우저가 일시정지 됩니다.
    
    → 원하는 줄을 클릭하면 BreakPoint가 생성됩니다.
  - Event Listener BreakPoint
    
    → 해당 이벤트를 체크하고 만약 브라우저상에서 체크한 이벤트가 발생했을 경우 일시정지 됩니다.

예제 코드 해석

HTML

<head>
      <meta charset="UTF-8">
      <title>버튼꾹꾹</title> : WEBSITE 상단에 제목을 의미합니다.
      <link rel="stylesheet" href="./buttonstyle.css"></link> : CSS스타일
      <script src="./button.js"></script> : button에 관련된 JAVASCIRPT
   </head>
   <body>
      <h1>누르면 숫자가 바뀌는 버튼</h1> : 제목을 나타냅니다.
      <img src="./mypic.jpeg" alt="github profile"> : 이미지를 나타냅니다.
      <br/> : 띄기
      <a href="<https://github.com/kangtegong>">깃허브</a> : GitLink
      <form> : Form을 사용하기 위한 태그
         <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> : 감소 버튼
         <input type="number" id="number" value="0" /> : 값 관련 버튼
         <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> : 증가 버튼
      </form>
					Form 관련 동작 자세히
					class는 css에서 디자인을 동일 시키기 위한 용도로 사용
					id는 각각 js에서 동작하기 위해 getElementID DOM 동작을 위해 다른 이름으로 받습니다.
					함수는 input의 value값을 다르게 적용하기 위해 다른 이름을 사용합니다. 버튼 클릭 이벤트 사용
   </body>

body { : 중앙정렬
    text-align: center;
}

form { : Form 위치 선정
    width: 300px;
    margin: 0 auto;
    padding-top: 50px;
  }
  
  .value-button { : value-button 동일 시키기 increase decrease
    display: inline-block;
    border: 1px solid #ddd;
    margin: 0px;
    width: 40px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    padding: 11px 0;
    background: #eee;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .value-button:hover { : button에 마우스 포인터가 올라갈 시 커서 형태가 바뀝니다.
    cursor: pointer;
  }
  
  form #decrease { : 감소 버튼 디자인 조정
    margin-right: -4px;
    border-radius: 8px 0 0 8px;
  }
  
  form #increase { : 증가 버튼 디자인 조정
    margin-left: -4px;
    border-radius: 0 8px 8px 0;
  }
  
  form #input-wrap { : form 디자인 조정
    margin: 0px;
    padding: 0px;
  }
  
  input#number { : value(크기 증가,감소 하는 변수) 디자인
    text-align: center;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 0px;
    width: 40px;
    height: 40px;
  }
  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }

JAVASCRIPT

function increaseValue() { : Value값 증가하는 함수
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}
increaseValue 함수가 시행시
value에 값을 넣습니다. getElementById로 ID중 number라는 이름을 가지고 있는 것의 value 값(parseInt로 인해 정수 값을 받습니다.)을 받습니다.
value가 숫자가 아니라면 0을 value에 대입합니다. 만약 숫자라면 원래 값을 유지합니다.
버튼이 눌러졌으니 value 원래값에 1을 더합니다.
html value 값에 value 값을 대입합니다.

function decreaseValue() { : Value값 감소하는 함수
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value < 1 ? value = 1 : '';
    value--;
    document.getElementById('number').value = value;
}

decreaseValue 함수가 시행시
value에 값을 넣습니다. getElementById로 ID중 number라는 이름을 가지고 있는 것의 value 값(parseInt로 인해 정수 값을 받습니다.)을 받습니다.
value가 숫자가 아니라면 0을 value에 대입합니다. 만약 숫자라면 원래 값을 유지합니다.
만약 1보다 작다면 value 값에 1을 넣습니다 1 이상이라면 아무 동작을 하지 않습니다.
버튼이 눌러졌으니 value 원래값에 1을 감소시킵니다.
html value 값에 value 값을 대입합니다.