[웹디자인기능사] 필기 36 자바스크립트 내장 함수 ~ 40 웹 페이지 저작기법의 특징

36. 자바스크립트 내장 함수

 

1. 배열

인덱스를 이용해서 n개의 데이터를 하나의 변수에 담고 있는 형태

 

2. 함수

• 프로그램에서 어떤 기능을 구현할 때 그 기능에 대한 명령을 내려 동작하도록 하는 것
• 특정한 기능들을 모아 놓고 필요에 따라서 명령하면 답하는 기계
• 프로그램 안에서 각각의 작은 기능들을 독립적으로 수행함
• 입력값(Input)을 받아서 처리한 후 결과값(Output)을 반환함
• 함수의 이름을 보고 어떤 기능을 하는지 예측할 수 있으므로 함수의 이름을 정하는 것이 중요함

3. 함수 생성의 종류

• 명시(선언)적 함수 : 이름이 있으므로 지정해서 호출할 수 있음

Function 함수 이름() {
	실행문;
}

함수 이름이 있음 ↓ 함수 호출 : 함수 이름( );

 

• 익명 함수 : 함수 이름이 없어서 변수에 담아서 사용하고 지정된 변수 이름으로 호출할 수 있음

Var 변수 이름 = Function {
	실행문;
}

함수 이름이 없음 (이름이 없으므로 변수에 담아서 사용하기도 함) ↓ 함수 호출 : 변수 이름( );

 

• 함수의 선언과 표현
  • 하나의 함수가 한 가지의 일만 하도록 명령함
  • 함수는 동작하는 것이기 때문에 이름을 지정할 때는 명령어(Command), 동사(Verb) 형태로 지정
  • 다양한 객체의 종류가 있는데 그중에서 Arguments는 매개변수를 데이터로 하는 배열 객체

Function 함수 이름 (매개변수1, 매개변수2, ..., 매개변수n){
	//매개변수들을 이용한 배열 객체
    arguments = [매개변수1, 매개변수2, ..., 매개변수n]
}

 

• 내장 함수
  • 자바스크립트는 함수를 직접 만들 수도 있고 만들어진 함수를 불러올 수도 있는데, 이미지 시스템에 정의된 함수를 내장함수라고 함
  • 직접 함수를 만들지 않아도 자바스크립트가 기본적으로 제공해주는 함수
• 내장 함수의 종류

alert( )	메시지 창이 생성되어 화면에 띄워짐
prompt( )	사용자로부터 임의의 문자를 입력받기 위한 창을 화면에 띄워 입력한 문자열을 사용할 수 있게 해줌
confirm( )	[확인]이나 [취소] 버튼이 나타나는 메시지 창이 생성됨
console.log( )	- 로그를 찍는 함수 - 사용자 화면엔 보이지 않지만 디버깅해서 확인 가능
eval( )	문자열로 입력된 수식을 계산해주는 함수
parseInt( )	- 인수로 들어온 문자열을 정수로 변환 - 정수 : %d로 출력하면 소수점은 표시되지 않음
parseFloat( )	- 수식으로 되어 있는 문자열을 계산하여 실수로 변환 - 문자열을 실수(부동소수점)로 변환 - 실수 : %lf로 출력하면 소수점까지 표시됨
isNaN( )	- 입력된 값이 숫자인지 아닌지의 여부를 판단 - NaN은 Not a Number의 약자
escape( )	알파벳, 숫자, 일부 특수기호를 제외하고 문자를 16진수로 바꿔주는 함수
setTimeout( )	일정 시간이 지난 후 지정된 명령을 호출(1회만 실행)
setInterval( )	일정 시간마다 지정된 명령을 반복 호출로 브라우저 상태를 파악하거나 동작을 수행(무한반복 실행)
clearInterval( )	setInterval에 설정된 명령어를 취소하는 역할

 

• 디버깅(Debugging)
  • 컴퓨터 프로그램 개발단계 중에 발생하는 시스템의 오류나 비정상적 연산(버그)을 찾아내어 그 원인을 밝히고 수정하는 작업 과정
  • 디버깅 방법을 브라우저 창에서 [F12] 버튼을 누르고 [Console] 탭에서 오류를 확인할 수 있음

 

 

37. 자바스크립트 내장 객체

 

1. 객체(Object)

• 배열처럼 변수에 데이터를 여러 개 담을 수 있게 해주는 자바스크립트 자료형
• 속성(Property)이라고 하는 키(Key)와 값(Value)을 { }안에 넣어 표현
• 상태(속성)와 행동(메서드)을 함께 가리키는 단위
• 속성과 메서드를 구분하는 방법 : ( )가 없으면 속성, ( )가 있으면 메서드
• 메서드 : 객체 안에 들어 있느 함수

 

 

2. 자바스크립트 내장 객체

• 자바스크립트 내에 이미 정해져 있는 객체
• 문자열 처리, 수학 처리 등을 할 수 있는 객체들로 이루어짐

3. 자바스크립트 내장 객체의 종류

• Array 객체 : 비슷한 종류의 데이터를 하나의 배열로 생성해줌
  • Array 객체의 행동(메서드)

concat( )	2개 이상의 배열을 결합해 하나의 배열 객체를 생성하여 반환함
join( )	배열 객체의 각 원소들을 하나의 문자열로 만들어 반환함
slice( )	배열의 원소들 가운데 일부를 새로운 배열로 만들어 반환함
reverse( )	배열의 값을 역순(거꾸로 된 순서)으로 반환함
sort( )	- 배열의 각 원소들을 오름차순으로 정렬하여 반환함 - sort(조건) : 조건을 넣으면 조건대로 정렬됨

• String 객체 : 문자열을 처리하는 객체
  • String 객체의 매세드

replace( )	임의의 문자열에서 지정한 문자를 다른 문자로 변경
match( )	임의의 문자열에서 지정한 문자가 나타나는 첫 번째 위치값을 반환함
split( )	임의의 문자열을 지정한 문자열이 나타나는 위치를 지정하여 2개 이상의 문자열 배열로 나누어서 반환함
toUpperCase( )	문자열에 존재하는 소문자를 모두 대문자로 변환하여 반환함
toLowerCase( )	문자열에 존재하는 대문자를 모두 소문자로 변환하여 반환함

• Date 객체 : 날짜와 시간 처리 객체
• Math 객체 : 수학 관련 속성과 메서드 제공
• Number 객체 : 숫자 데이터를 처리하기 위한 객체
• Screen 객체 : 브라우저의 화면 정보 관련 속성을 제공

 

38. 자바스크립트 브라우저 내장 객체

 

1. 브라우저 내장 객체의 개념

• 웹 브라우저 창을 위한 속성과 메서드 제공
• Browser Object Model(BOM)이라고도 하며 브라우저와 관련된 객체를 의미함

2. 브라우저 내장 객체의 종류

• 상위 객체 : Window
• 하위 객체 : History, Frame 등
• History 객체 : 웹 브라우저의 주소 표시줄의 URL 주소 정보를 제공하는 객체
• Frame 객체 : 웹 브라우저에 모두 몇 개의 프레임이 있는지 알 수 있는 객체

3. Window 객체의 속성

self / this / window	자기 자신의 창
top	현재 프레임의 최상위 프레임(자기 자신의 창일 수도 있음)
opener	현재 창을 열리게 한(생성한) 부모 창 : 브라우저 첫 화면
closer	창이 닫혀 있는 상태 식별
history / location	현재 창의 history 객체 / location 객체

 

4. Window 객체의 메서드

window.alert() 로 써야 하지만 window는 생략해서 씀

alert( )	메시지 창 생성
open( )	새 창 열기
close( )	창 닫기
eval( )	문자열을 숫자로 변환하여 보여줌
confirm( )	[확인]이나 [취소] 버튼이 나타나는 메시지 창 생성
setTimeout( )	일정 시간이 지난 후 지정된 명령 호출
setInterval( )	일정 시간마다 지정된 명령을 반복 호출하여 브라우저 상태를 파악하거나 동작을 수행

 

5. Document(문서) 객체의 개념

• HTML 문서에 대한 정보를 제공하는 자바스크립트 객체
• Document Object Model(DOM)이라고도 하며 웹 문서(태그)와 관련된 객체를 의미함
• 자바스크립트를 이용해서 HTML 태그 객체를 생성, 추가, 삭제, 이동 등의 작업 가능
• 문서를 다이내믹하고 신비스럽게 만들 때 사용됨
• 자바스크립트를 이용해서 배경색을 초록색으로 지정하는 방법
  • 배경을 지정해 주는 명령어 : document 객체
  • 배경색을 지정해 주는 명령어

bgColor document.bgColor="green";

 

6. Document 객체의 메서드

write( )	화면에 글자를 출력하기 위해 사용되는 함수
anchor( )	읽기 전용 속성은 문서 내에 모든 앵커 목록을 반환함
area( )	href 속성을 가짐
link( )	href 속성을 가지는 <area> 요소와  <a> 요소를 모두 반환함

 

7. 이벤트(Event)

• 웹 브라우저에서 이벤트가 발생하는 경우
  • 마우스 동작
    클릭, 우클릭, 더블클릭 등에 따라 이벤트 발생
  • 버튼
    사이트에 로그인할 때 로그인 버튼에 따라 이벤트 발생
  • 양식 전송
    사이트 내 회원가입 시 내가 입력한 정보가 서버로 전송될 때 전송 완료 메시지 등의 이벤트 발생
  • 웹페이지 로드
    웹 문서가 열릴 때 <body> 태그가 다 읽혀서 윈도우에 onLoad()라는 이벤트 발생
  • 포커스
    사이트 내 회원가입시 텍스트 박스에 포커스가 맞춰진 것에 따라 이벤트 발생
• 이벤트(사용자의 어떤 행위) 발생 시 그 이벤트에 따른 시스템의 변화를 의미함
• 이벤트 형식

• 이벤트 핸들러(Event Handler)
  • 자바스크립트에서 사용자의 특정한 행동에 대해 어떤 처리를 해줄 것인가를 정의하는 것
  • 이벤트 핸들러의 종류

onLoad( )	- HTML 문서를 읽는 경우 - 사용자가 처음으로 웹 페이지를 브라우저로 읽을 때 발생하는 이벤트
onError( )	문서를 읽던 중 에러가 발생할 경우
onFocus( )	대상에 포커스가 들어왔을 때 발생하는 이벤트를 처리
onBlur( )	대상이 포커스를 잃어버렸을 때 발생하는 이벤트를 처리
onClick( )	마우스로 클릭하는 경우 이벤트를 처리
onChange( )	입력 양식 필드에서 값이 바뀌었을 때 이벤트를 처리
onMouseUp( )	마우스 버튼을 누른 상태에서 손을 뗄 때 이벤트를 처리
onMouseDown( )	마우스 버튼을 누를 때 이벤트를 처리
onMouseMove( )	마우스가 대상 영역 위에서 이동할 때 이벤트를 처리
onMouseOut( )	마우스가 대상의 링크나 영역 안을 벗어날 때 발생하는 이벤트를 처리
onMouseOver( )	마우스가 대상의 링크나 영역 안에 위치할 때 발생하는 이벤트를 처리

 

 

39. 웹 페이지 저작기법의 정의 및 종류

 

1. HTML을 이용한 웹 페이지 제작

• Markup 태그를 이용하여 제작
• 다양한 멀티미디어 포맷의 파일을 연결시킬 수 있음
• 위지위그(WYSIWYG) 방식은 직접 코드를 입력하지 않아도 웹 페이지 구성 가능

2. HTML을 이용한 웹 페이지 제작 도구 종류

• 위지위그 (WYSIWYG) 방식
  • What you see is what you get(보이는대로 얻는다)의 줄임말
  • 위지위그 또는 위지윅으로 불리는데, 위지위그가 맞는 외래어 표기
  • 웹 페이지 제작 시 작업환경에서 보이는 그대로 결과물을 도출해 내는 방식
• 위지위그 기반의 HTML 에디터 프로그램 종류
  • 나모 웹 에디터(Namo Web Editor)
  • 드림위버(Dreamweaver)
  • 프론트페이지(FrontPage)
  • 노트패드(Notepad)
  • 넷스케이프 컴포저(Netscape Composer)
• 직접 태그를 코딩하는 프로그램
  • 대표적인 프로그램은 울트라 에디트(Ultra Edit)
  • 위지위그 방식을 적용하지 않은 에디터

 

40. 웹 페이지 저작기법의 특징

 

1. 웹 페이지 저작 도구

• 텍스트를 읽을 때 그래픽이 방해되지 않아야 함
• 한 페이지에 너무 많은 것을 보여주기 위한 욕심은 버려야 함
• 웹 디자인의 일관성 유지
• 웹 페이지를 제작할 때 코딩이 필요하긴 하지만 사용자가 쉽고 편하게 사용할 수 있도록 디자인하는 것이 가장 중요함

2. 웹 페이지 제작 시 주의할 사항

• 자신의 홈페이지 주소를 간단하고 기억하기 쉽도록 구성
• 웹 페이지에 찾아오기도 나가기도 쉽도록 함
• 스크롤 화면은 되도록 사용하지 않도록 하여 로딩 시간을 줄이고 간단명료하게 디자인
• 많은 정보를 복잡하게 제작하면 사용자가 원하는 정보를 쉽고 빠르게 찾을 수 없어 불편하다고 느낌

3. 웹 페이지 제작 시 고려할 사항

• 웹 페이지의 일관성 유지
• 레이아웃 설계
• 구조설계

4. 구조설계

웹 사이트에 삽입할 콘텐츠를 구성한 후 이것을 웹이라고 하는 하이퍼링크 구조 안에서 어떻게 조직화할 것인가를 결정하는 것

 

5. 웹 서버의 일반적인 동작 과정

연결설정 → 클라이언트의 정보요청 → 서버의 응답 → 연결 종료

 

6. 웹 페이지 게시판

• 웹 페이지 저작 시 데이터베이스가 필요한 작업
• 웹 페이지에서 데이터베이스와 연동하는 것은 관리자 페이지에서 별도로 관리할 수 있으며 게시판, 방명록, 카운터 등이 있음

7. 웹 페이지 버튼

• 문자 버튼의 색상과 배경이 변함
• 애니메이션 효과로 움직이는 버튼 제작
• 흔들리는 이미지가 메뉴로 바뀜

8. 웹 페이지의 속도 향상을 위한 이미지 관리

썸네일(Thumbnail) 활용

 

웹디자인기능사 필기 무료 강의