[javascript] 변수 선언(var), 디버깅(console.log)

Day 9 !!

변수 선언(var), 디버깅(console.log) 방법 찾아보고 실습하기

변수 선언

1. var : 중복 선언이 가능하다.

선언함과 동시에 값을 할당할 수 있다.
,(쉼표)를 통해 여러 개를 한 문장으로 선언할 수 있다.
지정된 초깃값 없이 선언된 변수는 undefined 값을 갖는다.

var sum; // 변수 sum을 선언. undifined
var a = 3; // 변수 a를 선언함과 동시에 3을 a에 할당
var b, c, d;
var e = 1,
    f = 2,
    g = 3; // 여러 변수를 한 번에 선언 및 초기화 가능

위는 변수 var의 특징을 잘 보여준다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>나의 웹사이트</title>
  <style>
    .Header{
      width:400px;
      border:4px solid black;
      height:50px;
      line-height : 55px;
    }
    .Nav{
      height:250px;
      border:2px solid red;
      float:left;
      width:200px;
      line-height : 55px;
    }
    .Section{
      width: 200px;
      height:250px;
      border:2px solid blueviolet;
      float: left;
      line-height : 55px;
    }
    .Footer{
      width:400px;
      border:4px solid blue;
      height:50px;
      line-height : 55px;
      clear:both;
    }
    header{
      width: 400px;
      background-color: lightpink;
      height:100px;
    }
    nav{
      background-color: lightblue;
      height:300px;
      width: 200px;
      float: left;
    }
    section{
      background-color: lightgoldenrodyellow;
      height:300px;
      text-align: left;
      width: 200px;
      float: left;
    }
    footer{
      width: 400px;
      background-color: lightgray;
      height:100px;
      clear: both;
    }
    header, nav, section, footer {text-align: center;}
    header, footer {line-height: 100px;}
    nav, section {line-height: 240px;}
  </style>
  </style>
</head>
<body>
  <span id="test1"></span><br />
  <span id="test2"></span><br />
  <span id="test3"></span><br />
  <span id="test4"></span><br />
  <span id="test5"></span>
  <script language="javascript">
  var id_name = "test";
  html = "변수(var)";
  
  for(let i=1; i<=5; i++) {
  document.getElementById(id_name + i).innerHTML = "<b>" + html + i +"</b>";
  }
  </script>
</body>
</html>

디버깅(console.log)

디버깅이란?

: 컴퓨터 과정에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정

비주얼 스튜디오 코드 디버깅 사용법

1. Visual Studio에서 프로젝트를 연 상태에서 서버 쪽 JavaScript 파일(예: server.js)을 열고 왼쪽 여백의 여백을 클릭하여 중단점을 설정합니다.

2. F5(디버그 > 디버깅 시작)을 누릅니다.

디버거는 설정한 중단점에서 일시 중지합니다(현재 명령문은 노란색으로 표시됩니다). 이제 로컬 및 조사식 창과 같은 디버거 창을 사용하여 현재 범위 내에 있는 변수를 가리킴으로써 앱 상태를 검사할 수 있습니다.

디버깅을 시작하고 한줄식 내려가면서 실행한다. (상단 중앙 부분의 파란색 화살표 사용)

그러면 반복문에서의 i값이 변화되는 것을 확인할 수 있다.

이렇게 하면 끝!! 지금은 간단한 for문을 돌렸지만 추후 복잡한 오류를 만났을 때 유용하게 사용할 기술이다.

'WEB' 카테고리의 다른 글

[Javascript] 객체 & 배열 (0)	2022.03.03
[Javascript] 조건문 / 반복문 (0)	2022.03.02
[WEB] html/css 레이아웃 (0)	2022.02.28
[WEB/CSS] flexbox (0)	2022.02.27
[WEB] CSS 기본실습(2) (flex, gird 레이아웃) (0)	2022.02.27

변수 선언

디버깅(console.log)

'WEB' 카테고리의 다른 글

티스토리툴바