[JavaScript] 자바스크립트 기초 배우기 ②
by 효기’s
사이트 제목 변경하기
<!-- 제목 바꾸기 -->
<html>
<head>
<title>제목바꾸기</title>
<script language ="javascript">
var title = window.prompt("제목을 입력하세요.", "");
document.title = title;
</script>
</head>
</html>
배경색 변경하기
<!-- 배경색 바꾸기 -->
<html>
<head>
<title>배경색 바꾸기</title>
<script language ="javascript">
function changeBg(color){
document.bgColor = color;
}
</script>
</head>
<body>
<input type="radio" name="bgColor" value="lightyellow" onclick="changeBg(this.value)">노란색<br>
<input type="radio" name="bgColor" value="lightgreen" onclick="changeBg(this.value)">녹색<br>
<input type="radio" name="bgColor" value="lightblue" onclick="changeBg(this.value)">파란색<br>
<input type="radio" name="bgColor" value="red" onclick="changeBg(this.value)">빨간색<br>
</body>
</html>
getElementById, getElementsByname, getElementsByTagName
getElementById → html태그의 id 특정값을 이용하여 객체를 찾는다.
getElementsByname → name 특성값을 이용하여 객체를 찾는다.
getElementsByTagName → 태그 이름으로 객체를 찾는다.
<!--
getElementById html태그의 id 특정값을 이용하여 객체를 찾는다.
getElementsByname name 특성값을 이용하여 객체를 찾는다.
getElementsByTagName 태그 이름으로 객체를 찾는다.
-->
<html>
<head>
<title>배경색 바꾸기</title>
<script language ="javascript">
function sayHello(){
var textBox = document.getElementById("name");
if(textBox != null){
alert(textBox.value + "님 안녕하세요!");
}
}
</script>
</head>
<body>
<input type="text" name="text" id="name">
<button type="button" value="인사하기" onclick="sayHello()">인사하기</button>
</body>
</html>
getElementsByName 메서드로 객체 찾기
<!--getElementsByName 메서드로 객체 찾기 -->
<html>
<head>
<title>제일 좋아하는 과목은</title>
<script language ="javascript">
function submit(){
var textBox = document.getElementsByName("text");
for(var i = 0; i < textBox.length; i++){
if(textBox[i].checked){
alert(textBox[i].value + "과목을 좋아하시는군요!");
break;
}
}
}
</script>
</head>
<body>
<h2>제일 좋아하는 과목은?</h2>
<input type="checkbox" name="text" value="HTML">HTML<br>
<input type="checkbox" name="text" value="CSS">CSS<br>
<input type="checkbox" name="text" value="javascript">자바스크립트<br>
<input type="button" value="답안지 제출" onclick="submit()">
</body>
</html>
getElementsByTagName 메서드로 객체 찾기
<!-- getElementsByTagName 메서드로 객체 찾기 -->
<html>
<head>
<title>제일 좋아하는 과목은</title>
<script language ="javascript">
function submit(){
var textBox = document.getElementsByTagName("input");
for(var i = 0; i < textBox.length; i++){
if(textBox[i].type == "checkbox" && textBox[i].checked){
alert(textBox[i].value + "과목을 좋아하시는군요!");
break;
}
}
}
</script>
</head>
<body>
<h2>제일 좋아하는 과목은?</h2>
<input type="checkbox" name="text" value="HTML">HTML<br>
<input type="checkbox" name="text" value="CSS">CSS<br>
<input type="checkbox" name="text" value="javascript">자바스크립트<br>
<input type="button" value="답안지 제출" onclick="submit()">
</body>
</html>
createElement과 appendChild 사용하기
<!-- createElement과 appendChild 사용하기-->
<html>
<head>
<title>동적으로 테이블 만들기</title>
<script>
function makeFriends() {
var myFriends = window.prompt("친구가 몇 명 ?", "");
for (var i = 0; i < parseInt(myFriends); i++) {
var textBox = document.createElement("input");
var newLine = document.createElement("br");
textBox.type = "text";
document.body.appendChild(textBox);
document.body.appendChild(newLine);
}
}
</script>
</head>
<body onload="makeFriends()">
<h2>내 친구 나열</h2>
</body>
</html>
덧셈
<!-- 덧셈 -->
<html>
<head>
<title>내 친구 나열하기</title>
<script language="javascript">
function add() {
let num1 = document.getElementById("num1").value;
let num2 = document.getElementById("num2").value;
let result = parseInt(num1) + parseInt(num2);
document.getElementById("result").value = result;
}
</script>
</head>
<body onload="makeFriends()">
<input name="add" id="num1"> +
<input name="add" id="num2">
<input type="button" name="add" value="=" onclick="add()">
<input name="add" id="result">
</body>
</html>
리스트 제어하기
<!-- 리스트 제어하기 -->
<html>
<head>
<title>내 친구 나열하기</title>
<script language="javascript">
let arrayWindowVersion = new Array();
let arrayOfficeVersion = new Array();
arrayWindowVersion.push("윈도우 2000");
arrayWindowVersion.push("윈도우 XP");
arrayWindowVersion.push("윈도우 비스타");
arrayOfficeVersion.push("오피스 xp");
arrayOfficeVersion.push("오피스 2003");
arrayOfficeVersion.push("오피스 2007");
function setVersion(){
let objProduct = document.getElementById("product");
let objVersion = document.getElementById("version");
let selectedValue = objProduct.options[objProduct.selectedIndex].value;
while(objVersion.options.length > 1){
objVersion.options[1] = null;
}
switch(selectedValue){
case "Windows":
for(var i = 0; i < arrayWindowVersion.length; i++){
objVersion.options[objVersion.options.length] =
new Option(arrayWindowVersion[i], arrayWindowVersion[i]);
new Option(arrayWindowVersion[i], arrayWindowVersion[i]);
}
break;
case "Office":
for(var i = 0; i < arrayOfficeVersion.length; i++){
objVersion.options[objVersion.options.length] =
new Option(arrayOfficeVersion[i], arrayOfficeVersion[i]);
new Option(arrayOfficeVersion[i], arrayOfficeVersion[i]);
}
}
}
</script>
</head>
<body onload="makeFriends()" onchange="setVersion()">
<select id="product">
<option value="제품을 선택하세요.">제품을 선택하세요.</option>
<option value="Windows">윈도우</option>
<option value="Office">오피스</option>
</select>
<select id="version">
<option value="버전을 선택하세요.">버전을 선택하세요.</option>
</select>
</body>
</html>
시계
<!-- 시계 -->
<html>
<head>
<style>
#divClock{
font-size: 50;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: aquamarine;
}
</style>
<script>
function showClock(){
let currentDate = new Date();
let divClock = document.getElementById("divClock");
let hours = currentDate.getHours();
let ampm = hours >= 12 ? '오후' : '오전';
if (hours > 12) {
hours -= 12;
} else if (hours === 0) {
hours = 12;
}
let msg = "현재 시간: " + ampm + " " + currentDate.getHours() + "시 "
msg += currentDate.getMinutes() + "분 ";
msg += currentDate.getSeconds() + "초 ";
divClock.innerText = msg;
setTimeout(showClock, 1000);
}
</script>
</head>
<body onload="showClock()">
<div id="divClock" class="clock"></div>
</body>
</html>
접속시간 표시하기
<!-- 접속시간 표시하기 -->
<html>
<head>
<title>접속시간 표시하기</title>
<style>
.clock{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 24pt;
color: aqua;
}
</style>
<script>
let connectedDate = new Date;
function showElapsedTime(){
let divClock = document.getElementById("divClock");
let currentDate = new Date();
let result = Math.ceil((currentDate - connectedDate) / 1000);
divClock.innerText = "이 페이지에 접속 후 " + result;
divClock.innerText += "초가 지났습니다.";
setTimeout(showElapsedTime, 1000);
}
</script>
</head>
<body onload="showElapsedTime()">
<div id="divClock" class="clock"></div>
</body>
</html>
글자 하나씩만 나오게하기
<!-- 글자 하나씩만 나오게하기 -->
<html>
<head>
<script>
let text = "안녕하세요? 만나서 반갑습니다.";
let index = 0;
let intervalId;
function showText() {
let divText = document.getElementById("divText");
if (index < text.length) { // 인덱스가 text 길이보다 작아야 출력
divText.innerHTML += text[index];
index++;
} else {
divText.innerHTML = ' ';
index = 0; // 초기화하면서 반복
}
}
window.onload = function () {
intervalId = setInterval(showText, 500); // 애니매이션 같이 반복해서 실행하는 함수의 지연설정
}
</script>
<style>
#divText {
color: aqua;
font-size: 50pt;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<div id="divText"></div>
</body>
</html>
방문할 때마다 변하는 이미지
<!-- 방문할 때마다 변하는 이미지 -->
<html>
<head>
<title>방문할 때마다 변하는 이미지</title>
</head>
<script>
let imgArray = new Array();
imgArray[0] = "1.jpg";
imgArray[1] = "2.jpg";
imgArray[2] = "3.jpg";
imgArray[3] = "4.jpg";
imgArray[4] = "5.jpg";
function show(){
let imgNum = Math.round(Math.random() * 5);
let objImg = document.getElementById("introImg");
objImg.src = imgArray[imgNum];
}
</script>
<body onload="show()">
<img id="introImg" border="0">
</body>
</html>
실습
<html>
<head>
<style>
#divText{
font-family:Arial, Helvetica, sans-serif
}
</style>
<script>
function nameshow(){
let divText = document.getElementById("divText")
let inputText = document.querySelector("input[type='text']");
let colorSelect = document.querySelector("select[name='color']");
let sizeSelect = document.querySelector("select[name='size']");
let lineCheckbox = document.querySelector("input[value='취소선']");
let bigCheckbox = document.querySelector("input[value='크게']");
let smallCheckbox = document.querySelector("input[value='작게']");
let thickCheckbox = document.querySelector("input[value='두껍게']");
let gtCheckbox = document.querySelector("input[value='기울임']");
let supCheckbox = document.querySelector("input[value='위첨자']");
let subCheckbox = document.querySelector("input[value='아래첨자']");
let lowerCheckbox = document.querySelector("input[value='소문자로']");
let upperCheckbox = document.querySelector("input[value='대문자로']");
divText.innerText = inputText.value;
divText.style.color = colorSelect.value;
if(lineCheckbox.checked){
divText.style.textDecoration = "line-through";
}else{
divText.style.textDecoration="none"
}
if (bigCheckbox.checked) {
divText.style.fontSize = "500pt"; // example size for big text
} else if (smallCheckbox.checked) {
divText.style.fontSize = "10pt"; // example size for small text
} else {
divText.style.fontSize = sizeSelect.value + 'pt'; // revert to selected size if not checked
}
if(thickCheckbox.checked){
divText.style.fontWeight = "bold";
}else{
divText.style.fontWeight="normal";
}
if(gtCheckbox.checked){
divText.style.fontStyle = "italic";
}else{
divText.style.fontStyle="none"
}
if (supCheckbox.checked) {
divText.innerHTML = '<sup>' + divText.innerText + '</sup>';
}
if (subCheckbox.checked) {
divText.innerHTML = '<sub>' + divText.innerText + '</sub>';
}
if(lowerCheckbox.checked){
divText.innerText = divText.innerText.toLowerCase();
}
if(upperCheckbox.checked){
divText.innerText = divText.innerText.toUpperCase();
}
}
</script>
</head>
<body onload="nameshow()">
<input type="text">
<input type="button" value="미리 보기" onclick="nameshow()"><br>
색상:
<select name="color">
<option value="blue">파랑</option>
<option value="red">빨강</option>
<option value="green">초록색</option>
</select>
<br>
크기:
<select name="size">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
</select>
<br>
<input type="checkbox" value="취소선">취소선
<input type="checkbox" value="크게">크게
<input type="checkbox" value="작게">작게
<input type="checkbox" value="두껍게">두껍게
<input type="checkbox" value="기울임">기울임
<br>
<input type="checkbox" value="위첨자">위첨자
<input type="checkbox" value="아래첨자">아래첨자
<input type="checkbox" value="소문자로">소문자로
<input type="checkbox" value="대문자로">대문자로
<div id="divText"></div>
</body>
</html>
회원가입 페이지 만들기
day03_index.html
<!DOCTYPE html>
<html>
<head>
<title>회원 가입 페이지</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
border-color: #baebff;
}
</style>
<script>
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
document.getElementById('zip-code').value = data.zonecode;
document.getElementById('address-1').value = data.address;
document.getElementById('address-1-1').value = data.jibunAddress;
document.getElementById('address-2').focus();
}
}).open();
}
</script>
</head>
<body>
<script src="day03_index.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<form onsubmit="return isThatRight()">
<table width="650" height="500" border="1" align="center" name="table">
<tr>
<td align="center" bgcolor="#baebff" colspan="2">회원 기본 정보</b></td>
</tr>
<tr>
<td align="center"><b>아이디:</b> </td>
<td><input type="text" id="id" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호: </b></td>
<td><input type="password" id="pw" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호 확인: </b></td>
<td><input type="password" id="pwCheck"></td>
</tr>
<tr>
<td align="center"><b>메일주소: </b></td>
<td><input type="email" id="email"> 예) id@domain.com</td>
</tr>
<tr>
<td align="center"><b>이름: </b></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td align="center"><b>주소: </b></td>
<td>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="주소찾기"><br>
<input type="text" id="address-1" placeholder="도로명주소" size="30" readonly>
<input type="text" id="address-1-1" placeholder="지번주소" size="30" readonly><br>
<input type="text" id="address-2" placeholder="상세주소" size="30">
</td>
</tr>
<tr>
<td align="center" bgcolor="#baebff" colspan="2">개인 신상 정보</td>
</tr>
<tr>
<td align="center"><b>주민등록번호: </b></td>
<td><input type="text" id="RRN"> 예) 1234561234567</td>
</tr>
<tr>
<td align="center"><b>생일: </b></td>
<td>
<input size="4" id="year">년
<select type="month" id="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
월
<select id="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
일
</td>
</tr>
<tr>
<td align="center"><b>관심분야: </b></td>
<td>
<input type="checkbox" name="관심분야">컴퓨터
<input type="checkbox" name="관심분야">인터넷
<input type="checkbox" name="관심분야">여행
<input type="checkbox" name="관심분야">영화감상
<input type="checkbox" name="관심분야">음악감상
</td>
</tr>
<tr>
<td align="center" height="300"><b>자기소개: </b></td>
<td><textarea id="intro" name="intro" rows="10" cols="50"></textarea></td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력" align="center">
</div>
</form>
</body>
</html>day03_index.js
function isValidId(id) {
// 아이디의 길이가 4에서 12 사이인지 확인
if (id.length < 4 || id.length > 12) {
return false;
}
// 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
for (let i = 0; i < id.length; i++) {
let char = id[i];
if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 아이디로 판단
return true;
}
function isValidPw(pw) {
// 아이디의 길이가 4에서 12 사이인지 확인
if (pw.length < 4 || pw.length > 12) {
return false;
}
// 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
for (let i = 0; i < pw.length; i++) {
let char = pw[i];
if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 아이디로 판단
return true;
}
function isValidName(name) {
// 이름의 길이가 2에서 4 사이인지 확인
if (name.length < 2 || name.length > 4) {
return false;
}
// 모든 문자가 한글인지 확인
for (let i = 0; i < name.length; i++) {
let charCode = name.charCodeAt(i);
if (!(charCode >= 0xAC00 && charCode <= 0xD7A3)) { // '가'와 '힣'의 유니코드 범위
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 이름으로 판단
return true;
}
function isValidEmail(email) {
// '@' 기호를 기준으로 분리
let parts = email.split('@');
// '@'가 하나만 있는지, 그리고 아이디와 도메인 부분이 존재하는지 확인
if (parts.length !== 2 || parts[0] === '' || parts[1] === '') {
return false;
}
// 도메인 부분을 '.'으로 분리
let domainParts = parts[1].split('.');
// '.'가 적어도 하나 있으며, 마지막 도메인 부분이 1~3글자인지 확인
if (domainParts.length < 2 || domainParts[domainParts.length - 1].length < 1 || domainParts[domainParts.length - 1].length > 3) {
return false;
}
// 위의 조건들을 모두 만족하면 유효한 이메일로 판단
return true;
}
function isThatRight(){
//id 유효성 검사
const inputId = document.getElementById("id");
if (inputId.value == "") {
alert("아이디를 입력하세요.");
inputId.focus();
return false;
} else if (!isValidId(inputId.value)) {
alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
inputId.value = "";
inputId.focus();
return false;
}
//pw 유효성 검사
const inputPw = document.getElementById("pw");
if (inputPw.value == "") {
alert("비밀번호를 입력하세요.");
inputPw.focus();
return false;
} else if (!isValidPw(inputPw.value)) {
alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!");
inputPw.value = "";
inputPw.focus();
return false;
}
//pwCheck 유효성 검사
const inputPwCheck = document.getElementById("pwCheck");
if (inputPw.value !== inputPwCheck.value) {
alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
inputPwCheck.value = "";
inputPwCheck.focus();
return false;
}
//이름 유효성 검사
const inputName = document.getElementById("name");
if (inputName.value == "") {
alert("이름을 입력하세요.");
inputName.value = "";
inputName.focus();
return false;
} else if (!isValidName(inputName.value)) {
alert("이름이 올바르지 않습니다.");
inputName.value = "";
inputName.focus();
return false;
}
const inputAdress1 = document.getElementById("zip-code");
if (inputAdress1.value == "") {
alert("우편번호를 입력하세요.");
inputAdress1.value = "";
inputAdress1.focus();
return false;
}
const inputAdress2 = document.getElementById("address-2");
if (inputAdress2.value == "") {
alert("상세주소를 입력하세요.");
inputAdress2.value = "";
inputAdress2.focus();
return false;
}
// 주민등록번호
const userInfo = document.getElementById("RRN");
// 아무것도 입력하지 않았을때
if (userInfo.value == "") {
alert("주민번호를 입력하세요.");
userInfo.focus();
return false;
};
// 주민번호 13자리인지 확인한다.
if (userInfo.value.length != 13) {
alert("주민번호가 올바르지 않습니다.");
return false;
}
let sum = 0;
const weights = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
// 마지막 자리 제외하고 반복
for (let i = 0; i < userInfo.value.length - 1; i++) {
// 숫자인지 확인
if (userInfo.value.charAt(i) < '0' || userInfo.value.charAt(i) > '9') {
alert("주민번호가 올바르지 않습니다.");
return false;
}
// 각 자리수에 가중치 곱해서 합산
sum += parseInt(userInfo.value.charAt(i)) * weights[i];
}
sum = (11 - (sum % 11)) % 10; // %10으로 한자리 체크 디지트를 만듬
// 체크디지트랑 주민번호 끝자리랑 비교
if (sum !== parseInt(userInfo.value.charAt(12))) {
alert("주민번호가 올바르지 않습니다.");
return false;
}
// 생년월일 검사 및 자동입력
const yearcheck = document.getElementById("year");
const monthcheck = document.getElementById("month");
const daycheck = document.getElementById("day");
// 앞에 숫자가 19인경우 1, 2
let birthYearPrefix = "19";
// 앞에 숫자가 20인경우 3, 4
if(parseInt(userInfo.value.charAt(6)) > 2){
birthYearPrefix="20";
}
yearcheck.value = birthYearPrefix + userInfo.value.substring(0, 2);
if(userInfo.value.substring(2, 3) == 0){
monthcheck.value = userInfo.value.substring(3 ,4);
}
else{
monthcheck.value = userInfo.value.substring(2 ,4);
}
if(userInfo.value.substring(4, 5) == 0){
daycheck.value = userInfo.value.substring(5 ,6);
}
else{
daycheck.value = userInfo.value.substring(4 ,6);
}
//이메일 유효성 검사
const inputEmail = document.getElementById("email");
if (inputEmail.value == "") {
alert("이메일을 입력하세요.");
inputEmail.focus();
return false;
} else if (!isValidEmail(inputEmail.value)) {
alert("이메일이 올바르지 않습니다.");
inputEmail.value = "";
inputEmail.focus();
return false;
}
//자기소개 유효성 검사
const inputIntro = document.getElementById("intro");
if (inputIntro.value == "") {
alert("자기소개를 입력하세요.");
inputIntro.focus();
return false;
} else if (!(inputIntro.value.length >= 10 && inputIntro.value.length <= 300)) {
alert("자기소개는 10자 이상 300자 이하로 입력해야 합니다.");
inputIntro.focus();
return false;
}
let checkboxes = document.querySelectorAll('input[type="checkbox"][name="관심분야"]');
let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
if (!checkedOne) {
alert("적어도 하나 이상의 관심 분야를 선택해주세요.");
return false;
}
}
유효성 검사를 적용한 회원가입 페이지 만들기
index.html (일반 표현식)
<!DOCTYPE html>
<html>
<head>
<title>회원 가입 페이지</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
border-color: #baebff;
}
</style>
<script>
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
document.getElementById('zip-code').value = data.zonecode;
document.getElementById('address-1').value = data.address;
document.getElementById('address-1-1').value = data.jibunAddress;
document.getElementById('address-2').focus();
}
}).open();
}
</script>
</head>
<body>
<script src="index.js"></script>
<script action="mailto:gmldus0814@naver.com?subject=안녕하세요"
src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<form onsubmit="return isThatRight()">
<table width="650" height="500" border="1" align="center" name="table">
<tr>
<td align="center" bgcolor="#baebff" colspan="2">회원 기본 정보</b></td>
</tr>
<tr>
<td align="center"><b>아이디:</b> </td>
<td><input type="text" id="id" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호: </b></td>
<td><input type="password" id="pw" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호 확인: </b></td>
<td><input type="password" id="pwCheck"></td>
</tr>
<tr>
<td align="center"><b>메일주소: </b></td>
<td><input type="email" id="email"> 예) id@domain.com</td>
</tr>
<tr>
<td align="center"><b>이름: </b></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td align="center"><b>주소: </b></td>
<td>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="주소찾기"><br>
<input type="text" id="address-1" placeholder="도로명주소" size="30" readonly>
<input type="text" id="address-1-1" placeholder="지번주소" size="30" readonly><br>
<input type="text" id="address-2" placeholder="상세주소" size="30">
</td>
</tr>
<tr>
<td align="center" bgcolor="#baebff" colspan="2">개인 신상 정보</td>
</tr>
<tr>
<td align="center"><b>주민등록번호: </b></td>
<td><input type="text" id="RRN"> 예) 1234561234567</td>
</tr>
<tr>
<td align="center"><b>생일: </b></td>
<td>
<input size="4" id="year">년
<select type="month" id="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
월<select id="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
일
</td>
</tr>
<tr>
<td align="center"><b>관심분야: </b></td>
<td>
<input type="checkbox" name="관심분야">컴퓨터
<input type="checkbox" name="관심분야">인터넷
<input type="checkbox" name="관심분야">여행
<input type="checkbox" name="관심분야">영화감상
<input type="checkbox" name="관심분야">음악감상
</td>
</tr>
<tr>
<td align="center" height="300"><b>자기소개: </b></td>
<td><textarea id="intro" name="intro" rows="10" cols="50"></textarea></td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력" align="center">
</div>
</form>
</body>
</html>index.js (일반표현식)
// 유효성 검사를 함수로 정의
function isValidId(id) {
// 아이디의 길이가 4에서 12 사이인지 확인
if (id.length < 4 || id.length > 12) { // 아이디 길이가 4 이하거나 12 이상일때 false
return false;
}
// 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
for (let i = 0; i < id.length; i++) {
let char = id[i]; // 인덱스 i에 해당하는 문자를 char에 할당하고
if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
// 대소문자, 숫자가 아니면 false를 합니다.
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 아이디로 판단
return true;
}
function isValidPw(pw) {
// 같은 방식으로 아이디의 길이가 4에서 12 사이인지 확인
if (pw.length < 4 || pw.length > 12) {
return false;
}
// 모든 문자가 알파벳 대소문자 또는 숫자인지 확인
for (let i = 0; i < pw.length; i++) {
let char = pw[i];
if (!(char >= 'a' && char <= 'z') && !(char >= 'A' && char <= 'Z') && !(char >= '0' && char <= '9')) {
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 아이디로 판단
return true;
}
function isValidName(name) {
// 이름의 길이가 2에서 4 사이인지 확인
if (name.length < 2 || name.length > 4) {
return false;
}
// 모든 문자가 한글인지 확인
for (let i = 0; i < name.length; i++) {
let charCode = name.charCodeAt(i); // name에 있는 문자의 유니코드 값을 charCode 변수에 넣습니다.
if (!(charCode >= 0xAC00 && charCode <= 0xD7A3)) { // '가'와 '힣'의 유니코드 범위를통해 문자가 한글인지 확인합니다.
return false;
}
}
// 위의 조건들을 모두 만족하면 유효한 이름으로 판단
return true;
}
function isValidEmail(email) {
// '@' 기호를 기준으로 분리해서 parts 변수에 넣습니다.
let parts = email.split('@');
// '@'가 하나만 있는지, 그리고 아이디와 도메인 부분이 존재하는지 확인
// parts[0]부분이 아이디부분이고 parts[1]부분이 도메인 부분입니다.
if (parts.length !== 2 || parts[0] === '' || parts[1] === '') {
return false;
}
// 도메인 부분을 '.'으로 분리
let domainParts = parts[1].split('.');
// '.'가 적어도 하나 있으며, 마지막 도메인 부분이 비어있지 않은지 확인
if (domainParts.length < 2 || domainParts[domainParts.length - 1] === '') {
return false;
}
// 위의 조건들을 모두 만족하면 유효한 이메일로 판단
return true;
}
function isThatRight() {
//id 유효성 검사
const inputId = document.getElementById("id"); // 아이디를 가져와서 inputId 변수에 넣고
if (inputId.value == "") { // id 텍스트가 비어있으면
alert("아이디를 입력하세요."); // 아이디 입력 경고창 팝업
inputId.focus();
return false;
} else if (!isValidId(inputId.value)) { // 아이디 유효성 검사 함수가 아닌경우
alert("아이디는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!"); // 경고창 팝업
inputId.value = ""; // 텍스트 비움
inputId.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
//pw 유효성 검사
const inputPw = document.getElementById("pw"); // pw 아이디를 가져와서 inputpw 변수에 넣고
if (inputPw.value == "") { // 비밀번호가 비어있을경우
alert("비밀번호를 입력하세요."); // 경고창 팝업
inputPw.focus();
return false;
} else if (!isValidPw(inputPw.value)) { // 비밀번호 유효성 검사 함수가 아닌경우
alert("비밀번호는 영문 대소문자와 숫자 4~12자리로 입력해야 합니다!"); // 경고창 팝업
inputPw.value = ""; // 텍스트 비움
inputPw.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
if (inputId.value === inputPw.value) { // 텍스트에 아이디와 비밀번호가 같은경우
alert("아이디와 비밀번호가 같을 수 없습니다."); // 경고창 팝업
inputPw.value = ""; // 텍스트 비움
inputPw.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
//pwCheck 유효성 검사
const inputPwCheck = document.getElementById("pwCheck"); // pwCheck 아이디로 내용을 가져와서 inputPwcheck 변수에 넣습니다.
if (inputPw.value !== inputPwCheck.value) { // 일치여부를 확인하고 경고창을 띄웁니다.
alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
inputPwCheck.value = ""; // 일치하지 않으면 비밀번호 확인 내용을 지웁니다.
inputPwCheck.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
//이메일 유효성 검사
const inputEmail = document.getElementById("email"); // email 아이디로 내용을 가져와서 inputEmail 변수에 넣습니다.
if (inputEmail.value == "") { // 이메일 칸에 비어 있을 경우
alert("이메일을 입력하세요."); // 경고창 팝업
inputEmail.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
} else if (!isValidEmail(inputEmail.value)) { // 이메일 유효성 검사에서 아닌경우
alert("이메일이 올바르지 않습니다."); // 경고창 팝업
inputEmail.value = ""; // 텍스트 비움
inputEmail.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
//이름 유효성 검사
const inputName = document.getElementById("name"); // name 아이디로 내용을 가져와서 inputName 변수에 넣습니다.
if (inputName.value == "") { // 이름 칸에 비어 있을 경우
alert("이름을 입력하세요."); // 경고창 팝업
inputName.value = ""; // 텍스트 비움
inputName.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
} else if (!isValidName(inputName.value)) { // 이름 유효성 검사에서 아닌경우
alert("이름이 올바르지 않습니다."); // 경고창 팝업
inputName.value = ""; // 텍스트 비움
inputName.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
const inputAdress1 = document.getElementById("zip-code"); // zip-code 아이디로 내용을 가져와서 inputAdress1 변수에 넣습니다.
if (inputAdress1.value == "") { // 우편변호 칸에 비어 있을 경우
alert("우편번호를 입력하세요."); // 경고창 팝업
inputAdress1.value = ""; // 텍스트 비움
inputAdress1.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
const inputAdress2 = document.getElementById("address-2"); // address-2 아이디로 내용을 가져와서 inputAdress2 변수에 넣습니다.
if (inputAdress2.value == "") { // 상세주소 칸에 비어 있을 경우
alert("상세주소를 입력하세요."); // 경고창 팝업
inputAdress2.value = ""; // 텍스트 비움
inputAdress2.focus(); // 입력 필드에 자동으로 포커스
return false;
}
// 주민등록번호
const userInfo = document.getElementById("RRN"); // RRN 아이디로 내용을 가져와서 userInfo 변수에 넣습니다.
if (userInfo.value == "") { // 아무것도 입력하지 않았을때
alert("주민번호를 입력하세요."); // 경고창 팝업
userInfo.focus();
return false; // 입력 필드에 자동으로 포커스 이동
};
// 주민번호 13자리인지 확인한다.
if (userInfo.value.length != 13) {
alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
return false;
}
let sum = 0;
const weights = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5]; // weights 변수에 값을 입력
// 마지막 자리 제외하고 반복
for (let i = 0; i < userInfo.value.length - 1; i++) {
// 숫자인지 확인
if (userInfo.value.charAt(i) < '0' || userInfo.value.charAt(i) > '9') {
alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
return false;
}
// 각 자리수에 가중치 weights를 각각 곱해서 합산
sum += parseInt(userInfo.value.charAt(i)) * weights[i];
}
sum = (11 - (sum % 11)) % 10; // 합을 11로 나눈 나머지값에 11을빼고 10나머지로 한자리수 체크 디지트를 만듬
// 체크디지트랑 주민번호 끝자리랑 비교
if (sum !== parseInt(userInfo.value.charAt(12))) {
alert("주민번호가 올바르지 않습니다."); // 경고창 팝업
return false;
}
// 생년월일 검사 및 자동입력
// 각각 년 월 일별로 아이디를 가져옵니다.
const yearcheck = document.getElementById("year");
const monthcheck = document.getElementById("month");
const daycheck = document.getElementById("day");
// 19년도는 남자가 1, 여자가2이고 20년도에는 2보다 이상입니다.
let birthYearPrefix = "19";
if (parseInt(userInfo.value.charAt(6)) > 2) {
birthYearPrefix = "20";
}
// birthYearPrefix와 문자열 처음 두글자를 합쳐서 yearcheck 값으로 설정
yearcheck.value = birthYearPrefix + userInfo.value.substring(0, 2);
// userInfo의 세번째 글자가 0이면
if (userInfo.value.substring(2, 3) === 0) {
monthcheck.value = userInfo.value.substring(3, 4); // 4번째 글자를 가져와서 monthcheck에 설정
}
else { // 아닐경우
monthcheck.value = userInfo.value.substring(2, 4); // 3번째와 4번째 글자를 가져와서 설정한다.
} // 0으로 시작하는 사람과 1로 시작하는 사람을 구분하기 위함이다.
// 일도 같은 방식으로 설정한다.
if (userInfo.value.substring(4, 5) === 0) { // 4번째 글자가 0이면
daycheck.value = userInfo.value.substring(5, 6); //5번째 글자를 가져와서 day에 설정
}
else { // 또는
daycheck.value = userInfo.value.substring(4, 6); // 5번째와 6번째 글자를 가져와서 설정.
}
// 관심분야라는 이름을 가진 체크박스 요소를 선택한다.
let checkboxes = document.querySelectorAll('input[type="checkbox"][name="관심분야"]');
// 선택된 체크박스 중 최소 하나 이상 선택되어 있는지 확인
let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
if (!checkedOne) { // 최소 하나 이상 선택되어있지 않다면
alert("적어도 하나 이상의 관심 분야를 선택해주세요."); // 경고창 팝업
return false;
}
//자기소개 유효성 검사
const inputIntro = document.getElementById("intro"); // intro 아이디를 가져와서 inputIntro 변수에 설정한다.
if (inputIntro.value == "") { // 비어있을경우
alert("자기소개를 입력하세요."); // 경고창 팝업
inputIntro.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
// 10 이상 300 이하로 입력이 되지 않았을때
} else if (!(inputIntro.value.length >= 10 && inputIntro.value.length <= 300)) {
alert("자기소개는 10자 이상 300자 이하로 입력해야 합니다."); // 경고창 팝업
inputIntro.focus(); // 입력 필드에 자동으로 포커스 이동
return false;
}
alert("회원가입이 완료되었습니다."); // 마무리 경고창
}정규표현식 index.html
<!DOCTYPE html>
<html>
<head>
<title>회원 가입 페이지</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
border-color: #baebff;
}
</style>
</head>
<body>
<script src="script.js"></script>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<form action="mailto:gmldus0814@naver.com?subject=안녕하세요" onsubmit="return validateform();">
<table width="650" height="500" border="1" align="center" name="table">
<tr>
<td align="center" bgcolor="#baebff" colspan="2">회원 기본 정보</b></td>
</tr>
<tr>
<td align="center"><b>아이디:</b> </td>
<td><input type="text" id="id" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호: </b></td>
<td><input type="password" id="pw" maxlength="12" minlength="4"> 4~12자의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td align="center"><b>비밀번호 확인: </b></td>
<td><input type="password" id="pwCheck"></td>
</tr>
<tr>
<td align="center"><b>메일주소: </b></td>
<td><input type="email" id="email"> 예) id@domain.com</td>
</tr>
<tr>
<td align="center"><b>이름: </b></td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td align="center"><b>주소: </b></td>
<td>
<input type="text" id="zip-code" placeholder="우편번호" readonly>
<input type="button" onclick="execDaumPostcode()" value="주소찾기"><br>
<input type="text" id="address-1" placeholder="도로명주소" size="30" readonly>
<input type="text" id="address-1-1" placeholder="지번주소" size="30" readonly><br>
<input type="text" id="address-2" placeholder="상세주소" size="30">
</td>
</tr>
<tr>
<td align="center" bgcolor="#baebff" colspan="2">개인 신상 정보</td>
</tr>
<tr>
<td align="center"><b>주민등록번호: </b></td>
<td><input type="text" id="RRN"> 예) 1234561234567</td>
</tr>
<tr>
<td align="center"><b>생일: </b></td>
<td>
<input type="text" size="4" id="year">년
<select type="month" id="month">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
월
<select id="day">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
일
</td>
</tr>
<tr>
<td align="center"><b>관심분야: </b></td>
<td>
<input type="checkbox" name="관심분야">컴퓨터
<input type="checkbox" name="관심분야">인터넷
<input type="checkbox" name="관심분야">여행
<input type="checkbox" name="관심분야">영화감상
<input type="checkbox" name="관심분야">음악감상
</td>
</tr>
<tr>
<td align="center" height="300"><b>자기소개: </b></td>
<td><textarea id="intro" name="intro" rows="10" cols="50"></textarea></td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력" align="center">
</div>
</form>
</body>
</html>정규표현식 script.js
function validateform() {
var id = document.getElementById("id");
var idRegExp = /^[a-zA-Z0-9]{4,12}$/;
var pw = document.getElementById("pw");
var pwRegExp = /^[a-zA-Z0-9]{4,12}$/;
var pwCheck = document.getElementById("pwCheck");
var name = document.getElementById("name");
var nameRegExp = /^[가-힣]{2,4}$/;
var RRN = document.getElementById("RRN");
var RRNRegExp = /^[0-9]{6,6}[0-9]{7,7}$/;
var year = document.getElementById("year");
var month = document.getElementById("month");
var day = document.getElementById("day");
var email = document.getElementById("email");
var emailRegExp = /^[a-zA-Z0-9_]+[A-Za-z0-9]*[@]{1}[A-Za-z0-9]+[A-Za-z0-9]*[.]{1}[A-Za-z]{1,3}$/;
var intro = document.getElementById("intro");
//아이디 유효성 검사
if (id.value == "") {
alert("아이디를 입력하세요");
id.focus();
return false;
}
if (!idRegExp.test(id.value)) { // 정규표현식 idRegExp를 사용하여 입력된 id값이 조건을 만족하는지 테스트하는데 조건이 만족하지않으면 참.
alert("아이디는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
id.focus();
id.value = "";
return false;
}
//비밀번호 유효성검사
if (pw.value == "") {
alert("비밀번호를 입력하세요");
pw.focus();
return false;
}
if (!pwRegExp.test(pw.value)) {
alert("비밀번호는 4~12자의 영문 대소문자와 숫자로만 입력해야 합니다.");
pw.focus();
pw.value = "";
return false;
}
if (pw.value == id.value) {
alert("아이디와 비밀번호를 다르게 입력하세요.");
pw.value = "";
pwCheck.value = "";
pw.focus();
return false;
}
//비밀번호 확인 유효성검사
if (pwCheck.value == "") {
alert("비밀번호 확인을 입력하세요");
pwCheck.focus();
return false;
}
if (pw.value != pwCheck.value) {
alert("비밀번호가 일치하지 않습니다.");
pwCheck.focus();
return false;
}
//이메일 유효성검사
if (email.value == "") {
alert("이메일을 입력하세요");
email.focus();
return false;
}
if (!emailRegExp.test(email.value)) {
alert("이메일 형식이 올바르지 않습니다.");
email.focus();
return false;
}
//이름 유효성검사
if (name.value == "") {
alert("이름을 입력하세요");
name.focus();
return false;
}
if (!nameRegExp.test(name.value)) {
alert("이름은 2~4자의 한글로만 입력해야 합니다.");
name.focus();
return false;
}
//주소 검사
const inputAdress1 = document.getElementById("zip-code");
if (inputAdress1.value == "") {
alert("우편번호를 입력하세요.");
inputAdress1.value = "";
inputAdress1.focus();
return false;
}
const inputAdress2 = document.getElementById("address-2");
if (inputAdress2.value == "") {
alert("상세주소를 입력하세요.");
inputAdress2.value = "";
inputAdress2.focus();
return false;
}
//주민등록번호 유효성검사
if (RRN.value == "") {
alert("주민등록번호를 입력하세요");
RRN.focus();
return false;
}
if (!RRNRegExp.test(RRN.value)) {
alert("주민등록번호는 13자리로 입력해야 합니다.");
RRN.focus();
return false;
}
if (RRN.value != "") {
var birthYear = RRN.value.substring(0, 2); // 주민등록번호 앞 2자리
var birthMonth = RRN.value.substring(2, 4); // 주민등록번호 3번째부터 4자리
var birthDay = RRN.value.substring(4, 6); // 주민등록번호 5번째부터 6자리
// 1900년대 출생자와 2000년대 출생자 구분
parseInt(birthYear) > 30 ? birthYear = "19" + birthYear : birthYear = "20" + birthYear;
year.value = birthYear;
RRN.value.substring(2, 3) == 0 ? birthMonth = RRN.value.substring(3, 4) : birthMonth = RRN.value.substring(2, 4);
RRN.value.substring(4, 5) == 0 ? birthDay = RRN.value.substring(5, 6) : birthDay = RRN.value.substring(4, 6);
month.value = birthMonth;
day.value = birthDay;
}
//주민등록번호 마지막자리 유효성검사
var lastnum = RRN.value.charAt(12);
var weights = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5];
var sum = 0;
for (var i = 0; i < 12; i++) {
sum += parseInt(RRN.value.charAt(i), 10) * weights[i];
}
var lastnumCheck = (11 - (sum % 11)) % 10;
if (lastnum != lastnumCheck) {
alert("주민등록번호가 올바르지 않습니다.");
RRN.focus();
return false;
}
// 관심분야 체크박스 검사
var interestCheckboxes = document.getElementsByName("관심분야");
var interestChecked = false;
for (var i = 0; i < interestCheckboxes.length; i++) {
if (interestCheckboxes[i].checked) {
interestChecked = true;
break;
}
}
if (!interestChecked) {
alert("관심분야를 최소 1개 이상 선택하세요.");
return false;
}
//자기소개 유효성검사
if (!(intro.value.length >= 10 && intro.value.length <= 300)) {
alert("자기소개는 10자 이상 300자 이하로 입력해야 합니다.");
intro.focus();
return false;
}
alert("회원가입이 완료되었습니다.");
}
// 주소
function execDaumPostcode() {
new daum.Postcode({
oncomplete: function (data) {
document.getElementById('zip-code').value = data.zonecode;
document.getElementById('address-1').value = data.address;
document.getElementById('address-1-1').value = data.jibunAddress;
document.getElementById('address-2').focus();
}
}).open();
}
블로그의 정보
감성 개발자 효기
효기’s