heenam
8. 자바스크립트 기초 본문
자바 스크립트의 소개
자바스크립트는 웹의 표준 프로그래밍 언어이다. 모든 웹 브라우저는 자바스크립트를 지원한다. 자바스크립트는
HTML5의 공식적인 스크립트 언어가 되었다.
자바스크립트는 웹 페이지에 생명력을 불어넣어서 역동적인 웹 페이지를 만든다.
자바스크립트의 특징
인터프리트 언어 - 인터프리트 언어란 컴파일 과정을 거치지 않고 바로 실행시킬 수 있는 언어이다.
동적 타이핑 - 변수의 자료형을 선언하지 않고도 변수를 사용할 수 있는 특징이 있다.
구조적 프로그래밍 지원 - c언어의 구조적 프로그래밍을 지원한다.
객체 기반 - 자바스크립트는 전적으로 객체 지향 언어이다. 자바스크립트의 객체는 연관배열이다.
함수형 프로그래밍 지원 - 자바스크립트에서 함수는 일급객체이다. 즉 함수는 그 자체로 객체이다. 함수는 속성과
.call()과 같은 메서드를 가진다.
프로토타입-기반 - 자바스크립트는 상속을 위해 클래스 개념 대신에 프로토타입을 사용한다.
첫 번째 프로그램
자바스트립트의 가장 중요한 특징은 동적 웹 페이지를 생성할 수 있다는 점이다.
웹 페이지를 작성하여 보자. 웹 페이지를 로드할 때마다 현재의 시간이 화면에 표시되도록 하자
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My First Javascript</title>
</head>
<body>
<script>
var now = new Date(); /*현재 시간을 가지고 있는 객체를 생성한다*/
document.write(now); /*객체의 값을 화면에 표시한다.*/
</script>
</body>
</html>자바스트립트는 <script>...</script> 사이에 기술한다. 자바스크립트는 HTML 문서의 <head> 섹션이나 <head> 섹션
안에 위치할 수 있다. var now = new Date(); 문장은 무슨 의미일까? 현재 시간을 가지고 있는 now라는 이름의 객체가
생성된다. document.write(now)는 now객체의 값을 HTML 문서에 출력한다.
자바스크립트의 용도
+ 이벤트에 반응하는 동작을 구현할 수 있다.
+ Ajax를 통하여 전체 페이지를 다시 로드하지 않고서도 서버로부터 새로운 페이지 콘텐츠를 받거나 데이터를 제출할
때, 사용한다.
+ HTML 요소의 크기나 색상을 동적으로 변경할 수 있다.
+ 게임이나 애니메이션과 같은 상호 대화적인 콘텐츠를 구현할 수 있다.
+ 사용자가 입력한 값을 검증하는 작업도 자바스크립트를 이용한다.
여기서는 대표적으로 이벤트 처리 코드를 자바스크립트로 어떻게 작성하는지를 살펴보고 지나가자. 자바스크립트는
사용자의 입력에 반응할 수 있다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
자바 스크립트는 이벤트에 반응할 수 있습니다.
</p>
<button type="button" onclick="alert('반갑습니다')">버튼을 누르세요!</button>
</body>
</html>
alert() 함수는 자바스크립트에서 많이 사용되지 않는다. 하지만 가끔 출력 코드를 작성할 때 편리하다.
onclick 이벤트는 버튼이 클릭되면 발생하는 이벤트이다.
위의 코드를 해석해 보면 버튼이 클릭되어 onclick 이벤트가 발생하면 alert('반갑습니다')를 실행하라는 의미가 된다.
자바스크립트의 위치
CSS와 마찬가지로 자바스크립도 다음과 같은 3가지 방법으로 HTML문서에 삽입될 수 있다.
+ 내부 자바스크립트
+ 외부 자바스크립트
+ 인라인 자바스크립트
내부 자바스크립트
자바 스크립트는 <script>...</csript> 태그 사이에 위치한다. 자바스크립트는 HTML 문서의 <head> 섹션이나 <body>
섹션 안에 위치할 수 있다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head> /*보통은 <head> 태그안에 자바스트립트를 넣는다.*/
<meta charset="utf-8">
<title>MY First Javascript</title>
<script type="text/javascript">
document.write("Hello World!"); /*큰따옴표의 텍스트를 HTML문서에 출력하게 되고 이것이 화면에 보여지게 된다.*/
</script>
</head>
<body>
</body>
</html>HTML내부 어디라도 자바스크립트를 넣을 수 있지만 <head> 섹션에 넣는 것이 좀 더 바람직 하다.
document.writ()는 document 객체의 write() 메서드를 호출하는 문장이다. write() 메서드는 큰따옴표 안 텍스트 HTML
문서에 추가한다. <body>...</body> 사이에는 아무것도 없지만 document.write()가 "Hello World!"를 HTML문서에
추가하기 때문에 화면에 "Hello World!"가 나타난다. 다음과 같은 텍스트에 태그를 추가해서 쓸 수 있다.
document.writ("<h1>Hello World!</h1>;이전 방법
예전에는 스크립트를 작성할 때 어떤 언어를 사용하는지를 표기해야 했다.
<script type="text/javascript"> /*예전 방식 HTML5에서는 필요없음*/
document.write("<h1>Hello World!</h1>");
</script>외부 자바스크립트
자바스크립트는 외부 파일에 저장될 수도 있따. 외부 자바스크립트 파일은 흔히 여러 웹 페이지에서 공통적으로
사용되는 코드를 포함하고 있다. 외부 자바스크립트 파일은 .js라는 확장자를 가진다. 외부 스크립트 파일을 사용하기
위해서는 <script> 태그의 src속성의 값으로 외부 스트립트 파일의 이름을 입력해야 한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="myscript.js"></script> /*자바스크립트가 들어 있는 외부 파일 myscript.js를 포함한다.*/
</head>
<body>
</body>
</html>
document.write("Hello World!"); /*myscript.js 라는 폴더에 저장*/
외부 스크립트를 포함시키는 문장도 <head>나 <body>에 놓일 수 있다. 외부 스크립트에서는 <script>태그를 사용하
지 않는다. 순수한 자바스크립트 코드만을 포함한다.
인라인 자바스크립트
자바스크립트는 HTML 태그 내부에 이벤트 속성으로 삽입될 수도 있다. 이 방법은 꼭 필요한 경우에만 사용하도록
하자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="alert('반갑습니다.')">버튼을 누르세요!</button>
</body>
</html>
onclick="alert('반갑습니다.')" onclick 이벤트가 발생하면 alert()를 호출한다.
문장
자바스크립트는 브라우저에 의하여 실행되는 문장의 순서 있는 집합니다.
문장
다른 프로그래밍 언어와 마찬가지로 자바스크립트 문장은 웹 브라우저에게 내리는 명령이라고 간주할 수 있다.
각 문장의 끝에는 ;(세미콜론)을 붙인다. 세미콜론은 자바스크립트 문장을 분리한다.
자바스크립트에서는 줄이 바뀌면 하나의 문장이 끝난 것으로 판단한다. 세미콜론을 사용해 한 줄에 여러 개의 문장을
작성할 수도 있다. 각 문장은 브라우저에 의하여 작성된 순서대로 실행된다.
블록
자바스크립트 문장은 블록이라는 단위로 묶일 수 있다. 블록은 {로 시작하고 }로 끝난다. 블록은 차후에 학습하게 되는
조건문이나 반복문, 함수에서 필요하다.
문자 집합과 대소문자 구별
자바스크립트는 유니코드 문자 집합 버전 3를 지원한다. 유니코드는 아스키 코드의 슈퍼 집합으로 전세계의 모든
문자를 나타낼 수 있다.
자바스크립트는 대소문자를 구별한다. init()함수는 INIT()함수와 동일하지 않다. 여기서 주의할 점은 HTML은 대소문자
를 구별하지 않는다는 점이다. 자바스크립트에서 HTML의 태그와 속성 이름은 소문자로 적어주어야 한다.
즉 onclick속성은 HTML에서는 onClick이라고 해도 되지만 자바스크립트에서는 반드시 소분자로 onclick으로만 적어야
한다.
자바스크립트는 공백 문자를 모두 무시한다. 따라서 개발자는 가독성을 위해 공백 문자를 추가할 수 있다.
주석문
자바스크립트도 주석을 이용해 소스를 보다 읽기 쉽도록 만들 수 있다. 담일 문장 주석은 //으로 시작한다.
다중 문장 주석은 /**/으로 사용된다.
변수
변수는 데이터를 저장하는 상자로 생상할 수 있다. 자바스크립트에서 변수는 var키워드를 사용해 선언한다.
var x ;var: 변수가 선언된다는 것을 나타낸다.
x: 변수이름이다. 스트립트 안에서 유일해야 한다.
;: 세미콜론은 하나의 문장이 끝났음을 나타낸다.
변수는 사용자가 입력한 값이나 텍스트 등을 저장할 때도 필요하고 계산 중간 중간 결과를 저장할 때도 필요하다.
자바스크립트로 게임을 작성하는 경우에는 생각보다 복잡한 코드가 필요하다. 이때는 많은 변수가 필요하다.
변수값을 저장할 때는 등호(=)를 사용한다.
변수 이름은 짓는 몇 가지의 규칙이 있다.
+ 변수 이름은 문자로 시작해야 한다.
+ 변수 이름은 $이나 _로 시작할 수 있다.
+ 변수 이름은 대소문자를 구별한다.
자바스크립트 변수 선언에서는 자료형을 지정하지 않는다. 자바스크립트 변수에는 정수뿐만 아니라 문자열도 저장할
수 있다. 문자열을 나타낼 때는 큰따옴표("..")나 작은 따옴표('..')를 모두 사용 할 수 있다.
한 줄에 여러 개의 변수 선언
하나의 문장에서 여러 개의 변수를 선언할 수 있다.
var name = "kim" , age = 27, jop = "student";자료형
자료형은 변수가 가질 수 있는 값의 종류이다. 자바스크립트에서는 다음과 같은 자료형이 있다.
+ 수치형 - 정수나 실수가 될 수 있다.
+ 문자열 - 문자가 연결된 것을 의미한다. 텍스트라고 생각하면 된다.
+ 부울형 - true 또는 false 값만을 가질 수 있다. 둘 중의 하나를 표현하는 데 사용된다.
+ 객체형 - 객체를 나타내는 타입이다. 차후에 학습하기로 하자.
+ undefined - 값이 정해지지 않은 상태를 나타낸다.
자바스크립트에서는 자료형을 표현하지 않지만 변수의 내부 속성으로 자료형을 가지고 있다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var s;
s = 100;
document.write(s + "<br>");
s = "홍길동";
document.write(s + "<br>");
</script>
</head>
<body>
</body>
</html>
수치형
수치형은 정수 혹은 실수가 가능하다. 실수는 e를 사용해 1,000,000과 같은 상당히 큰 수를 1e6과 같이 10의 지수를
이용해 표시할 수 있다.
부울형
부울형은 true와 false값을 가진다. 부울형은 일반적으로 조건문에서 실행 조건을 검사하는 데 사용된다.
Undefined
Undefined는 값이 결정되지 않았다는 것을 나타낸다. 변수가 선언되었지만 아직 값이 대입되지 않았으면 Undefined
상태가 된다.
문자열
문자열은 연속된 문자들로서 문자열 내의 문자는 유니코드로 표현된다.
문자열의 길이는 문자열 length 속성으로 알 수 있다. 즉 문자열 s의 길이는 다음과 같은 문장으로 알 수 있다.
var s = "abc";
alert(s.length);자바스크립트에서는 +연산자를 사용하면 두개의 문자열을 합칠 수 있다.
t = "Hello" + "World";이 외에도 많은 메서드가 준비되어 있다.
문자열 처리에서 주의할 점은 문자열을 변경하는 메서드는 새로운 문자열을 생성하여 반환한다는 점이다. 기존의 문자
열을 수정하여 반환하는 것이 아니다.
객체형
자바스크립트에서 기본 자료형을 제외하면 모두 객체형이라고 할 수 있다. 객체는 사물의 속성과 동작을 묶어서 표현
하는 기법 중의 하나이다.
var myCar = {model: "bmz", color: "red", hp: 100};위의 객체에 동작을 나타내는 메서드를 추가하면 완전한 객체가 된다. 객체의 속성을 사용할 때는 도트(.) 연산자를
사용한다.
document.write(maCar.model + "<br>");
document.write(maCar.color + "<br>");
document.write(maCar.hp + "<br>");연산자
자바스크립트에서 제공되는 각종 연산자에 대하여 살펴본다. 덧셈, 뺄셈, 곱셈, 나눗셈 같은 산술 연산이 포함된다.
하지만 컴퓨터는 산술 연산만을 수행하는 것은 아니다. 값을 비교하는 관계 연산자, 논리적인 판단을 할 수 있는 논리
연산자 등도 포함되어 있다.
산술 연산자
연산자는 수학에서 사용되는 연산자와 유사하다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var x = 10;
var y = 20;
document.write(x+y + "<br>"); // 30
document.write(x-y + "<br>"); // -10
document.write(x*y + "<br>"); // 200
document.write(x/y + "<br>"); // 0.5
document.write(x%y + "<br>"); // 10
</script>
</head>
<body>
</body>
</html>
대입 연산자
대입 연산자는 변수에 값을 할당한다. 복합 대입 연산자는 소스를 간결하게 만들 수 있다. x += y의 의미는 x = x + y와
같다.
문자열에서의 + 연산자
+ 연산자는 문자열을 결합하는 용도로도 사용된다.
그러면 숫자와 문자열을 + 연산자로 합하면 무엇이 생성되는가? 숫자와 문자열을 + 연산자로 더하면, 숫자를 문자열로
변환하여, 결합된 문자열을 반환한다.
비교 연산자
비교 연산자는 논리 문장에서 값들을 비교하는 용도로 사용된다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var x = 10;
var y = 20;
document.write((x>y) + "<br>"); // false
document.write((x<y) + "<br>"); // true
document.write((x==y) + "<br>"); // false
document.write((x!=y) + "<br>"); // true
</script>
</head>
<body>
</body>
</html>
자바스크립트에서 약간 특이한 점은 === 연산자와 !== 연산자이다. ===연산자는 피연산자의 값과 타입이 모두 일치
할때만 참을 반환한다. !== 연산자는 값이 다르거나 타입이 다르면 참이 된다. 아래 표에서 변수 x는 정수 1을 저장하
고 있다고 가정하자.
| 연산자 | 설명 | 예 | 결과값 |
| === | 값과 타입이 모두 값으면 참 | x === 1 | true(값도 같고 타입도 같다.) |
| x === "1" | false(값은 값으나 타입이 다르다.) | ||
| !== | 값이나 타입이 다르면 참 | x !== 1 | false(값도 같고 타입도 같다.) |
| x !== "1" | true(값은 같으나 타입이 다르다.) |
논리 연산자
논리 연산자는 여러 개의 조건을 조합하여 참인지 거짓인지를 따질 때 사용한다.
| 연산자 기호 | 사용 예 | 의미 |
| && | x && y | AND 연산, x와 y가 모두 참이면 참. 그렇지 않으면 거짓 |
| || | x || y | OR 연산, x나 y중에서 하나만 참이면 참. 모두 거짓이면 거짓 |
| ! | !x | NOT 연산, x가 참이면 거짓, x가 거짓이면 참 |
조건 연산자
조건 연산자는 유일하게 3개의 피연산자를 가지는 삼항 연산자 이다.
max_value = (x > y) ? x : y;x > y가 참이면 x가 수식의 값이 되고, x > y가 거짓이면 y가 수식의 값이 된다.
숫자와 문자열 사이의 변환
프로그래밍 세계에서 10과 "10"은 아주 다르다. 프로그래밍을 하다 보면 가끔은 숫자를 문자열로 변환해야 하는 경우
도 있고 그 반대의 경우도 발생한다. 문자열을 숫자로 변환할 때는 parseInt() 함수를 사용한다. 반대로 숫자를 문자열로
변환할 때는 String() 함수를 사용한다.
+ parseInt() - 문자열을 숫자로 변환한다.
+ String() - 숫자를 문자열로 변환한다.
prompt() 함수
사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다.
사용자가 입력한 내용을 문자열로 반환한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var age = prompt("나이를 입력하세요", "만나이로 입력합니다.");
</script>
</head>
<body>
</body>
</html>
HTML 요소에 접근하기
자바스크립트에서 HTML 요소에 접근하기 위해서는 document.getElemenById(id) 메서드를 사용한다.
HTML요소를 식별하기 위해서 "id" 속성을 사용한다. 여기서는 요소에 접근해서 요소의 색상을 변경하는 예제를 살펴
보자.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="test">This is a heading.</h1>
<script>
function func() {
e = document.getElementById("test");
e.style.color = "red";
}
</script>
<button type="button" onclick="func()">클릭하세요!</button>
</body>
</html>
조건문
자바스크립트의 문장은 순차적으로 실행된다. 즉 <script>...</script> 안에 들어있는 문장은 한 번에 한 문장씩 차례대
로 실행된다. 그러나 이런 식으로만 실행해서는 복잡하고 다양한 문제를 해결할 수 없다. 현실 세계의 문제를 해결하려
면 조건에 따라서 실행을 다르게 하거나 동일한 단계를 반복할 수 있어야 한다. 문장이 실행되는 순서에 영향을 주는
문장을 제어문이라고 한다. 제어문에는 조건문과 반복문이 있다.
+ if문 - 조건이 참일 때만 어떤 코드를 실행하고 싶을 때 사용
+ if...else문 - 조건이 참이면 어떤 코드를 실행하고 조건이 거짓이면 다른 코드를 실행하고 싶은 경우에 사용
+ switch문 - 많은 코드 중에서 하나를 선택하여 실행하고 싶은 경우에 사용
if문
if문은 특정한 조건이 참이면 문장을 실행하는 것이다.
예를 들어 time이 12: 00보다 적으면 "Good Morning"을 변수 greeting에 대합하는 코드를 작성하여 보자.
if (time < 12) {
greeting = "Good Morning";
}if-else문
조건이 참이면 어떤 코드를 실행하고 조건이 거짓이면 다음 코드를 실행하고 싶은 경우에 사용한다.
문법은 다음과 같다.
if(조건식)
문장1;
else
문장2;만약 조건식이 참이면 문장1이 실행된다. 그렇지 않으면 문장2가 실행된다.
if (time < 12) {
msg = "Good Morning";
}
else {
msg = "Good Afternoon!";
}switch문
switch문도 if문과 비슷하게 조건에 따라 프로그램의 흐름을 분기시키기 위해 사용된다.
switch(제어식)
{
case c1:
문장1;
break;
case c2:
문장2;
break;
...
default:
문장d;
break;
}switch에서는 제어식을 계산하여 그 값을 각 case절의 c1, c2, ...등과 비교한다. c1, c2, ...중에서 제어식의 값과 일치하는
값이 있으면 관련된 case절의 문장이 차례로 실행하다가 break 문에 도달하면 switch 문은 종료된다. 만약 case절에서
일치하는 값을 찾지 못하면 default절이 실행된다.
반복문
반복 처리는 같은 처리 과정을 여러 번 되풀이하는 것이다.
기본적인 반복문의 종류는 다음과 같다.
+ while - 지정된 조건이 참이면 반복 실행한다.
+ for - 정해진 횟수 동안 코드를 반복 실행한다.
while 루프
while 문은 주어진 조건이 만족되는 동안, 문장을 반복 실행하는 제어 구조이다. while 문의 형식은 다음과 같다.
var i = 0;
while( i < 10 )
{
document.write(i + "<br>");
i++;
}여기서 조건문에 주의하자. 변수 i의 값은 0 -> 1 -> ... -> 9까지 증가하면서 반복되고 i가 10이므로 증가되면 조건식이
거짓이 되어 반복이 종료된다.
for 루프
for 문은 문장을 정해진 횟수만큼 반복하여 실행하는 반복 구조이다.
for (var i = 0; i < 5; i++)
{
document.write("Hello World! <br>");
}
중첩 반복문
하나의 for 루프 안에 다른 for 루프가 내장될 수 있다. 다음 예제는 중첩된 for 루프를 이용하여 구구단표를 화면에 표
시하였다. 루프가 중첩될 때는 루프 제어 변수로 서로 다른 변수를 사용해야 한다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
document.write("<h1>구구단표</h1>");
document.write("<table border=2 width=50%>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
document.write("<td>" + i + "</td>");
for (var j = 2; j <= 9; j++) {
document.write("<td>" + i * j + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
do/ while 루프
do/ while 문은 while 문과 비슷하나 반복 조건을 루프의 처음이 아니라 루프의 끝에서 검사한다는 점이 다르다.
do/ while 문은 일단 문장을 한번 실행하고 나서 조건을 검사하고 싶을 때 사용한다.
<script>
var i = 0;
do {
document.write("카운터: " + i + "<br>");
i++;
} while (i < 10);
</script>for/ In 루프
for/ in 루프는 객체 안의 속성들에 대하여 어떤 처리를 반복할 수 있는 구조이다. 객체는 앞에서 아주 간단히 다룬 적
이 있다. 객체는 속성과 함수를 모아놓은 엔터티라고 이해하자.
for/ in 루프를 이용하면 객체 안의 모든 속성에 대하여 어떤 연산을 실행할 수 있다.
<script>
var myCar = {make: "BMW", model: "X5", year: 2013};
var txt= "";
for (var x in myCar) {
txt += myCar[x] + " ";
}
document.write(txt);
</script>break 문장
break문은 반복 루프를 벗어나기 위해 사용한다. 반복 루프 안에서 break문이 실행되면 반복 루프를 빠져 나오게 된다.
continue 문장
continue 문은 현재 실행하고 있는 반복 과정의 나머지를 생략하고 다음 반복을 시작하게 만든다.
배열
하나의 이름을 공유하고 단지 번호만 다른 데이터를 차례로 접근해서 처리하고 싶은 경우 사용한다.
리터럴로 배열 생성
구체적인 값을 가지고 배열을 생성할 수 있다.
var fruits = ["apple", "banana", "peach"];객체는 {...}와 같이 중괄로 선언하고, 배열은 [...]와 같이 대괄호를 사용한다.
배열에 저장된 값은 정수 인덱스를 가지고 접근할 수 있다. 배열의 인텍스는 0부터 시작한다.
즉 배열의 첫 번째 요소는 fruits[0]이고 두 번째 요소는 fruits[1]이다.
Array 객체로 배열 생성
Array 객체로도 배열을 생성할 수 있다. 다음 문장은 비어있는 배열을 생성한다.
var fruits = new Array();배열값을 저장할 때는 fruits[저장할 인덱스 값] = "배열에 저장되는 값";
다음과 같이 생성시켜도 된다.
var fruits = new Array("Apple", "Banana", "Orange");자바스크립트 배열의 특징
자바스크립트에서는 하나의 배열에 여러 가지 종류의 객체를 혼합해서 저장할 수 있다. 즉 종류를 다르게 하면서 저장
할 수 있는 것이다.
var comp = new Array();
comp[0] = "Apple"; // 문자열
comp[1] = new Date(); // 객체
comp[2] = 3.14; // 정수객체 Array의 속성과 메서드
가장 많이 사용되는 속성은 배열의 크기인 length이다. 배열 요소를 반복하면서 처리할 때, 사용한다.
연관 배열
자바스크립트 배열은 다른 언어의 배열과는 약간 다른 점이 있는데 키(key)를 이용해 값을 저장하였다가 다시 추출할
수 있다는 점이다. 키는 단순한 문자열이다. 특히 입력 양식의 필드에서 값을 가져올 때 아주 편리하다.
함수
함수는 입려기을 받아서 특정한 작업을 수행한 후 결과를 반환하는 블랙 박스와 같다. 함수 안의 코드는 외부에서 호출
했을 때만 실행된다.
function 함수이름 ()
{
함수몸체
}인수와 매개 변수
함수를 호출할 때는 어떤 값을 함수로 전달할 수 있다. 이들 값을 인수, 또는 인자라고 한다. 이들 인수는 함수 내부에서
사용될 수 있다. 콤마로 구분하기만 하면 얼마든지 많은 인수를 보낼 수 있다.
함수를 선언할 때, 인수를 받을 변수로 선언해야 한다. 이것을 매개 변수라고 한다.
인수와 매개 변수는 선언된 순서대로 매칭 된다.
무명 함수
자바스크립트에서는 함수에 이름을 주지 않고 만들어서 한 번만 사용하는 경우도 많다. 이것을 무명함수 라고 한다.
자바스크립트에서는 함수는 객체처럼 취급된다. 무명 함수는 함수를 만들어서 한 번만 사용하는 경우에 유용하다.
주로 이벤트 처리 함수를 작성할 때 사용된다.
함수의 반환값
가끔은 함수가 값을 반환하는 것이 편리한 경우도 있다. 함수 내부에서 return 문장을 사용하면 값을 반환할 수 있다.
return 문장을 사용하면 함수가 실행을 중지하고 지정된 값을 호출한 곳으로 반환하고 함수를 종료한다.
지역 변수
함수 안에서 선언된 변수는 지역 변수가 된다. 따라서 함수 안에서만 사용이 가능하다. 다른 함수에서도 똑같은 이름으
로 선언이 가능하다. 지역 변수는 함수가 종료되면 자동적으로 소멸된다.
전역 변수
함수 외부에서 선언된 변수는 전역 변수가 된다. 웹 페이지 상의 모든 스크립트와 모든 함수는 전역 변수를 사용할 수
있다. 전역 변수는 사용자가 웹 페이지를 닫으면 소멸된다.
자바스크립트의 입출력
자바스크립트는 웹 브라우저 안에서 실행된다. 자바스크립트의 입력과 출력은 모두 HTML문서이다. 따라서 자바스크립
트의 HTML 문서의 요소를 읽을 수 있어야 하고, HTML문서에 요소를 출력 할 수 있어야 한다.
alert() 함수
사용자에게 경고를 하는 윈도우를 화면에 띄우는 함수이다. 경고 윈도우가 나타나면 사용자가 경고 윈도우를 제거할
때까지 다음 작업이 진행되지 않는다.
confirm() 함수
사용자에게 어떤 사항을 알려주고 확인이나 취소를 요구하는 윈도우를 화면에 띄운다. 사용자가 확인을 클릭하면 true
를 반환하고 그렇지 않으면 false를 반환한다.
<script>
var user = confirm("confirm()은 사용자가 답변을 전달합니다.");
</script>prompt() 함수
사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다. 사용자가 입력한 내용을
문자열로 반환다.
HTML 문서에 쓰기
자바스크립트에서 HTML문서에 어떤 요소를 추가하려면 document.write()를 사용한다. 큰따옴표 안의 내용이 HTML
문서로 출력된다. 여기서 한 가지 주의해야 할 내용은 페이지가 적재된 후에 document.write()를 호출한다면 전체
HTML 페이지가 다시 씌여진다는 점이다. document.write()는 <body> 요소 안에서 다른 요소들과 같이 실행되는 경
우에 사용하는 것이 좋다.
'Wep Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트를 이용한 미니 게임 만들기(골 넣기 게임) (1) | 2020.07.18 |
|---|---|
| 11. 자바스크립트와 캔버스로 게임 만들기 (0) | 2020.07.16 |
| 10. DOM과 이벤트 처리, 입력 검증 (0) | 2020.06.27 |
| 9. 자바스크립트 객체 (0) | 2020.06.24 |