Java Script 기본개념 + 기본문법
자바스크립트 개념과 특징, 작성위치
JS의 정의
웹 페이지에 동적인 기능을 넣기 위해 만들어진 프로그래밍 언어
웹 내부에서 일어나는 상호작용은 html, css만으로 이루어질 수 없음
⇒ 웹 내부에서 발생하는 다양한 기능을 만들 수 있음
JS의 특징
브라우저에서 실행됨
html(웹 페이지의 구조와 내용 작성), css(색상이나 폰트, 배치 등 웹 페이지 모양 꾸미기) 와 함께 웹 3대 요소 중 하나
자바스크립트는 사용자의 입력을 처리하거나 웹 애플리케이션을 작성하는 등 웹 페이지의 동적 제어에 사용됨
- 사용자의 입력 및 계산
- 동적 제어(웹 페이지 내용, 모양, 브라우저 제어)
- 웹 서버와의 통신(웹 페이지가 웹 서버와 데이터를 주고받을 때 활용됨)
실습은 VS code를 이용해서 진행함
자바스크립트의 기본문법
1. 자바스크립트 다이얼로그 (사용자의 입력 및 메시지 출력)
1. 프롬프트 다이얼로그
prompt("메시지", "디폴트 입력값")
다이얼로그를 출력하고 사용자로부터 문자열을 입력받아 리턴한다.
"디폴트 입력값"은 생략 가능하다.
- 사용자가 입력한 문자열을 리턴
- 아무 값도 입력하지 않았으면
""리턴 - 취소 버튼이나 강제로 다이얼로그를 닫은 경우
null리턴
2. 확인 다이얼로그
confirm("메시지")
메시지와 확인 / 취소 버튼을 가진 다이얼로그를 출력한다.
- 확인 버튼 클릭 →
true - 취소 버튼 또는 강제 종료 →
false
3. 경고 다이얼로그
alert("메시지")
다이얼로그를 출력하여 메시지를 전달한다.
2. 데이터 타입과 변수
데이터 타입 종류
-
숫자 타입
일반적인 숫자
예)43,3.14 -
문자열 타입
쌍 따옴표 또는 외 따옴표 사용
예)'자바스크립트',"abc","234","1+2" -
논리 타입
참 / 거짓
예)true,false -
객체 타입
자바스크립트가 제어 가능한 객체 -
undefined
변수에 값이 할당되지 않은 경우 출력되는 값
3. 연산자 (사칙 연산자 / 비교 연산자)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script>
console.log(11 + 22);
console.log(10 % 5);
console.log(5 - '3'); // 문자열 -, *, / 가능
console.log(5 + '3'); // + 연산은 문자열이 됨
console.log('내 점수는' + 100 + '점');
// 비교 연산자
console.log(5 >= 3);
console.log(5 == '5'); // 값만 비교
console.log(5 === '5'); // 데이터 유형까지 비교
console.log(5 != 3);
</script>
</body>
</html>4. 변수 (Variable)
- 자바스크립트 코드가 실행 중에 데이터를 저장하는 공간의 이름
- 실행 중에 값이 변경될 수 있다
5. 자바스크립트 변수 선언 방식
1. var
-
변수를 재선언해도 정상적으로 출력됨
var a = 10;
var a = 20;
2. let
-
변수를 재선언하면 오류 발생
-
값 변경은 가능
-
공동 작업이나 복잡성이 있는 경우 사용
let b = 10;
b = 20;
// let b = 30; // 오류
3. const
-
같은 이름으로 변수 선언 불가
-
값 변경도 불가
const c = 10;
// c = 20; // 오류
6. 변수 이름 규칙
- 대소문자 구분
- JavaScript 와 javascript 는 다른 변수
-
숫자가 먼저 올 수 없음
-
특수문자는
_와$만 사용 가능 -
공백 포함 불가
7. 백틱(`) 사용
-
키보드의 Tab 키 위에 있는 문자
-
${변수명}형태로 변수 사용 -
문자열 내부에서 연산 가능
var name = "tom";
var age = 90;var msg =
내 이름은 ${name}이고 나이는 ${age} 이다;
console.log(msg);var msg2 =
내 나이는 ${age + 1} 이다;
console.log(msg2);
