<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
//한줄 주석
/*
여러줄 주석
*/
//변수
//var let => 참조 주소로써 변수에 데이터를 저장한다
//1번과 2번은 잡스크립트에서 같은 역할임. 똑같이 객체화 시킨 데이터를 집어 넣음 (주소값ㅇ)
var num = new Number(10); //1번 객체화
var a = 10; //2번
a = 1.2;
var b = "hello";
var b = "안녕"; //동일한 변수의 이름에 값을 재할당 하는게 가능함
let c = 20;
// let c = '안녕'; // let은 동일한 이름으로 재할당 불가능
const d = true; //상수라 재선언 불가능
//d = fsle; //콘솔에서 오류남
//const e; // 선언과 동시에 값을 할당해야 한다
//clg > 자동완성
console.log(a);
console.log(b);
console.log(c);
console.log(d);
</script>
</head>
<body></body>
</html>
body부분
<body>
<div id="div1">
<div class="div2"><b>회원가입</b></div>
<form action="" method="get" onsubmit="return infoCheck()">
<!-- 아래에서 submit 동작이 이루어 졌을때 여기서 받겠다 -->
<!--submit버튼을 누르면 onsubmit이 실행되어 특정함수가 실행이 되고
특정함수의 return값이 true일 경우에만 폼을 전송한다
-->
<fieldset>
<label for="id"><p>아이디:</p></label>
<input type="text" name="userid" id="userid" class="cid" />
<br />
<br />
<label for="pw"><p>비밀번호:</p></label>
<input type="password" name="userpw" id="userpw" class="cid" />
<br />
<br />
<label for="pw1"><p>비밀번호 확인:</p></label>
<input type="password" id="checkpw" class="cid" />
</fieldset>
<div class="btn">
<input class="btn" type="submit" value="전송하기" />
<input class="btn" type="reset" value="재입력하기" />
</div>
</form>
</div>
</body>
head 태그 안쪽의 script
<script>
window.onload = function () {
//window.onload란?
//자바스크립트에서 페이지가 로드되면 자동으로 실행되는 전역콜백함수
//아이디만 받을 수 있음
let userid = document.getElementById("userid"); // 아이디값(userid)을 적어주면, 아이디값을 가지고 있는 태그요소를 변수(userid)에 담겠다 => 이 변수를 통해서 조작이 가능하다
let userpw = document.getElementById("userpw");
let checkpw = document.getElementById("checkpw");
userid.addEventListener("keyup", function () {
//keyup(키를 눌렀다가 땠을 때)이벤트가 발생했을때 함수를 호출하겠다
if (userid.value.length >= 8) {
userid.style.backgroundColor = "lightblue";
} else {
userid.style.backgroundColor = "lightpink";
}
});
checkpw.addEventListener("keyup", function () {
if (userpw.value == checkpw.value) {
checkpw.style.backgroundColor = "blue";
} else {
checkpw.style.backgroundColor = "red";
}
});
};
function infoCheck() {
//클래스 받을수 있고 아이디도 받을 수 있음// 대소문자 구분
let userid = document.querySelector("#userid");
let userpw = document.querySelector("#userpw");
let checkpw = document.querySelector("#checkpw");
console.log(userid.value);
console.log(userpw.value);
console.log(checkpw.value);
if (userid.value.length < 8) {
alert("ID는 8자 이상 써라!!");
return false; // 즉 8글자 아래라면 return false를 한다, 다음 코드로 넘어가지 않음(종료)
}
if (
userpw.value == null ||
checkpw.value == null ||
userpw.value == "" ||
checkpw == "" ||
userpw.value != checkpw.value
) {
alert("PW가 비어있거나 일치하지 않는다!!");
return false;
}
}
</script>
head 태그 안쪽의 style
<style>
body {
margin-top: 100px;
width: 100%;
height: 100%;
background-color: rgb(255, 240, 222);
}
.div2 {
text-align: center;
font-size: 40px;
margin-bottom: 20px;
color: rgb(247, 117, 70);
}
fieldset {
text-align: center;
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
flex-direction: column;
padding: 30px;
background-color: rgba(232, 223, 234, 0.71);
border-radius: 10px;
}
label > p {
font-size: 20px;
margin: 0px;
padding: 0px;
}
.cid {
margin: auto;
width: 150px;
height: 25px;
border-radius: 10px;
}
.btn {
padding: 10px;
text-align: center;
}
.btn > input {
background-color: rgb(243, 239, 176);
border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>예제00 연습</title>
<style>
h1{
text-align: center;
}
table{
border: solid 2px black;
width: 400px;
height: 400px;
margin: 0 auto;
padding-right: 10px;
font-size: large;
}
td{
width: 150px;
text-align: center;
}
input[type="text"], input[type="password"]{
width: 120px;
height: 30px
}
</style>
<script>
//이벤트 적용1) window.onload 방식
//window.onload = function(){}
//컬러 변환용
//여러개의 이벤트를 걸때, 실행이 안된다면
//1.위치확인 2. 모든 이벤ㅌ 작성후 확인
window.onload = function() {
let userid = document.getElementById('id');
let userpw = document.getElementById('pw');
let usercpw = document.getElementById('cpw');
userid.addEventListener('keyup',function(){
if(userid.value.length >= 8){
userid.style.backgroundColor = 'blue';
}else{
userid.style.backgroundColor = 'gray';
}
});
userpw.addEventListener('keyup',function(){
if(userpw.value.length >= 8){
userpw.style.backgroundColor = 'blue';
}else{
userpw.style.backgroundColor = 'yellow';
}
});
usercpw.addEventListener('keyup',function(){
if(usercpw.value.length >= 8){
usercpw.style.backgroundColor = 'blue';
}else{
usercpw.style.backgroundColor = 'pink';
}
});
}
//이벤트 적용) HTML 태크 이벤트 핸들러 방식
//입력 문구 확인용
//return : 함수의 실행을 종료하고, 해당 값을 호출한 곳으로 반환. 이 때 반환할 값이 없으면 undefined를 반환
//return false : 주로 이벤트 핸들러에서 사용. ex)폼 제출(onsubmit) 이벤트 =>return false;를 반환하면 폼의 기본 동작(즉, 제출)을 막음
function infoCheck() {
let userid = document.getElementById('id');
let userpw = document.getElementById('pw');
let usercpw = document.getElementById('cpw');
if(userid.value.length < 8) {
alert("8글자 이상 써라")
return false;
}
if(userpw.value == null || usercpw.value == null
|| userpw.value == '' || usercpw.value == ''
|| userpw.value != usercpw.value){
alert("PW가 비어있거나 일치하지 않는다")
return false;
}
return true;
}
</script>
</head>
<body>
<h1>회원가입</h1>
<table>
<form action="" method="get" onsubmit="return infoCheck();">
<!-- 제출을 시도할 때 infoCheck() 확인후 조건 만족하면 제출 -->
<tr>
<td><label for="id"><b>아이디</b></label></td>
<td><input type="text" name="n" id="id" placeholder="아이디는 8자 이상" ></td>
</tr>
<tr>
<td> <label for="pw"><b>비밀번호</b></label></td>
<td><input type="password" name="n" id="pw"></td>
</tr>
<tr>
<td> <label for=""><b>비밀번호 확인</b></label></td>
<td><input type="password" name="n" id="cpw"></td>
</tr>
<tr>
<td colspan="2"> <input type="submit" value="가입" class="btn">
<input type="reset" value="취소" class="btn"></td>
</tr>
</form>
</table>
</body>
</html>
// js 링크
<script src="./js_folder/jsTest.js"></script>
// cs 링크
<link rel="Stylesheet" href="../CSS/CSS_folder/style01.css" />
// html 링크
<a href="<https://naver.com>" target="_balsnk">네이버</a>
javascript는
: 순차적으로 출력한다