JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자
2022. 10. 2. 17:48ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class=""main-bg">
<h4>Shirts on Sale</h4>
<button id="login" class="btn btn-danger">로그인</button>
</div>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<!-- 모달창 안에 form 태그를 만들건데 예쁘게
bootstrap에서 가져다가 쓸수도 있음
-->
<!-- form 태그 안에서 button의 타입을 적어주지 않으면
submit이 되기 때문에 submit인지 버튼 타입을 명시해줘야 한다.
<form>은 서버로 유저 정보 전송하려고 쓰는 거임
전송을 하려는 url을 action에 적어준다. 우리는 서버가 따로 없으니
다른 화면으로 이동할 수 있는 success.html을 만들거다
-->
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" id="gogo" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<script>
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
//조건문
//조건이 true이면 작동하고 false이면 작동 안함, boolean 타입
// if(조건1){
// 조건1이 참일 때 실행할 코드
// }else if(조건2){
// 조건2가 참일 때 실행할 코드
// 무제한으로 else if를 넣을 수 있다.
// if() else if(){}대신에 if(){} if(){}를 사용하면 둘다 똑같다고
// 생각하기 쉬운데 차이점은 else if의 경우 앞에 조건이 참이면 else if의 조건은
// 참인지 아닌지 검사를 안한다. if if문은 앞에가 참이여도 뒤에 if 문을 검사한다.
// }else{
// 위 모든 조건이 참이 아닐 때 실행할 코드
//}
//조건에 비교연산자( ==, < , <= , > , >=)와 같이 써야한다
// ==는 같음을 비교하지만 !=는 다른지 비교함 다르면 true 같으면 false
// 같다를 비교할때 ===와 같이 세개를 쓰면 ==보다 엄격하게 비교한다
//1=='1'는 true가 되지만 1==='1'는 false가 된다.
//===는 타입까지 같아야 같다고 인정한다.
//!==는 타입까지 달라야 true
// 연산자가 true이면 작동 false이면 작동 안함
//true로 인식하는 자료들(truthy 자료들)
//1) 0제외 숫자
//2) '문자'
//3) []
//4) {}
//false로 인식하는 자료들(falsy 자료들)
//1) 0
//2) ''
//3) null
//4) undefined
//5) NaN
// 전송버튼 눌렀을 때 아무것도 입력된게 없으면 alert창 띄우기
// 선택자.eq(index)로 선택자에 해당하는 여러개의 요소중 어떤 것을 선택할지 index로 정할 수 있다.
// 자바스크립트는 document.getElementById().value;로 값을 가져올 수 있고
// 제이쿼리는 $(선택자).val();로 값을 가져올 수 있다.
$("#gogo").on("click", function(e){ //(참고)$("form").on("submit", function(){})로 써도 똑같이 된다.
e.preventDefault(); //전송되는 이벤트를 전송 안되게 해준다.
$(".form-control").eq(0).val()
// 조건식 2개 이상을 동시에 비교하고 싶다면 &&와 ||를 사용
// &&는 둘다 참일 때 참이고 하나라도 거짓이면 거짓이다
// ||는 하나라도 참이면 참이고 두개다 거짓이어야 거짓이다
if($(".form-control").eq(0).val()=="" ||$(".form-control").eq(1).val()=="" ){
alert("아이디와 비밀번호를 입력해주세요");
}else if(Number($(".form-control").eq(0).val().length)>7){
//Number(여기다가 숫자로 만들고 싶은 문자열을 넣음) ===> Number()를 통해 문자열을 숫자로 바꿈
alert("아이디가 7자를 넘었습니다")
}else{
$("form").submit();
}
})
//input 이벤트
// <input>에서 일어나는 input 이벤트
// $("선택자").on("input", function(){ }
//유저가 선택자에 입력한 값이 변할 때 실행되는 이벤트
//change 이벤트
// $("선택자").on("change", function(){ }
//change이벤트는 <input>에 입력한 값이 바뀌고 포커스를 잃을 때 발생
//input 이벤트는 값이 변경될때마다 발생하고 change 이벤트는 값이 변경되고 포커스를 잃어야 발생
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>success.html
전송완료~~~~~~~~~~~~~
main.css
.main-bg{
padding: 100px 20px;
background: lightgray;
}
.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group {
display: none;
}
.show {
display: block;
}
/* 모달창 용 =====================*/
.black-bg {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, 0.5);
z-index: 5;
padding: 160px;
visibility: hidden;
/* 애니메이션 줄때 display: none 대용 이게 잘먹힌다
display:none은 html에서 없애는거고 visibility: hidden은 모습만 숨기는것
*/
opacity: 0;
/* 0은 완전히 투명해서 안보이고 1에 가까울수록 잘보임 */
/* position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록
아래로 내려갑니다. */
transition: all 1s;
/* 모든 속성이 변할때 1초가 걸리게함 */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
/* ==========================*/
.show-modal {
visibility: visible;
/* 애니메이션 줄때 display: block 대용 */
opacity: 1;
}강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기 (0) | 2022.10.02 |
|---|---|
| JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(7)-jQuery 사용법 간단정리 (0) | 2022.09.30 |
| JavaScript 입문과 웹 UI개발(6)-서브메뉴 만들어보기와 classList 다루기 (1) | 2022.09.30 |