Javascript

Download Report

Transcript Javascript 

JavaScript
JavaScript

자바 스크립트(JavaScript)







Script : 객체에 대한 속성이나 액션에 대한
내용을 정의해 놓은 것
OOP 기반 언어
넷스케이프 제작
html 파일 내에 삽입
JavaScript 1.0 ~ 1.5
ECMAScript
JScript 1.0 ~ 5.5
JavaScript

효과





정적 html에 동적 요소 추가
조건에 따른 동작 처리
객체의 속성 변경
장점 : 생산성, 운영체제 탈피, 쉬운 구문
단점 : 소스 코드 노출, 한정된 객체와 메소드
기본 구조

<Script language=“JavaScript”>
소스 코드..
</Script>



스크립트 종류 & 버전 표시
새로운 버전의 스크립트일 경우 표시
주석(Comment)


// - 한 라인
/* */ - 여러 라인
기본 구조


<Script language=“JavaScript”>
<!-소스 코드..
//-->
</Script>
<Script language=“JavaScript” src=“”>
</Script>


코드 실행 생략 부호
버전 차이 or 미 지원
기본 구조

<Script language=“JavaScript”>
<!-소스 코드..
//-->
</Script>
<Noscript>
출력 내용
</Noscript>

대체 내용 출력
기본 구조

삽입 위치





<HEAD> 안에 삽입
<BODY> 안에 삽입
태그 내 속성 형식으로 삽입 : 이벤트 핸들러
외부 파일 참조(.js)
소스 참조


팝업 – 소스보기
view-source:url
변수





프로그램 수행 중 이름을 가지면서 어떤 값을 저장할 수 있는 공
간(Variable) ↔ 상수
var 변수명;
var 변수명, 변수명, 변수명..
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문




조건이 참일 때와 거짓일 때 모두 실행 시킬 코드를
지정하는 구조
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)
문제 – 구구단 출력(가로 출력, 표 출력,
gugudan2.htm)
While 문

주어진 조건을 불만족 시킬 때까지 문장을
반복 시키는 구조



while(조건)
{
코드..
}
예제 – while.htm
문제 - p436
do while 문

일단 코드를 한번 실행 후 주어진 조건을 불
만족 시킬 때까지 문장을 반복 시키는 구조


do
{
}
while(조건);
예제 – dowhile.htm
continue/break

continue



반복 제어문 실행 중 조건문으로 돌아가게 하
는 제어문
p443 예제
break


반복 제어문 실행 중 반복문을 빠져나가게 하
는 제어문
예제 – break.htm
Function



프로그램내의 일련의 식이나 문장 등의 과정
을 하나의 단위로 묶어 놓은 집합
반복 호출이 가능해서 효율적
함수 정의


function 함수명()
{
내용..
}
함수 호출

함수명();
Function




단, 함수의 선언이 호출보다 선행
p448 예제
p449 예제
함수의 매개 변수




function 함수명(매개변수1, 매개변수2..)
{
}
호출 시 함수에게 전달하는 값
다양한 결과 생성
p450 예제
Function

반환값이 있는 함수



function 함수명()
{
return 반환값;
}
예제 - returnFunction.htm
변수 선언 문제


var 변수명 vs 변수명
p452 예제
Function

재귀적 호출


함수가 내부에서 자기를 호출
예제 – factorial.htm
내장 함수


자바 스크립트에서 기본으로 제공되는 함수
alert()




메시지 창 출력
alert(“출력 메시지”);
p461 예제
confirm()




확인, 취소 버튼을 갖는 메시지 창 출력
결과 값을 가지고 분기(true, false)
confirm(“출력 메시지”);
p 462 예제
내장 함수

prompt()





사용자에 문자열을 입력 받는 메시지 창 출력
prompt(“출력 메시지”, “입력창 초기값”);
p466 예제
p468 예제
isNaN()



입력 값이 숫자가 아닌지 판단, 결과 반환(true, false)
isNaN(입력값)
p465 예제
내장 함수

eval()




입력값인 수식을 계산을 하여 결과값 반환
eval(수식)
예제 – eval.htm
isNaN()


입력값이 숫자가 아닌지를 검사
예제 – isNaN.htm
Event

이벤트(Event)



브라우저 상에 발생되는 일련의 사건
어떤 효과나 특정 수행을 하기 위한 조건
이벤트 핸들러(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)
문자열에서 a부터 b까지의 문자열 반환
예제 - p502
문제 – stringCheck2.htm
String 객체

문자열에 내용 추가




“문자열”.concat(“내용”)
문자열을 덧붙임
예제 – p504
문자열 분리



“문자열”.split(기준값)
기준값을 가지고 문자열 분리
예제 – p505
String 객체

대소문자 변환




코드값으로 변환




“문자열”.toLowerCase()
“문자열”.toUpperCase()
예제 – p506
“문자열”.charCodeAt(n) / “문자열”.fromCodeAt(코
드값)
n번째 문자의 코드값 반환
예제 – p507
문자열 바꾸기


“문자열”.replace(“문자열”,”문자열”);
예제
Date 객체

시스템의 날짜, 시간을 처리하는 객체



객체명 = new Date()
예제 – p508
Date 내장 메소드







p509 – 메소드 종류
예제 – p510
예제 – p511
객체명 = new Date(년,월,일,시간,분,초,밀리초)
예제 – p514
예제 – 달력(calender.htm)
문제 - 만년달력
타이머

setTimeout 함수







setTimeout(“실행코드”, 시간)
지정된 시간 후 코드를 실행
1/1000초
예제 – stout.htm
예제 – clock.htm
예제 – p564
setInterval 함수




setInterval(“실행코드”, 시간)
지정된 시간 마다 코드를 실행
예제 – clock2.htm
문제 – time3.htm
타이머

clearTimeout / clearInterval




함수의
예제 예제 문제 -
실행을 중단
clear.htm
clear2.htm
스톱워치
Math 객체

수학 계산 관련 객체





Math.속성
Math.메소드
p516 – 종류
예제 – math.htm
Math.random()




0~1까지의 난수 발생
예제
예제 – p520
문제 – 가위,바위,보
Array 객체

배열을 만드는 객체






배열명 = new Array(n);
n : 요소의 갯수
배열명 = new Array(“요소”, “요소”..);
예제 – p523
예제 - 배열 크기 바꾸기
length



배열의 길이
배열명.length
예제 – p524
Array 객체

concat()



배열에 추가적인 배열을 입력
예제 – p526
join()


특정 문자를 사용해 모든 요소 내용을 문자열
로 반환
예제 – p527
Array 객체

reverse()




배열의 요소의 순서를 반대로 바꿈
배열명.reverse();
예제 – p528
slice()



배열의 일정 부분을 추출
배열명.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
지원 이벤트 핸들러 – p555
링크 점선 테두리 없애기 – p556
Window 객체

window 객체 메소드



호출시 일반적으로 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() 메소드






윈도우를 닫는 메소드
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() 메소드




윈도우 내의 문서 내용을 스크롤 해주는 메소
드
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
예제 – p637
예제 – p638
문제 – 숫자만 입력, 영문만 입력, 한글만 입
력
예제 – 원하는문자입력.htm
문제 – 검색창 배경 이미지 넣기
문제 – 주민번호 검사
Form

CheckBox, Radio



속성, 메소드, 이벤트 핸들러 – p640
예제 – p641
Select


속성, 메소드, 이벤트 핸들러 – p642
예제 – p643
Cookie

사용자가 html 문서에서 만들어낸 정보를 웹
브라우저에 저장해 놓은 정보

Set-Cookie


Cookie



name=쿠키명; expires=유효기간;
name1=쿠키값1; name2=쿠키값2;
예제 - cookie.htm
예제 - cookie2.htm