2. 선택문, switch 문, 반복문, while 문, do~while 문, 내장 함수, Javascript 함수의 정의 와 호출, 배열의 사용, 이벤트 사용

2017. 2. 6. 23:46

1. 선택문

<!doctype html>

<head>

</head>

<body>

<!--

//Date객체 생성

today = new Date();

// today 에서 요일을 구함

week = today.getDay();

document.write("오늘 날짜는");

document.write(today.getYear()+1900+"년");

document.write((today.getMonth()+1)+"월");

document.write(today.getDate()+"일<hr><br>");

switch(week)

{

case 0:

document.fgColor="white";

document.bgColor="purple";

document.write("일요일 <br>");

break;

case 1:

document.bgColor="red";

document.fgColor="yellow";

document.write("월요일 <br>");

break;

case 2:

document.bgColor="yellow";

document.write("화요일 <br>");

break;

case 3:

document.bgColor="green";

document.write("수요일 <br>");

break;

case 4:

document.bgColor="blue";

document.write("목요일 <br>");

break;

case 5:

document.bgColor="cyan";

document.write("금요일 <br>");

break;

case 6:

document.bgColor="darkblue";

document.write("토요일 <br>");

break;

case 7:

document.bgColor="purple";

document.write("일요일 <br>");

break;

}

-->

</script>

</body>

</html>

2. 선택문

<!doctype html>

<head>

</head>

<body>

<!--

var input, msg, a;

input = prompt("요일을 입력하세요 ! ","");

switch (input)

{

case "월": case "화": case "수": case "목": case "금":

document.write(input + " 은(는) 평일 입니다." );

break;

case "토": case "일":

document.write(input + " 은(는) 주말 입니다." );

break;

}

//-->

</SCRIPT>

</body>

</html>

3. switch 문 사용

<!doctype html>

<head>

<title>switch 문 사용</title>

</head>

<body>

<!--

a = prompt("수강할 과목의 코드를 숫자 형태로 입력하여 주세요. 1.HTML 2.CSS 3.JAVASCRIPT", "");

switch (a)

{

case "1":

document.write("강의실 510 호 입니다.");

break;

case "2":

document.write("강의실 508 호 입니다.");

break;

case "3":

document.write("강의실 505 호 입니다.");

break;

default :

document.write("해당하는 과목 코드가 없습니다. [F5] 키로 새로 고침을 해주세요");

}

//-->

</SCRIPT>

</body>

</html>

4. switch 문 사용

<!doctype html>

<head>

<title>switch 문 사용</title>

</head>

<body>

<!--

a = prompt("수강할 과목의 코드를 숫자 형태로 입력하여 주세요. 1.HTML 2.CSS 3.SCRIPT 4.PHOTOSHOP 5.DREAMWEAVER 6.FLASH 7.JSP","");

switch (a)

{

case "1":

case "2":

case "3":

document.write("수강료는 50000원 입니다.");

break;

case "4":

case "5":

document.write("수강료는 70000원 입니다.");

break;

case "6":

case "7":

document.write("수강료는 90000원 입니다.");

break;

default :

document.write("해당하는 과목 코드가 없습니다. [F5] 키를 눌러주세요");

break;

}

//-->

</SCRIPT>

</body>

</html>

5. 반복문

<!doctype html>

<head>

</head>

<body>

<!--

for (num=1 ;num <= 5 ;num++ )

{

document.write(num + "     ");

}

document.write("<HR size='5' color='red'>")

for (num=1; num <= 6 ;num++ )

{

document.write("<H" + num +"> 반복문 Test </H"+ num +">");

}

document.write("<HR size='5' color='blue'>")

for (num=6; num >= 1 ;num-- )

{

document.write("<H" + num +"> 반복문 Test </H"+ num +">");

}

//-->

</SCRIPT>

</body>

</html>

6. 반복문 사용

<!doctype html>

<head>

</head>

<body>

<!--

a = prompt("반복 출력할 숫자를 입력하세요","");

for (i=1;i<=a ;i++ )

{

document.write(i+" 번째 입니다."+"<BR>");

}

//-->

</SCRIPT>

</body>

</html>

7. 반복문 사용

<!doctype html>

<head>

</head>

<body>

<!--

a = prompt("변수 a 에 저장할 숫자를 입력해 주세요","");

b = prompt("변수 b 에 저장할 숫자를 입력해 주세요","");

for (i=1;i<=a ;i++ )

{

for (j=1;j<=b ;j++ )

{

document.write(" i = "+ i + " j = " + j + "<BR>");

}

//-->

</SCRIPT>

</body>

</html>

8. 반복문

<!doctype html>

<head>

</head>

<body>

<!--

num = 1;

document.fgColor="green";

for (num = 1;num <= 10 ;num++ )

{

if (num % 3 == 0)

{

document.fgColor="red";

document.write(num + "    ");

continue;

}

document.write(num + "    ");

}

//-->

</SCRIPT>

</body>

</html>

9. while 문 사용

<!doctype html>

<head>

<title>while 문 사용</title>

</head>

<body>

<!--

num = 1;

while (num <= 5)

{

document.write(num + "    ");

num++;

}

//-->

</SCRIPT>

</body>

</html>

10. while 문 사용

<!doctype html>

<head>

<title>while 문 사용</title>

</head>

<body>

<!--

a = prompt("변수 a에 저장할 숫자를 입력하세요 !","");

i = 1;

while (i<=a)

{

document.write(i + " 번째 출력 합니다." + "<BR>");

i++;

}

-->

</SCRIPT>

</body>

</html>

11. do~while 문 사용

<!doctype html>

<head>

<title>do~while 문 사용</title>

</head>

<body>

<!--

num = 1;

{

document.write(num + "    ");

num++;

}

while (num <= 5);

//-->

</SCRIPT>

</body>

</html>

12. do~while 문 사용

<!doctype html>

<head>

<title>do~while 문 사용</title>

</head>

<body>

<!--

a = prompt(" 변수 a에 저장할 숫자를 입력하세요 !","");

i = 1;

{

document.write( i +" 번째 출력 합니다."+"<BR>");

i++

}

while (i <=a);

//-->

</SCRIPT>

</body>

</html>

13. 내장 함수 TEST - ALERT

<!doctype html>

<head>

<title>내장 함수 TEST - ALERT</title>

</head>

<body>

<!--

// alert 함수를 이용해서 메시지 대화 상자 나타내기

alert(" 오늘의 격언 !!! \n 말도 아름다운 꽃 처럼 그 색깔을 가지고 있다. ");

//-->

</SCRIPT>

</body>

</html>

14. 내장 함수 TEST - CONFIRM

<!doctype html>

<head>

<title>내장 함수 TEST - CONFIRM</title>

</head>

<body>

<!--

// confirm 함수를 이용하여 버튼 선택에 따라 서로 다른 메시지 출력

ans = confirm("자바스크립트는 별도의 컴파일 과정이 필요 합니까. ? \n 맞으면 확인 틀리면 취소 버튼을 눌러 주세요.");

if (ans == true)

{

document.write("아닙니다. 컴파일 고장이 필요하지 않습니다.");

}

else

{

document.write("그렇습니다. 컴파일 과정 없이 직접 소스만 삽입하여 실행 합니다.");

}

//-->

</SCRIPT>

</body>

</html>

15. 함수의 정의

<!doctype html>

<head>

<!--

// 반환값이 없는 함수 정의

function call()

{

a=prompt("a 값은 ? ","");

b=prompt("b 값은 ? ","");

document.write("a%b = " +(a % b) );

}

//-->

</SCRIPT>

</head>

<body>

<!--

// 정의한 함수 호출

call();

document.write(" call() 함수를 호출하였습니다.");

//-->

</SCRIPT>

</body>

</html>

16. 함수의 사용

<!doctype html>

<head>

<!--

function call(x,y)

{

document.write(x +" % "+y+" = "+(x % y));

}

//-->

</SCRIPT>

</head>

<body>

<!--

// 정의한 함수 호출하기

a = prompt("a 값은 ?","");

b = prompt("b 값은 ?","");

call(a,b); // call() 함수 호출

//-->

</SCRIPT>

</body>

</html>

17. 함수의 사용

<!doctype html>

<head>

<!--

// 리턴 받는 함수 사용

function call()

{

a = prompt("a 의 값 ? ");

b = prompt("b 의 값 ? ");

c = a % b;

return c;

}

//-->

</SCRIPT>

</head>

<body>

<!--

// 정의 한 함수 호출

d = call();

document.write(" a % b = " + c + "<br>");

document.write(" a % b = " + d + "<br>");

//-->

</SCRIPT>

</body>

</html>

. Javascript 함수의 정의 와 호출

. Function 이란 일련의 명령문을 하나의 단위로 묶어서 정의 한 후

함수명만 입력하여 호출하여 사용하는 방법입니다.

함수를 사용하면 자주 사용하는 반복적인 기능의 명령문을 최소화하여

사용할 수 있기 때문에 중복작업을 줄일 수 있습니다.

함수의 정의 위치는 <HEAD></HEAD> 사이에 즉 함수가 호출 되기 전에

정의 합니다.

. 반환값이 없는 함수 정의

function 함수명(매개 변수,,,)

{

명령문A;

명령문B;

명령문C;

}

. 반환값이 있는 함수 정의

function 함수명(매개 변수,,,)

{

명령문A;

명령문B;

명령문C;

return 반환 값;

}

함수의 호출

함수명() ;

18. 함수 사용

<!doctype html>

<head>

<!--

function sum(num1, num2)

{

var res;

res = num1 + num2;

return res;

}

//-->

</SCRIPT>

</head>

<body>

<!--

res = sum(30, 40);

document.write(30 + " + " + 40 +" = "+res+"<BR>");

res = sum(70, 90);

document.write(70 + " + " + 90 +" = "+res+"<BR>");

res = sum(100, 300);

document.write(100 + " + " + 300 +" = "+res+"<BR>");

//-->

</SCRIPT>

</body>

</html>

19. 함수 사용

<!doctype html>

<head>

<!--

function sum(num)

{

var res = 0;

if (num == 0)

{

return res;

}

else

{

return num + sum(num-1);

}

//-->

</SCRIPT>

</head>

<body>

<!--

res = sum(10);

document.write("1 부터 10 까지의 합 = " + res + "<BR>");

//-->

</SCRIPT>

</body>

</html>

함수명() ;

. Javascript 의 객체

: 객체란 자바스크립트의 작업 대상이 되는 모든것을 의미하는데

예를 들면 화면 출력을 위해 사용한

document.write() 에서 document 가 객체에 해당하고 write() 는

메소드가 됩니다. 객체는 그를 표현하기 위한 정보를 저장하기 위한

공간이 필요한데 이를 속성이라 합니다. 화면의 배경색을 노란색으로

변경하기 위해 사용한 document.bgColor="yellow" 에서 bgColor 이

속성입니다.

document 객체는 다양한 속성을 갖고 있으며 각 속성마다 각자 그 역할이 다릅니다.

속성들은 객체와 함께 사용하여 다양한 효과를 연출할 수 있게 합니다.

사용자 정의 객체

: 객체를 사용하기 위해서는 우선 객체를 정의 해 주어야 하는데

객체를 새롭게 정의 하기 위해 객체를 구성하는 요소들을 결정해야 합니다.

또한 객체를 만들기 위해서 생성자 함수를 이용해야 합니다.

생성자 함수는 일반 함수와 동일한 형식으로 정의 합니다.

20. 객체 만들기

<!doctype html>

<head>

<!--

function book(title, author, price, aa)

{

this.title = title;

this.author = author;

this.price=price;

this.aa=aa;

this.print=print;

}

function print()

{

document.write(this.title + ", ");

document.write(this.author + ", ");

document.write(this.aa+", ");

document.write(this.price + "<BR>");

}

//-->

</SCRIPT>

</head>

<body>

<!--

bb1 = new book("아름다운 날들", "백일홍","번호", 25000);

bb2 = new book("엄마를 부탁해", "신경숙","번호", 12000);

bb3 = new book("미실", "깁별아","번호", 27000);

//document.write(bb1.title + "," + bb1.author+ "," +bb1.price+"<BR>");

//document.write(bb2.title + "," + bb2.author+ "," +bb2.price+"<BR>");

//document.write(bb3.title + "," + bb3.author+ "," +bb3.price+"<BR>");

bb1.print();

bb2.print();

bb3.print();

//-->

</SCRIPT>

</body>

</html>

.배열의 사용

.Array 객체는 배열을 만들때 사용하는 내장 객체 입니다.

내장 객체를 사용할때는 변수를 선언해 주듯이 new 연산자를 사용하여

먼저 선언해 주어야 합니다.

new 연산자는 Array 객체를 생성할때 사용되는 연산자 입니다.

사용 형식

. 배열 객체명 = new Array(); // 배열의 갯수를 지정하지 않음

. 배열 객체명 = new Array(배열의 갯수); // 배열의 갯수를 미리 지정함

. 배열 객체명 = new Array(배열1, 배열2, 배열3,,,,); // 배열 요소를 모두 열거함

21. 배열 사용

<!doctype html>

<head>

<!--

myArray = new Array();

myArray[0] = "수선화";

myArray[1] = "백일홍";

myArray[2] = "백합";

myArray[3] = "장미";

document.write("첫번째 배열 값 : " +myArray[0]+" 입니다. <BR>");

document.write("두번째 배열 값 : " +myArray[1]+" 입니다. <BR>");

document.write("세번째 배열 값 : " +myArray[2]+" 입니다. <BR>");

document.write("네번째 배열 값 : " +myArray[3]+" 입니다. <BR>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

22. 배열의 사용

<!doctype html>

<head>

<!--

myArray = new Array("수선화","해당화","백일홍","들국화");

document.write("배열의 갯수 : " +myArray.length+ " 개 입니다. <BR>");

for (index = 0;index <= myArray.length ;index++ )

{

document.write(index + " 번 배열 값 : " +myArray[index]+ " 입니다. <BR>");

}

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

23. 배열의 사용

<!doctype html>

<head>

<!--

myArray = new Array("수선화","들국화","해바라기","나팔꽃","패랭이꽃");

document.write("콤마로 배열값 연결하여 하나의 문자열 만들기 <HR size='5' color='green'> ");

document.write(myArray.join() + "<P>");

document.write("and 라는 문자열로 배열 연결하기 <HR size='5' color='cyan'> ");

document.write(myArray.join("and") + "<P>");

document.write("~ 라는 부호로 배열 연결하기 <HR size='5' color='blue'> ");

document.write(myArray.join("~")+"<P>");

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

24. 배열의 사용

<!doctype html>

<head>

<!--

myArray = new Array("백두산","한라산","설악산","무등산","월출산");

document.write("reverse() 메소드 호출 전 <hr>");

document.write(myArray.join());

myArray = myArray.reverse();

document.write("<P>reverse() 메소드 호출 후후 <hr>");

document.write(myArray.join);

myArray22 = myArray.slice(0,3);

document.write("<P>slice(0,3); 메소드 호출 후후 <hr>");

for (i=0;i < myArray22.length ;i++ )

{

document.write(myArray22[i]+ "<BR>");

}

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

25. 배열의 사용

<!doctype html>

<head>

<!--

myArray = new Array("한강","두만강","영산강","섬진강","압록강");

document.write("sort() 메소드 호출전 <HR>");

document.write(myArray.join());

myArray = myArray.sort(); // 정렬

document.write("<P>sort() 메소드 호출후후후 <HR>");

document.write(myArray.join());

myArray = myArray.reverse();

document.write("<P>reverse() 메소드 호출후후후 <HR>");

document.write(myArray.join());

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

26. 배열의 사용

<!doctype html>

<head>

myArray11 = new Array("수선화","들국화","백합","맨드라미");

myArray22 = new Array("호랑이","고양이","표범");

myArray33 = myArray11.concat(myArray22);

document.write("첫번째 배열" + myArray11.join() + "<hr>");

document.write("두번째 배열" + myArray22.join() + "<hr>");

document.write("세세번째 배열" + myArray33.join());

</SCRIPT>

</head>

<body>

</body>

</html>

27. 이벤트 사용 - 문서 로딩시 메시지 나타내기

<!doctype html>

<head>

</head>

</body>

</html>

28. 이벤트 사용

<!doctype html>

<head>

<!--

function myFunction()

{

alert(" 안녕하세요 ~~~~");

}

function myFunction22()

{

alert(" ㅋㅋ 안녕하세요 ~~~~");

alert(" ㅎㅎ 안녕하세요 ~~~~");

}

//-->

</SCRIPT>

</head>

<FORM>

</FORM>

</body>

</html>

29. 하이퍼 링크를 클릭하면 함수 호출

<!doctype html>

<head>

<!--

// 이벤트시 처리할 함수 정의

function kbsFF()

{

alert(" 이벤트 처리중 입니다. ");

}

//-->

</SCRIPT>

</head>

<body>

<!--A href="http://www.daum.net" onClick="kbsFF()">이벤트 페이지로 이동</A>

-->

</FORM>

</body>

</html>

30. 이벤트 객체를 이용해서 커서의 X, Y 좌표값 구하기

<!doctype html>

<head>

<!--

// 커서의 x, y 좌표값을 구하는 함수 정의

function anss()

{

if (window.event.button==0) // 0 : 왼쪽 버튼 1 : 가운데 버튼 2: 오른쪽 버튼

{

document.write("마우스 X 좌표"+window.event.x+"<BR>");

document.write("마우스 Y 좌표"+window.event.y+"<BR>");

}

document.onmousedown = anss; // 마우스 버튼을 눌렀을때 anss 호출

//-->

</SCRIPT>

</head>

<body>

</body>

</html>

저작자표시 비영리 변경금지

'자바스크립트(Javascript)' 카테고리의 다른 글

4. javascript 활용, Login Page 꾸미기, Image 넘기기, Image 버튼으로 넘기기 (0)	2017.02.08
3. 객체 사용, 브라우저 관련 내장 객체 (0)	2017.02.07
1. Java Script(자바스크립트), javascript 삽입하기, javascript 에서 변수 사용 (0)	2017.02.06

테스토리