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 |