JAVASCRIPT 01

박종휘·2022년 9월 7일

HTML & CSS & JAVASCRIPT - 국비

목록 보기

1/1

📚 Vanilla JS (바닐라 스크립트)

바닐라 자바스크립트 = 자바스크립트
바닐라 자바스크립트란 플러그인이나, 라이브러리를 아용하지 않은 순수 자바스크립트를 이야기한다.

관련 사이트
http://vanilla-js.com/ (바닐라 자바스크립트 설명)
https://www.w3schools.com/js/js_es6.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
(자바스크립트 레퍼런스)

💬 자바스크립트 맛보기

alert 창 띄우기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		alert('Hello World!!');
	</script>
</body>
</html>

웹의 개발자 도구 console 창에서 작업 과정 확인하기
- 개발자 도구는 F12를 누른다.
- console.log()를 사용한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		console.log('console log!!!!');
	</script>
</body>
</html>

1. 변수의 사용 방법

변수를 사용하기 위해서는 "선언"과 "할당"의 두 영역으로 구분해야 한다.
선언은 VAR 키워드를 사용하고, 사용하고자 하는 변수의 이름을 지정한 후에 세미콜론(;)으로 한 라인을 종료한다.
```
		var num;
  		var hello;
```
변수의 할당
- 선언된 변수에 원하는 값을 대입하는 과정을 의미한다.
```
		num = 12345;
		hello = "안녕하세요";
```
선언과 할당의 통합
- 선언을 위한 라인과 할당을 위한 라인은 한줄로 표현이 가능하다.
```
		var num = 12345;
		var hello = "안녕하세요";
```
문자는 " (큰 따옴표) 혹은 ' (작은 따옴표) 중의 하나로 감싸야한다. 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		// 변수의 선언
		var num1;
		var msg1;
		
		// 변수의 할당
		num1 = 12345;
		msg1 = "Hello Javascript";
		
		// 변수의 선언과 할당
		var num2 = 3.14;
		var msg2 = "자바스크립트";
		
		// 브라우저 콘솔 영역에 출력
		console.log(num1);
		console.log(msg1);
		console.log(num2);
		console.log(msg2);
		
		console.log(2*8);
		
		// boolean 값 사용
		var isMan = true;
		console.log(isMan);
		
		// null값
		var value1 = null;
		console.log(value1);
		
		// undefined - 선언만 된 상태
		var value2;
		console.log(value2);  
        // java처럼 에러가 나지 않고 undefined가 출력된다.
		
		var msg3 = '문자열 선언';
		console.log(msg3);
		
		console.log(typeof msg3);
		console.log(typeof num1);
		// typeof : 데이터형이 무엇인지 확인할 수 있다.
	</script>
</body>
</html>

다음과 같이 개발자 도구 console 창에 직접 입력하여 확인 할 수도 있다.
문자열 합치기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		var first = "coding";
		console.log(first + "javascript");
		
		var a = 'coding', b = 'everybody';
		console.log(a + b);
		
		// a 재할당 및 문자열 합치기
		a = '코딩';
		console.log(a + b);
	</script>
</body>
</html>

( ; ) 세미콜론

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		var c = 1
		console.log(c)
		// 자바스크립트에서는 ;(세미콜론)을 넣지않고 엔터만 치면
		// 알아서 컴파일을 한다. 렌더링을 한다.
		
		var d = 1 console.log(c)
		// 하지만 일자로 쓰면 에러가 뜬다.
		// 해결법은 (var d = 1; console.log(c);) 
        // 이렇게 세미콜론을 붙여주는 것이다.
	</script>
</body>
</html>

2. 연산자

2-1. 대입 연산자

대입 연산자(=)

2-2. 사칙 연산자

일반적인 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/,%)
/ : 몫
% : 나머지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		// 사칙연산
		var num1 = 100 + 30;
		var num2 = 100 - 30;
		var num3 = 100 * 30;
		var num4 = 100 / 30;
		var num5 = 100 % 30;
		
		console.log(num1);
		console.log(num2);
		console.log(num3);
		console.log(num4);
		console.log(num5);
	</script>
</body>
</html>

2-3. 단항 연산자

어떤 변수(x)의 값에 대한 결과를 다시 자기 자신에게 대입하고자 하는 경우에 대한 약식 표현
+=
-=
*=
/=
%=

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		// 단항연산자
		var num = 100;
		
		num += 5;
		console.log(num);
		
		num -= 3;
		console.log(num);
		
		num *= 5;
		console.log(num);
		
		num /= 3;
		console.log(num);
		
		num %= 3;
		console.log(num);	
	</script>
</body>
</html>

2-4. 증감 연산자

단항 연산자로 표현할 수 있는 식에서 계산에 대한 값이 1인 경우, 덧셈과 뺄셈에 대해서는 다시 한번 축약할 수 있다.
덧셈
x = x + 1;
x += 1;
x++;
++x;
뺄샘
x = x - 1;
x -= 1;
x--;
--x;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		// 증감연산자
		var plus_num = 1;
		plus_num = plus_num + 1;
		plus_num += 1;
		plus_num++;
		++plus_num;
		console.log(plus_num);
		
		var minus_num = 4;
		minus_num = minus_num - 1;
		minus_num -= 1;
		minus_num--;
		--minus_num;
		console.log(minus_num);
	</script>
</body>
</html>

문자열과 숫자 합치기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
		// 문자값과 숫자값이 더해질 경우, 숫자값이
		// 문자열 형태로 변환된다.
		var msg = "안녕하세요";
		var num = 1234;
		var result = msg + num;
		console.log(result);
	</script>
</body>
</html>

-> result의 값이 문자열이라는 것을 알 수 있다.

3. 조건문

if문
switch문
비교식 : == (같다), != (다르다)
부등식 : < (작다), > (크다), <= (작거나 같다) >= (크거나 같다)

4. 비교연산자 (== or !=)

프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false다.
자바스크립트에서는 비슷한 것을 같은 것으로 간주하기도 한다.

5. 일치연산자 (=== or !==)

일치 연산자로 좌우가 정확, 엄격하게 같을 때 true, 다르면 false이다.

6. document.write (출력 내용)

HTML페이지의 body 태그 안을 javascript에서는 document (=문서)라고 부른다.
body 태그 안에 새로운 내용을 출력하고자 할 경우, 자바스크립트에게 write라는 명령어를 전달한다.
다른 HTML 태그를 포함하여 출력할 수 있다.

7. 논리연산자

8. 삼항연산자

condition? expT : expF
condition : 조건문으로 들어갈 표현식
expT : 참일 때 실행할 식
expF : 거짓일 때 실행할 식

9. 반복문

🎇 true -> 1, false -> 0

박종휘

개린이의 개발 고수되기 작전!

JAVASCRIPT 01

HTML & CSS & JAVASCRIPT - 국비

📚 Vanilla JS (바닐라 스크립트)

💬 자바스크립트 맛보기

1. 변수의 사용 방법

2. 연산자

3. 조건문

4. 비교연산자 (== or !=)

5. 일치연산자 (=== or !==)

6. document.write (출력 내용)

7. 논리연산자

8. 삼항연산자

9. 반복문

0개의 댓글