자바스크립트

프로그래밍/JavaScript 자바스크립트 2021. 9. 26.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">

var a=10, b=20, c; // 변수 선언(초기화)

console.log(c); // undefined - 초기값을 부여하지 않는 경우

// c = a + x; // 에러 : ReferenceError 예외 발생
c = a + b;
console.log(c);
</script>

</head>
<body>

<h3>변수(variable) 선언</h3>

</body>
</html>

- 자바스크립트는 인터넷창 개발자 도구에서 콘솔로 값을 확인 할 수 있다.

대신에 코드에 출력할 내용도 콘솔로 출력하게 입력 해야한다.

변수를 선언 할 때에는 var로 선언을 시작한다.

var a=10 >> a라는 변수 선언및 10으로 초기화

console.log(c); >> 출력창 print문과 비슷하게 개발자 도구 콘솔 로그에서 확인 가능 하다.

- 코드에서 c가 undefined가 나오는 이유는 c가 코드내에 존재는 하지만 c에 값이 존재하지 않아서

undefined가 나온것, 순서가 잘못됐기 때문이다.

이걸 변수 호이스팅 이라고 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a=10; // 전역 변수

function fun() { // 함수 선언
	console.log(a); // 10
	
	if(true) {
		var x=5; // var로 선언한 변수의 범위는 if() 블록이 아니라 x가 선언된 함수이다. 
	}
	console.log(x); // 5
	
	if(true) {
		let y=10; // let로 선언한 변수의 범위는 if() 블록이다.
	}
	// console.log(y); // ReferenceError
}


fun(); // 함수 호출

</script>
</head>
<body>

<h3>변수 범위</h3>

</body>
</html>

- function 으로 메소드(함수)를 만들 수 있다.

var 함수는 전역 변수로써 if문 안에서 선언을 해도 밖에서 사용 할 수 있다.

하지만 let 변수는 블록 함수로써 블록문 내부에서만 사용 할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

b = '자바'; // string - 문자열
a = typeof(b);
console.log(a);

b = 50 ; // number - 숫자
a = typeof(b);
console.log(a);

b = true; // boolean - 논리형
a = typeof(b);
console.log(a);

b = function() { };  // function - 함수
a = typeof(b);
console.log(a);

b = { };  // object - 객체 
a = typeof(b);
console.log(a);

b = null;  // object - 객체. null은 빈객체를 참조하는 특별한 값
a = typeof(b);
console.log(a);

var x;
a = typeof(x); // undefined - 값이 초기화되지 않는 변수는 undefined 타입이다. 
console.log(a);
console.log(x);  // 값이 초기화되지 않는 변수의 값은 undefined이다.
				// undefined는 타입이자 값이다.

a = typeof(y); // undefined - 정의하지 않는 변수는 undefined 타입이다.
console.log(a);
</script>

</head>
<body>

<h3>데이터 타입</h3>

</body>
</html>

- 자바스크립트에서 문자열 변수 선언은 '' 작은 따옴표나 큰 따옴표 "" 둘다 상관이 없다.

- 그리고 숫자는 타입을 확인할 때 Number로 표시된다. int가 아님.

- null의 타입은 object

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">

var a = null;
var b;

b = typeof(a);
console.log(b); // null은 타입이 object

// 변수가 null인지 확인 하려면 
 b = a === null; // =이 3개면 일치 연산자로써 같은지 아닌지 비교하는 방법 트루나 폴스 둘중 하나
 console.log(b); // true
</script>
</head>
<body>

<h3>데이터 타입 - null</h3>

</body>
</html>

- 자바스크립트에서는 일치 하는지 아닌지는 === 는 을 3개 사용해서 비교를 한다.

a === b a랑 b가 같으면 true 아니면 false가 나온다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a;

a = 10 + '20'; // 숫자 + 문자 => 문자 + 문자 => 문자로 형변환 됨(+는 문자 우선)
               // 문자 + 숫자 => 문자 + 문자
console.log(a); // 1020

a = 20 - '15'; // "숫자 연산자 문자" 에서 "+" 이외는 문자가 숫자로 형변환 됨
console.log(a); // 5

a = 20 * '10'; // 문자가 숫자로 형변환 되어 연산 됨
console.log(a); // 200

</script>
</head>
<body>

<h3>형변환</h3>

</body>
</html>

- 자바스크립트에서 숫자 + 문자열 = 숫자에 문자열 2개 바로 붙는다.

10 + '20' = 1020

- 하지만 이건 오직 + 연산자만 해당된다.

- 반대로 - 마이너스로 하면 형변환이 되어서 계산이 된다.

20 - '15' = 5 가 나온다.

20 * '10' = 200

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a, b;

a = "123";
console.log(typeof(a));

b = a + 10;
console.log(b); // 12310

a = Number(a); // Number() 함수를 이용한 문자열을 숫자로 변환
console.log(typeof(a)); // number
b = a + 10;
console.log(b);  // 133

a = String(a); // String() 함수를 이용하여 숫자를 문자열로 변환
console.log(typeof(a)); // string

a = "true";
console.log(typeof(a)); // string

a = Boolean(a); // Boolean() 함수를 이용하여 문자열을 boolean으로 변환
console.log(typeof(a)); // boolean

</script>

</head>
<body>

<h3>형변환</h3>

</body>
</html>

- 형변환 하는 방법은 괄호 씌워주고 앞에 원하는 형태를 붙이면 된다.

var a = '10'

a = Number(a)

이렇게 하면 문자열 형태인 10이 숫자로 바뀐다.

- 숫자를 문자열로 변환 하기

String(a)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
const PI = 3.141592;
// const sub = 10; // 에러:const 이름과 함수명은 동일 할수 없다.

function sub() {
	console.log(PI);
	
	// PI = 3.14; // 에러:TypeError-값 변경 불가
	
	const x = 10;
	// var x = 5; // 에러:상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언 불가
	
	// const a; // 에러:상수는 선언과 동시에 초기화 해야 함
	
	if(true) {
		const a = 10; // const는 let 블록 범위 변수와 동일하므로 if()에서만 유효
	}
	var a = 100;
	console.log(a);
	
	// 상수로 선언된 객체의 속성 및 배열의 내용은 보호 하지 않는다.
	const arr = ['HTML', 'CSS']; // 배열
	arr.push('JavaScript'); // 배열 뒤에 요소 추가
	console.log(arr); //  ['HTML', 'CSS', 'JavaScript']
	
	const obj = {'subject':'java'}; // 객체
	console.log(obj.subject); // java
	obj.subject = 'HTML'; // 가능
	console.log(obj.subject); // HTML
}

sub();

</script>
</head>
<body>

<h3>상수-const</h3>
</body>
</html>

- const는 상수 즉 변하지 않는 수 이다.

한번 값을 넣으면 그 후로는 변경 불가능 하다.

그리고 선언과 동시에 초기화를 해야 한다. (바로 선언하면서 값을 넣으라는 뜻)

const는 let처럼 해당 블록에서만 유효하다.

하지만 상수로 선언한 객체나 배열은 보호 되지 않는다.

값을 추가하거나 하는 행위가 가능함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var a;

a = 13; // 10진수
console.log(a); // 13

a = 013; // 8진수
console.log(a); // 11

a = 0x13; // 16진수
console.log(a); // 19

a = 0b1001; // 2진수진수
console.log(a); // 9

a = 3.141592;
console.log(a); // 부동 소수점

a = 3.1E+12
console.log(a); // 부동 소수점

a = 'seoul'; // 문자열 리터널
console.log(a);

a = "seoul"; // 문자열 리터널
console.log(a);

a = "c:\\temp"; // 문자 이스케이프
console.log(a);

a = "subject : \"java\", price:1000";
console.log(a); // 문자 이스케이프

a = 'subject : "java", price:1000';
console.log(a);

a = /ab+c/; // 정규식 리터널
console.log(a);

a = ["html", "css", "javascript"]; //  배열 리터널
console.log(a);

a = {name:"홍길동", age:20}; // 객체 리터널
console.log(a);

var x = "홍";
var y = "길동";
var msg;

msg = `안녕하세요 ${x} ${y}님`;  // 템플릿 리터널(${} 표현식으로 처리된 값을 문자열로 반환)
        // 템플릿 리터널은 반드시 백틱(`)를 사용하며 ' 또는 "를 사용하지 않는다.
console.log(msg);

</script>

</head>
<body>

<h3>리터널(literal)</h3>

</body>
</html>

- 리터널이란 그냥 값 그 자체를 말한다.

어떠한 개념이 있는건 아니고 변수에 어떤 값이 들어갈때 그 값 자체를 리터널 이라고 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b, c;

// +, -, *, /, %, ++, --

c = 10 / 0;
console.log(c); // Infinity : 무한대를 나타내는 숫자
if(c === Infinity ) {
	console.log('0으로 나누었습니다.');
}

a = 2;
b = 10;
c = a ** b; // 거듭 제곱
console.log(c);

c = 2 ** 3 ** 2;  // 2 ** (3 ** 2) 과 동일. 우결합성
console.log(c); // 512

// c = -2 ** 2; // 에러. 모호한 표현은 허용하지 않음

// 문자열 결합
a = "seoul";
b = "korea";
c = a + b;
console.log(c);

a = 10;
b = "5";
c = a + b; // 숫자 + 문자 => 문자 + 문자 => 문자
console.log(c); // 105

a = "1.1";
b = "1.1";
c = a + b; // 1.11.1
console.log(c);
c = (+a) + (+b); // 2.2 => 단항연산자 +사용, 괄호는 생략 가능
console.log(c);

</script>
</head>
<body>

<h3>연산자</h3>

</body>
</html>

- 거듭 제곱을 표현 할 때에는 곱하기를 두번 쓴다.

2의 2승 = 2 ** 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a = "";

// 값이 "", 0, null, undefined, NaN 등은 거짓이다.
if( a ) {
	console.log("참...");
} else {
	console.log("거짓...");
}

a = 0;
if( a ) {
	console.log("true...");
} else {
	console.log("false...");
}

a = "html" && "css";
console.log(a); // css

a = "html" && true;
console.log(a); // true

a = false && "css";
console.log(a); // false

a = "html" || "css";
console.log(a); // html

a = "html" || true;
console.log(a); // html

a = false || "css";
console.log(a); // css

a = 0 || "css";
console.log(a); // css

a = 10 || "css";
console.log(a); // 10
</script>
</head>
<body>

<h3>연산자 - 논리</h3>

</body>
</html>

변수의 값이 0, "", null, NaN 의 값이면 false가 나온다.

그리고 어떤 값이라도 들어가 있으면 true가 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
function result() {
	var age = document.getElementById("inputs").value;
	var s;
	s = age >= 19 ? "성인" : "미성년자";
	
	document.getElementById("resultLayout").innerHTML = "결과 : " + s;
}
</script>
</head>
<body>

<p>
	<input type="text" id="inputs" placeholder="나이를 입력 하세요">
	<button type="button" onclick="result();">확인</button>
</p>
<hr>
<div id="resultLayout"></div>

</body>
</html>

자바스크립트에서도 삼항 연산자 사용이 가능하다.

그리고 HTML과의 연계도 할 수 있다.

document = 이 문서의

getElementById("inputs") = inputs이라는 id를 찾아서

.value = 값으로 설정 그걸 var age에 담는다.

이 진행을 위해서 HTML 구역에서 input text박스를 만들어서 그 text 박스 id를 동일하게 inputs을 주었다.

HTML 문서에서 값을 입력하면 그 값이 var age에 담긴다는 소리.

그 값을 가지고 삼항 연산자를 통해서 계산을 한 이후에 확인 버튼을 누르면 출력해서 보여준다는 소리.

HTML 화면상에 띄워줌.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
console.log(a === 123); // false

b = parseInt(a); // 문자열을 숫자로 변환
console.log(b); // 123
console.log(b === 123); // true

a = "1,234";
b = parseInt(a); // 1
console.log(a + " : " + b); // 1,234 : 1 

a = "123a";
b = parseInt(a); // 123
console.log(a + " : " + b); // 123a : 123 

a = "a123";
b = parseInt(a); // NaN
console.log(a + " : " + b); // 123a : NaN 

a = "123.567";
b = parseInt(a); // 123
console.log(a + " : " + b); // 123.567 : 123 

a = "";
b = parseInt(a); // NaN
console.log(a + " : " + b); // : NaN 

a = "    123";
b = parseInt(a); // 123
console.log(a + " : " + b); 

a = "1 2 3";
b = parseInt(a); // 1
console.log(a + " : " + b); 

a = "123.567";
b = parseFloat(a); // 123.567
console.log(a + " : " + b); 
</script>
</head>
<body>

<h3>숫자로 변환 - parseInt, parseFloat</h3>

</body>
</html>

문자열을 숫자로 변환 할 때 parseInt라는 명령어가 있다.

대신 바꾸려는 문자열에 콤마나 점 같은 숫자가 아닌 것들이 있다면 그 앞에까지만 변환한다.

123,456 = 변환하면 123이 나옴 콤마 때문에 뒤에는 무시가 된다.

123.567 = 123

이걸 전부 변환 하려면 parseFloat라는 명령어를 써야 한다.

말 그대로 소수점 까지 표현 가능함.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
b = Number(a);
console.log(b);
console.log(b === 123); // true

a = "123.57";
b = Number(a); // 123.57
console.log(a + " : " + b);

a = "1,234";
b = Number(a); // NaN
console.log(a + " : " + b);

a = "123a";
b = Number(a); // NaN
console.log(a + " : " + b);

a = "";
b = Number(a); // 0
console.log(a + " : " + b);

a = null;
b = Number(a); // 0
console.log(a + " : " + b);

a = "kor";
b = Number(a); // NaN
console.log(a + " : " + b);

a = "0x11";
b = Number(a); // 17
console.log(a + " : " + b);

</script>
</head>
<body>

<h3>숫자로 변환 - Number() 함수</h3>

</body>
</html>

Number로 형 변환을 할 경우에는 parseInt와 결과 값이 다르니 조심 해야 한다.

오로지 숫자만 있을때 형변환이 가능 하다.

그리고 특이하게 null이나 공백은 숫자 0으로 변환이 된다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var a, b;

a = "123";
b = isFinite(a); // true. 숫자로 이루어져 있는 경우 true
console.log(a +" : " + b)

a = "123.57";
b = isFinite(a); // true
console.log(a +" : " + b)

a = "1,234";
b = isFinite(a); // false
console.log(a +" : " + b)

a = "123a";
b = isFinite(a); // false
console.log(a +" : " + b)

a = "123";
b = isNaN(a); // false. 숫자로 이루어져 있지 않으면 true
console.log(a +" : " + b)

a = "1,234";
b = isNaN(a); // true
console.log(a +" : " + b)
</script>
</head>
<body>

<h3>문자열이 숫자로 이루어져 있는지 확인</h3>

</body>
</html>

값이 숫자인지 아닌지 확인할때 쓰는 명령어도 있다.

isFinite = 문자열이 숫자로만 이루어져 있을경우 true

isNaN = 문자열이 숫자로만 이루어져 있지 않을 경우 true

서로 반대의 개념

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var s;
s = "var a=10, b=5, c;";
s += "c = a + b;";
s += "alert(c);";

// console.log(s);

// 문자열을 코드로 실행
eval(s);

s = "console.log(c);"
eval(s); // eval() 함수로 호출한 코드의 변수를 사용
</script>
</head>
<body>

<h3>문자열을 자바스크립트 코드로 실행 - eval() 함수</h3>

</body>
</html>

eval 명령어는 문자열을 코드로 실행 하는 것인데.

문자열 그 자체를 코드로 실행 하는 것.

s 에는 alert가 담겨져 있으니 alert 그 자체를 실행 하는 것.

eval은 편하긴 하나 위험성이 많다. 조심할 것.

저작자표시

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

자바스크립트 - 문자열 활용 (0)	2021.09.27
자바스크립트 - 함수 만들기 (0)	2021.09.27
자바스크립트 - 반복문, if문, prompt, confirm (0)	2021.09.27
자바스크립트 - 기초(3) / 타이머 함수 (0)	2021.09.26
자바스크립트 - 기초(2) / 인코딩과 디코딩 (0)	2021.09.26

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'프로그래밍 > JavaScript 자바스크립트' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바