[웹 스터디 3주차] JavaScript

1. 웹브라우저와 자바스크립트

• 웹 문서 안에 <script> 태그로 자바스크립트 작성
  자바스크립트 코드가 짧으면 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성한다. 다음은 텍스트를 클릭했을 때 글자색을 바꾸는 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>
	<style>
		body { text-align:center; }
		h1 { color:blue; }
	</style>
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>
	<script>
		let heading = document.querySelector('#heading');
		heading.onclick = function() {
			heading.style.color = "red";
		}
	</script>
</body>
</html>

• 외부 스크립트 파일로 연결해서 자바스크립트 작성
  자바스크립트 코드를 따로 파일로 저장한 후 웹 문서에 연결해서 사용할 수 있다. <script> 태그를 사용하지 않고 확장자는 *.js로 저장한다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>글자색 바꾸기</title>
	<style>
		body { text-align:center; }
		h1 { color:blue; }
	</style>
</head>
<body>
	<h1 id="heading">자바스크립트</h1>
	<p id="text">위 텍스트를 클릭해 보세요</p>
	<script src="change-color.js"></script>
</body>
</html>

2.자바스크립트 용어와 기본 입출력

• 식과 문
  식: 표현식, 연산식, 실제 값, 함수 실행 등
  문: 명령, 조건문, 제어문, 끝에 세미콜론(;)을 붙인다.

• 기본 입출력
  1) 알림 창 출력: alert("메세지")
  2) 확인 창 출력: confirm("메세지")
  3) 프롬프트 창에서 입력받기: prompt("메세지")
  4) 웹 브라우저 화면 출력 document.write()문: document.write("메세지")
  5) 콘솔 창 출력 console.log()문: console.log("메세지")

3. 변수

변수란? 프로그램에서 자료를 담아두는 공간

• 변수 선언하기: let 변수명
• 상수 선언하기: const 상수명
  상수는 한번 값을 할당하면 프로그램 안에서 값이 변경되지 않는다.
• 변수 선언 규칙
  1) 변수 이름은 영어,숫자, _만 사용한다.
  2) 영어 대소 문자가 구별된다.
  3) 예약어는 변수로 사용할 수 없다. (ex. var)
  4) 여러 단어로 연결된 변수는 중간에 대문자를 섞어 쓴다. (ex. total area→TotalArea)
  5) 변수 이름은 의미 있게 작성한다.

4. 자료형

자료형이란? 숫자, 문자 등 컴퓨터가 처리할 수 있도록 자료형을 알려준다.
1) 숫자형: 정수와 실수로 나누어 구분한다. typeof 숫자
2) 문자열: 작은따옴표(')나 큰따옴표(")로 묶은 데이터
3) 논리형: 참이나 거짓의 값을 표현하는 자료형
4) undefined 유형과 null 유형

• undefined: 자료형이 정의되지 않았을 때 데이터 상태
• null: 데이터 값이 유효하지 않은 상태

5) 배열: 하나의 변수에 값을 여러 개 저장
배열명["값1", "값2", ...]
인덱스: 배열의 각 요소에 자신만의 방 번호가 할당되는데, 방 번호가 인덱스이다. 0, 1, 2, 3, ...

5. 연산자

• 산술 연산자: 수학 계산을 할 때 사용, 피연산자는 숫자나 변수가 온다.
  Ex) +(더하기), -(빼기), *(곱하기), /(몫), %(나머지), ++(+1), --(-1)
• 할당 연산자: 연산자 오른쪽의 실행 결과를 왼쪽 변수에 할당
  Ex) =, +=, -=, *=, /=, %=
  y += x는 y = y+x를 의미한다.
• 비교 연산자: 피연산자 2개의 값을 비교해서 참이나 거짓으로 결괏값 반환
  Ex) ==(값이 같을 때), ===(값, 자료형 모두 같을 때), !=(값이 같지 않을 때), !==(값이 같지 않거나 자료형이 같지 않을 때), <, >, <=, >=
• 논리 연산자: true, false 처리
  1-OR 연산자(||): 피연산자 중 하나만 true → true
  2-AND 연산자(&&): 피연산자 모두 true일 경우만 true
  3-NOT 연산자(!): 피연산자의 반댓값

6. 조건문

• if 문: if문 괄호 안의 조건이 true면 명령 실행, false면 아무것도 하지 않는다.
• if~else 문: if 조건이 true가 아닐 때 실행할 명령을 else 문 다음에 추가
  다음은 if~else 문을 사용하여 사용자가 입력한 변수가 3의 배수인지 확인한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>조건문</title>
</head>
<body>
    <script>
      let userNumber=parseInt(prompt('숫자를 입력하세요.'));
      if (userNumber%3==0)
        alert('3의 배수입니다.');
      else
        alert('3의 배수가 아닙니다.');
    </script>
</body>
</html>

• swich 문: 처리할 명령이 많을 때 사용, 조건을 체크한 후 case 문을 사용하여 명령을 처리한다.

<script>
	var session = prompt("관심 세션을 선택하세요. 1-마케팅, 2-개발, 3-디자인");
	switch (session) {
		case "1":
			document.write("마케팅 세션을 선택하셨습니다.");
			break;
		case "2":
			document.write("개발 세션을 선택하셨습니다.");
			break;
		case "3":
			document.write("디자인 세션을 선택하셨습니다.");
			break;
		default:
			document.write("잘못 입력했습니다.");
	}
</script>