본문 바로가기

Html/Jsp/Javascript

Html,Jsp,Css_08

*  String객체의 글꼴관련메소드

<html>
 <head>
  <title> String객체의 글꼴관련메소드 </title>
 </head> <!--컴퓨터에서 문자는 String 글자 한글자는 Character-->
   <!--Java에도 아래의 메소드와 동일한것이 대부분이라 함-->
<body>
  <script>
//  d="감자" : 문자를 d에 대입
//  document.write(d.length); // 문자열의 길이 표시
// 메소드: () 괄호가 있는것 

//* 글꼴 관련 메소드 → document.write(d.charAt(2)) 문자열(또는 대입된 변수).메소드()
// 자바스크립트에서도 html태그를 적용하지 않고도 글자의 속성을 변경이 가능하다
 
  str = "Java Web Programming"

// big() : 글자를 크게
  document.write(str+" = "+str.big()+" : big()<br>");
 
// bold() : 진하게
 document.write(str+" = "+str.bold()+" : bold()<br>");
 
// fontcolor() : 글자색 - RGB코드나 색상명을 따옴표''안에 표기
 document.write(str+" = "+str.fontcolor('red')+" : fontcolor(red)<br>");
 
// fontsize() : 글자크기 - 0~7까지
 document.write(str+" = "+str.fontsize(0)+" : fontsize(0)<br>");
 
// italics() : 기울임꼴
 document.write(str+" = "+str.italics()+" : italics()<br>");
 
// small() : 작게
 document.write(str+" = "+str.small()+" : small()<br>");
 
// strike() : 취소선
 document.write(str+" = "+str.strike()+" : strike()<br>");

 // sub() : 아래첨자
 document.write(str+" = "+str.sub()+" : sub()<br>");
 
// sup() : 위첨자
 document.write(str+" = "+str.sup()+" : sup()<br>");
 
 // 그룹화: 글자색(파랑), 글자크기(5)
 // d.w(변수.속성명('속성값').속성명('속성값'));
 document.write(str.fontcolor('blue').fontsize('5')+"<br>");

 // 링크걸기
 document.write('script:<a href="http://www.daum.net" target="_blank">Next</a><br>');
 
// 지정된 변수에 링크걸기
 document.write('변수link:'+str.link("http://www.daum.net")+"<br>");

 //* 문자열처리 메소드
 // charAt(i) : 인덱스(i=0,1,2....)위치의 한문자를 구한다.
 document.write(str.charAt(5)+'  :  charAt(5)<br>');

 // charCodeAt(i) : index위치의 한문자에 해당하는 아스키코드를 구한다.
 document.write(str.charCodeAt(5)+'  :  charCodeAt(5)<br>');
 
// concat() : 문자열 연결
 document.write(str.concat(" DDDDD")+'  :  concat(" DDDDD")<br>');
 
// indexOf(s) : 문자의 위치구하기 - 같은 문자라면 앞에있는 문자
 document.write(str.indexOf('a')+'  :  IndexOf("a")<br>');

 // lastIndexOf(s) : 문자의 마지막 위치구하기 - 같은 문자라면 뒤에 있는 문자
 // 중간에 있는 문자열 구하는 것은? 스크립트엔 없지만 자바에는 있다고 함

 document.write(str.lastIndexOf('a')+'  :  lastIndexOf("a")<br>');
 
// split() : 문자열 나누기 - 해당 문자열은 사라지며 ,로 구분
 document.write(str.split(" ")+'  :  split(" ")<br>');
 
// substring() : 특정위치의 문자열 구하기
 document.write(str.substring(4)+'  :  substring(4)<br>');
 
// toLowerCase() : 소문자로 변경
 document.write(str.toLowerCase()+'  :  toLowerCase()<br>');
 
// toUpperCase() : 대문자로 변경
 document.write(str.toUpperCase()+'  :  toUpperCase()<br>');
 
</script>
 </body>
</html>

# 결과

Java Web Programming = Java Web Programming : big()
Java Web Programming = Java Web Programming : bold()
Java Web Programming = Java Web Programming : fontcolor(red)
Java Web Programming = Java Web Programming : fontsize(0)
Java Web Programming = Java Web Programming : italics()
Java Web Programming = Java Web Programming : small()
Java Web Programming = Java Web Programming : strike()
Java Web Programming = Java Web Programming : sub()
Java Web Programming = Java Web Programming : sup()
Java Web Programming
script:Next
변수link:Java Web Programming
W  :  charAt(5)
87  :  charCodeAt(5)
Java Web Programming DDDDD  :  concat(" DDDDD")
1  :  IndexOf("a")
14  :  lastIndexOf("a")
Java,Web,Programming  :  split(" ")
Web Programming  :  substring(4)
java web programming  :  toLowerCase()
JAVA WEB PROGRAMMING  :  toUpperCase()


* Math 객체

<html>
 <head>
  <title> Math객체 </title>
 </head>
 <body>
 <script>  // d.w(클래스명.메소드(변수));
 num = 10.5

 // round() : 반올림
 document.write(Math.round(num)+" : round()<br>");

 // floor() : 버림
 document.write(Math.floor(num)+" : floor()<br>");

 // ceil() : 올림
 document.write(Math.ceil(num)+" : ceil()<br>");

 // max(), min() : 큰값, 작은값 구하기
 document.write(Math.max(300,350)+" : max(300,350)<br>");
 document.write(Math.min(300,350)+" : min(300,350)<br>");
 
// pow() : 지수 - 프로그래밍에서는 지수의 연산자가 없어 아래와 같이
// pow() 메소드를 이용해야 한다 
 document.write(Math.pow(3,2)+" : pow(3,2)→3²을 의미한다<br>"); 

 // sqrt() : 제곱근
 document.write(Math.sqrt(10)+" : sqrt(10)<br>");
 
// random() : 난수 - 실수로 표현할 수 있는 0이 아닌 최소의값
// 0.00000..1 ~ 0.99999..9
 for (i=1; i<=10; i++)
 {
 document.write(Math.random()+" : random()<br>");
 }
// 랜덤값이어도 범위 설정이 가능하다
 // 설정방법 :  floor(난수*(큰수-작은수+1))+작은수
 
 bb=0;
 for (i=1; i<10; i++)
 {
 a = Math.floor(Math.random()*(45-1+1))+1;
 document.write(a+'<br>');
// ▽ 범위를 벗어난 값이 있다면 에러표시
 if(a>45 || a<1){bb=bb+1}
 }
 if (bb>0)
 {document.write("Error!!!!")
 }

 </script> 
 </body>
</html>

# 결과

11 : round()
10 : floor()
11 : ceil()
350 : max(300,350)
300 : min(300,350)
9 : pow(3,2)→3²
3.1622776601683795 : sqrt(10)
0.435694593824094 : random()
0.23957019408375624 : random()
0.6215856861777931 : random()
0.3003168975865115 : random()
0.11009055717526667 : random()
0.8536929841696323 : random()
0.1820287439428912 : random()
0.3908089953177582 : random()
0.8486993927286865 : random()
0.5091668366954141 : random()
37
9
10
38
26
22
28
16
22


* random() 을 이용하여 사이트 접속시마다 다른 이미지 보이기

<body>
 <script>
 ran = Math.floor(Math.random()*(8-1+1))+1; //1~8사이의 값 설정
 switch (ran)
 {
 case 1:img="car_b_01.jpg";break;
 case 2:img="car_b_02.jpg";break;
 case 3:img="car_b_03.jpg";break;
 case 4:img="car_b_04.jpg";break;
 case 5:img="car_b_05.jpg";break;
 case 6:img="car_b_06.jpg";break;
 case 7:img="car_b_07.jpg";break;
 case 8:img="car_b_08.jpg";break; 
 }
 document.write("<img src=car/"+img+">");
 </script>
</body>


* Array객체-배열

<html>
 <head>
  <title> Array객체(배열) </title>
 </head>

 <body>
 <script>
 // 배열선언
 arr = new Array(5)
 arr[0] = "홍길동"
 arr[1] = 100
 arr[2] = "김길동"
 arr[3] = 200

 document.write(arr+" : arr");
 document.write("<hr>");
 // strArr[2] : 3번째 값을 출력하라
 str = "임소연,이태석,엄기백,1,2,3";
 strArr = str.split(','); // strArr도 배열
// split(기준값) : 문자열 나누기
 document.write(strArr[2]+' : strArr[2]<br>');

 for (i=0; i<strArr.length; i++) // 배열의 길이보다 작을때까지 반복 
 {
  document.write(strArr[i]+' : strArr[i]<br>');
 }

 // 두 배열을 하나의 배열로 합친다.
 // concat()
 arrConcat = arr.concat(strArr); //arr과 strArr을 연결해라, arrConcat도 배열
// 순서가 바뀌어도 관계 없음 = strArr.concat(arr)
 document.write("<hr>"+arrConcat+' : arrConcat');

 // 배열의 문자를 하나의 문자열로 변경
 // join() : 괄호안에지정된 것으로 구분하여 하나로 묶음
 strJoin = arrConcat.join(", ");
 document.write("<hr>");
 document.write(strJoin+' : strJoin');

 // 배열의 값을 역순으로 정렬 : 역순으로 정렬된 값이 완전히 변수에 저장이 되어버린다.
 // 값을 되돌리려면 reverse()를 한번 더 실행해줘야 한다.
 // reverse()
 strReverse = arrConcat.reverse()
 document.write("<hr>");
 document.write(strReverse+' : strReverse');

 // 배열의 일부만 구한다.
 // slice()
 strSlice = arrConcat.slice(2,5)
// 배열 값의 3번째부터 6번째까지
 document.write("<hr>");
 document.write(strSlice+' : strSlice')

 // 배열의 정렬 : 데이터를 크기 순서대로 정렬 오름차순 (문자기준)
 // sort()
 strSort = arrConcat.sort();
 document.write("<hr>"+strSort+' : strSort')
 
 </script>
 </body>
</html>

# 결과



* 로또 게임기 만들기

 <body>
  <script>

cnt = prompt("몇번할래?","")
document.write("게임수="+cnt+"<br>");
for (i=1; i<=cnt; i++) // 게임수만큼 반복
{   // 난수를 저장할 배열 생성
 ranArr = new Array(6);
 for(j=0; j<ranArr.length; j++){ // 0,1,2,3,4,5

 // 난수생성, 난수를 배열에 대입
 ran = Math.floor(Math.random()*(45-1+1)+1); // 1~45사이의 값
 
 // 난수 같은 값 제외하는 방법
 sw=0;
 for (k=0; k<j; k++)
 {
  if (ranArr[k]==ran)
  {
   j--; sw=1;
   break;
  }
 }
 // 난수 6개의 값 저장 : ranArr[0]~[5]
 if(sw==0)ranArr[j] = ran;
 }
 // 정렬 : sort()가 숫자를 문자를 비교하듯 12, 1 중 1이 크다고 비교해서
 // 이 스크립트에 사용하기 부적절 하여 버블정렬(?) 방법을 써 sort()명령어의
 // 역할을 하는 스크립트를 작성한다
 for(z=0; z<ranArr.length-1; z++){
  for (p=0; p<ranArr.length-1; p++)
  {
   if (ranArr[p]>ranArr[p+1]) // 배열 비교
   { temp = ranArr[p];
    ranArr[p] = ranArr[p+1];
    ranArr[p+1] = temp;
   }
  }
 }
 // 출력
 document.write(i+"게임="+ranArr+"<br>");
}

  </script>
 </body>

# 결과

 



* 이미지 스크롤 :
marquee영역에 마우스 롤오버시 멈추고 영역 벗어날시 다시 움직임

<body>
<marquee bgcolor="#e3e3e3" onMouseOver="this.scrollAmount=0"
onMouseOut="this.scrollAmount=10"> // 현재 페이지를 가르키므로 this
<a href="#"><img src="car/car_a_01.jpg" border="0"></a>
<a href="#"><img src="car/car_a_02.jpg" border="0"></a>
<a href="#"><img src="car/car_a_03.jpg" border="0"></a>
<a href="#"><img src="car/car_a_04.jpg" border="0"></a>
<a href="#"><img src="car/car_a_05.jpg" border="0"></a>
<a href="#"><img src="car/car_a_06.jpg" border="0"></a>
<a href="#"><img src="car/car_a_07.jpg" border="0"></a>
<a href="#"><img src="car/car_a_08.jpg" border="0"></a>
</marquee>
 </body>

# 결과




* window 객체
버튼을 생성하여 팝업창 컨트롤 하기

 <head>
  <title> Window 객체 </title>
 <script>
// 페이지 로드시 팝업창을 자동으로 띄운다. win변수에 지정하여 함수에서도 활용
  win = window.open("이미지스크롤.html","w","width=300,height=300");
 
  function Move(x,y){
 win.moveBy(x,y); // x축과 y축의 픽셀값 입력으로 팝업창의 위치 이동
  }

  function Size(w,h){
  // 창의 크기 조절 w,h
 win.resizeBy(w,h); // 너비와 높이의 픽셀값 입력으로 팝업창의 크기 조절
  }

  cnt=0
  function autoResize(){ // 페이지 로드시 작동
 win.resizeBy(1,1);
 if(cnt<500){ // 너비,높이를 1픽셀씩 500번 늘림: 500px씩 늘림
 cnt++;
 setTimeout("autoResize()",1); // 밀리초(1초=1000밀리초)만큼 대기 후 실행: 반복
// setTimeout("함수명",밀리초) : 해당 함수의 실행에 대기시간 부여
 }
  }
// 테스트 해보니 간단하게 for문으로도 같은(?) 구현이 가능하다.
// for(i=0; i<300; i++){win.resizeBy(1,1)}
  cnt=0;
  cnt2=0;
  function autoMove(){ // 페이지 로드시 작동
 win.moveBy(-1,0); // 왼쪽 1pixel 이동
 win.moveBy(0,1); // 아래쪽 1pixel 이동
 if(cnt<1000){ // 왼쪽 밑으로 대각선 방향으로 1000번 움직인다
 cnt++;
 setTimeout("autoMove()",1); // 1/1000 초 동안 대기 후 실행:반복
 }
 
  }
 </script>
 </head>

 <body onLoad="autoResize(),autoMove()"> 
// 페이지 로드시 작동되는 함수 body태그에 삽입
 <br><br><br><br>
 <center>
 <input type="button" value="위로" onClick="Move(0,-20)"><br>
 <input type="button" value="왼쪽" onClick="Move(-20,0)">
 <input type="button" value="오른쪽" onClick="Move(20,0)"><br>
 <input type="button" value="아래" onClick="Move(0,20)"><br>
 <input type="button" value="늘리기" onClick="Size(50,50)">
 <input type="button" value="줄이기" onClick="Size(-50,-50)"><br>
</center>
 
</body>

# 결과



* 백그라운드 스크롤

<head>
  <title> 백그라운드 스크롤 </title>
  <script>
  bgSet = 0; 
  bgImg = eval('document.body')
  // eval:문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
  function bg_scroll(max){
 bgSet+=1; // 계속 증가하므로 ↘
 if(bgSet > max) bgSet=0; // 임의로 초기셋팅값으로 되돌림
 document.body.style.backgroundPosition = bgSet+"  "+bgSet //포지션에서 y값이 계속 바뀜
  }
  window.setInterval("bg_scroll(9000)",50); // 50밀리초동안 대기 후 "함수"을 실행
 
  </script>
 </head>

 <body background="../html/img/1.jpg">
  <br><br><br><br><br><br>
  <center>
  <img src="../html/img/xbox.gif">
  </center>
 </body>

# 결과


'Html/Jsp/Javascript' 카테고리의 다른 글

Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_06  (0) 2011.10.17