JAVASCRIPT
자바스크립트
- 객체 기반의 스크립트 언어
- 사용자와 다양한 상호작용!
- (초기)웹 브라우저뿐만 아니라 Node.js(서버, 백엔드 프로그램)를 통해 다양한 프로그래밍에 응용
-> 언어의 범위가 시대가 지날수록 커짐 - 자바애플릿, Mocha 등 Javascript 로
- 표준안으로 채택되면서 표준화됨(ECMAScript)
- Ajax(화면을 깜빡이지 않고 새로운 데이터로 이동하거나 나타내는 효과)의 출현으로 웹 개발에 필수적인 프로그래밍 언어로 사용하게 됨
자바스크립트 원리
- 웹브라우저에서 사이트 접속
- 지정 서버로 요청
- 서버에서 알맞은 적절한 HTML CSS(데이터를 나타내는 표현 언어) JS(로직을 나타내는 언어, 프로그래밍 언어)등을 보냄
- 웹브라우저는 이를 해석해서 화면에 그림(해석하는 인터프리터가 JS에 내장됨)
자바스크립트 자료형(Data Type)
- 자료형 : 프로그래밍 언어가 다룰 수 있는 데이터의 형태 의미
- 원시형태(Primitive) : 숫자, 문자열, 불리언, undefined(정의되지 않음), null
- 객체형태(Object) : 시간(Date), 배열(Array), 객체(Object) 등 자바스크립트는 객체 기반의 언어. 복잡한 구조, 함수의 구조 등은 객체로 이루어져 있어서 중요함
리티럴(Literal) 선언
코드 상에서 값을 직접 명시에서 선언하거나 할당하는 것으로 자료형에 따라 리터럴 선언 문법이 다름
- “” : 문자열 선언
- 일반 숫자 : 숫자열 선언
원시 자료형
- Number : 정수, 실수 등
- String : “” 문자들의 나열(문자의 series)
- Boolean : 참/거짓 true, false 논리를 나타내는 자료형
- Undefined : 값이 정해지지 않았다는 것을 표현
- Null : 아무것도 없음을 표현하는 자료형(0도 아닌 void한 개념)
변수
- 프로그램은 다양한 조건과 환경에 따라 달라지는 값을 입력 받아 정해진 동작을 수행
- 약어인 ‘var’ 키워드와 변수의 이름을 선언
- Var x;
- 변수의 값을 할당/대입 : 선언된 변수명에 대입 연산자 =를 사용해 값을 대입
- X = 40; or x = ‘철수’;
- Var x = 40; -> 선언과 동시에 대입 가능
- Undefined? -> var x; (아무것도 선언되지 않고 결정되지 않은 상태)
- 변수 이름 규칙
- 하이픈(-) 사용 불가
- 첫 글자로 숫자 사용 불가
- 띄어쓰기 사용 불가
- 자바스크립트 예약어 사용 불가(if, while, var.. 등)
- 산술 연산자
- 덧셈 : +, ++(단항연산)
- 뺄셈 : -, --(단항연산)
- 곱셈 : *
- 나눗셈 : /
- 나머지 : %
- 복합 연산 형태 : +=, -=, *=, /=
실습 : 사칙연산과 변수 다루기 (3-4)
- 주요 명령어
- console.log(출력할 데이터 변수나 값) ; 자주 쓰이므로 기억할 것 - 개발자용
- alert(내용) ; 사용자에게 안내장을 띄우는 용도
- prompt(내용) ; 안내장에 값을 입력할 수 있는 대화창을 띄움
<script>
console.log('안녕하세요'); // 개발자용
//alert('안녕하십니까?'); // 사용자에게 안내장을 보여주는 용도
//prompt('입력하는 용도!'); // 입력값을 받는 안내장
var printMessage = '계산 결과는?';
var number = 10;
var number2 = 5;
var numberFloat = 0.45;
var result; // undefined 변수
// 각 변수 값을 출력
console.log('각 변수 안의 값들 출력');
console.log(number);
console.log(number2);
console.log(numberFloat);
console.log(result);
/* 주석(여러
줄 가능) */
// 주석(한줄 가능)
// 사칙 연산
console.log('사칙연산,' + printMessage);
result = number + numberFloat;
console.log(result);
console.log(number + numberFloat);
console.log(printMessage);
console.log(number - numberFloat);
console.log(number * number2);
console.log(number / number2);
// 사칙 연산의 단순한 연산으로는 변수 값이 바뀌지 않음
console.log('변수 값 변화 확인,' + printMessage);
console.log(number);
console.log(number2);
console.log(numberFloat);
// 변환 되었음
console.log(printMessage);
console.log(result);
// 복합연산 : 사칙 연산 가능
console.log('복합연산,' + printMessage);
numberFloat += number;
console.log(numberFloat);
// 단항연산 : 덧셈과 뺄셈만 가능
number ++; // number = number + 1 과 같음
console.log(number);
number --;
console.log(number);
console.log("나머지 연산, " + printMessage);
console.log(number2 % number);
console.log(number % number2);
</script>
- 콘솔 캡쳐
값을 비교하기(3-5)
비교 연산자 : 참 또는 거짓이 결과 값으로 나옴
- 동등 == (값이 같은 것)
- 부등 !=
- 일치 === (데이터타입까지 같은 것)
- >, >=, <, <=
논리 연산자 : 참 또는 거짓(Boolean)을 연산함. 비교문을 조합해 복잡한 조건문을 만듦
- AND : &&
- OR : ||
- NOT : !
이항 연산자
- 좌변 / 우변 으로 나뉨
기타 연산자
삼항 연산자: 세개의 항을 씀 (명제) ? 참일경우 리턴값; 거짓일 경우 리턴값;- 단항 연산자(delete, typeof)
- 비트 연산자(&, |, ^, ~, <<, >>, >>>) : 이진수 연산할 때 사용
조건문 사용하기(3-6)
- 조건의 참/거짓 여부에 따라 원하는 코드를 실행
- 비교연산자나 논리연산자의 조합으로 작성할 수 있음
- if문
- switch문
- 삼항 연산자
- if문
if (조건식) {
실행코드
}else if (조건식) {
실행코드
}else{
실행코드
}- 조건식 : 비교식 논리식 함수(리턴값이 boolean인)
- {} : codeblcok
- 조건 내의 실행 구문(블록)이 한줄 코드라면 중괄호 생략이 가능
- switch문
switch(표현식){
case 값1:
표현식 ==값1 일때 실행코드
break;
case 값2:
표현식 ==값2 일때 실행코드
break;
default:
모든 조건에 속하지 않을 때의 실행 코드실습 : 퀴즈게임 만들기 (3-7)
<script>
var solution = 10;
var input = prompt('수를 맞춰주세요');
// 중첩문
if (input > solution + 2) {
alert('해답이 당신이 입력한 값보다 더 작습니다.')
}else if (input < solution - 2){
alert('해답이 당신이 입력한 값보다 더 큽니다')
}else {
// 8~12 사이의 값
if(input == solution){
alert('정답입니다!')
} else{
// 8 9 11 12
alert('정답과 가깝습니다!')
}
}
// switch의 경우
var gender = prompt('성별을 입력해주세요.');
switch(gender){
case '여자':
alert('Female');
break;
case '남자':
alert('male');
break;
case '기타':
alert('Other');
break;
default:
alert('남자, 여자, 기타 중 하나를 입력해주세요.');
}
</script>
반복문 사용하기(3-8)
- for 문
- 조건식을 만족하는 한 계속해서 코드 반복.
- 매 반복 실행(iteration)마다 마지막에 증감식을 실행
for(초기식;중간식;증감식){
반복 실행될 코드
}
- while 문
- 조건식을 만족하는 한 계속해서 코드를 반복 실행함(무한 루프 주의)
실습 : 피보나치 수열 출력하기 (3-9)
- for문 활용
<script>
/// 1 1 2 3 5 8 13 21
// 수열 n = 수열n-2번째 + 수열 n-1 번째
var n_2 = 1;
var n_1 = 1;
console.log(n_2);
console.log(n_1);
for (var i = 0; i < 100 ; i ++){
var n = n_2 + n_1;
console.log(n);
n_2 = n_1;
n_1 = n;
}
</script>- 결과 (console창)
- while문 활용
<script>
/// 1 1 2 3 5 8 13 21
// 수열 n = 수열n-2번째 + 수열 n-1 번째
// 100회차 까지만 출력
var n_2 = 1;
var n_1 = 1;
console.log(n_2);
console.log(n_1);
var i = 0;
while (n_1 < 10000) {
var n = n_2 + n_1;
console.log(n);
n_2 = n_1;
n_1 = n;
}
</script>- 결과(console창)
-> for문과 달리 n_1이 10000을 넘는 순간 반복이 정지됨
배열 사용하기
객체 사용하기
실습 : 설문조사 만들기
함수 선언하기
시작