1. 디버깅 콘솔
콘솔이란 무엇인가?
콘솔은 제어판 또는 계기판이다.
음악에 있어 믹싱 작업을 할 때, 콘솔로 조정을 한다.
(미스트 트롯 할 때 뒤에서 믹싱하는 팀들을 보면 콘솔을 열심히 만지며 보컬의 목소리와 음향과 효과를 조절한다)
눈에 보이는 계기판(제어판)이 있어야 조정하기가 쉽기 때문이다
웹에서도 마찬가지다.
디버깅이란, 코딩 작업을 하는 중, 혹은 끝낸 후, 버그를 잡아내는 작업을 말하는데, 눈으로 봐야 잡아낼 수 있다.
벌레를 잡아내기 위한 코드 계기판이 콘솔인 것이다.
왜 벌레를 잡아내는가?
왜 프로그램에 문제아를 벌레(버그)라고 부르는가?
옛날에 컴퓨터 속 작은 부속판 틈 사이에 벌레가 많이 생겼고, 벌레가 많이 나왔기 때문이다.
그러므로 디버깅이란 벌레(코딩 오류) 잡는 과정이고
디버깅 콘솔이란 벌레가 어느 구멍에 들어있는지 눈으로 확인하는 계기판이다.
1) 콘솔(console) =
객체 = 디버깅 콘솔(디버깅 콘솔을 줄여서 콘솔이라 한다.)
콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있도록 한다.
디버깅 콘솔 = 브라우저 내부에 내장되어 있는 브라우저의 하위 객체
디버깅 콘솔= 구글 크롬 개발자 도구를 열었을 때, 콘솔을 눌러 나타나는 화면이다.
그러므로 브라우저 객체 window를 통해 브라우저의 하위 객체인 콘솔에 접근할 수 있다.
window.console : 객체 뒤에 점을 찍기 = 객체가 가지고 있는 데이터에 접근
window.console에서 window+점은 생략 가능
대문자와 소문자는 구분하여 쓴다.
이것은 자바스크립트의 코드 작성 규칙 중 하나다(대문자를 소문자로 쓰거나, 소문자를 대문자로 쓰면 오류가 난다. )
세미콜론 = 구문의 끝을 의미
한 줄에 한 코드만 쓸 경우, 세미콜론을 안 써도 오류는 안 나지만, 쓰는 게 원칙이다
한 줄에 두 구문을 쓸 경우, 중간에 세미콜론을 안 쓰면 말이 안 통한다.
한 줄에 한 구문만 쓰는 게 좋다.
2. 자바스크립트 코드 작성 예시
1) alert 경고창 띄우기
window.alert("Hello Mr")
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
</html>window.alert("Hello Mr")아래와 같이 브라우저에 경고창이 뜬다.
2) window.console.log()
'로그(log)'는 '기록하다'라는 의미이다: 블로그에서의 로그, 브이로그에서의 로그와 같은 의미.
console.log는 '콘솔에다 기록한다'라는 뜻이고,
console.log()는 '콘솔에다 (괄호 속의 내용)을 기록한다'라는 뜻이고
(괄호) 속에는 기록할 내용을 따옴표로 묶어서 적어주면 된다. 따옴표는 큰 따옴표, 작은따옴표 상관없지만 같은 종을 사용해야 한다.
window.(윈도+점)은 생략이 가능하다.
window.console.log() = 콘솔 화면에 (남기고 싶은 기록)을 남기겠다는 구문
window.console.log("Hello Mr")아래와 같이 콘솔에 표시된다.
3. 콘솔 안에 있는 메소드 종류
종류가 많다.
1) console.clear() =
콘솔의 화면(위에서 출력한 내용)을 지우는 메소드
window.console.log("Hello Mr")
window.console.log("Hello Mr")
console.clear()지우기 전
clear(지운) 후
4. 자바스크립트 코드란
웹브라우저에게 전하는 방법:
<script>: '지금부터 html 코드로 자바스크립트를 시작하겠다'라는 뜻. </script>
웹브라우저는 스크립트 태그로 시작하는 코드가 보이면 자바스크립트로 해석한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write('hello world');
</script>
</body>출력 내용
입력 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write(1+2);
</script>
</body>
</html>출력 내용
위의 자바스크립트(script)와 html의 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>JavaScript</h1>
1+2
</body>
</html>결과: 동적이지 않다(정적이다)
5. 자바스크립트 언어
html은 정적이다.
그러나 웹은 사용자의 조작에 의해서 프로그램이 움직여야 할 필요성.
웹도 게임처럼 동적으로 상호작용이 필요하다.
그래서 탄생한 것이 자바스크립트이다.
자바스크립트는 프로그래밍 언어이다.
프로그래밍 언어란 웹브라우저 형태의 소프트웨어(웹브라우저 류)를 로 제어하기 위한 언어이다.
제어란 말은 프로그래밍적 제어와 동격이다.
코드를 통해서 제어하는 것이 프로그래밍적 제어이고,
자바스크립트는 그런 목적으로 만들어진 그러한 언어이고,
그런 역할을 하는 언어이다.
자바스크립트와 웹브라우저는 밀접한 관계이고
사용자가 어떠한 버튼을 클릭했을 때 어떠한 일이 일어나도록 하는 역할
즉 이러한 형태의 프로그래밍 언어, 자바스크립트이다.