JavaScript/[생활 코딩 JS]

05. HTML과 JS의 만남: 콘솔

Itchild 2024. 4. 24. 22:03
728x90
반응형

 

지금까지는 자바 스크립트 코드를 실행하기 위해 웹페이지 , 즉 파일을 만들었습니다. 경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황 들이 있습니다. 그런 경우에 콘솔을 사용할 수 있습니다.

마우스 우클릭 후 검사를 누른다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형 스크립트</title>
</head>
<body>

<script type="text/javascript">
	var str="문자열";
	var num=15;
	var flag=true;
	var arr=[1,2,3];
	
	console.log('str: '+str); -- 콘솔로 다양하게 표현 해볼수 있다. 문자열도 표현 가능
	console.log('num: '+num); -- 정수
	console.log('flag: '+flag); -- true,false
	console.log('arr: '+arr); -- 배열
	
	console.log('');
	
	var x = 1 + '100'; -- 문자열로 인식하여 1100 이 된다.
	console.log(x);
	
	var x = true + '11'; // 동적타이핑 언어다 -- true11 이 된다.
	console.log('x: '+x);
	
	console.log('');
	
	
	var a=null; // null값으로 초기화 한거
	var b; // 초기화를 안한거 // 썼지만 값이 없다구 상태에 따라 출력상태가 다르다. // undefind 가 초기화 안된거 맞고요 
	// var c; // 선언을 안한거 // 선언 자체가 안되어 있는거
	console.log('');
	
	console.log('a: '+a); -- null
	console.log('b: '+b); -- undefind
	//console.log('c: '+c);
	
	console.log('');
	console.log(10/0); // 무한대 -- 0으로 나누면
	console.log(2*'apple'); // 넘버가 없다  -- 문자로 정수를 곱할 수 없다.
	console.log(isNaN(113)); -- 113이 넘버가 아니니 ? 아니 넘버 맞아 false
	console.log(isNaN('113')); // 아니 이거 넘버야 이걸 동적 타이핑이라고 이해하는 동적 언어 // 웹에서는 모든 데이터를 문자로  
	console.log(isNaN('banana')); // 문자이기 때문에 true
	
	
	
</script>


</body>
</html>
 

 

 

콘솔을 이용하면 자바스크립트 코드를 즉석에서 실행 할 수도 있다.

 

첫 번째 사진의 텍스트 들이 몇개의 글자로 이뤄져 있는지 알고 싶을 때 !

복사해서 두번째 사진 처럼 F12 눌러서 콘솔창에 들어간다음 복사한 내용을 붙여넣기하고

이 문자들을 ' ' 안에 묶으면 ' ' 안은 문자가 된다. 그리고 자바스크립트에서 ' ' 안에 들어 있는 문자의 개수를 알려주는 명령이 .length 이다. 이것을 alert() 로 감싼다.

그러면 짠 ! 세번째 사진처럼 문자의 개수를 알려주므로 이 텍스트는 445 글자로 이루어져 있다.

 

728x90
반응형