JS에서 데이터 타입을 구분하기 위해선
코드를 읽어보는 수 밖에 없다.
왜냐하면 선언 자체를 var로 전부 통일하여 사용하고
그 후에 들어오는 값에 따라서 자동으로 잡히게 되어있기 때문이다.
콘솔은 JS에서 가장 간단한 디버깅 도구이다.
여태껏 출력을 위해 사용한 그 console이다.
이번에는 console. 하고 뒤에 붙는 메소드들과 그의 사용법,
그리고 body에 있는 요소(ex buttone, li, div 등) 을 가져오는 방법을 함께 알아보자
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<link rel="icon" href="img/favicon.ico">
<style>
/*css 주석*/
</style>
<!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
</head>
<body>
<button>버튼</button>
</body>
<script>
var str = "문자열";
var obj = {key : "value"};
var arr = [1, 2, 3, 4, 5];
// Object의 경우 key는 막 써도 문자열로 잡히는데
// 뒤의 value값은 ""를 꼭 사용해야 문자로 인식 된다.
// 만약 쓰지 않으면 변수값으로 인식된다.
// 로그 레벨
console.log("Log");
console.info("Info");
console.warn("Warn");
console.error("Error");
// 어떠한 자료구조든지 표현 가능
console.log(str);
console.log(obj);
console.log(arr);
// 문자열과 함께 표현도 가능
console.log("문자열 : " + str);
console.log("객체 : " + obj); // 객체는 문자열과 함께 사용 x
console.log("배열 : " + arr);
// 만약 문자열과 객체와 함께 사용하고 싶다면...
console.log("객체", obj);
console.log("배열", arr);
// 콤마를 사용해도 상관없다.
//////////////////////////////////////////// 바디의 요소 가져오기
// 태그는 여러개 일 수 있기 때문에 배열로 가져온다.
var btn = document.getElementsByTagName("button");
console.log(btn);
// 이벤트(이벤트 객체가 매개변수로 들어온다.)
btn[0].addEventListener("click", function(e){
console.log("click", e);
})
</script>
</html>
get하고 자동완성을 누르면 다양한 방법으로 요소를 가져올 수 있다.
또한 가져온 값을 출력(console.log(btn); 구문)하면 위와 같이 배열 오브젝트 형태로 값이 들어오는데
key - value 형식으로
요소의 속성들이 쭈우우욱 들어있다, 정말 많이 있는데
이 요소들을 제대로 컨트롤 할 줄 안다면 JS는 정말 잘하는 숙련자라고 볼 수 있다.
그리고 이벤트를 구현 할 때 이벤트 객체가 매개변수로 들어오게 되는데
이 매개변수는 정말 다양한 정보를 담고 들어온다.
다음 사진을 확인해보자
위와같이 파란색 박스의 펼치기를 눌러보면 이벤트 객체가 담고있는 정보가 주르륵 나온다.
이 정보도 매우 유용하게 쓸 수 있고 어떤 정보가 담겨있는지는 직접 콘솔에 띄어 확인해보자.
위의 캡쳐는 펼쳤을 때 정보가 너무 많아 전부 캡쳐하지 못했다.
간단한 영어 단어로 이루어져 있으므로 의미 그대로 받아들이면 된다.
'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글
| [JS]04-002.html 기본 사용 예 및 js 파일 생성 및 예 (0) | 2018.11.05 |
|---|---|
| [JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행 (0) | 2018.11.05 |
| [JS]04-08.for each문, 반복문 한꺼번에 (0) | 2018.10.19 |
| [JS]04-07.Shallow Copy 현상, 배열 대입 이상 (0) | 2018.10.19 |
| [JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join) (0) | 2018.10.19 |