* 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 |