[JavaScript] JS 기초 (1)

개발(Web)/Web

[JavaScript] JS 기초 (1)

shinyelee 2021. 2. 2. 00:43

개요

자바스크립트 [JavaScript, JS]	객체기반 스크립트 프로그래밍 언어 HTML, CSS에서 만든 정적인 페이지를 동적으로 만듦
특징	C언어 기반의 문법 사용 오픈된 소스코드 다양한 라이브러리 제공(ex. jQuery, Ajax, JSON)
특징	넷스케이프에서 개발한 스크립트 언어 HTML 문서 내부에 포함된 기능 웹 브라우저, 인터프리터 이용해 실행 (위에서 → 아래로, 순차적으로 실행)

참고

JSP [Java Server Pages]	JAVA를 이용한 서버 스크립트 언어(한마디로 JAVA 확장판)
자바 vs 자바스크립트	서버에서 제공하는 언어 vs 클라이언트에서 받는 언어
자바-자바스크립트는 인도-인도네시아와 같음 (이름만 비슷하고 관계도 없는 아예 다른 언어) 같이 사용해 서로의 부담을 줄임

컴파일러 VS 인터프리터

컴파일러 [compiler]	자바 소스코드 → 기계어 변경(JVM) ⇒ 소스코드 분석 해석
인터프리터 [interpreter]	소스코드를 인터프리터가 바로 읽고 사용 (웹 브라우저에 포함돼 있음)

주석 종류

HTML 주석문	<!-- 내용 -->
JS 주석문	<script type="text/javascript"> //주석문 : 실행이 안 되는 코드로, //는 한 줄 주석 /* 화면에 출력 안 되기 때문에 주로 코드 설명, 테스트용 2줄 이상, 즉 블럭 주석 필요할 땐 슬래시(/)와 별() 이용 / </script>

001.html

입력 양식	설명
document.write(내용);	브라우저에 내용 표시
console.log(내용);	개발자도구(F12) 콘솔창에 내용 표시
alert(내용);	경고창에 내용 표시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p {color: red;}
/* 주석 */
</style>
</head>
<body>
	<!-- 주석 -->
	<p id="one">hello world</p>
	<script>
	// 주석
	document.getElementById('one').innerHTML = 'paul<strong>lab<strong>'
	document.write('내용');
	window.alert('경고창');
	console.log('개발자도구(F12)-Console에 메시지 출력');
	</script>
</body>
</html>

변수

변수 [var, variable]	데이터를 저장하는 공간(메모리) 공간 하나에 데이터 하나만 저장할 수 있음 새로운 데이터가 들어오면 기존 데이터 덮어씀 undefined : 변수에 아무 값도 안 넣음 null : 변수에 빈 값을 넣음
변수 유형	문자형(string), 숫자형(number), 논리형(boolean)
변수 사용	1. 변수 선언(데이터 저장공간에 이름 붙이고 메모리 확보) 2. 변수 초기화(변수 선언하자마자 값 대입)3. 변수 사용
입력 양식	var 변수명; var 변수명 = 값;
변수명 작성	1. 영문자, 숫자, 특수문자(_,$) 사용 가능2. 첫 글자는 무조건 대문자로 시작(소문자, 숫자 불가)3. 짧으면서 구체적인 단어로(코드는 나만 보는 것이 아님)4. 대소문자를 구분하며 여러 단어일 시 카멜표기법 사용5. 예약어 사용 불가(ex. if, for, while, switch, else, var, class)
카멜표기법 [camelCase]	변수명에 띄어쓰기 대신 대문자 이용해 단어 구분간헐적인 대문자 등장이 낙타 등처럼 보임
변수명 입력 양식	var dlwlrma_iu; (X)var dlwlrmaIu; (O)

참고

typeof 연산자	변수/데이터 타입을 알아낼 때 사용
입력 양식	document.write(typeof 변수/데이터);

예시

입력	출력	설명
document.write(typeof "123"); document.write("<br>"); document.write(typeof 123); document.write("<br>"); document.write(typeof null);		문자는 string 숫자는 number 객체나 null은 object
value = "1000"; document.write("<br>"); document.write(typeof value); value = 1000; document.write("<br>"); document.write(typeof value); var value = null; document.write("<br>"); document.write(typeof value);		문자는 string 숫자는 number 객체나 null은 object 참고로 정의X 변수는 undefined 참/거짓은 boolean 함수는 function

002.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var 변수하나 = 100;
	변수하나 = 200;
	document.write(변수하나 + 변수하나);
	// 100+200 아니고 200+200임
	// (변수를 처음에 100으로 정의했다가 나중에 200으로 바꾼 것으로 간주함)
	document.write('<br>');
	
	var 변수둘 = '200';
	document.write(변수둘 + 변수둘);
	// 200은 숫자(이백), '200'은 문자(이영영)임
	document.write('<br>');
	
	var name = 'shinyelee'
	document.write(name[0]);
	// shinyelee에서 첫번째(1이 아닌 0부터 시작) 문자 출력
	// -> s h i n y e l e e
	// -> 0 1 2 3 4 5 6 7 8
	</script>
</body>
</html>

산술연산자

+	더하기(string+number=string이니 주의)
-	빼기(string도 number처럼 연산 되나, 오류 발생 가능성)
*	곱하기(string도 number처럼 연산 되나, 오류 발생 가능성)
/	나누기(string도 number처럼 연산 되나, 오류 발생 가능성)
%	나머지(나눗셈 후 몫 말고 나머지)

대입연산자

대입연산자 [=]	변수에 데이터(값)을 저장하는 연산자 왼쪽 피연산자 값에 오른쪽 피연산자 값 대입 산술연산자와 다르게, 연산의 방향이 왼쪽 ← 오른쪽
입력 양식	A = B;

복합대입연산자/할당연산자

+=	왼쪽 값에 오른쪽 값 더함 → 왼쪽에 대입
-=	왼쪽 값에 오른쪽 값 뺌 → 왼쪽에 대입
*=	왼쪽 값에 오른쪽 값 곱함 → 왼쪽에 대입
/=	왼쪽 값에 오른쪽 값 나눔 → 왼쪽에 대입
%=	왼쪽 값에 오른쪽 값 나눈 나머지 → 왼쪽에 대입

예시(양쪽 수식은 같은 내용)

A += B; ⇔ A = A + B; (누적합)

A -= B; ⇔ A = A - B;

A *= B; ⇔ A = A * B;

A /= B; ⇔ A = A / B;

A %= B; ⇔ A = A % B;

003.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var x, y, z;
	x = 3;
	y = 5;
	z = 7;
	
	// 더하기
	document.write(x + y);
	document.write('<br>');
	
	// 빼기
	document.write(x - y);
	document.write('<br>');
	
	// 곱하기
	document.write(x * y);
	document.write('<br>');
	
	// 나누기
	document.write(y / x);
	document.write('<br>');
	
	// 제곱
	document.write(x ** y);
	document.write('<br>');
	
	// 나눈 나머지
	document.write(y % x);
	document.write('<br>');
	
	// 1 증가
	x++;
	// 1 감소
	y--;
	document.write('x값=', x, ', y값=', y);
	document.write('<br>');
	
	// z*=3 은 z에 3 곱한다는 뜻
	</script>
</body>
</html>

비교연산자

>	변수(왼쪽) 값이 더 크면 참(초과)
>=	변수(왼쪽) 값이 더 크거나 같으면 참(이상)
<	변수(왼쪽) 값이 더 작으면 참(미만)
<=	변수(왼쪽) 값이 더 작거나 같으면 참(이하)

=	비교연산자가 아닌, 대입연산자
==	양쪽 값이 같으면 참
===	양쪽 값과 데이터 타입이 같으면 참
!=	양쪽 값이 다르면 참
!==	양쪽 값과 데이터 타입이 다르면 참

참고

논리형 데이터 [boolean]	참(true), 거짓(false) 판별 데이터 0, null, undefine 값이 아닌 경우 항상 true 값을 돌려줌
0	값이 0
null	값이 없음 (의도적으로 빈 값 명시, 변수 초기화에 사용)데이터 형태 : object
undefined	값이 없음 (선언/정의/초기화 안 해 값이 할당되지 않은 변수)데이터 형태 : undefined
비교연산자	주어진 값이 서로 같은지/다른지, 큰지/작은지 계산함

예시

입력	출력	설명
document.write(Boolean(-20)); document.write(" "); document.write(Boolean(7.5)); document.write(" "); document.write(Boolean(12/13));		모든 숫자는 항상 true 출력
document.write(Boolean(0)); document.write(" "); document.write(Boolean(null)); document.write(" "); document.write(Boolean(undefined));		0, null, undefined는 false 출력

004.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var x, y, z;
	x = 3;
	y = 5;
	z = '3';
	
	document.write(x > y);
	document.write('<br>');
	
	document.write(x >= y);
	document.write('<br>');
	
	document.write(x < y);
	document.write('<br>');
	
	document.write(x <= y);
	document.write('<br>');
	
	// 같음(생김새만 같으면 타입 노상관)
	document.write(x == z);
	document.write('<br>');
	
	// 다름
	document.write(x != y);
	document.write('<br>');

	// 존똑(데이터 타입도 동일해야 함)
	document.write(x === z);
	document.write('<br>');
	</script>
</body>
</html>

논리연산자

논리연산자		논리값(true, false)을 가지고 연산
종류	And [&&]	둘 다 참일 때 true, 그 외는 false 반환
	Or [\|\|]	둘 중 하나 이상 참일 때 true, 그 외는 false 반환
	Not [!]	true나 false를 반대로 바꿈

&&, || 논리표

변수/값		연산자
A	B	&&	\|\|
참	참	true	true
참	거짓	false	true
거짓	참	false	true
거짓	거짓	false	false

!=, !== 논리표

변수/값	연산자
A	!= 또는 !==
참	false
거짓	true

005.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var x, y, z;
	x = 3;
	y = true; // 1
	z = false; // 0
	
	document.write(x && y); // and, *
	document.write('<br>');
	
	document.write(x || y); // or, +
	document.write('<br>');
	
	document.write(!y); // not, 반대
	document.write('<br>');
	
	</script>
</body>
</html>

006.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	function f(x, y) {
		var z;
		z = x + y;
		return z
	}
	document.write(f(3,6));
	</script>
</body>
</html>

007.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var txt = 'shinyelee';
	
	// 문자열 길이
	document.write(txt.length);
	document.write('<br>');
	
	// 문자열 위치
	document.write(txt.indexOf('lee'));
	document.write('<br>');
	
	// 문자열 자르기
	document.write(txt.slice(0, 7));
	document.write('<br>');
	
	// 문자열 대치
	document.write(txt.replace('lee', 'kim'));
	document.write('<br>');
	
	// 대문자로 전환
	document.write(txt.toUpperCase());
	document.write('<br>');
	
	var num = 10;
	
	// 소수점 5자리까지 표기
	document.write(num.toFixed(5));
	document.write('<br>');
	
	// 숫자를 문자열로 바꿈
	document.write(num.toString());
	document.write('<br>');
	
	// 파이(π, 3.14웅앵)
	document.write(Math.PI);
	document.write('<br>');
	
	// 최댓값 구하기
	document.write(Math.max(10, 20, 30));
	document.write('<br>');
	
	// 무작위로 숫자 생성
	document.write(Math.random());
	document.write('<br>');
	</script>
</body>
</html>

008.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var date = new Date();
	
	// 연월일시분초 full
	document.write(date);
	document.write('<br>');
	
	// 0  1  2 ... 11
	// 1월 2월 3월 ... 12월
	document.write(date.getMonth());
	document.write('<br>');
	
	// 0 1 2 3 4 5 6
	// 일  월  화  수  목  금  토
	document.write(date.getDay());
	document.write('<br>');
	
	// 날짜
	document.write(date.getDate());
	document.write('<br>');
	
	// 시
	document.write(date.getHours());
	document.write('<br>');
	</script>
</body>
</html>

009.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script>
	var l = [10, 20, 30, 40];
	// 여러개의 자료를 순서를 정해 저장할 때 배열 사용.
	
	document.write(l[2]);
	document.write('<br>');
	</script>
</body>
</html>

출처

'개발(Web) > Web' 카테고리의 다른 글

[Node.js] npm WARN optional/notsup SKIPPING OPTIONAL DEPENDENCY: 어쩌구 (0)	2021.02.08
[JavaScript] JS 기초 (2) (0)	2021.02.02
[HTML] 에밋(Emmet) 설치 (0)	2021.02.01
[CSS] CSS 기초 30분 요약 (0)	2021.01.31
[Eclipse] Processing instruction not closed. 버그 (0)	2021.01.30

현재글[JavaScript] JS 기초 (1)

나의 코딩 삽질 연대기

Internet, Kotlin, Android Studio, MySQL, Spring, Github Pages, node.js, Android, Jekyll 기반의 GitHub Page 생성, github, JavaScript, syntax, CSS, oracle, java, git, antd, grid, error, Eclipse,

Today :
Yesterday :

신예리의 개발자취

[JavaScript] JS 기초 (1)

개요

참고

컴파일러 VS 인터프리터

주석 종류

001.html

변수

참고

예시

002.html

산술연산자

대입연산자

복합대입연산자/할당연산자

예시(양쪽 수식은 같은 내용)

003.html

비교연산자

참고

예시

004.html

논리연산자

&&, || 논리표

!=, !== 논리표

005.html

006.html

007.html

008.html

009.html

출처

'개발(Web) > Web' 카테고리의 다른 글

'개발(Web)/Web'의 다른글

티스토리툴바

[JavaScript] JS 기초 (1)

개요

참고

컴파일러 VS 인터프리터

주석 종류

001.html

변수

참고

예시

002.html

산술연산자

대입연산자

복합대입연산자/할당연산자

예시(양쪽 수식은 같은 내용)

003.html

비교연산자

참고

예시

004.html

논리연산자

&&, || 논리표

!=, !== 논리표

005.html

006.html

007.html

008.html

009.html

출처

'개발(Web) > Web' 카테고리의 다른 글

'개발(Web)/Web'의 다른글

관련글

티스토리툴바