JavaScript
JavaScript 자바 스크립트(JavaScript) OOP 기반 언어 넷스케이프 제작 html 파일 내에 삽입 JavaScript 1.0 ~ 1.5 ECMAScript JScript 1.0 ~ 5.5
JavaScript 효과 정적 html에 동적 요소 추가 조건에 따른 동작 처리 객체의 속성 변경 장점 : 생산성, 운영체제 탈피, 쉬운 구문 단점 : 소스 코드 노출, 한정된 객체와 메소드
기본 구조 <Script language=“JavaScript”> 소스 코드.. </Script> 스크립트 종류 & 버전 표시 새로운 버전의 스크립트일 경우 표시 주석(Comment) // - 한 라인 /* */ - 여러 라인
기본 구조 <Script language=“JavaScript”> <!-- 소스 코드.. <Script language=“JavaScript” src=“”> </Script> 코드 실행 생략 부호 버전 차이 or 미 지원
기본 구조 <Script language=“JavaScript”> <!-- 소스 코드.. //--> </Script> <Noscript> 출력 내용 </Noscript> 대체 내용 출력
기본 구조 삽입 위치 소스 참조 <HEAD> 안에 삽입 <BODY> 안에 삽입 태그 내 속성 형식으로 삽입 : 이벤트 핸들러 외부 파일 참조(.js) 소스 참조 팝업 – 소스보기 view-source:url
변수 프로그램 수행 중 이름을 가지면서 어떤 값을 저장할 수 있는 공간(Variable) ↔ 상수 var 변수명; 명명법 영문자, “_”로 시작 첫글자 이후 숫자 사용 가능 특수 기호 사용 불가 공백 사용 불가 한글 사용 불가 예약어 사용 불가(p403) 대, 소문자 구분
document.write() 출력 명령어 document.write(출력내용); 출력 내용 : 변수명, 연산결과, 문자열 var num = 100; document.write(num); document.write(1+1); document.write(“hello~”); p404 p405 예제
자료형 데이터의 형태(Data type) 별도의 데이터형 선언 X → 자동 인식 숫자, 문자열, 논리값, 널값, NaN 숫자 : 정수, 실수 등.. 문자열 : 문자들의 집합(“”, ‘’) 논리값(Boolean) : 논리 연산이나 함수의 결과값으로 사용. 참(True), 거짓(False) 널(null)값 : 지정되지 않은 값 NaN(Not a Number) : 특정 함수나 문자열을 잘못 사용하였을 때..
자료형 p406 p407 예제 p409 예제 예제 – 자료형 변환(casting.htm)
특수문자 문자열에 특수 문자 사용 \n : newline \t : tab \b : backspace \r : return \\ : \ \’ : 작은 따옴표 \” : 큰 따옴표 단, 스크립트 적용 범위에 한해서..
대입 연산자 대입 연산자 지정된 공간에 값을 넣어주는 연산자 =, +=, -=, *=, /=, %= LValue(변수) = RValue(값); p411 p410 예제
산술 연산자 산술 연산자 수를 더하거나 빼거나 곱하거나 나누는 기본적인 연산을 해주는 연산자(사칙 연산자, 나머지 연산자) +, -, *, /, %, ++, --, - p412 p413 예제
논리 연산자 논리 연산자 변수나 수식의 참과 거짓을 표현 &&(and), ||(or), ^(xor), !(not) true(1), false(0) p414
비교 연산자 비교 연산자(관계 연산자) 양쪽의 값을 비교 연산 ==, !=, <, >, >=, <= True, False의 결과값 반환 ‘=‘ 와 ‘==‘ 구별 !True, !False 예제
조건 연산자 조건 연산자 해당 조건을 제시, 만족했을 경우와 만족하지 못했을 경우 각각의 값을 반환 (조건) ? A : B 3항 연산자 p416 예제
문자열 연산자 문자열 연산자 두 개 이상의 문자열을 합쳐서 하나의 문자열로 만듦 A+B, A+=B p418 예제
연산자 우선 순위 연산자 우선 순위 1 → (), [] 2 → !, ++, -- 3 → *, /, % 4 → +, - 5 → <, >, <=, >= 6 → ==, != 7 → && 8 → || 9 → ? : 10 → =, +=, -=, *=, /=, %= p420 예제
제어 구조 제어문 프로그램의 흐름(Flow)을 제어 특정 조건에 따라 수행 순서를 바꾸거나 반복, 생략 등 특정 작업 수행 프로그램 내에 원하는 기능을 구현하기 위해 만들어놓은 형식 조건문 : if문, switch문 반복문 : for문, while문, do while문 등..
IF 문 if문 특정 조건에 따라서 수행되거나 수행되지 말아야 할 코드를 지정하는 구조 if(조건) { 코드.. } p422 예제
IF 문 if-else문 조건이 참일 때와 거짓일 때 모두 실행 시킬 코드를 지정하는 구조 p425 예제 문제 - 문자 입력 후 선택 출력(f,m,b,s)
IF 문 다중 if문 if문 안에 또 다른 if문이 포함되는 구조 if(조건1) { 코드.. } else if(조건2) { 코드.. } 예제 - ifelse.htm 문제 – 성적 처리 문제 – 윤년 구하기
Switch 문 입력 값에 대한 결과에 따라 해당 조건에 만족하는 코드를 실행 시키는 제어 구조 switch(입력값) { case 조건값1: 실행 코드; break; case 조건값2: 실행 코드; break; default: 실행코드; } p427 예제 p428 예제 p430 예제
Switch 문 문제 – 성적처리 문제 – 1월~12월 마지막 일 구하기(lastday.htm)
For 문 for문 특정 코드를 정해진 횟수만큼 반복시키는 제어 구조 for(초기식; 조건식; 증감식) { 반복될 코드; } 예제 - 1~100까지 합 p433 예제 예제 – 제곱근 출력(for.htm) 예제 – 이중 for문 p434 예제
For 문 문제 – 다른 모양으로 출력 문제 – 구구단 출력(세로 출력, gugudan1.htm)
While 문 주어진 조건을 불만족 시킬 때까지 문장을 반복 시키는 구조 while(조건) { 코드.. } 예제 – while.htm 문제 - p436
do while 문 일단 코드를 한번 실행 후 주어진 조건을 불만족 시킬 때까지 문장을 반복 시키는 구조 예제 – dowhile.htm
continue/break continue break 반복 제어문 실행 중 조건문으로 돌아가게 하는 제어문 p443 예제 반복 제어문 실행 중 반복문을 빠져나가게 하는 제어문 예제 – break.htm
Function 프로그램내의 일련의 식이나 문장 등의 과정을 하나의 단위로 묶어 놓은 집합 반복 호출이 가능해서 효율적 함수 정의 function 함수명() { 내용.. } 함수 호출 함수명();
Function 단, 함수의 선언이 호출보다 선행 p448 예제 p449 예제 함수의 매개 변수 호출 시 함수에게 전달하는 값 다양한 결과 생성 p450 예제
Function 반환값이 있는 함수 변수 선언 문제 function 함수명() { return 반환값; } 예제 - returnFunction.htm 변수 선언 문제 var 변수명 vs 변수명 p452 예제
Function 재귀적 호출 함수가 내부에서 자기를 호출 예제 – factorial.htm
내장 함수 자바 스크립트에서 기본으로 제공되는 함수 alert() confirm() 메시지 창 출력 p461 예제 confirm() 확인, 취소 버튼을 갖는 메시지 창 출력 결과 값을 가지고 분기(true, false) confirm(“출력 메시지”); p 462 예제
내장 함수 prompt() isNaN() 사용자에 문자열을 입력 받는 메시지 창 출력 입력 값이 숫자가 아닌지 판단, 결과 반환(true, false) isNaN(입력값) p465 예제
내장 함수 eval() isNaN() 입력값인 수식을 계산을 하여 결과값 반환 eval(수식) 예제 – eval.htm 입력값이 숫자가 아닌지를 검사 예제 – isNaN.htm
Event 이벤트(Event) 이벤트 핸들러(Event Handler) 브라우저 상에 발생되는 일련의 사건 어떤 효과나 특정 수행을 하기 위한 조건 이벤트 핸들러(Event Handler) 이벤트 발생 시 지정된 자바 스크립트를 사용하는 명령어 On이벤트명 = “실행코드”; p483 – 이벤트 핸들러 종류
Event 페이지 접속 시 메시지 창 띄우기 페이지 종료 시 메시지 창 띄우기 롤 오버 이미지 <body onload=“alert(‘메시지’)”> 예제 페이지 종료 시 메시지 창 띄우기 <body onunload=“alert(‘메시지’)”> 롤 오버 이미지
내장 객체 자주 사용 되는 객체를 정의 해 놓은 것 new 연산자를 사용하여 객체로 정의 객체명 = new 객체형식() p490 – 내장 객체의 종류
String 객체 String 객체 문자열을 객체로 만들어 자바 스크립트에서 제어 new 연산자를 사용 안함 변수명 = “문자열” 변수명.속성 변수명.메소드()
String 객체 Length 속성 문자열의 길이 변수명 = “문자열” 변수명.length “문자열”.length 예제 - p493 예제 – 입력값 제한(p494)
String 객체 글꼴 관련 메소드 링크 관련 메소드 HTML 코드에서 사용되던 글꼴 관련 태그를 자바 스크립트에서 제어 p496 – 메소드 종류 예제 링크 관련 메소드 동적 링크 생성 변수명=“문자열” 변수명.link(“URL”); 예제 – p498
String 객체 책갈피 관련 메소드 문자열 처리 관련 메소드 책갈피 동적 생성 변수명=“문자열” 변수명.anchor(“책갈피명”); “문자열”.link(“#책갈피명”); 예제 - p499 문자열 처리 관련 메소드 p500 – 처리 메소드 종류
String 객체 문자열 위치 “문자열”.charAt(n) 문자열 좌측부터 n번째 문자 반환 “문자열”.indexOf(“문자열”) 문자열 좌측부터 처음 나오는 문자열의 시작위치 반한 “문자열”.lastIndexOf(“문자열”) 문자열 우측부터 처음 나오는 문자열의 시작 위치 반환 예제 - p501 예제 - stringCheck.htm
String 객체 지정된 범위 출력 “문자열”.substr(a,b) 문자열에서 a부터 b길이만큼의 문자열 반환 “문자열”.substring(a,b) 문자열에서 a부터 b까지의 문자열 반환 “문자열”.slice(a,b) 예제 - p502 문제 – stringCheck2.htm
String 객체 문자열에 내용 추가 문자열 분리 “문자열”.concat(“내용”) 문자열을 덧붙임 예제 – p504 “문자열”.split(기준값) 기준값을 가지고 문자열 분리 예제 – p505
String 객체 대소문자 변환 코드값으로 변환 문자열 바꾸기 “문자열”.toLowerCase() “문자열”.toUpperCase() 예제 – p506 코드값으로 변환 “문자열”.charCodeAt(n) / “문자열”.fromCodeAt(코드값) n번째 문자의 코드값 반환 예제 – p507 문자열 바꾸기 “문자열”.replace(“문자열”,”문자열”); 예제
Date 객체 시스템의 날짜, 시간을 처리하는 객체 Date 내장 메소드 객체명 = new Date() 예제 – p508 예제 – 달력(calender.htm) 문제 - 만년달력
타이머 setTimeout 함수 setInterval 함수 setTimeout(“실행코드”, 시간) 지정된 시간 후 코드를 실행 1/1000초 예제 – stout.htm 예제 – clock.htm 예제 – p564 setInterval 함수 setInterval(“실행코드”, 시간) 지정된 시간 마다 코드를 실행 예제 – clock2.htm 문제 – time3.htm
타이머 clearTimeout / clearInterval 함수의 실행을 중단 예제 - clear.htm 문제 - 스톱워치
Math 객체 수학 계산 관련 객체 Math.random() Math.속성 Math.메소드 p516 – 종류 예제 – math.htm Math.random() 0~1까지의 난수 발생 예제 예제 – p520 문제 – 가위,바위,보
Array 객체 배열을 만드는 객체 length 배열명 = new Array(n); n : 요소의 갯수 예제 – p523 예제 - 배열 크기 바꾸기 length 배열의 길이 배열명.length 예제 – p524
Array 객체 concat() join() 배열에 추가적인 배열을 입력 예제 – p526 특정 문자를 사용해 모든 요소 내용을 문자열로 반환 예제 – p527
Array 객체 reverse() slice() 배열의 요소의 순서를 반대로 바꿈 배열명.reverse(); 예제 – p528 배열의 일정 부분을 추출 배열명.slice(시작위치, 마지막위치) 예제 – p529
Array 객체 sort() 다차원 배열 배열의 요소의 값을 정렬 배열명.sort() 예제 – p531 예제 – array2.htm
Screen 객체 사용자의 해상도, 색상수, 화면의 크기 등에 대한 정보를 가지고 있는 객체 screen 객체 속성 – p534 예제 – p535 예제 – p537
Event 객체 키보드나 마우스 등의 움직임을 설정하는 객체 window.event.속성 window.event.메소드() p539 예제 – 클릭시 좌표값 예제 – 버튼 구별 예제 - eventmouse.htm 예제 - eventmenu.htm 문제
네비게이터 객체 브라우저에 내장되어 있는 객체 브라우저 객체 계층 구조 – p550
Window 객체 window 객체 window 객체 속성 최상위 객체 생략 가능 window 객체 속성 종류 – p552
Window 객체 window 객체 메소드 open() 메소드 호출시 일반적으로 window 생략 window 객체 메소드 종류 – p558 open() 메소드 페이지 내에서 새로운 창을 띄우기 window.open(“파일명”,”윈도우명”,”옵션”); 예제 – p559 open() 메소드 옵션 종류 – p560 예제 – p561
Window 객체 showModalDialog() window.showModalDialog(URL, obj, option) dialogHeight:sHeight - 창의 높이 dialogLeft:sXPo - 창의 왼쪽에서 부터의 위치 dialogTop:sYPos - 창의 상단에서의 위치 dialogWidth:sWidth - 다이얼로그 창의 길이를 지정 center:{ yes | no | 1 | 0 | on | off } - 위치를 지정하지 않을경우 창의 위치를 중앙에 놓을지 여부
Window 객체 help:{ yes | no | 1 | 0 | on | off } - 도움말 보이기/보이지 않기 resizable:{ yes | no | 1 | 0 | on | off } - 창크기변형을 할수 있나 없나 scrollbars:{ yes | no | 1 | 0 | on | off } - 스크롤바의 유/무 status:{ yes | no | 1 | 0 | on | off } - 상태바를 표시/표시안함 window.dialogArguments - 인자
Window 객체 close() 메소드 moveBy(), moveTo() 메소드 윈도우를 닫는 메소드 window.close() or self.close(); 예제 – p562 부모창에서 자식창 제어하기 – p563 문제 – 리모콘 페이지(remocon.htm) moveBy(), moveTo() 메소드 윈도우의 위치를 이동시키는 메소드 상대값, 절대값 moveBy(x,y), moveTo(x,y); 예제 – p567
Window 객체 resizeBy(), resizeTo() 메소드 윈도우의 크기를 변경해주는 메소드 상대값, 절대값 resizeBy(width,height), resizeTo(width,height) 예제 – p569 문제 – 새창의 점점 커지게 만들기(resize.htm)
Window 객체 scrollBy(), scrollTo() 메소드 print() 메소드 윈도우 내의 문서 내용을 스크롤 해주는 메소드 scrollBy(x,y), scrollTo(x,y) 예제 – p572 print() 메소드 현재 화면을 인쇄해주는 메소드 print() 예제 – p573
Window 객체 print() 메소드 page-break-after / page-break-before always | auto | left | right 예제 – printpage.htm
Document 객체 window 객체의 하위 객체로 브라우저에서 실행되는 모든 문서에 대한 정보를 관리 document 객체 속성 종류 – p576 document.bgColor – 문서 색상 document.lastModified – 최종 수정 날짜 document.title – 문서 제목 document.URL – 문서 주소 document.location – 문서 주소
Document 객체 document 객체 메소드 종류 - p583 document.write()/writeln()
Link 객체 문서 내 <a href>태그에 대한 정보를 추출하는 객체 document.links.length : 문서내의 총 링크수 document.links[index] : 특정 링크 객체 예제 – links.htm 예제 - 야후! 코리아.htm
Image 객체 문서 내 <img> 태그에 대한 정보를 추출하는 객체 document.images.length : 문서 내 이미지 총 갯수 document.images[index] : 특정 이미지 객체 예제 – p594
History 객체 브라우저의 접속한 페이지 주소 정보를 가지고 있는 객체 속성 및 메소드 – p596 예제 – p597, p598
Location 객체 현재 문서의 URL 정보 제공 객체 속성 및 메소드 – p600 예제 – p601 location.href = “url” : 이동 location.replace(“url”) : 이동 location.reload() : 새로 고침 예제 – p603
Frame 객체 HTML 태그의 Frame 제어를 지원하는 객체 예제 – p605
Navigator 객체 브라우저에 관한 정보를 제공하는 객체 속성 – p606 예제 – p607 예제 – p612
레이어 <style> #layer {position:absolute} </style> <div id=“layer”></div> <div style=“position:absolute”></div> 관련 속성 : p615 예제 – p616, p617 레이어 감추기/보이기 – p618
레이어 레이어 제어 document.all[‘레이어명’].style.속성 예제 – p624 예제 – p626 예제 – p627 문제 - style 객체 다루기_1.html 문제 - style 객체 다루기_2.html
Form form 태그의 전반적인 정보를 제공 window.document.폼명 window.document.forms[index] window.document.forms[“폼이름”] Window.document.폼객체.input객체이름 Window.document.폼객체.elements[index] Window.document.폼객체.elements[“객체이름”] Window.document.폼객체.elements[변수명]
Form Text, Password, Hidden, Textarea 속성, 메소드, 이벤트 핸들러 – p636 문제 – 숫자만 입력, 영문만 입력, 한글만 입력 예제 – 원하는문자입력.htm 문제 – 검색창 배경 이미지 넣기 문제 – 주민번호 검사
Form CheckBox, Radio Select 속성, 메소드, 이벤트 핸들러 – p640 예제 – p641
Cookie 사용자가 html 문서에서 만들어낸 정보를 웹브라우저에 저장해 놓은 정보 Set-Cookie Cookie name=쿠키명; expires=유효기간; Cookie name1=쿠키값1; name2=쿠키값2; 예제 - cookie.htm 예제 - cookie2.htm