김순현 tnsgus239@gmail 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 14

1. HTML HTML과 자바스크립트 김순현 tnsgus239@gmail.com 군산대학교 통계컴퓨터과학과 정보과학기술 연구실 2013. 01. 14

2. 목차 • 입력 폼 태그 • 자바스크립트 • 자바스크립트의 기본구조 • 기본 특성 • 변수 • 자료형 • 주석문 • 연산자 • 제어문 • 함수 • 내장 함수 • 사용자 정의 함수 IST (Information Sciences & Technology) Laboratory

3. 입력 폼 태그 • 입력 양식 태그 • 사용자가 웹 브라우저에 자료를 입력하기 위한 태그로써, 일반적으로 입력한 자료를 처리하기 위한 CGI 프로그램과 연결하여 작업함 • <FORM>…</FORM> • 입력 폼의 시작과 끝을 표시 • <FORM ACTION=“CGI 프로그램 또는 URL”> • 사용자가 입력한 자료를 전달받아 처리할 프로그램을 지정 • 전자우편으로 받을 시 “mailto:전자우편주소” • <FORM METHOD=“자료를 CGI 프로그램에 보내는 방법(GET, POST)”> • “GET”은 자료를 환경변수(QUERY_STRING)에 넣어서 보내는 방식 • “POST”는 표준 입출력으로 보내는 방식, 일반적으로 사용 IST (Information Sciences & Technology) Laboratory

4. 입력 폼 태그 • 입력 태그 • <INPUT> • 입력필드를 작성하기 위한 태그, 닫는 태그 없음 • <INPUT TYPE=“입력 필드의 형식”> • 입력 필드의 형식에 따라 속성이 다름 • 속성 • NAME: CGI 프로그램에 문자 입력 필드의 자료를 전달할 때 NAME 속성에 지정한 값이 저장되어 전달 • SIZE: 문자 입력 필드의 크기를 설정하는 것으로 글자 수를 입력 • MAXLENGTH: 사용자가 문자 입력 필드에서 입력할 수 있는 최대 문자 수를 설정 • VALUE • 초기에 화면에 기본적으로 나타나는 값을 설정 • 버튼에 표시될 문자열 • CGI에 전달되는 값 • READONLY: 사용자가 자료를 입력할 수 없도록 하기 위한 속성 IST (Information Sciences & Technology) Laboratory

5. 입력 폼 태그 • 입력 필드의 형식 • TEXT 형식 • 문자를 입력하기 위한 형식 • <INPUT TYPE=“TEXT” NAME=“문자 입력 필드의 이름” VALUE=“처음에 표시할 초기 값” SIZE=“문자 입력 필드의 크기(너비의 크기) MAXLENGHT=“문자 입력 필드의 최대 입력 문자수” READONLY> • PASSWORD 형식 • 사용자가 문자를 입력하면 암호표시처럼 “*”으로 표시 • TEXT 형식과 같음 IST (Information Sciences & Technology) Laboratory

6. 입력 폼 태그 • 입력 필드의 형식 • SUBMIT 형식 • 버튼을 웹 브라우저에 표시 • 버튼 클릭 시 <FORM>…</FORM>태그에 존재하는 모든 입력자료를 ACTION속성에서 지정한 CGI 프로그램으로 전달 • <INPUT TYPE=“SUBMIT” NAME=“버튼의 고유 이름” VALUE=“버튼에 표시된 문자열”> • RESET 형식 • 버튼을 클릭하면 현재까지 입력한 자료들을 전부 지우고 초기 상태로 만드는 기능을 수행 • <INPUT TYPE=“RESET” VALUE=“버튼에 표시될 문자열”> IST (Information Sciences & Technology) Laboratory

7. 입력 폼 태그 • RADIO 형식 • 여러 개의 항목 가운데 하나만 선택 가능한 버튼 형식 • <INPUT TYPE=“RADIO” NAME=“Radio 버튼의 이름” VALUE=“CGI 프로그램에 전달되는 값” CHECKED> • VALUE 속성을 설정하면 그 값이 CGI 프로그램에 전달되고, 만일 설정되어 있지 않으면 “ON” 값이 전달됨 • CHECKED 속성은 초기에 선택된 상태를 지정 • 같은 그룹에 존재하는 Radio 버튼들은 같은 이름으로 지정해야만 그 중에서 하나가 선택 가능하게 됨 • CHECKBOX 형식 • RADIO 형식과 유사하고 차이점은 복수 선택이 가능 • <INPUT TYPE=“CHECKBOX” NAME=“CheckBox버튼의 이름” VALUE=“CGI 프로그램에 전달되는 값” CHECKED> • 복수선택 시 이들은 같은 이름으로 설정했으면 값을 “,”로 연결하여 전달 IST (Information Sciences & Technology) Laboratory

8. 입력 폼 태그 IST (Information Sciences & Technology) Laboratory

9. 입력 폼 태그 • 입력 필드의 형식 • HIDDEN 형식 • 화면에 나타나지 않으면서 CGI 프로그램에 자료를 전달 함 • <INPUT TYPE=“HIDDEN” NAME=“자료의 이름” VALUE=“CGI 프로그램에 전달되는 값”> • BUTTON 형식 • 화면에 버튼을 표시 • <INPUT TYPE=“BUTTON” NAME=“고유 이름” VALUE=“버튼에 표시할 문자열”> • IMAGE 형식 • 그림을 화면에 표시하고, 사용자가 그림을 클릭하면, 그림에서 클릭한 위치의 좌표 값을 CGI프로그램에 전달 • <INPUT TYPE=“IMAGE” NAME=“고유 이름” SRC=“그림 파일 또는 URL”> • SUBMIT 형식의 버튼이 존재하지 않아도 클릭 시 자료를 전달함 IST (Information Sciences & Technology) Laboratory

10. 입력 폼 태그 IST (Information Sciences & Technology) Laboratory

11. 입력 폼 태그 • <SELECT> • 콤보 박스 또는 리스트 박스에 의해 제공된 자료 중에서 특정 자료를 선택하기 위한 태그 • <SELECT NAME=“선택 박스의 이름”SIZE=선택박스의 항목을 표시하기 위한 크기” MULTIPLE>…</SELECT> • MUTIPLE 는 동시에 여러 항목을 선택할 수 있도록 함 • <OPTION> • 선택박스에 표시될 항목을 정의 • 닫는 태그 없음 • <OPTION VALUE=“CGI 프로그램에 전달될 자료” SELECTED> • SELECTED는 초기에 기본적으로 선택된 상태로 표시되도록 설정 IST (Information Sciences & Technology) Laboratory

12. 입력 폼 태그 • <TEXTAREA> • 여러 줄의 문자를 입력 받기 위한 태그 • <TEXTAREA COLS=“가로 폭” ROWS=“세로 폭” NAME=“입력 필드의 이름”>초기 화면에 표시될 문자열</TEXTAREA> • COLS 는 한 줄에 기술할 수 있는 문자 수 지정 • ROWS 는 입력할 수 있는 줄 수지정 IST (Information Sciences & Technology) Laboratory

13. 입력 폼 태그 IST (Information Sciences & Technology) Laboratory

14. 자바스크립트 • JavaScript • 웹 페이지를 html같은 정적인 상태가 아니라 사용자와 상호 대화할 수 있는 동적인 웹 페이지로 제작할 수 있도록 하는 객체 기반의 언어 • 스크립트 언어 • 일반적으로 C, Java와 같은 언어는 컴파일러가 있어 작성한 프로그램을 기계어 등과 같은 다른 언어로 변환하는 과정이 필요하지만 스크립트 언어는 다른 언어로 변환하는 과정 없이 프로그램을 직접 수행 • 자바스크립트는 웹 브라우저가 수행 • 웹 브라우저에는 변환하지 않고 수행하는 인터프리터(Interpreter)가 내장 IST (Information Sciences & Technology) Laboratory

15. 자바스크립트 • HTML문서에 삽입 • <SCRIPT LANGUAGE=“JavaScript”>//코드</SCRIPT> • 별도의 파일로 작성 • <SCRIPT SRC=“파일명.js”></SCRIPT> • 확장자*.js • 파일명은 8자를 넘지 않아야 함 • HTML 태그 안에 속성의 값으로 작성 • <HTML_TAG EVENT_NAME=“JavaScript_Code”> IST (Information Sciences & Technology) Laboratory

16. 자바스크립트의 기본구조 • 기본 특성 • 영문자, 숫자 및 특수 문자를 사용할 수 있음 • 대*소문자를 구별 • 하나의 명령문이 끝나면, 세미콜론(“;”)을 기술, 만일 한 줄에 하나의 명령어만 있으면 생략 가능 • 변수 • 임의의 자료를 임시로 보관하여 사용하기 위한 기억장치의 위치를 의미 • 변수이름은 기억 공간에 프로그래머가 부여한 이름 • 반드시 영문자 또는 밑줄(“_”)로 시작 • 대*소문자를 구분 • 영문자, 숫자 및 특수 문자 가운데 밑줄(“_”)을 조합하여 사용 • 공백 문자를 사용하지 않음 • 예약어는 사용 불가 IST (Information Sciences & Technology) Laboratory

17. 자바스크립트의 기본구조 • 자료형 • 임의의 변수에 저장되는 자료의 종류 • 숫자 자료형 • 수치 자료를 의미 • 정수, 실수 자료형으로 나뉨 • 문자 자료형 • 문자들을 말함 • 이중 인용부호(“”) 또는 단일 인용부호(‘’) 안에 문자 표시 • Boolean 자료형 • 참 또는 거짓 값을 저장 크기는 1비트 • Null 자료형 • 자료가 존재하지 않는다는 것을 의미 IST (Information Sciences & Technology) Laboratory

18. 자바스크립트의 기본구조 • 주석문 • /* 와 */ 사이에 들어가는 라인을 모두 주석으로 취급 • // 뒤에 오는 라인의 나머지를 주석으로 취급 • 연산자 • 산술연산자 • 수식과 관련된 연산자 • 증가(++) 및 감소(--) • 연산자가 변수 앞에 있는 경우 먼저 변수의 값을 연산함 • 연산자가 뒤에 있는 경우 변수의 값을 사용한 후 나중에 연산함 IST (Information Sciences & Technology) Laboratory

19. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

20. 자바스크립트의 기본구조 • 비교 연산자 • 두 개의 숫자 또는 문자들 간의 대소를 비교하여 주어진 조건의 참 또는 거짓 여부를 결정 • 문자열은 ASCII 코드의 크기 값으로 비교 IST (Information Sciences & Technology) Laboratory

21. 자바스크립트의 기본구조 • 논리 연산자 • 참과 거짓의 값을 갖는 두 개의 피연산자들에 대한 논리 연산을 수행하여 그 결과가 참 또는 거짓인지 판별하는 연산자 • 조건 연산자 • 주어진 조건의 결과에 따라 두 개의 값 중 하나를 선택하고자 할 때 사용 IST (Information Sciences & Technology) Laboratory

22. 자바스크립트의 기본구조 • 문자열 연산자 • 수치 연산자’+’가 문자열 사이에서 사용될 때에는 문자열 결합 연산자로 바뀜 • STRING + STRING • 할당 연산자 • 연산식에 의해 처리된 결과를 변수에 할당하는 연산자 IST (Information Sciences & Technology) Laboratory

23. 자바스크립트의 기본구조 • 연산자 우선 순위 IST (Information Sciences & Technology) Laboratory

24. 자바스크립트의 기본구조 • 제어문 • 조건문 • 조건에 따라 수행하는 명령문이 다른 경우에 사용 • if문 • 조건을 검사하여 조건이 참이면 수행하는 명령문 • if (조건식) 명령문; • 조건식은 참 또는 거짓으로 산출하는 수식 • if문 수행 순서 • 조건식을 검사 • 조건식의 결과가 참이면, 명령문을 수행 • if문 다음 명령문을 수행 • 참일 때 수행하는 명령문이 두 개 이상이면 if문은 반드시 {} 기호를 사용하여 범위를 설정 • if (조건식) 명령문_true; else 명령문_false • else는거짓일 때 수행하는 명령문 • if-else 명령문은 거짓일 때 사용하는 명령문에 다시 if문이 나오는 것 IST (Information Sciences & Technology) Laboratory

25. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

26. 자바스크립트의 기본구조 • switch 문 • switch (수식){ case 상수값1: 명령문1; case 상수값2 : 명령문2; :[default : 명령문n] } • if-else 문과 유사 함 • 수식과 상수 값들을 비교하여 같은 값이 있는 case 문의 명령문을 수행 • 명령문들이 두 개 이상인 경우에 {}로 범위를 설정하지 않아도 관계없음 • 상수 값들과 같은 경우가 존재하지 않고, default 문이 있으면 이 문의 명령문 수행 • 중첩가능 • break 문 • 가장 가까운 반복문 또는 switch 문을 종료하고 다음 명령문을 수행 • continue 문 • 반복적으로 수행하는 명령문들 가운데 다음의 명령문을 수행하지 않고 다음 반복문의 조건 검사로 이동하는 명령문 IST (Information Sciences & Technology) Laboratory

27. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

28. 자바스크립트의 기본구조 • 반복문 • 명령문을 일정한 횟수 또는 일정한 조건에 따라 반복적으로 수행 • while문 • 조건이 참(true)이면 명령문을 반복하여 수행 • while (조건) 명령문; 또는 while (조건){ 명령문;} • 수행과정 • 조건을 검사 • 조건이 참이면, 명령문을 수행하고 다시 처음부터 수행 • 조건이 거짓이면, while 문을 종료하고 다음 명령문을 수행 • 제일 먼저 조건을 검사하기 때문에 반복적으로 수행할 명령문을 한 번도 수행하지 않을 수 있음 • break문은 가장 가까운 범위의 반복문을 빠져나감 • 조건에 true로 하면 항상 true이여서 종료할 수 있는 상황, 즉 false가 발생하지 않음 무한반복이 됨 IST (Information Sciences & Technology) Laboratory

29. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

30. 자바스크립트의 기본구조 • do-while문 • while과 유사하며 차이점은 조건을 나중에 검사 • do{ 명령문;} while (조건) • 수행 순서 • 반복적으로 수행할 명령문을 수행 • 조건을 검사하여 조건이 참이면, 1을 수행하고, 거짓이면 do-while문을 종료하고 다음 명령문을 수행 • 처음에 명령문을 먼저 수행하기 때문에 반드시 한 번은 반복적으로 수행하는 명령문을 수행 IST (Information Sciences & Technology) Laboratory

31. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

32. 자바스크립트의 기본구조 • for문 • 반복 횟수를 카운트하면서 반복문을 수행하는 형태 • for(초기화; 종결조건; 증분) 명령문; • 초기화 및 증분은 명령문 • 종결조건은 참 또는 거짓을 결과로 산출하는 조건식 • 반복적으로 수행하는 명령문이 두 개 이상이면 반드시 {}로 범위 설정 • 수행 순서 • 초기화 명령문 수행 • 종결 조건을 검사하여 참이면 3을 수행하고, 거짓이면 for문을 종료하고 다음 명령문을 수행 • 반복적으로 수행할 명령문을 수행 • 증분명령문을 수행하고, 2를 수행 IST (Information Sciences & Technology) Laboratory

33. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

34. 자바스크립트의 기본구조 IST (Information Sciences & Technology) Laboratory

35. 함수 • 함수(Function) • 프로그램에서 동일한 형태의 코드를 따로 분리하여 구성한 형태로써, 프로그램을 기능 단위로 작성할 수 있도록 하는 기법 • 함수로 구성된 코드 부분을 필요할 때마다 수행할수록 호출하여 작성함으로써 프로그램의 판독성이 좋아지며 유지보수가 수월해짐 • 내장함수 • 자바 스크립트에서 기본적으로 제공하는 함수 • Alert() 함수 • 메시지를 출력하는 창을 화면에 뛰어주는 함수 • alert (문자열 ) ; • Confirm() 함수 • 사용자에게 확인을 받기 위한 창을 뛰우는 함수 • 변수 = confirm (문자열) ; 또는 confirm (문자열) • 확인 버튼 = 결과 값 true, 취소 버튼 = 결과 값 false IST (Information Sciences & Technology) Laboratory

36. 함수 IST (Information Sciences & Technology) Laboratory

37. 함수 • Prompt() 함수 • 임의의 문자를 입력받기 위한 창을 화면에 띄워 입력한 문자열을 사용할 수 있도록 하기 위한 함수 • 변수 = prompt (문자열 [, initstring]);또는 prompt ( 문자열 [, initstring]); • Initstring는 텍스트 박스에 초기에 나타날 문자열 설정 • 문자열은 창에 표시할 메시지 설정 • isNaN(is not a number)() 함수 • 임의의 문자열을 숫자로 평가할 수 있는가를 검사하여, 숫자로 평가할 수 있는 문자열이면 false 값을, 숫자로 볼 수 없는 문자열이면 true로 반환하는 함수 • 변수 = isNaN (문자열); 또는 isNaN (문자열); IST (Information Sciences & Technology) Laboratory

38. 함수 IST (Information Sciences & Technology) Laboratory

39. 함수 • Eval() 함수 • 수식형태로 구성된 문자열을 계산하여 그 결과를 반환하는 함수 • 변수 = eval (문자열); 또는 eval (문자열); • 문자열을 수식으로 인식하고 계산 • parseInt() / parseFloat() 함수 • 문자열을 정수 또는 실수로 변환 • 변수=parseInt (문자열 [, 진수]);변수= parseFloat(문자열 [,진수]);또는 parseInt (문자열 [, 진수]);parseFloat(문자열 [,진수]); • 진수를 지정하면, 해당 진법으로 변환하지만 출력 형식은 10진법 으로 출력, 진수 생략 시 기본적으로 10진법으로 변환 • parseInt() 함수는 소수점 이하는 버림 • 문자열에 숫자가 아닌 문자열이 존재하면, 그 문자열 이전까지의 숫자를 변환 • 첫 문자가 숫자가 아니면 NaN이 출력 IST (Information Sciences & Technology) Laboratory

40. 함수 IST (Information Sciences & Technology) Laboratory

41. 함수 • escape() / unescape() 함수 • 문자를 ASCII 코드 값으로 반환하고, 반대로 ASCII를 코드 값을 문자로 변환 • 변수=escape(문자열);변수=unescape(ASCII 코드 값 문자열);또는 escape(문자열);unescape(ASCII 코드 값 문자열); • setTimeout() 함수 • 일정한 시간을 기다린 후, 지정한 명령을 수행하는 함수 • setTimeout (명령문, 시간); 또는 id = setTimeout (명령문, 시간); • 명령문은 반드시 문자열로 지정 • 시간은 일정한 시간을 지정하기 위한 값으로 micro second(1/1000 초) 단위로 작성 • 고유의 id값을 반환, 이 값은 설정한 시간 후에 수행하는 명령문을 수행하도록 하기 위한 고유의 id로써, 후에 이 값을 이용하여 이 기능을 해제할 때 사용 IST (Information Sciences & Technology) Laboratory

42. 함수 • setInterval() 함수 • setTimeout() 함수와 유사함 차이점은 설정한 시간 간격으로 지정한 명령문을 계속해서 수행 • setInterval(명령문,시간);또는 id = setInterval(명령문,시간); • clearTimeout()함수 • setTimeout()와 setInterval()함수에 지정된 명령문을 수행하기 위해 설정한 시간을 해제하기 위한 함수 • clearTimeout(id); • id는 setTimeout()와 setInterval()함수에의해 생성된 고유의 id값을 의미하고,id에 해당하는 동작을 해제 IST (Information Sciences & Technology) Laboratory

43. 함수 IST (Information Sciences & Technology) Laboratory

44. 함수 • 사용자 정의 함수 • 프로그램을 작성하다 보면 기본적으로 제공하는 함수가 존재하지 않고, 프로그래머가 함수를 만들어야 하는 경우가 발생한다. 이러한 함수를 사용자 정의 함수라고 함 • function function_name([ argument[,argument]*]){ function_body } • function_name • 함수의 고유 이름 • 변수와 만드는 방식 같음 • 같은 이름의 변수나 함수 가 있으면 오류 발생 • argument • 이 함수에 전달된 자료를 임시로 보관하기 위해 사용하는 변수를 선언 함 • 두 개 이상의 자료를 전달받는다면, 변수 선언을 해당 개수 만큼 작성 • 함수를 사용하기 위해 호출하기 전에 반드시 그 함수에 대한 정의가 존재해야 함, 따라서 함수를 먼저 정의하고 호출하도록 함, 만일 함수를 호출하는 문장 다음에 작성한다면, 반드시 동일한 <script>…</script>태그 안에 작성 IST (Information Sciences & Technology) Laboratory

45. 함수 IST (Information Sciences & Technology) Laboratory

46. 함수 • 함수에 인수 전달 • 함수에 임의 자료를 전달하고, 그 자료를 이용하여 작업을 수행 • 형식 매개변수 • 함수가 자료를 전달받아 사용하기 위해서 함수에서 전달받은 자료를 임시로 저장하기 위한 변수 • 실 매개변수 • 전달하는 실제 값 • 매개변수가 두 개인 경우는 실 매개변수를 작성한 순서대로 대응하는 형식 매개변수에 저장 • 반환 값이 있는 경우 • 함수 가운데 그 함수를 수행하고 결과 값을 반환하는 함수가 필요한 경우 • return이라는 명령문을 사용 • 재귀 함수 호출 • 자기 자신의 함수를 호출하는 함수 IST (Information Sciences & Technology) Laboratory

47. 함수 IST (Information Sciences & Technology) Laboratory

48. 함수 IST (Information Sciences & Technology) Laboratory

49. 함수 IST (Information Sciences & Technology) Laboratory

50. 함수 • 변수의 사용 범위(Scope) • 지역변수: 일정한 범위 안에서만 사용 가능한 변수 • 전역변수: 프로그램의 어느 부분에서도 사용 가능한 변수 IST (Information Sciences & Technology) Laboratory