정보처리산업기사 - 프로그래밍 언어 활용 - JavaScript

※ 공부 내용의 복습 개념으로 정리된 글입니다. - 출처 시나공 

 

JavaScript의 기본 문법

JavaScript는 객체지향의 스크립트 언어로, 주로 웹 페이지의 동작을 구현합니다.

• C언어 문법을 기반으로 제작된 언어이므로, 제어문, 반복문 등의 함수 사용 방법이 C언어와 같습니다.
• 변수는 자료형에 관계없이 'var' 예약어를 사용하여 선언합니다.
  예) avr a = 3.14 → 변수 a를 선언하고 3.14로 초기화합니다.

코드 입력

• 방법1 : <script>와 </script> 태그 사이에 코드를 직접 입력합니다.
• 방법2 : <script> 태그 내부에 코드가 저장된 파일명(.js)을 입력합니다.

코드 해설

 

 

JavaScript의 입 · 출력

대화상자

• 대화상자는 화면에서 데이터를 입력받거나 내용을 표시하는 용도로 사용하는 창입니다.
• 관련된 메소드는 window 객체에 정의되어 있으며, 메소드 사용 시 객체명은 생략할 수 있습니다.
• 대화상자가 표시되면 대화상자를 종료할 때까지 웹 페이지를 조작할 수 없습니다.

형식1 : 알림 대화상자

예제1 : 알림 대화상자를 화면에 표시하시오.

<결과>

 

형식2 : 확인 대화상자

형식3 : 입력 대화상자

 

콘솔(Console)

• 콘솔은 개발자 도구의 콘솔 탭의 기능을 사용할 수 있게 하는 전역 객체입니다.
• 웹 브라우저엣 개발자 도구 창의 콘솔 탭에서 결과를 확인할 수 있습니다.
• 콘솔의 출력 메소드에는 log(), info(), warn(), error()가 있으며 사용 형식은 모두 같습니다.

형식

 

※ window객체

window 객체는 웹 브라우저에 관련된 모든 요소를 정의하는 최상위 객체로, 어디서든 접근할 수 있어 '전역 객체'라고 불립니다. 원칙적으로 객체에 속한 메소드는 window.alert()와 같이 객체명과 메소드를 함께 작성해야 하지만 window 객체에 한해서는 alert()와 같이 객체명을 생략할 수 있습니다.

 

※ 개발자 도구

개발자들이 웹 브라우저에서 코드 분석, 디버깅, 성능 확인, 트래픽 분석, 보안 등의 기능을 구현할 수 있도록 제공하는 툴입니다.

 

※ 개발자 도구 창 표시하기

웹 브라우저를 실행시킨 후 키보드의 F12나 Ctrl + Shift + I를 누르면 개발자 도구 창이 표시됩니다.

표시된 개발자 도구 창의 '콘솔(Console)' 탭을 클릭한 후 메소드들의 실행 결과를 확인해 볼수 있습니다.

 

 

배열(Array)

배열은 여러 개의 데이터를 하나의 이름으로 정의하여 사용하는 데이터의 집합입니다.

• 동일한 자료형만 저장할 수 있는 C나 Java의 배열과 달리 다양한 자료형을 저장할 수 있습니다.
• 변수 선언시 자료형에 관계없이 'var' 예약어를 사용합니다.
• 변수명은 사용할 배열의 이름으로 사용자가 임의로 지정합니다.
• 초기값으로 지정한 개수대로 배열의 요소가 생성됩니다.

형식

 

배열 요소의 추가

 

배열 요소의 삭제

 

배열의 일부 요소 추출

 

배열 요소를 문자열로 변환

 

※ 배열명[위치] = 값;

C나 Java에서는 초기에 만들어진 배열의 요소에만 값을 저장할 수 있지만, JavaScript에서는 배열의 크기를 벗어난 요소를 지정하면 해당 요소만큼 배열의 크기가 커지면서 값이 저장됩니다.

 

※ 값이 정의되지 않은 요소

a[5]는 a[6]에 값을 저장하는 과정에서 자동으로 생성되었지만 값은 저장되지 않습니다. 이와 같이 변수의 선언이나 배열 요소의 생성 등으로 인해 메모리에 영역은 할당되었지만 값이 정의되지 않은 경우 JavaScript에서는 undefined로 처리합니다. a[5] 요소를 출력하면, 화면에 undefined가 표시됩니다.

 

 

728x90