로그인 창 만들기
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) 취소버튼 누르면
'WEB 기초 > Script' 카테고리의 다른 글
| 7. 게시판 만들기 (테이블과 spilt이용) (0) | 2018.04.12 |
|---|---|
| 6. 배열 (0) | 2018.04.12 |
| 4. 조건문을 이용한 메뉴판 (0) | 2018.04.12 |
| 3. 계산기 만들기 (0) | 2018.04.12 |
| 2. 값의 비교, 입력확인창, 경고창 (0) | 2018.04.12 |