로그인 창 만들기

1. 문제형태

선택: 로그인하셧습니까? (confirm이용)

확인버튼클릭 : 내정보 보러가기(<a href="">), 로그아웃 버튼 생성 출력한다. (<input type="button">)

취소버튼클릭 : 아이디 text, 암호 password, 로그인 버튼 생성 출력한다. -->

2. 주의사항 (script내부 문장)

- 7번줄 :

var result= if(result ==true)

confrim 선택창의 '예', '아니오' 를 누르면 boolean값을 반환한다.

따라서, result에 true값을 저장해서 "true가 맞다면?" 비교하는 조건을 사용했다.

- 8~9줄 :

var in1= "<a href='www.naver.com'> 내 정보 보러가기 </a>";

var in2= "<input type='button' value='취소버튼'>";

=> <script>태그에서 a태그와 input태그를 다음과 같이 넣는다는 것을 알 수 있다.

결론적으로 만들어진 태그를 " " 따옴표로 묶어서 변수에 저장하고 있다.

- 11~12줄 :

document.write(in1+ b);

document.write(in2+ b);

=> 저장된 변수를 document.write()를 이용해서 출력해야지, 해당 태그가 출력된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<head>
    <meta charset="UTF-8">
    <title> 로그인 창 </title>
    <script>
        var b='<br>';
        var result = confirm('로그인하셧습니까?');
        if(result ==true){ 
            var a1= "<a href='www.naver.com'> 내 정보 보러가기 </a>";
            var b1= "<input type='button' value='취소버튼'>";
            document.write(a1+ b);
            document.write(b1+ b);
            
        }
        else{
            var t1= "<input type='text' value='아이디'>";
            var t2= "<input type='password' value='비번'>";
            var b2= "<input type='button' value='로그인'>";
            document.write(t1 +b);
            document.write(t2 +b);
            document.write(b2 +b);
        }
    </script>
</head>
 

 

1) 실행시 첫번째 화면

2) 확인버튼 누르면

3) 취소버튼 누르면

저작자표시