본문 바로가기
✨ Front-end/jQuery

[jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기

by 환풍 2023. 9. 4.
728x90
반응형

 

JSON 표기법

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
    var emp={"name":"환풍",
            "age":"25",
            "tel":"010-1111-4401",
            "address":"부산"    
    };
    
    /* 형식)  객체명.key이름   or    객체명['key이름']  */
    var msg="";
    msg += "이름:" + emp.name +"<br>"
        + "나이:" + emp.age +"<br>"
        + "전화:" + emp['tel'] +"<br>"
        + "주소:" + emp['address'] +"<br>"
        
    $('#result').html(msg);    
});
</script>
</head>
<body>
    <h2>JSON표기법</h2>
    <div id="result"></div>
</body>
</html>
cs

 

JSON 배열

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

 

ID : admin
pw : 1234

로그인 

See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.

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
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.container{
    position: absolute;
    top:10px;
    left: 10px;
    height: 120px;
    width: 350px;
    border: 1px  dotted  black;
    padding-left: 20px;
    padding-top: 20px;
}
.login{
    position: absolute;
    top:24px;
    left: 180px;
    height: 40px;
    width: 80px;
    background-color:#47C83E;
    border: 1px  solid  #47C83E;
    font-size: 10px;
    color:white;
    font-weight: bold;
    padding-top: 5px;
    padding-left: 10px;
}
input{
    border: 0.5px  solid  #D5D5D5;
}
</style>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function(){
    var emp = { 
        "id" : "admin",
        "pw" : "1234",
        "name" : "관리자",
        "point" : "1250"
    };
    $("input").focus(function () {
        $(this).css("background-color", "#FFFF00");
    });
    $("input").blur(function () {
        $(this).css("background-color", "#FFF");
    });
    $('#login').click(function(){
        var a = $('#id').val();
        var b = $('#pw').val();
        
        if(a=="" || b==""){
            $('#confirm').text("아이디와 비밀번호를 입력해주세요").css("color","black");
            $('#id').focus();
            return;
        }
        if(emp.id == a && emp.pw == b)
            $('#confirm').html(emp.name + "님 환영합니다.<br>현재 포인트는 " 
                               + emp.point + "점 입니다.").css("color","blue");
        else{
            $('#confirm').text("아이디 또는 비밀번호가 틀립니다.").css("color","red");
            $('#id').val("");
            $('#pw').val("");
            $('#id').focus();
        }
    });
});
</script>
</head>
<body>
<div id="result"  class="container">
    <label for="input">[로그인 화면]</label><br><br>
    <input type="text" id="id" placeholder="아이디"><span>아이디를 입력하시오</span><br>
    <input type="text" id="pw" placeholder="비밀번호 "><span>비밀번호를 입력하시오</span><br>
    <button id="login">Login</button><br><br>
    <span id="confirm"></span>
</div>    
</body>
</html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cs
728x90
반응형
저작자표시 비영리 변경금지

'✨ Front-end > jQuery' 카테고리의 다른 글

[jQuery] 입력 문자열 제한 keyup( ) 과 slice( )  (0) 2023.09.05
[jQuery] 버튼 hover로 색상변경 addClass, removeClass  (0) 2023.09.04
[jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크)  (0) 2023.09.04
[jQuery] innerHTML, text 바꾸기  (0) 2023.09.04
[jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade)  (0) 2023.09.04

관련글

댓글

티스토리툴바