jquery cdn을 작성하고 시작.
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
- jQuery에서는 어떤 대상을 선택한 뒤 작업을 시작한다.
- jQuery(실행대상).on(명령 = "이벤트 종류",콜백함수)
- jQuery는 자체적으로 ready라는 이벤트를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- jquery cdn -->
//jqyery를 사용하기 위해서는 head에서 cdn으로 불러와야 한다.
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
jquery 변천사
// $(document).on("ready",function(){});
// $(document).ready(function(){});
// $().ready(function(){});
$(function(){});
jQuery는 선택하는 작업부터 시작한다
ex).red-btn을 선택한 뒤 css를 color=red로 변경하라
$(".red-btn").css("color","red");
</script>
</head>
<body>
<div class="container-600">
<div class="row center">
<h1>제목</h1>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
//목표
//1. 아이디 입력창 입력 완료 시 정규표현식 검사 후 출력
//2. 비밀번호 입력창 입력 완료 시 정규표현식 검사 후 출력
//3. 비밀번호 확인창 입력 완료 시 비밀번호와 비교 후 출력
$("[name=userLogin]").click(function(e){
e.preventDefault();
});
//1.
// $("[name=memberId]").on("blur", function(){});
$("[name=memberId]").blur(function(){
//this == 아이디 입력창
var memberId = $(this).val();//this.value
var regex = /^[a-z][a-z0-9]{7,19}$/;
var isValid = regex.test(memberId);
if(isValid) {
// $(this).next().css("color", "green"); next는 다음을 뜻하고, span을 뜻함
// $(this).next().text("멋진 아이디입니다!");
$(this).next().css("color", "green")
.text("멋진 아이디입니다!");
}
else {
$(this).next()
.css("color", "red")
.text("아이디는 영문 소문자로 시작하며 숫자를 포함해 8~20자로 작성하세요");
}
});
//2
$("[name=memberPw]").blur(function(){
var regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$])[a-zA-Z0-9!@#$]{8,16}$/;
var isValid = regex.test($(this).val());
if(isValid) {
$(this).next()
.css("color","green")
.text("올바른 비밀번호 형식입니다");
}
else {
$(this).next()
.css("color", "red")
.text("비밀번호는 영문 대/소문자, 숫자, 특수문자를 반드시 포함해 8~16자로 작성하세요");
}
});
//3
$("#passwordRe").blur(function(){
var memberPw = $("[name=memberPw]").val();
var memberPwRe = $(this).val();
var isValid = memberPw == memberPwRe;
if(memberPw.length == 0) {//비밀번호 미입력 시
$(this).next().css("color", "red")
.text("비밀번호를 먼저 입력하세요");
}
else if(isValid) {//통과
$(this).next().css("color", "green")
.text("비밀번호가 일치합니다");
}
else {//거절
$(this).next().css("color", "red")
.text("비밀번호가 일치하지 않습니다");
}
});
});
</script>
</head>
<body>
<form autocomplete="off">
<div class="container-500">
<div class="row center">
<h1>회원 가입</h1>
</div>
<div class="row">
<label>아이디</label>
<input type="text" name="memberId" class="form-input w-100">
<span></span>
</div>
<div class="row">
<label>비밀번호</label>
<input type="text" name="memberPw" class="form-input w-100">
<span></span>
</div>
<!--
(추가)
비밀번호 확인 입력창
- 비밀번호 확인은 서버로 전송되지 않으므로 name이 있으면 안된다
-->
<div class="row">
<label>비밀번호 확인</label>
<input type="text" id="passwordRe" class="form-input w-100">
<span></span>
</div>
<div class="row">
<button type="submit" class="form-btn w-100 positive">가입</button>
</div>
</div>
</form>
</body>
</html>!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/load.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/commons.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
//목표 : 등록 버튼을 누르면 입력한 내용을 태그로 만들어 결과화면에 추가
/*
생성할 화면이 복잡해질 수록 코드만으로 생성은 어려워진다
미리 생성될 화면을 만들어서 보관해두고 불러오는 방식을 사용
(템플릿 방식)
*/
$(function(){
$("#add-btn").click(function(){
//입력값 불러오고 입력창 초기화
var item = $("#user-input").val();
$("#user-input").val("");
var html = $("#todo-template").html();
//console.log(html);
//문자열로 된 html을 실제 HTML로 해석(변환)하는 명령
var parse = $.parseHTML(html);
$(parse).find(".title").text(item);
$(parse).find(".fa-xmark").click(function(){
$(this).parent().remove();
});
$(".target").append(parse);
});
});
</script>
<!-- 템플릿 생성 -->
<script type="text/template" id="todo-template">
<div class="row">
<span class="title">????</span>
<i class="fa-solid fa-xmark"></i>
</div>
</script>
</head>
<body>
<div class="container-600">
<div class="row center">
<h1>오늘의 할 일</h1>
</div>
<div class="row center">
<input type="text" id="user-input" class="form-input">
<button class="form-btn positive" id="add-btn">등록</button>
</div>
<hr>
<!-- 할 일이 등록될 위치 -->
<div class="row center target"></div>
</div>
</body>
</html>