2020-09-17,JavaScript

대망의 자바 스크립트.
HTML을 동적으로 움직이게 만들어주는 존재.

막판에 가서 이상해져서..... 제대로 집중 못하고..... 그게 Django시간에도 영향을 미치고 있는 자바스크립트!

빨리 정리를 했어야했는데... 주중에는 아파서 못 하고. 주말에는... 술 먹고 하루를 날렸고. 일요일이 되서야 시작하는데.... 벌써 6시;;; ㅎ;;;;;;;;

쨋든, 시작!
(시간이 촉박하니... 빠르게 빠르게. 중요하거나 내가 모르겠는 건 좀 깊이.)

01_Basic

JavaScript 설정 방법
1. Html의 내부에서 javascript 생성, head에 태그 설정하기 (Internal 방식)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 설정방법1 - head태그에 설정</title>

<!-- internal 방식  -->
<script type="text/javascript">
	console.log("hello");
	console.log("world1")

</script>

<!-- internal 방식  -->
<script type="text/javascript">
	console.log("world2");

</script>

</head>
<body>
<h3>javascript 설정방법1 - head태그에 설정</h3>


</body>
</html>

2. Html의 외부에서 js파일로 javascript를 생성, html 내부에서 해당 파일 링크 삽입 (external 방식)

Html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 설정방법3 - 외부파일 저장 후 사용</title>
<!-- external 방식  -->
<script type="text/javascript" src="test.js"></script>

</head>
<body>
<h3>javascript 설정방법3 - 외부파일 저장 후 사용</h3>

</body>
</html>

console.log("hello");

3. Internal과 External 방식 혼용 사용 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 설정방법4 - internal, external 혼합</title>

<!--external 방식  -->
<script type="text/javascript" src="test.js"></script>

</head>

<script type="text/javascript">
	console.log("internal")
</script>

<body>
<h3>javascript 설정방법4 - internal, external 혼합</h3>

</body>
</html>

console.log("hello");

2.Data_Type

자바스크립트는 CSS나 Html과 다르게 언어로 치부되는 만큼 기본 언어들과 같이 데이터 타입이 존재합니다.
정수, 실수, 논리형, Null, Undefied, NaN(Not a Number)과 같은 기본형 데이터와
문자 데이터('' / ""), 함수 객체, JSON 객체, JSON 배열 객체와 같은 참조형 데이터로 나뉩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>데이터 타입</title>
<script type="text/javascript">
	//1. 기본형 데이터
		console.log("1. 수치형(정수)", 20)
		console.log("2. 수치형(실수)", 3.141592)
		console.log("3. 논리형", true, false)
		console.log("4. Null", null)
		console.log("3. undefined", undefined)
		console.log("3. NaN", NaN)
	
	//2. 참조형 데이터
		console.log("7. 문자데이터 객체 1:", "홍길동")
		console.log("7. 문자데이터 객체 2:", '홍길동')
		console.log("8. 함수 객체:", function name() {	})
		console.log("9. JSON 객체:", {"name":"홍길동", "age":20})
		console.log("10. JSON 배열객체:", [10, 20, 30, 40])

</script>

</head>

<body>

</body>
</html>

문자열 이스케이프

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문자열, 이스케이프</title>

<script type="text/javascript">
	
/* 	escape 문자
	\n	:	개행(new line)
	\t	:	탭
	\'	:	' (홀따옴표 출력)
	\"	:	" (쌍따옴표 출력)
	\\	: 	\ (역슬래시 출력)
*/
	console.log("aa\naa");
	console.log("aa\taa");
	console.log("aa\'aa\"aa");
	console.log("c:\\aaa");	
	
	//문자열  + 문자열
	console.log("Hello" + "World");
	
	//문자열  + 숫자
	console.log("Hello"+10);
	
	//문자열 형태 숫자 + 숫자
	console.log("10"+10)	// 1010
	console.log("10"-10)	// 0
	console.log("10"*10)	// 100
	console.log("10"/10)	// 1

</script>

</head>
<body>

</body>
</html>

변수
JS는 언어이고 언어이기 때문에 변수도 사용 가능하겠죠?
JS는 var와 let으로 변수 선언을 합니다.

변수1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 사용방법</title>

<script type="text/javascript">

	//변수 사용방법
	//1. 변수 선언:	var 변수명;
	var num;
	console.log("초기 선언된 변수:", num)	//undefined
	
	//2. 변수 초기화: 변수명 = 값;
	num=10;
	console.log(num);
	
	//변수 선언과 초기화 한 번에
	var xxx = 10;
	console.log(xxx);
	
</script>

</head>
<body>

</body>
</html>

변수2
변수 사용시, 중복 변수명 사용 가능합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 사용방법</title>

<script type="text/javascript">

	//중복 변수명 사용 가능. 데이터형이 달라도 된다.
	var num = 10;
	console.log(num);
	var num = "홍길동";
	console.log(num);
	
</script>

</head>
<body>

</body>
</html>

호이스팅 (Hoisting - 끌어 올림)
자바스크립트의 경우 프로그램이 실행되면 변수를 모두 찾아서 코드 영역의 맨 위에 끌어 올려 변수들을 선언합니다. (Hoisting). 고로, 코드에서 순서상으로 아직 선언되지 않는 변수라고 해도 코드 내에서 선언이 완료된 변수라면 Error없이 읽어드릴 수 있습니다. (하지만 값은 순서상 선언이 되지 않은 변수이기 때문에 undefined 값을 갖는다.)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>호이스팅</title>

<script type="text/javascript">

	/*
		프로그램 실행전에 전체 코드를 미리 훓어보는 시간이 있다. (parsing)
		1. 변수를 모두 찾는다.
		2. 코드영역의 맨 위에 내부적으로 변수를 선언한다.
			=> 호이스팅(hoisting) hoist 끌어 올리다.
	*/
	
	console.log(num);
	var num = 10;
	console.log(num);

	/*
		var num; **Hoisting**
		console.log(num);	undefined
		var num = 10;
		console.log(num);
	*/

</script>

</head>
<body>

</body>
</html>

변수 타입 확인 ( type() )

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 타입 체크</title>

<script type="text/javascript">

	var num = 10;
	console.log("1. 정수:", num, typeof num);	//10 number
	
	var num = 3.14;
	console.log("2. 실수:", num, typeof num);	// 3.14 number
	
	var num = true;
	console.log("3. 논리:", num, typeof num); // true boolean
	
	var num = undefined;
	console.log("4. undefined:", num, typeof num); // undefined undefined
	
	var num = null;
	console.log("5. null:", num, typeof num); // null object

	var num = NaN;
	console.log("6. NaN:", num, typeof num); // NaN number
	
	var num = {"name":"홍길동", "age":20};
	console.log("7. JSON 객체:", num, typeof num); // NaN number

	var num = [10, 20, 30, 40];
	console.log("8. JSON 배열객체:", num, typeof num); // NaN number
	
	var num = function() {};
	console.log("9. 함수 객체:", num, typeof num); // NaN number
	

</script>

</head>
<body>

</body>
</html>

스코프 ( 블럭 / 함수 scope )
언어들은 Scope라는 것이 있고 해당 스코프에 따라 변수의 사용이 제한됩니다.
자바나 C언어의 경우 Block Scope를 따릅니다. { } 안에서 선언된 변수는 해당 블럭 안에서만 사용 가능합니다.
파이썬이나 자바스크립트의 경우, 함수 내에서 사용된 변수는 함수 내에서만 사용 가능합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수 스코프(scope, 자세히 살피다, 범위, 영역, 시야)</title>

<script type="text/javascript">

	/*
		Scope = var로 선언된 변수가 인식가능한 범위
		
		프로그램 언어 종류에 따른 variable scope
		
		1) 자바, C
			=> 블럭 스코프 ( {} 안에서 선언된 변수는 블럭 안에서만 사용 가능 )
			
			
		2) 파이썬, 자바스크립트
			=> 함수 스코프 ( 함수안에서 선언된 변수는 안에서만 사용 가능 )
	*/
	
	var num = 10;
	if(num == 10){	//if 블럭
		var x = 100;
	}
	console.log(num);
	console.log(x);
	
	function kk(){	//함수 블럭
		var xx = 1000;		
	}
	
	console.log(xx);

</script>

</head>
<body>

</body>
</html>

변수 let
변수명을 중복 사용할 수 없습니다.
호이스팅도 불가합니다.
변수의 scope도 함수 스코프인 var와 다르게 자바, C와 같은 block scope를 따릅니다. ({} 안의 변수는 안에서만 사용)
let 변수는 Global standard JS인 ECMASript6를 따릅니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>let 이용한 변수</title>
<script type="text/javascript">

	/*
	자바스크립트 변수 사용방법 2가지
		1.var 이용
			-변수명 중복 가능
			-Hoisting 가능
			-Function Scope
		-ECMAScript5	(일반적으로 말하는 JavaScript)
			
		2.let 이용
			-변수명 중복 불가
			-Hoisting 불가
			-Block Scope
		-ECMAScript6	(global Standard JavaScript)

	*/
	
	//console.log(num)	** Hoisting 불가
	let num = 10;
	//let num = "홍길동";	** 변수명 중복 불가
	console.log(num);

	if(num==10){
		let x = 100;		
	}
	//console.log(x); Block Scope라서 Error	

</script>


</head>
<body>

</body>
</html>

상수, const
const 상수는 선언 후 변경이 불가한 상수입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//상수, ECMAScript6
	const num =10;
	console.log(num);
	num = 20;	//상수 변경 불가.
	console.log(num);

</script>

</head>
<body>

</body>
</html>

저작자표시 비영리 변경금지

'SK 행복성장캠퍼스 > Java Script' 카테고리의 다른 글

2020-09-21,JavaScript_3일차 (Event, DOM) (0)	2020.10.05
2020-09-21,JavaScript_3일차 (BOM) (0)	2020.10.04
2020-09-18,JavaScript_2일차(2) (0)	2020.10.04
2020-09-18,JavaScript_2일차 (0)	2020.09.28

Diversity

2020-09-17,JavaScript_1일차

'SK 행복성장캠퍼스 > Java Script' 카테고리의 다른 글

댓글

티스토리툴바

2020-09-17,JavaScript_1일차

'SK 행복성장캠퍼스 > Java Script' 카테고리의 다른 글

관련글

댓글

티스토리툴바