1. 입력한 정보 혹은 변수 연산에 대한 구동 확인
1.1. console.log(변수)
기본 형태: console.log(식별자); 혹은 console.log(“문장”);
console은 컴파일러나 개발 툴이 가진 정보를 표시하는 공간으로 html에서 F12를 통해 확인이 가능하다. 개발자가 설정한 정보나 메시지를 표시하거나 혹은 브라우저(컴파일러)에서 발생하는 오류를 표시하기도 한다. 오류의 발생 정보는 개발자가 별도로 지정하지 않아도 표기가 될 수 있으나, 예외처리 등으로 핸들링한 데이터는 console.log로 정보를 전달하여 메시지를 출력할 수 있다. console 로그를 통해 프로그램의 충돌이나 잘못된 ‘항목’의 정보 확인이 가능하다.
1.2 할당된 변수의 종류를 알려주는 typeof
기본 형태: console.log(typeof(식별자));
typeof는 지정된 변수의 타입을 확인할 때 사용한다. typeof로 확인할 수 있는 데이터 타입은 숫자(number), 문자(string), 논리(boolean), 배열(object), 함수(function), 데이터 없음 혹은 지정되지 않음(undefined) 등 다양한 정보로 확인이 가능하다. console.log와 함께 사용하여 변수의 데이터 상태를 확인하기도 하고, 제어문에서 조건 식별을 위해 사용하기도 한다.
2. 페이지 팝업창으로 표시하는 명령어
2.1. alert (변수 혹은 “내용”) [==window.alert()]
기본 형태: alert(식별자); 혹은 alert(“문장 데이터”);
alert는 웹 페이지에서 어떠한 정보를 알리기 위해 사용하는 명령어로, 화면의 가장 앞에 경고 메시지 형태의 '대화 박스'를 출력한다. 경고 메시지에 해당하므로 해당 메시지가 나오고 수락되기 전까지 프로그램의 구동 자체가 정지한다. alert를 사용하면, 해당 라인의 이전까지 연산을 실행하다가 멈추고, alert가 확인되면 다시 연산을 수행한다. 해당 명령어는 기본적으로 window 객체 안에 배치된 function이지만, 현재 단계에서 해당 내용까지 알고 있을 필요는 없다.
JavaScript를 처음 접한다면 해당 코드를 프로그램 구성에 중간중간 포함하여 ‘문제가 발생한 코드’를 추적하는 것이 성장에 도움이 된다.
2.2. 확인을 요구하는 명령어: confirm(변수)
기본 형태: confirm(식별자); 혹은 confirm(“문장”);
confirm은 alert와 동일하게 웹 페이지 구동시에 팝업되는 창을 만든다. 알림과 달리 사용자에게 동의를 구할 수 있으며, 기본 타입은 ‘확인’ 혹은 ‘취소’로 항목이 구성된다. confirm();의 결과는 true 또는 false로 할당되며, 이를 변수에 집어넣는 것도 가능하다. 웹사이트에서 권한을 요청하거나 혹은 약관에 동의하는 동작을 구현할 때 사용할 수 있다.
2.3. 변수를 사용자가 할당하는 명령어: prompt
기본 형태: prompt(“요구하는 데이터”); //해당 데이터는 사용자에게 표시되는 정보
prompt는 외부로부터 값을 입력받는 창을 표시한다. 사용자가 정보를 입력할 수 있으며, 입력되는 정보를 변수로 할당할 수도 있다. 다만 해당 입력값은 기본적으로 string 이기 때문에, 연산이 필요한 경우 Number를 통해 데이터 타입의 정의나 변경이 필요하다.
var prn1 = prompt("좋아하는 숫자를 입력하세요");
var prn2 = prompt("아무 숫자나 입력하세요.");
prn1 = Number(prn1);
prn2 = Number(prn2);
var prnex = prn1+prn2;
document.write("두개를 더한 값은 "+prnex+" 입니다.");
3. <body></body>에 데이터를 출력하는 명령어
3.1. document.write(“<>”+”<>”)
() 안의 내용을 <body> 태그에 위치하여 표시한다. 문장으로 표현하고 싶은 경우 “ “ 를 통해 문장 부분을 지정할 수 있고, 변수 또한 표시가 가능한 장점이 있다. 다만 실제 화면에 출력될때 write로 지정된 내용이 추가되기 때문에 디자인 구성이 잡혀있는 상황이라면 사용이 어려울 수 있다. document(해당 html 문서를 지칭함)라는 객체를 지칭하기 때문에 DOM 구조를 공부하여 파악하여야만 작동하는 경로나 원리를 이해할 수 있다.
3.2. DOM 구조의 개념
document.write 와 같이 특정 객체에 접근할 때, 경로나 구조를 기준으로 접근하는 방식을 Document Object Model, DOM 이라고 한다. 해당 방식을 익히면 JavaScript로 구현할 수 있는 프로그램의 범위가 넓어진다는 장점 뿐 아니라 XML을 이해하거나 데이터 구조에서 Node에 대한 이해도가 넓어진다. 해당 챕터는 추후에 다룰 것이다.
4. 출력 명령 내의 연산: ` ` (역 단따옴표: 키보드 1의 옆)
express language로 EcmaScript에서 포섭되었다. 역 단따옴표 ` ` 와 ${}를 이용하면 출력 명령어 내에서도 계산이 가능하다.
var name1="홍길동";
console.log("dlfma : "+name1);
console.log("dlfma : +name1");
console.log("dlfma : ${name1}");
console.log(`dlfma : ${name1}`);
console.log("계산도 진행가능 10+5="+(10+5));
console.log(`계산도 진행가능 10+5=${10+5}`);
5. 데이터 분류의 기초 이해
HTML은 Mark up을 통한 데이터 분류와 구현을 위한 언어이다. JavaScript는 이러한 HTML과 호환이 잘되는 언어이지만, JavaScript를 능숙하게 다루기 위해서는 HTML의 특성인 데이터의 포함관계를 정확하게 이해하여야 한다.
| 모양 | 뜻 |
| a.b | a안에 b |
| a = b | a에 b를 넣어라 |
| a(“b”) | b라는 이름을 가진 a타입의 데이터 |
<body>
<p id="test">이 값을 표현</p>
<script>
var str=document.getElementById("test").innerHTML;
alert(str);
</script>
</body>
데이터의 포함관계에 따라 위의 구문을 해석한다면 다음과 같이 확인할 수 있다.
var str=document.getElementById("test").innerHTML;| var | str | document | getElementById | (“test) | innerHTML |
| 변수 선언 | 변수 이름 | 문서 (해당 HTML 페이지) | Element의 Id를 가져온다 | Id이름 | HTML안에 |
innerHTML이 빠지면 [object HTMLParagraphElement] 라고 나오는데, 이는 HTML 안이라는 정보가 지정되지 않아 <p></p>의 tag데이터를 가져왔기 때문이다. Element는 HTML에서 구현되는 속성 데이터로 이해하면된다. 만약 Script를 head에서 구동하면 데이터가 null로 지정된다. 이는 HTML의 처리가 위에서 아래로 진행되기 때문에 발생하는 현상인데, 아직 그려지지 않은 데이터를 참조하기 때문에 null로 표시되는 것이다.
'JavaScript > 기본 이론' 카테고리의 다른 글
| Chapter 06. 입력 값을 취하는 방법 (DOM 기초 1) (0) | 2021.11.22 |
|---|---|
| Chapter 05. 조건문과 반복문 (0) | 2021.11.21 |
| Chapter 04. JavaScript의 연산자 (0) | 2021.11.20 |
| Chapter 02. JavaScript의 변수 (0) | 2021.11.18 |
| Chapter 01. JavaScript의 기초 (0) | 2021.11.17 |