[25]JavaScript2

작성일 | In

JavaScript를 이용한 성적프로그램

  • 주의사항
    • 크롬에서 변수명 name 사용할 경우 주의!

1) 기본설정

1
2
3
4
5
6
7
var uname=["홍길동","무궁화","라일락","진달래","개나리"];
var kor=[100,35,75,95,85];
var eng=[100,40,80,95,90];
var mat=[95,50,60,35,85];
var aver=[0,0,0,0,0];
var rank=[1,1,1,1,1];
var size=uname.length;

2) 평균, 과락, 평균 10점 당 * 한개씩, 장학생 구해 테이블로 id=demo에 출력

1
2
3
4
var tests=[];	//학생
var result=[];	//과락
var star=["","","","",""];	//별
var special=[];	//장학생
1) tests 배열에 학생정보 담기 (동시에 평균도 구하기)
1
2
3
4
5
6
7
8
9
10
for(a=0;a<size;a++){
    tests[a]={
        "uname":uname[a],
        "kor":kor[a],
        "eng":eng[a],
        "mat":mat[a],
        "aver":parseInt((kor[a]+eng[a]+mat[a])/3),
        "rank":rank[a]
    }
}
2) 과락 구하기
1
2
3
4
5
6
7
8
9
10
11
for(a=0)a<size;a++){
    if(tests[a].aver>=70){
        if(tests[a].kor<40||tests[a].eng<40||tests[a].mat<40){
            result[a]="재시험";
        }else{
            result[a]="합격";
        }
    }else{
        result[a]="불합격";
    }
}
3) 장학생
1
2
3
4
5
6
7
for(a=0)a<size;a++){
    if(tests[a].aver>=95){
        special[a]="장학생";
    }else{
        special[a]="";
    }
}
4) 평균 10점 당 * 구하기

그냥 star=[] 또는 star=[”“]로 하면 undefined가 뜸. 반환받을 자료형? 이런게 없어서 그렇다고함

1
2
3
4
5
for(a=0)a<size;a++){
    for(n=1;n>tests[a].aver/10;n++){
        star[a]+="★";
    }
}
5) 등수 구하기
1
2
3
4
5
6
7
for(a=0)a<size;a++){
    for(b=0;b<size;b++){
        if(tests[a].aver<tests[b].aver){
            tests[a].rank++;
        }
    }
}
6) 테이블 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var table="";
for(idx=0;idx<size;idx++){
    table +="<table>";
    table +="<tr>";
    table +="	<td colspan='2'>성적표</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>이름</td>";
    table +="	<td>"+tests[idx].uname+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>국어</td>";
    table +="	<td>"+tests[idx].kor+"점"+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>영어</td>";
    table +="	<td>"+tests[idx].eng+"점"+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>수학</td>";
    table +="	<td>"+tests[idx].mat+"점"+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>평균</td>";
    table +="	<td>"+tests[idx].aver+"점"+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>등수</td>";
    table +="	<td>"+tests[idx].rank+"등"+"</td>";
    table +="</tr>";			
    table +="<tr>";
    table +="	<td>과락</td>";
    table +="	<td>"+result[idx]+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>별점</td>";
    table +="	<td>"+star[idx]+"</td>";
    table +="</tr>";
    table +="<tr>";
    table +="	<td>장학여부</td>";
    if(tests[idx].aver>=95){
        table +="<td style='background-color:#FDFA9D'>"+special[idx]+"</td>";
    }else{
        table +="<td style='background-color:#ffffff'>"+special[idx]+"</td>";
    }
    table +="</tr>";
    table +="</table>";
}
    document.getElementById("demo").innerHTML=table;

01

함수

  • function , method
  • 함수 정의(작성) , 함수 호출
  • 함수의 리턴값은 존재하지만, 리턴형은 없다
  • 매개변수(parameter)의 자료형은 없다
  • 형식) function 함수명(){}

매개변수가 없는 경우

1
2
3
function test(){
    alert("안녕하세요!");
}

매개변수가 있는 경우

절대값 구하기 (리턴값이 없는경우)

매개변수 자료형이 없다

var a 라고 쓰면 에러

1
2
3
4
5
6
7
function abs(a){
    if(a<0){
        alert(-a);
    }else{
        alert(a);
    }
}

함수호출

1
2
abs(-1.5);	//1.5
abs(-102);	//102
두 수 사이의 합 (리턴값이 없는 경우)
1
2
3
4
5
6
7
8
9
10
11
12
13
function hap(start,end){
    var sum=0;
    if(start>end){
        var tmp=start;	
        start=end;		
        end=tmp;		

    }
    for(a=start;a<=end;a++){
        sum+=a;
    }	
    alert(sum);
}

함수호출

1
hap(5,2)
두 수 사이의 차이(리턴값이 없는 경우)
1
2
3
4
5
6
7
8
9
10
11
12
function diff(start,end){
    var diff=0;
    if(start>end){
        var tmp=start;	
        start=end;		
        end=tmp;		

    }

    diff=end-start;
    alert(diff);
}

함수 호출

1
diff(4,6)
3의 배수 갯수를 반환 (리턴값이 있는 경우)
1
2
3
4
5
6
7
8
9
function count(a,b){
    var count=0;
    for(n=a;n<=b;n++){
        if(n%3==0){
            count++;	
        }
    }
    return count;	//리턴값의 자료형이 존재하지 않는다.	
}

함수 호출

1
var result=count(1,100);
윤년구하기 (리턴값이 있는 경우)

javascript

1
2
3
4
5
6
7
function leap(y){
    if(y%4==0&&y%100!=0||y%400==0){
        return true;
    }else{
        return false;
    }
}

함수호출

1
2
3
4
5
if(leap(2019)){
    alert("윤년");
}else{
    alert("평년");
}
재귀적 함수 (리턴값이 있는 경우)
1
2
3
4
5
6
7
function fact(a){
    if(a==0){
        return 1;
    }else{
        return a*fact(a-1);
    }
}

함수호출

1
2
result=fact(4);
alert(result);	//24

Math 객체

  • 파이
1
Math.PI	//3.141592653589793
  • 반올림
1
2
Math.round(4.7)	//5
Math.round(4.4)	//4
  • 절대값
1
Math.abs(-4.7);	//4.7
  • 무조건 올림
1
Math.ceil(4.4);	//5
  • 무조건 내림
1
Math.floor(4.7);	//4
  • 최솟값
1
Math.min(0, 150, 30, 20, -8, -200);	//-200
  • 최댓값
1
Math.max(0, 150, 30, 20, -8, -200);	//150
  • 랜덤값
1
Math.random();	//0.~ 이런식으로 랜덤값

String Method

예제
1
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
문자열 길이
1
txt.length
예제
1
var str = "Please locate where 'locate' occurs!";
일치하는 단어 인덱스 값 출력

일치하지 않으면 -1

1
str.indexOf("locate")	//7
끝에서부터 일치하면 인덱스값 출력
1
str.lastIndexOf("locate")	//21
지정한 인덱스 값 만큼 글자 출력
1
2
str.slice(7,13)		//locate
str.substring(7,13)	//locate
글자 대체하기

Please locate W3Schools ‘locate’ occurs!

1
str.replace("where","W3Schools")
정해진 글자 제거 후 출력

예제는 공백제거

Please,locate,where,’locate’,occurs!

1
str.split(" ")
문자열 앞 뒤 공백 제거
1
2
3
4
var str = "       Hello World!        ";
str.length	//27 > 공백포함길이
"#"+str.trim()+"#" //#Hello World!#
str.length	//12

정규표현식(regular expression)

공백을 빈 문자열로 replace

예전 브라우저들은 이 방식을 사용함 (trim() 나오기 전에)

1
2
var str = "       Hello World!        ";
alert("#"+str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '')+"#");//#Hello World!#

이벤트

  • 자바스크립트는 주로 이벤트를 발생시킨 후 함수를 호출함으로서 실행한다.
  • 기본 이벤트 종류
1
2
3
4
5
6
7
8
9
10
11
12
13
onchange 	: 다른 객체로 바뀌었을 때
onclick		: 클릭했을 때
onmouseover	: 마우스가 올려졌을 때
onmouseout	: 마우스가 나갔을 때(올려졌던게)
onkeydown	: 키보드를 눌렀을 때
	순서) onkeydown > onkeypress > onkeyup
onload		: 문서 불러오는 작업이 끝났을 때	
onunload	: 현재 문서가 종료되거나 나갔을 때
onsubmit	: 해당폼이 서버로 전송될 때
			  return 값이 true면 해당 폼이 서버로 전송,
			  false면 전송안됨
onfocus		: 입력상자에서 커서가 들어왔을 때
onblur		: 입력상자에서 커서가 나갔을 때

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>11_이벤트.html</title>
	<style>
		.btn1{
			width: 50px;
			height: 30px;
			color: #000000;
			background-color: #EA6F6F;
			border:currentColor;
			border-radius: 5px;
			cursor: pointer;
		}
		.btn2{
			width: 80px;
			height: 30px;
			color: #000000;
			background-color: #886FEA;
			border:currentColor;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<!--<body onload='alert("어서와!!");' onunload='alert("잘가~");'>-->


	<form name="muform" id="muform" action="ok.jsp" method="get" onsubmit="return true;">
		<!--되도록 name이랑id이름을 같게 짓기-->
		<input type="button" value="버튼1" name="btn1" id="btn1" class="btn1" onclick="alert('버튼1클릭');">

		<hr>
		<!--페이지이동 html에선 <a href=""></a> 이고 자바스크립트에서는 location명령어 이용. 버튼은 주로 클릭이벤트를 사용-->
		<input type="button" value="솔데스크" onclick="location.href='http://www.soldesk.com'">
		<hr>
		<input type="button" value="마우스" onmouseover="alert('마우스over');" onmouseout="alert('마우스out')" >

		<hr>
		<!--키보드에 관련된 이벤트는 텍스트 입력시 -->
		<input type="text" onkeydown="alert('키보드사용');">
		<hr>
		<textarea rows="5" cols="10" onkeydown="alert('키보드누름');"></textarea>
        
		<hr>
		<input type="text" onfocus="alert('커서들어옴');">
		<input type="text" onblur="alert('커서나감');">
		<hr>

		<select onchange="alert('다른목록변경');">
			<option value="" selected="">서울</option>
			<option value="">제주</option>
			<option value="">부산</option>
		</select>

		<hr>
		
		<!--
		submit을 누르면 서버로 가서 ok.jsp로 간다고함.
		action을 ok.jsp로 설정했음. 한마디로 페이지이동명령어	
		-->
		<input type="submit" value=전송>
		<!--기본속성이 서버로 submit 되는 것들-->
		<button>전송</button>
		<input type="image" src="../images/search.png">

	</form>
	
</body>
</html>

JavaScript 이용한 회원가입

  • frontend(UI , VIEW)단에서 이종, 즉 서로 다른 문법(HTML , CSS, JavaScript 등)간의 데이터를 교류하기 위해 JavaScript,jQuery를 활용한다

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<h1>*회원가입*</h1>
	
<hr>

<form name="memfrm" id="memfrm" action="ok.jsp" onsubmit="return validate()">

    <!-- 회원가입 -->
    아이디:	<input type="text" name="uid" id="uid" class="btn1">
            <input type="button" value="ID중복확인" onclick="getID()">
            <input type="button" value="ID적용" onclick="setID('happy')">
    <hr>
    비밀번호:<input type="text" name="upw" id="upw">

    <hr>
    <!--이메일 주소 직접 쓰거나 선택하거나 하기 -> 구글링 -->
    이메일
    <input name="email1" type="text" class="box" id="email1" size="15"> @ <input name="email2" type="text" class="box" id="email2" size="20">
        <select name="email_select" class="box" id="email_select" onChange="checkemailaddy();">
            <option value="" selected>선택하세요</option>
            <option value="naver.com">naver.com</option>
            <option value="gmail.com">gmail.com</option>
            <option value="hotmail.com">hotmail.com</option>
            <option value="hanmail.com">hanmail.com</option>
            <option value="yahoo.co.kr">yahoo.co.kr</option>
            <option value="1">직접입력</option>
        </select>


    <hr>
    <!--주민번호 앞자리 자릿수가 다 되면 자동으로 뒤로 커서가 넘어가게 하기.-->
    주민번호:<input type="text" name="jumin1" id="jumin1" size="10" maxlength="6" onkeyup="moveCursor()"> -
            <input type="text" name="jumin2" id="jumin2" size="10" maxlength="7">
    
    <hr>
    약관동의
    <input type="checkbox" name="agree" id="agree">
    <hr>
    <input type="submit" value="가입1">	<!--타입:submit > action을 취함 > 맨처음에 받던 양식폼으로 되돌려주는 것 -->
    <input type="button" value="가입2" onclick="validate2()">	<!--타입:button > 아무기능없음. -->
    <input type="reset" value="취소">	

</form>

JavaScript

  • window객체 : 자바스크립트 최상위 객체. 생략가능
  • document객체 : HTML문서의 <body>를 가리키는 객체
1
<input type="text" name="uid" id="uid"> 접근하기
1) <form>의 컨트롤요소 접근시 name 사용

<form name=”memfrm”>

왜냐하면 form안에 들어있으니까. form name이 있어야함

1
2
3
document.memfrm		//[object HTMLFormElement]
document.memfrm.uid	//[object HTMLInputElement]
document.memfrm.uid.value //실제값 출력
2) id 속성으로 접근 (추천!)
1
document.getElementById("uid").value	//실제값
3) tag name으로 접근하기 (ex.input)
1
2
3
4
document.getElementByTagName("input")	//[object HTMLCollection]
document.getElementByTagName("input")[4]
//index로 접근(0부터 시작),4번째 input태그 접근 -> [object HTMLInputElement] 출력
document.getElementByTagName("input")[4].value //실제값출력
4) class로 접근하기
1
document.getElementByClassName("btn1")	//[object HTMLCollection]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function getID(){};//getID()

function setID(str){};//setID()

function moveCursor(){
    //1)주민번호 앞칸 id=jumin1의 입력값 확인하기
    //onkeyup 이벤트를 실행했기 때문에 한글자한글자를 받아들인 값을 jumin1 변수에 저장하기
    
    var jumin1=document.getElementById("jumin1").value;
    // alert(jumin1); //테스트

    //2)jumin1변수값의 글자갯수가 6개와 동일하다면 커서를 id=jumin2로 이동하기
    if(jumin1.length==6){//만약 변수jumin1의 길이가 6과 같다면
        document.getElementById("jumin2").focus(); //id="jumin2"로 커서를 옮김. focus() 사용.
    }//if
};//moveCursor()

function validate(){
    //회원가입 유효성 검사

    //1)아이디 글자 갯수 8~12글자 사이인지 확인
    // > 길이링 maxlength를 제한둬도됨
    //위의 조건을 만족하지 않는다면
    // -> 경고창
    // -> 커서를 아이디를 입력할 수 있도록 해주고 서버로 전송하는 것을 차단
    var uid=document.getElementById("uid").value;
    uid.trim();//공백제거
    if(uid.length<8||uid.length>12){
        alert("아이디는 8~12글자 입력바랍니다.")
        document.getElementById("uid").focus(); //커서를 아이디입력창으로 보냄
        return false; //서버로 보내지 않는다는것.
    }//if

    //2)비밀번호 글자 갯수 5~10자리 인지 확인
    var upw=document.getElementById("upw").value;
    upw.trim();//공백제거
    if(upw.length<5||upw.length>10){
        alert("비밀번호는 5~10글자 입력바랍니다.");
        document.getElementById("upw").focus(); //커서를 아이디입력창으로 보냄
        return false; //서버로 보내지 않는다는것.
    }//if
    
    //3)주민번호 앞칸 글자 갯수 6자리 인지 확인 및 숫자로 입력했는지 확인
    var jumin1=document.getElementById("jumin1").value;
    jumin1.trim();//공백제거
    if(jumin1.length<6||isNaN(jumin1)){ //길이는 위에서 정했으니 범위를 6보다 작게 한다.
        alert("주민등록번호 6글자 숫자로 입력바랍니다.");
        document.getElementById("jumin1").focus(); //커서를 아이디입력창으로 보냄
        return false; //서버로 보내지 않는다는것.
    }//if
    
    //4)주민번호 뒷칸 글자 갯수 7자리 인지 확인
    var jumin2=document.getElementById("jumin2").value;
    jumin2.trim();//공백제거
    if(jumin2.length<7||isNaN(jumin2)){
        alert("주민등록번호 7글자 숫자로 입력바랍니다.");
        document.getElementById("jumin2").focus(); //커서를 아이디입력창으로 보냄
        return false; //서버로 보내지 않는다는것.
    }//if
    
    //5) 약관에 동의하였는지
    //radio나 checkbox는 checked로 물어보면 된다
    if(document.getElementById("agree").checked==true){//체크가 되었다면(boolean형임)
        return true;
    }else{
        alert("약관에 동의해주세요");
        return false;
    }//if
    
    //이 모든 과정을 통과해야한 return 값이 true가 되어서 서버로 넘어간다!!
        return true;	
}//validate()

function validate2(){
    // 자바스크립트 함수를 이용해서 폼컨트롤 요소의 기능을 접근할 수 있다.
    // action을 취할 수 있는 방법이 type의 submit을 이용하거나,
    // 이렇게 type을 button으로 줘서 자바스크립트 함수를 이용하는 것이다.

    //<form name="memfrm"></form>
    var frm=document.memfrm;//현재문서의 memfrm을 찾으라는 것. 
    //alert(frm); //NaN 이나 undefined가 안나오고 [object HTMLFormElement] 뜨면 잘 나오는거.

    //3가지방법으로 아이디 접근(가입2 버튼 눌렀을때)
    // alert(document.memfrm.uid.value);
    // alert(document.getElementById("uid").value);
    // alert(frm.uid.value);//frm변수가 document.memfrm 를 가지고 있으니까

    //action을 form에서 접근할 수도 있지만 이렇게 자바스크립트로도 접근할 수 있다.
    //<form action="ok2.jsp"></form> 이랑 동일한 것.
    //html에 들어있으면 한번만 보내는데, 자바스크립트에 하면 여러군데, 다이나믹하게 줄 수 있다. 
    // document.memfrm.action="ok2.jsp";
    frm.action="ok2.jsp";	//변수에 담았으니까
    //type이 button이기 때문에 action을 취할 수 없음.(type=submit이여야만 action을 취할 수 있음) > 이것과 동일한 기능의 자바스크립트 함수
    // document.memfrm.submit();
    frm.submit();
    //<input type=reset>와 동일한 기능의 자바스크립트 함수
    //form컨트롤 요소가 가지고 있던 최초의 상태로 복귀.(지우는거 아님)
    //frm.reset();	

}//validate2()

function checkemailaddy(){
    //이메일 > 구글링
    if (memfrm.email_select.value == '1') {
        memfrm.email2.readonly = false;
        memfrm.email2.value = '';
        memfrm.email2.focus();
    }
    else {
        memfrm.email2.readonly = true;
        memfrm.email2.value = memfrm.email_select.value;
    }
}//checkemailaddy()

JavaScript 이용한 로또번호

  • 1~45 중에서 서로 겹치지 않게 6개 발생 후 오름차순으로 정렬 후 각 텍스트 상자에 출력하기

HTML

1
2
3
4
5
6
7
8
9
10
11
<form name="lottofrm" id="lottofrm">
    <!--readonly : focus 못하게 하는거. 읽기만 가능 / 자바스크립트로만 접근 가능하도록-->
    <input type="text" name="n0" id="n0" size="3" readonly>		
    <input type="text" name="n1" id="n1" size="3" readonly>		
    <input type="text" name="n2" id="n2" size="3" readonly>		
    <input type="text" name="n3" id="n3" size="3" readonly>		
    <input type="text" name="n4" id="n4" size="3" readonly>		
    <input type="text" name="n5" id="n5" size="3" readonly>	
    <hr>
    <input type="button" value="로또번호" onclick="lotto()">	
</form>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function lotto(){

    var lotto=[];
    var size=6;
    //랜덤발생
    for(a=0;a<size;a++){
        lotto[a]=parseInt((Math.random()*45)+1); //실수 > 정수
        for(b=0;b<a;b++){
            if(lotto[a]==lotto[b]){
                a--;
                break;
            }
        }
    }//for
    
    lotto.sort(function(a, b){return a - b});	//먼저 정렬
    // alert(lotto);
    
    //하나하나에 넣어 출력하기
    for(idx=0;idx<size;idx++){
        	document.getElementById(eval("\""+"n"+idx+"\"")).value=lotto[idx];
    }
    //오히려 eval("n"+idx)를 쓰면 오류가 n0 정의가 되지 않는다고 오류가 뜬다! 
    //id아이디는 "" 안에 들어가는 값이니까 eval("\""+"n"+idx+"\"") 이렇게 써준다.
    //아니면 eval()를 사용하지 않고 그냥 "n"+idx 로 해도 작동은 된다

}//lotto()

this

  • 자기 자신의 요소를 가리킴
  • this는 form 컨트롤 요소 안에서만 사용가능!!
  • <a href=”” onclick=”test5(this)”></a>
    • 사용불가!!
  • <form name=”myform” id=”myform” onsubmit=”test5(this.form)”>
    • this는 자기자신 > 지금 스스로가 form이기 때문에 이렇게 하면 undefined 값
    • <form name=”myform” id=”myform” onsubmit=”test5(this)”>
      • 이렇게 해야함

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<form name="myform" id="myform" onsubmit="test5(this)">
    <input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
    <!-- this호출할때 함수 안에 적어놓기. 'this' 이렇게 하면 문자열 -->
    <!-- this : 자기 자신의 요소를 가리킴 -->
    <input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
    <!-- this.value 자신의 요소가 가지고 있는 값 -->
    <!-- this라는것은 object기 때문에 변수 몇가지가 있음 this는 상대적인 개념. 내가 있는 곳의 value-->
    <input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">
    <!-- this.form 자신의 요소가 속해있는 폼 -->
    <input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
    <hr>
    <input type="submit" value="전송">
</form>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function test1(){
    //1)name으로 접근
    // alert(document.myform);	> [object HTMLFormElement]
    // alert(document.myform.btn1);	> [object HTMLInputElement]
    // var myform=document.myform;
    // var btn1=document.myform.btn1;
    // alert(myform);
    // alert(btn1);
    // alert(btn1.value);
    
    //2)id로 접근하기
    var myform=document.getElementById("myform");
    var btn1=document.getElementById("btn1")
    alert(myform);
    alert(btn1);
    alert(btn1.value);
}//test1()

function test2(obj){
    //3)this로 접근하기
    //this는 상대적인것. 
    alert(obj);	// [object HTMLInputElement]
    alert(obj.value); //버튼2 
}//test2()

function test3(val){
    //4)this.value로 접근하기
    alert(val)	//버튼3
}//test3()

function test4(frm){
    alert(frm);	//[object HTMLFormElement]
    alert(frm.btn4);//[object HTMLInputElement]
    alert(frm.btn4.value);//버튼4
}//test4()

function test5(f){
    alert(f);	//[object HTMLFormElement]
}//test5()

getElementById

document.getElementById(“mydiv”)

[object HTMLDivElement]

[object CSSStyleDeclaration]

순수 자바스크립트

1
2
3
4
5
6
7
getElementById("mydiv").style.background="#ffffff";
getElementById("mydiv").style.color="#000000";
getElementById("mydiv").style.top="30px";
getElementById("mydiv").style.left="100px";
getElementById("mydiv").style.width="300px";
getElementById("mydiv").style.height="200px";
getElementById("mydiv").innerHTML="테스트";

jQuery 접근

1
2
$("#mydiv").css()
$("#mydiv").html("테스트")

이미지변경

1
getElementById("myimg").src="../images/angel.png";