JavaScript / 제어문(조건문, 반복문)

▶자바스크립트 코드의 위치

①HTML태그의 이벤트 리스너 속성에 작성

②<script></script>내에 작성

③자바스크립트 파일에 작성

④URL부분에 작성

 

※이벤트와 이벤트리스너

이벤트는 사용자의 입력 행위를 브라우저가 웹 페이지에 전달하는 수단이다. 사용자가 HTML태그가 출력된 영역에 키를 입력하거나 마우스를 클릭하면 이벤트가 발생하며, 이벤트는 해당 HTML태그에게 전달된다. 이벤트는 click, change, mouseover등 많은 종류가 있으며 이러한 이벤트를 처리하는 자바스크립트 코드를 이벤트 리스너라고 한다.

onclick, onchange, onmouseover와 같이 이벤트 앞에 on을 붙인 이름이 HTML태그의 이벤트 리스너 속성으로 사용된다.

 

 

 

▶자바스크립트로 HTML 콘텐츠 출력

자바스크립트 코드로 HTML콘텐츠를 웹페이지에 직접 삽입하여 바로 브라우저 윈도우에 출력되게 할 수 있다.

이때 document.write()나 document.writeLn()을 사용한다. 

 

 

 

▶자바스크립트 다이얼로그 : 사용자 입력 및 메시지 출력

자바스크립트는 사용자에게 메시지를 출력하거나, 입력을 받을 수 있는 3가지 다이얼로그를 가지고 있다.

 

①프롬프트 다이얼로그, prompt("메시지", "디폴트 입력값")

:prompt()함수는 다이얼로그를 출력하고 사용자로부터 문자열을 입력받아 리턴한다. 이 함수는 '메시지'와 '디폴트 입력값'을 출력하며 '디폴트 입력값'은 생략 가능하다. prompt()는 사용자가 입력한 문자열을 리턴하지만, 아무값도 입력되지 않았으면 ""을, 취소버튼이나 강제로 다이얼로그를 닫은 경우는 null을 리턴한다.

 

②확인 다이얼로그, confirm("메시지")

:confirm()함수는 '메시지'와 확인/취소 버튼을 가진 다이얼로그를 출력한다. 사용자가 확인 버튼을 누르면 true를, 취소버튼이나 강제로 다이얼로그를 닫으면 false를 리턴한다.

 

③경고 다이얼로그, alert("메시지")

:alert()함수는 다이얼로그를 출력하여 단순히 메시지를 전달한다.

 

 

 

 

2.데이터 타입과 변수

 

▶자바스크립트 식별자

식별자란 자바스크립트 개발자가 자바스크립트 프로그램의 변수, 상수, 함수에 붙이는 이름이다. 개발자는 식별자를 만들 때 다음 규칙을 준수해야한다.

 

①첫 번째 문자-알파벳, 언더스코어(_), $문자만 사용가능

②두 번째 이상 문자-알파벳, 언더스코어, 0~9, $ 사용가능

③언더스코어로 시작하는 이름은 권하진 않음

④대소문자 구분

⑤예약어 사용 불가

 

※가독성 높은 식별자 만들기

식별자는 의미를 담을 수 있도록 최대한 길게 쓰는 것이 좋다. 또한 두 단어로 구성되는 식별자를 만들 때 가독성을 높이기 위해 단어의 첫 글자는 대문자로 하는 이른바 헝가리언 이름 규칙이 바람직하다. ex)studentID

 

 

▶문장 구분

자바스크립트 프로그램의 기본 단위는 문장이며, 세미골론으로 문장과 문장을 구분한다. 한줄에 한문장만 있는 경우 세미콜론을 생략할 수 있다.

 

 

▶주석문

//~~~

 

 

▶데이터타입

데이터타입이란 자바스크립트 언어로 다룰 수 있는 데이터의 종류이다.  데이터 타입의 종류는 다음과 같다.

 

①숫자 타입 : 10, 20.1

②논리 타입 : true, false

③문자열 타입 : '좋은세상', "a", "365"

④객체 레퍼런스 타입 : 객체를 가리킴. C언어의 포인터와 유사

⑤null : 값이 없음을 표시하는 특수 키워드(null과 NULL은 다름)

 

※참고

숫자타입은 정수, 실수를 구분하지 않는다. 

true와 false는 참과 거짓을 나타내는 자바스크립트 예약어이다. 

자바스크립에서는 문자 타입이 없어 문자는 모두 문자열로 표현한다. 

자바스크립트는 객체 기반 언어인 만큼 객체를 가리키는 포인터와 유사한 객체 레퍼런스가 있다.

 

 

 

▶변수

변수는 자바스크립트 코드가 실행중에 데이터를 저장하는 공간의 이름이다. C나 JAVA같은 범용 컴퓨터 언어와 달리 자바스크립트는 변수에 데이터타입을 정하지 않는다. 변수는 다음 2가지 방법으로 선언할 수 있다.

 

①var키워드로 변수를 선언

②var키워드 없이 변수를 선언(이미 선언된 변수라면 var키워드 없이 변수만 선언하고 = 하고 값을 표시)

※var키워드로 변수를 선언하는 것이 바람직하다.

 

 

지역변수와 전역변수

지역변수: 함수 안에서 var키워드로 선언. 선언된 함수 내에서만 사용 가능

전역변수: 함수 밖에서 선언되거나 함수 내에서 var키워드 없이 선언, 프로그램 전역에서 사용가능

※this로 전역 변수 접근

지역변수와 전역변수의 이름이 같을 때, this를 이용하면 전역변수에 접근할 수 있다.

 

 

 

▶상수

변수가 데이터 저장 공간의 이름이라면 상수는 데이터 값 그 자체이다. 상수 종류는 다음과 같다.

 

※문자열 내 문자열은 ' ' 로 처리

 

 

 

 

3.식과 연산자

 

식을 계산하여 결과를 얻는 과정을 연산이라고 한다.

연산	연산자
산술	+  -  *  /  %
증감	++  --
비트	&  |  ^  ~
시프트	>>  <<  >>>
대입	=  *=  /=  +=  -=  &=  ^=  |=  <<=  >>=  >>>=
비교	>  <  >=  <=  ==  !=
논리	&&  ||  !
조건	?  :

 

 

 

 

1.제어문

 

1-1.조건문(선택문)

조건문은 조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업을 실행하는 자바스크립트 문장이다.

자바스크립트의 조건문은 if-else와 switch의 두 종류가 있다.

 

▶if문

if의 조건식이 참이면 실행문을 실행한 후 if문을 벗어나며, 거짓이면 바로 if문을 벗어난다.

 

 

 

 

▶if-else문

 

 

 

 

▶다중 if-else문

 

 

 

 

 

▶switch문

값에 따라 서로 다른 코드를 실행할 때, if-else문보다 switch문이 적합하다.

switch문은 괄호 안에 있는 식의 결과가 case문의 값과 일치하는 실행 문장으로 분기한다. 그리고 실행 문장들을 실행 한 후 break문을 만나면 switch문을 벗어난다. 일치하는 case문이 없으면 default문으로 바로 분기한다. default문은 생략 가능하다.

switch문에서는 실행 문장을 중괄호({})로 둘러싸지 않는다는 점에 유의하라

 

①case문의 값

case문의 값은 상수만 가능하며 예시는 다음과 같다.

-case 1 :

-case 2.7 :

-case "Seoul" :

-case true : 

-case 2+3 :  //2+3은 먼저 5로 계산되어 case 5 : 와 동일

 

하지만 case문의 값에 변수나 식은 사용할 수 없다. 다음은 잘못된 예시이다.

-case a :        //변수 a 사용불가

-case a > 3 :  //식 사용불가

 

※자바스크립트와 자바는 다른언어

자바는 자바스크립트를 줄여 말하는 것으로 오해하는 경우가 있다. 이둘은 서로 다른 언어이다. 자바는 완벽한 객체 지향 기능을 갖추고 PC, 모바일, 웹 서버 등 다양한 환경에서 소프트웨어를 개발하는데 사용되는 범용 언어이지만, 자바스크립트는 웹 페이지에 내장되어 브라우저에서 실행되거나 웹 서버에서 실행되는 응용프로그램을 작성하는데 사용된다. 자바 언어도 웹 서버 응용프로그램 개발에 많이 사용되는데 이를 자바 서블릿이라고한다. 한편 JSP는 웹 서버 상에서 실행되는 또 다른 스크립트 언어이다. JSP프로그램은 실행 전에 자바서블릿(자바클래스)으로 변환되어 실행된다.

 

 

 

 

 

1-2.반복문

자바스크립트는 동일한 작업을 반복할 수 있는 3가지 반복문을 제공한다.

①for문

②while문

③do-while문

 

▶for문

for문은 반복회수를 아는 경우 주로 사용한다.

for문은 조건식이 true인 동안 작업문을 반복하여 실행한다. 초기문은 처음 한 번만 실행된다. 조건식에는 논리 연산이나 true/false 값 혹은 논리 값을 가진 변수를 사용할 수 있다. 조건식의 결과가 false이면 for문을 벗어나 아래로 내려간다. 작업문이 하나의 문장으로 된 경우 중괄호({})는 생략할 수 있다.

 

 

 

▶while문

while문 역시 조건식이 참인 동안 작업문을 반복 실행한다. while문은 반복회수를 알 수 없는 경우 주로 이용한다.

 

※parseInt()함수

이 함수는 문자열을 숫자로 바꾸어 리턴하는 자바스크립트 함수로서, parseInt("25")는 숫자 25를 리턴한다.

 

 

 

▶do-while문

작업문은 최소 한번 실행되며, 조건식을 검사하여 true인 동안 작업문이 반복 실행된다.

 

 

 

▶break문

break문은 반복문을 벗어난다. 여러 반복문으로 중첩된 경우 현재 반복문 하나만 벗어난다.

 

 

 

▶continue문

continue문은 다음 반복으로 넘어가고자 할 때 사용된다.