2020-09-17,JavaScript_1일차
대망의 자바 스크립트.
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>Js
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>