42일차: 자바스크립트_반복문 / 함수 / Date 객체 2021.08.11

목차

1.     반복문과 보조 제어문

2.     사용자 정의 함수와 내장 함수

3.     내장 객체: Date 객체

 

 

1. 반복문과 보조제어문  

 

1) 반복문

① for문                      → ★for01.html ~ for07.html 참고

- 형식: for (초기값; 조건식; 증감식) {

             반복 실행할 문장;

}

 

② while문                   → ★while01.html ~ while04.html 참고

- 형식: while (조건식) {

           반복 실행할 문장;

          }

 

③ do while문               → ★dowhile01.html / dowhile02.html 참고

- 실행할 문장이 조건식 앞에 오기 때문에 조건이 거짓이어도 한 번은 실행된다.

- 형식: do {

             반복 실행할 문장;

          } while (조건식);

 

2) 보조 제어문              → ★continue.html 참고

- 보조 제어문에는 break문과 continue문이 있다.

- 보조 제어문은 반복문 안에서 사용된다.

- break문: 반복문을 종료시킨다.

- continue문: 다시 반복문으로 돌아가라는 의미로 사용된다. continue문이 실행되면, continue문 아래쪽은 실행되지 않는다.

 

2. 사용자 정의 함수와 내장 함수 

 

1) 함수의 개념과 선언 형식

- 함수는 프로그램 내에서 특정 작업을 수행하기 위해 만들어진 하나의 단위이다. 즉, 언제 어디서든지 함수만 호출하면 정의된 함수안의 수행문들이 실행된다.

 함수에서 전달되는 입력값을 매개변수(parameter)라 부르고, 함수 계산 결과 나오는 값을 리턴값(return value)이라 부른다. 물론 매개변수나 리턴값이 없는 것도 있을 수 있다.

 

- 함수명은 대소문자를 구분한다.

 

• 매개변수: 함수의 괄호 안에 집어넣어 함수 쪽에 추가적인 정보를 전달하는 것

• 리턴 값 : 함수를 실행한 결과를 반환 값

 

• 사용자 정의 함수 선언 형식

- function이라는 키워드를 먼저 쓰고, 그 뒤에 함수 이름과 매개변수 등을 쓴다.

 

2) 사용자 정의 함수 생성

① 매개변수가 없는 기본 함수     → ★function01.html / function04.html 참고

- 형식: function 함수명(){           

           실행할 문장;

          }

 

② 매개변수가 있는 함수             → ★function02.html / function03.html / function05.html 참고

- 형식: function 함수명(매개변수){

           실행할 문장

          }               

 

• 함수 호출

- 자바스크립트에서 함수는 대소문자를 구분한다.

- 함수 정의 후 호출이 이루어져야 한다. 순서가 바뀌면 호출되지 않는다.

 

<함수 정의보다 호출이 먼저 이루어질 때 콘솔창의 화면>

 

• 방법 1) 함수명으로 함수 호출

ex) check();

 

• 방법 2) 이벤트를 이용해서 함수 호출

ex) <input type="button" value="함수 호출" onClick="check()">

→ 버튼을 클릭하면 check() 함수가 호출됨

 

- onClick   → on: 이벤트 핸들러, 대소문자 구분 X

              → Click: 이벤트, 대소문자 구분 X

 

3) 재귀 함수                 → ★function06.html 참고

- 재귀적 호출이라는 것은 내부에서 자기를 호출하는 것을 의미한다. 대표적인 예는 값을 하나씩 줄여가면서 곱하는 계산식인 팩토리얼(factorial)이다.

 

4) 내장 함수                 → ★builtin.html 참고

- 자바스크립트에서 자체적으로 제공하는 함수

① parseInt()

- 문자형 데이터를 정수형 데이터로 변환

- ex) parseInt(“3.14”)  →  3

 

② parseFloat()

- 문자형 데이터를 실수형 데이터로 변환

- ex) parseFloat("3.14")  →  3.14

 

③ Number()

- 문자형 데이터를 숫자형 데이터로 변환

- ex) Number("3.14")  →  3.14

 

④ String()

- 숫자형 데이터를 문자형 데이터로 변환

- String(1000) →  “1000”

 

⑤ eval()

- 문자형 산술식을 연산 수행

- eval("10+20")  →  

 

⑥ isNaN()

- ‘Not a Number’를 의미

- 숫자가 아니면(문자가 포함되면) true 값을 리턴하는 함수

- ex) isNaN("10+20")  →  true

     isNaN(“10”)  →  false

 

3. 내장 객체: Date 객체 

 

1) Date 객체 개념                                → ★date01.html 참고

- Date 객체는 자바스크립트에서 날짜와 시간을 다루는데 사용되는 객체이다.

- Date 객체는 브라우저에서 실행하고 있는 컴퓨터의 날짜와 시간을 알아낼 수도 있고, 특정 날짜 정보를 저장해 놓을 수도 있다.

- Date 객체형의 변수를 선언하고, 이 객체에 속해있는 getYear(), getMonth(), getDate(), geHours(), getMinutes(), getSeconds() 메소드를 사용한다.

 

2) Date 객체 선언과 사용

- 먼저 new연산자를 통해서 객체를 생성한다. 그후 해당 객체를 통해 필요한 함수(method, function)를 호출한다.

- ex) var t = new Date();   → 객체 선언

- getMonth 함수로 월을 구하면 0부터 11까지 나오므로 +1을 해주어야 한다.

 

      var y = t.getFullYear();                 // 년

      var m = t.getMonth()+1;              // 월(0~11)

      var d = t.getDate();                     // 일

      var h = t.getHours();                    // 시

      var mm = t.getMinutes();              // 분

      var s = t.getSeconds();                 // 초

      var w = t.getDay();                      // 요일(0~6)