[JavaScript] 기초 문법, 변수, 연산자

<개발 환경>

준비물 : 비주얼 스튜디오 코드, 크롬 브라우저

(그 밖에 Edit Plus, Notepad++, Atom, Sublime Text, Brackets, Webstorm 등이 있지만

우리는 비주얼 스튜디오 코드를 사용한다.)

▶ 간단한 출력문 만들기

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1>Welcome My World</h1>
</body>
</html>

▶ 자바스크립트로 간단한 실행문 작성하기

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>맛보기 예제</title>
</head>
<body>
	<script>
		var age = prompt("당신의 나이는?", "0");
		if(age >= 20) {
			document.write("당신은 성인입니다.");
		} else {
			document.write("당신은 미성년자입니다.");
		}
	</script>
</body>
</html>

자바스크립트 기초 문법

▶ 자바스크립트 선언문

선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이다. <script>라는 태그로 선언문이 시작된 곳부터 </script>라는 태그로 종료된 곳까지를 스크립트 영역이라고 부른다.

선언문은 <head> 태그 영역 또는 <body> 태그 영역에 선언하면 된다. 우리나라 개발자의 대부분은 <head> 태그 영역에 선언하고 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선언문</title>
	<script>
		document.write("환영합니다");
	</script>
</head>
<body>
</body>
</html>

document는 문서 객체이며 문서 출력 메서드인 write( )를 이용하여 데이터를 문서에 출력할 때 사용한다.

▶ 자바스크립트 주석 처리

한 줄 주석일 경우에는 // 로, 여러 줄 주석일 경우에는 /* */ 로 작성한다.

▶ 내부 스크립트 분리하기

HTML 내부에 작성된 자바스크립트는 마지막에는 외부로 분리하는 작업을 해야한다. 그렇게 하면 자바스크립트 소스 찾기도 쉬울 뿐만 아니라 누군가가 소스를 손상시킬 염려도 없다. 즉, 외부로 분리하는 주된 목적은 프로젝트 관리를 원활하게 하기 위함이다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 외부 자바스크립트 연동 </title>
	<script src="js/example.js"></script>
</head>
<body>
</body>
</html>

변수

변수는 변하는 데이터(값)를 저장할 수 있는 메모리 공간이다. 변수를 선언할 때는 다음 기본형과 같이 var 키워드를 변수명 앞에 붙인다. 변수에는 하나의 값만 넣을 수 있다. 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 된다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 외부 자바스크립트 연동 </title>
	<script>
		var box;
		box = 100;
		box = 30;
		document.write(box);
	</script>
</head>
<body>
</body>
</html>

▶ 변수에 저장할 수 있는 자료형

문자형(String), 숫자형(Number), 논리형(Boolean), 빈 데이터(Undefined)가 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>논리형 데이터</title>
<script>
	var a = true;
	var b = false;
	var c = 10 > 5; //true
	var d = Boolean(null); //false 

	document.write(a, "<br>");
	document.write(b, "<br>");
	document.write(c, "<br>");
	document.write(d, "<br>");
</script>
</head>
<body>
</body>
</html>

▶ typeof

지정된 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>데이터 타입</title>
<script>
	var num = 100;
	var str = "자바스크립트"; 

	document.write(typeof num, "<br>");
	document.write(typeof str);
</script>
</head>
<body>
</body>
</html>

연산자

자바스크립트 프로그래밍에서 사용하는 연산자에는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자가 있다.

▶ 문자 결합 연산자

피연산자(연산 대상 데이터)가 문자형 데이터이다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 문자결합 연산자 </title>
<script>
	var t1 = "학교종이";
	var t2 = " 땡땡땡 ";
	var t3 = 8282;
	var t4 = " 어서 모이자";
	var result;

	result = t1 + t2 + t3 + t4; 
	document.write(result);
</script>
</head>
<body>
</body>
</html>

▶ 삼항 조건 연산자

조건식(true 또는 false의 결괏값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항 연산자로, 연산을 위해 피연산자가 3개 필요하다. 삼항 조건 연산자는 연산한 결과 조건식의 만족 여부에 따라 실행하는 코드를 다르게 실행하고자 할 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 삼항 조건 연산자 </title>
<script>
	var a = 10;
	var b = 3;

	var result = a > b ? "javascript" : "hello";
	document.write(result); //jvaascript
</script>
</head>
<body>
</body>
</html>

실습) 적정 체중 구하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 과체중 테스트 </title>
<script>
	var userHeight = 180;  // 신장
	var userWeight = 74;  // 몸무게
	
	// 평균 체중 = (키 - 100) * 0.9
	var normal_w = (userHeight - 100) * 0.9;
	document.write(normal_w);
</script>
</head>
<body>
</body>
</html>

실습) 적정 체중 구하는 코드 작성하기

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 적정 몸무게 구하기 </title>
<script>
	var name = prompt("당신의 이름은?", "");
	var height = prompt("당신의 신장은?", "0");
	var weight = prompt("당신의 몸무게는?", "0");
	
	var normal_w = (height - 100) * 0.9;
	var result = weight >= normal_w - 5 && weight <= normal_w + 5;
	result = result ? "적정 체중입니다." : "적정 체중이 아닙니다.";
	document.write(name +"님은 "+ result);
</script>
</head>
<body>
</body>
</html>

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

[JavaScript] 반복문 (0)	2021.02.02
[JavaScript] 제어문 (0)	2021.02.02
[JavaScript] 2020.4.10 공부기록 (0)	2021.02.02
[JavaScript] 2020.4.6 공부기록 (0)	2021.02.02
[JavaScript] 2020.4.4 공부기록 (0)	2021.02.02

🐠붕어의 코딩 공부 기록🐠

[JavaScript] 기초 문법, 변수, 연산자

▶ 간단한 출력문 만들기

▶ 자바스크립트로 간단한 실행문 작성하기

▶ 자바스크립트 선언문

▶ 자바스크립트 주석 처리

▶ 내부 스크립트 분리하기

▶ 변수에 저장할 수 있는 자료형

▶ typeof

▶ 문자 결합 연산자

▶ 삼항 조건 연산자

실습) 적정 체중 구하기

실습) 적정 체중 구하는 코드 작성하기

'JavaScript > JavaScript' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 기초 문법, 변수, 연산자

▶ 간단한 출력문 만들기

▶ 자바스크립트로 간단한 실행문 작성하기

▶ 자바스크립트 선언문

▶ 자바스크립트 주석 처리

▶ 내부 스크립트 분리하기

▶ 변수에 저장할 수 있는 자료형

▶ typeof

▶ 문자 결합 연산자

▶ 삼항 조건 연산자

실습) 적정 체중 구하기

실습) 적정 체중 구하는 코드 작성하기

'JavaScript > JavaScript' 카테고리의 다른 글

관련글

댓글

티스토리툴바