1.1 자바 스크립트의 역사
Javascript란?
- 웹 브라우저에서 많이 사용하는 프로그래밍 언어
- 넷스케이프 사의 브랜든 아이히에 의해 모카라는 이름으로 시작 (모카라이브 스크립트로 이름 변경)
- 넷스케이프 사가 썬 마이크로시스템과 함께 자바스크립트라는 이름을 붙이고 본격적 발전
1.2 자바스크립트의 활용
웹에서 웹 애플리케이션으로
초기 웹
-> 변화 없는 정적 글자들의 나열
-> 웹은 하이퍼링크라는 매개체를 사용해 웹 문서가 연결된 거대한 책에 불과
자바 스크립트의 등장
-> 웹 문서의 내용을 동적으로 바꾸거나 마우스 클릭 같은 이벤트 처리
웹은 애플리케이션의 모습에 점점 가까워짐
-> 대표적인 예는 아래 그림과 같은 웹 문서 작성 도구
-> 구글, 마이크로소프트에서는 웹 브라우저만으로 워드, 엑셀, 파워포인트 같은 애플리케이션 사용 가능
-> 웹 애플리케이션은 웹 브라우저만 있으면 언제 어디서나 사용 가능
1.3 자바스크립트의 종류
자바스크립트의 종류
-> 유럽 컴퓨터 제조 협회는 자바스크립트를 ECMAScript라는 이름으로 표준화
-> 웹 브라우저나 애플리케이션에 내장된 자바스크립트의 종류
-> ECMAScript와 Jscript는 모두 자바스크립트를 의미
1.4 HTML 파일 만들기
모든 예제는 HTML5 표준 형식 사용
자바 스크립트 코드 위치
-> 기본페이지의 head 태그 사이에 script 태그 삽입
-> HTML5에서는 script 태그에 type 속성을 적지 않는게 원칙
2.1 기본 용어
표현식과 문장
-> 표현식이란 : 값을 만들어 내는 간단한 코드
-> 문장이란 : 하나 이상의 표현식이 모인것, 문장이 모여 프로그램 구성, 문장의 끝에는 세미콜론을 찍어 문장의 종결을 알려줌, 하나의 표현식에도 세미콜론만 찍히면 문장
키워드
-> 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어
ex) break, else, instanceof, true, case, false, new, try, catch, finally, null, typeof, continue, for, return, var, default, function, switch, void, delete, if, this, while, do, in, throw, with
식별자
-> 자바스크립트에서 이름을 붙일 때 사용
식별자 생성시 규칙
-> 키워드를 사용 불가
-> 숫자로 시작하면 불가
-> 특수 문자는 _과 $만 허용
-> 공백 문자 포함 불가
식별자 생성 규칙
-> 생성자 함수의 이름은 대문자로 시작
-> 변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작
-> 식별자가 여러 단어로 이루어지면 각 단어의 첫 글자는 대문자
자바스크립트의 식별자 종류
구분 |
단독으로 사용 |
다른 식별자와 사용 |
식별자 뒤에 괄호 없음 |
변수 |
속성 |
식별자 뒤에 괄호 있음 |
함수 |
메서드 |
ex)
alert('Hello World') -> 함수
Array.length -> 속성
input -> 변수
propmt('Message'.'Defstr'); -> 함수
Math.PI -> 속성
Math.abs(-273) -> 메서드
주석
-> 프로그램 진행에 영향을 끼치지 않음
-> HTML 태그 주석 <!-- -->로 문자열을 감싸 생성
-> 자바스크립트 주석 //를 사용해 한줄 주석, /**/을 사용해 여러줄 주석
2.2 출력
자바스크립트 출력
-> 기본 출력 방법 : alert() 함수를 사용할 구성 예제 코드
-> Alert () 함수
ex)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert('Hello world');
</script>
</body>
</html>
2.3 문자열
문자열이란
-> 문자를 표현할 때 사용하는 자료의 형태
-> alert() 함수의 매개 변수로 쓰인 'Hello JavaScript..>!' 와 같은 자료
-> 문자열을 만드는 방법
-> ''(싱글쿼터)와 ""(더블쿼터) 둘다 사용하지만 일관되게 사용하여야 한다.
예외적인 문자열 사용법
-> 문자열 안의 따옴표 사용
-> 내부에 작은 따옴표 사용시 외부에 큰 따옴표
-> 내부에 큰 따옴표를 사용 시 외부에 작은 따옴표
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert('This is "String"');
alert("This is 'String'");
</script>
</body>
</html>
예외적인 문자열 사용법
-> 이스케이프 문자의 특수 기능
-> \n : 문자열을 줄 바꿈 할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//줄바꿈이 된다.
alert("동해물과 백두산이 \n마르고 닳도록");
</script>
</body>
</html>
2.4 숫자
숫자 자료형
-> 정수와 유리수의 구분 없이 숫자는 모두 숫자
-> 문자열과 마찬가지로 alert() 함수의 괄호 안에 사용해 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert(273);
alert(52.273);
</script>
</body>
</html> 
숫자를 사용한 기본적인 사칙 연산
-> 자바스크립트 코드를 이용한 연산
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert(5+3*2);
</script>
</body>
</html>
2.5 불
불 자료형
-> 자바스크립트에서는 참과 거짓이라는 값을 표현할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert(52>273);
</script>
</body>
</html>
연산자 |
설명 |
>= |
좌변이 우변보다 크거나 같다. |
<= |
우변이 좌변보다 크거나 같다. |
> |
좌변이 크다. |
< |
우변이 크다. |
== |
좌변과 우변이 같다. |
!= |
좌변이 우변과 다르다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var a=10;
var b=20;
if(a>b){
alert('a은 b보다 크다.')
}
else{
alert('a는 b보다 작다.');
}
</script>
</body>
</html>
2.6 변수
-> 값을 저장할 때 사용하는 식별자
-> 숫자뿐 아니라 모든 자료형 저장 가능
-> 변수 선언 방법 ex) var를 사용
변수에 값 할당하기(자바스크립트의 자료형)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var stringVar = 'String';
var numberVar = 273;
var booleanVar=true;
var functionVar = function(){};
var objectVar={};
</script>
</body>
</html>
복합 대입 연산자
-> 대입 연산자와 다른 연산자를 함께 사용하는 연산자
연산자 |
설명 |
+= |
기존 변수의 값에 값을 더합니다. |
-= |
기존 변수의 값에 값을 뺍니다. |
*= |
기존 변수의 값에 값을 곱합니다. |
/= |
기존 변수의 값에 값을 나눕니다. |
%= |
기존 변수의 값에 나머지를 구합니다. |
복합 대입 연산자의 사용
-> 변수 list를 빈 문자열('')로 초기화
-> += 복합 대입 연산자를 사용해 문자열 만들고
-> HTML 문서의 body 태그에 넣음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
window.onload = function(){
//변수를 선언한다.
var list='';
//연산자를 사용한다.
list += '<ul>';
list += '<li>Hello</li>';
list += '<li>JavaScript..!</li>';
list += '</ul>';
//문서에 출력합니다.
document.body.innerHTML = list;
};
</script>
</body>
</html>
변수의 특성
-> 변수는 하나만 담을 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언한다.
var cup = 'Coffee';
cup = 'green Tea';
cup = 'Water';
//출력한다.
alert('Drink'+cup+'..!');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//1번 문제
var value = 10;
value +=20;
alert(value);
//2번 문제
var value='Hello'+'..!';
alert(value+'JavaScript');
</script>
</body>
</html>
2.7 자료형 검사
자료형
-> 숫자, 문자열, 불리형 같은 자료의 형태
-> typeof 연산자
-> 자료형을 확인할 때 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
alert(typeof('String'));
alert(typeof(273));
alert(typeof('S'));
</script>
</body>
</html>
자바스크립트의 자료형 확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//문자열
alert(typeof ('String'));
//숫자
alert(typeof(273));
//불
alert(typeof(true));
//함수
alert(typeof (function () {}));
//객체
alert(typeof ({}));
//undefined
alert(typeof (alpha));
</script>
</body>
</html>
undefined일 경우 정의하지 않은 자료형을 의미한다.
선언하지 않은 식별자 alpha 를 사용한다.
2.8 undefined 자료형
-> '존재하지 않는것'은 undefined 자료형으로 표현
-> 변수로 선언하지 않은 식별자가 갖는 자료형
-> 변수를 선언 하였지만 초기화 하지 않았을 때 undefined 자료형을 갖는다.
2.9 입력
문자열을 입력하는 방법
-> 숫자를 입력 받는 방법
-> 문자열을 입력 받은 후 숫자로 변환
-> 문자열을 입력을 할 때 사용하는 함수는 prompt() - 매개변수 두 개 필요
ex)
prompt()
String prompt([String message], [String defaultValue]);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언한다.
var input = prompt('Message','DefStr');
//출력한다.
alert(input);
</script>
</body>
</html> 
Confirm() 함수
-> 불을 입력 받을 때 사용
prompt() 함수와 비슷한 방식으로 사용
-> 사용자가 확인을 누르면 true 리턴
-> 취소를 누르면 false 리턴
-> 변수 input에 불이 들어가고 곧바로 변수 input을 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언한다.
var input = confirm('오늘 술 드셨나요?');
//출력한다.
alert(input);
</script>
</body>
</html>
2.10 숫자와 문자열 자료형 변환
-> 강제로 자료형 변환시키기
ex)
다른 자료형을 숫자로 -> Number() 함수
다른 자료형은 문자열로 -> String() 함수
prompt() 함수
-> 문자열만 입력 가능
-> 코드 2-45는 아무리 숫자를 입력해도 문자열의 자료형 출력
Number() 함수
-> 숫자로 바꾸려면 Number() 함수 사용
-> 코드 2-46은 문자열로 입력받고 숫자로 변환
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언합니다.
var input = prompt("숫자를 입력해주세요","숫자");
//출력합니다.
alert(typeof(input));//숫자를 입력했지만 문자열로 형태가 잡혀져 있다.
var numberInput = Number(input);
//출력합니다.
alert(typeof(numberInput)+':'+numberInput);
</script>
</body>
</html>
NaN
-> Nan(Not a Number) 값 출력 : 숫자가 아닌 값 입력 시
-> Nan은 자료형 숫자이나 자바스크립트로 나타낼 수 없는 숫자를 의미
ex)
<script>
//변수를 선언합니다.
var number=Math.sqrt(-3);
//변수를 출력합니다.
alert(number);
</script>
2.11 불 자료형 변환
Boolean() 함수
-> 불 자료형으로 변환할 때 사용
ex)
<script>
alert(Boolean(0));
alert(Boolean(NaN));
alert(Boolean(''));
alert(Boolean(null));
alert(Boolean(undefined));
</script>
불 자료형 변환
-> 조건문 사용/논리 부정 연산자 사용
-> 자동으로 불리언 자료형으로 변환
-> undefined 자료형은 false
2.12 일치 연산자
자동 자료형 변환
-> 비교 연산자를 사용할 때 뜻하지 않는 경우가 발생
네가지 모두 true 출력
ex)
<script>
alert('' == false);
alert('' == 0);
alert(0 == false);
alert('273' == 273);
</script>
일이 연산자의 용도
-> 자료형이 다른 것을 확실하게 구분 짓고 싶을 때 사용
연산자 |
설명 |
=== |
양 변의 자료형과 값이 일치합니다. |
!== |
양 변의 자료형과 값이 다릅니다. |
3.1 if 조건문
-> 자바스크립트에서 가장 일반적인 조건문
ex)
if (불 표현식) {
문장
}
-> 불리언 표현식이 true면 문장 실행
-> false면 문장 무시
- 조건문에 의해 여러 문장을 실행할 때는 중괄호로 감싸야 함
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//조건문
var a=50;
var b=100;
if(a<b){
//표현식 a<b일때 실행한다.
alert('a<b => true');
}
//프로그램 종료
alert('종료');
</script>
</body>
</html>
3.2 if else 조건문
-> 서로 반대되는 조건에 사용하는 조건문
-> else 키워드는 if 조건문과 함께 사용하는 키워드
ex)
if(불 표현식) {
문장 A
}else {
문장 B
}
3.3 중첩 조건문
-> 조건문 안에 조건문을 중첩해 사용하는 형식
-> 여러번 중첩해도 상관 없음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언합니다.
var date = new Date();
var hour = date.getHours();
//조건문
if(hour<11){
//hour<11이 참일때 실행
alert(hour+"아침 먹을 시간이다.");
}
else{
//hour<11이 거짓일때 실행
if(hour<15){
//hour<15가 참일때 실행
alert("점심 먹을 시간이다.");
}else{
//hour<15가 거짓일때 실행
alert("저녁 먹을 시간이다.");
}
}
</script>
</body>
</html>
3.4 if else if 조건문
-> 중첩 조건문을 if ,else if, else의 형태로 변경
- 사용자에게 숫자를 입력받아 양수, 0, 음수를 구분하는 프로그램
- 사용자에게 숫자를 입력받아 홀수와 짝수를 구분하는 프로그램
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var input=prompt("숫자를 입력하세요","숫자");
var input1=Number(input);
function searchaa(input){
if(input%2==0){
alert('짝수입니다.');
}
else{
alert('홀수입니다.');
}
}
if(input>0){
alert('양수입니다');
searchaa(input);
}
else if(input<0){
alert('음수입니다.');
searchaa(input);
}else{
alert('0입니다.');
}
</script>
</body>
</html>
3.5 switch 조건문
-> switch 조건문의 기본 형태
-> default 부분은 생략 가능
ex)
switch (비교할 값) {
case 값 :
문장
break;
case 값 :
문장
break;
default :
문장
break;
3.6 삼항 연산자
삼항연산자
-> 연산자지만 프로그램의 진행이 조건에 따라 변화 가능
-> 삼항 연산자의 기본적인 형태
ex)
<script>
//변수를 선언합니다.
var input = prompt('숫자를 입력해주세요.','');
var number = Number(input);
//조건문
(number >0) ? alert('자연수입니다.') : alert('자연수가 아닙니다.');
</script>
3.7 짧은 조건문
논리 연산자가 가지고 있는 특성을 조건문으로 사용
-> 논리합 연산자를 사용한 표현식은 뒤에 어떠한 값이 들어가도 항상 참
ex)
<script>
true || alert('실행될까요..A'); //좌변이 참이므로 우변 무시
false || alert('실행될까요..B'); //좌변이 거짓이므로 우변이 참인지 거짓인지 검사
</script>
4. 반복문
반복문
-> 여러 번 반복해야 하는 일을 간편하게 처리하는 반복문
<script>
alert('출력');
alert('출력');
alert('출력');
alert('출력');
</script>
<script>
for(var i=0; i<100; i++){
alert('출력');
}
</script>
4.1 배열
배열
-> 여러 개의 변수를 한꺼번에 다룰 수 있는 자료형
-> 대괄호([])로 생성/ 대괄호 사용 후 안에 쉼표로 구분해 자료를 입력
<script>
//변수를 선언합니다.
var array=[273,32,103,57,52];
</script>
4.2 while 반복문
while 반복문
-> 무한루프 : 무한히 반복문이 반복
-> 익스플로러에서 무한루프의 비극적인 결과로 실행 하지 않도록 주의
while(true){
alert('반복문');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//변수를 선언한다.
var value=0;
//반복문
while(value<5){
alert(value+'번째 반복');
value++;
}
</script>
</body>
</html>
시간을 조건으로 변화!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var value=0;
var startTime = new Date().getTime();
//반복문
while(new Date().getTime() < startTime + 1000) {value++;}
//출력
alert(value);
</script>
</body>
</html>
4.3 do while 반복문
-> 조건의 참 거짓 여부와 상관없이 내부의 문장을 최소한 한 번은 실행해야 하는 경우 사용
ex)
do {
문장
} while (불 표현식);
4.4 for 반복문
-> 조건(while 반복문)보다 횟수에 비중을 둘 때 사용 하는 반복문
-> 초기식과 종결식이 있음
for(초기식; 조건식; 종결식){
문장
}
for 반복문 실행 순서
1. 초기식 실행
2. 조건식 비교/조건이 거짓이면 반복문 종료
3. 문장을 실행
4. 종결식 실행
5. 다시 '조건식 비교' 이후를 반복
for(var i=0; i<length; i++){
문장
}
4.5 for in 반복문
-> 단순 for 반복문과 같은 형태
for (var i in array){
}
4.6 중첩 반복문
-> 반복문을 여러 겹 중첩해서 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var output='';
for(var j=1; j<9; j++){
for(var i=0; i<j; i++){
output+='*';
}
output+='\n';
}
alert(output);
</script>
</body>
</html>
4.7 break 키워드
-> switch 조건문이나 반복문을 벗어날 때 사용
-> 다음 반복문은 조건이 항상 참으로 무한 반복
-> 무한루프는 break 키워드 사용으로 탈출
ex)
while(true) {
}
4.8 continue 키워드
-> 현재 반복을 멈추고 다음 반복을 진행
<script>
//반복문
for(var i=0; i<5; i++){
//현재 반복을 중지하고 다음 반복을 수행합니다.
continue;
alert(i);
}
</script>
'IT일반과목 > 자바스크립트' 카테고리의 다른 글
| (집공부)자바스크립트 함수와객체, 윈도우객체와 문서 객체 (0) | 2018.09.30 |
|---|---|
| 자바스크립트 함수와객체(집공부) (0) | 2018.09.26 |
| 자바스크립트 개요, 기본 문법, 배열, 함수 (0) | 2018.09.20 |
| 자바스크립트개요 (0) | 2018.09.18 |
