20211109 자바스크립트 메소드와 회원가입
·추운 하루
-날씨가 너무 갑작스럽게 추워졌다. 안그래도 격일도 등원하던 학원인데 이제 팀별로 나가게 되어서 3일에 한번씩 등원을 한다. 그래서 아무리 날씨가 비가 오고 추워도 몸을 일으키고 등원했다.
·자바스크립트 메소드
-reverse(),와 sort()에 대해 배웠다. 말 그대로, 배열을 반대로 정렬해주는 기능과, 정렬기능인데, sort()는 자바에서 했던 selection sort같은 것이 아니라 모두 문자열로 보고 정렬을 하는 메소드다. 그래서 숫자나 boolean type은 제대로 된 결과를 얻지 못할 수 있기 때문에 문자에만 쓰도록 해야 한다.
-splice() 메소드는 배열에 값을 제거하거나 추가하거나 둘 다를 할 때 사용할 수 있는 메소드이다. 문법이 조금 헷갈릴 수 있는데 (시작 인덱스, 지울 배열의 수, 추가할 요소들 각각) 이런 식으로 사용할 수 있다.
var arr =[1,true,"javascript", "자바스크립트"];
var removedElement = arr.splice(1, 2, false, "c언어");위처럼 사용할 수 있고, 위의 splice를 풀어서 서술하자면, 1번 인덱스(true)부터 2개의 값을 지우고(true와 "javascript"), true의 자리부터 false와 "c언어"의 값들을 순서대로 넣어준다. 당연히 지우는 숫자와 넣는 숫자가 꼭 같을 필요는 없다. 그리고 splice 메소드는 지운 값들을 매열의 형식으로 돌려주기 때문에 변수에 넣을 수도 있다. 만약 지운 값이 없다면 빈 배열을 반환한다.
·태그 이름을 통한 html 변경
-색상 변경하기
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<button type="button" onclick="ss()">RED</button>다음과 같은 ul태그가 있다고 했을 때, 버튼을 누르면 li태그의 모든 값들이 빨간색으로 변경되는 코드를 작성했다.
<script>
function ss()
{
var selectedItem = document.getElementsByTagName("li");
for(i=0;i<selectedItem.length;i++)
{
selectedItem.item(i).style.color = "red";
}
}
</script>-getElementsByTagName을 사용해서 li 태그를 얻어온 값을 selectedItem이라는 변수에 넣어주고, 마치 배열처럼 selectedItem을 사용하여 각각의 li태그를 빨간색으로 변경해준다. 물론 이 과정은 순식간에 이뤄지기 때문에 버튼을 누름과 동시에 전부 빨갛게 변한다. 여기서 주의해서 볼 것은 배열처럼 쓰지만, [i]가 아니라 .item(i)로 쓴다는 것이다.
-글자 사라지게 하기!
<h3 id="heading">여기가 사라졌다 나타났다 합니다.</h3>
<input type="button" value="숨김" onclick="document.getElementById('heading').style.visibility = 'hidden'">
<input type="button" value="표시" onclick="reveal()">
<script>
function reveal()
{
document.getElementById("heading").style.visibility = "visible";
}
</script>-.style.visibility = "hidden" 혹은 "visible"을 통해서 html의 요소를 숨기거나 나타나게 할 수 있다. 위의 hidden 상태는 보이지 않는 것이지 없어진 것은 아니다!
-이미지 변경하기
<h1>이미지 변경</h1>
<img src="../../img/11.jpg" alt="image" id="img" width="400" height="400">
<input type="button" onclick="changeImg()" value="선택하세요">
다음과 같은 이미지 태그가 있다고 가정할 때, 버튼을 누르면 이미지가 변경되는 코드를 진행해봤다. 근데 전에 했던건 바뀌는 것까지만 해봤었고, 오늘은 처음 누르면 첫 사진이 두번째 사진으로 바뀌고 다시 누르면 두번째 사진이 첫 사진으로 바뀌는 방법으로 하라고 하셨다. 그래서 나는 처음에 document.getElementById("img").src의 값이 "../../img/11.jpg"면 바꾸라는 식의 조건문으로 작성했는데, 작동하지 않았다. 그래서 alert의 메소드로 document.getElementById("img").src이 부분을 찍어보니 파일의 절대경로가 찍히고 있었다. 그래서 어떻게 해야하지 고민했는데, 그냥 전역변수를 하나 주고, 0일 때는 11.jpg 1일 때는 22.jpg가 되도록만 해놓으면 되는 것이었다. 스위치를 만들어주는 것!
var YorN = 0; //스위치가 되는 변수
function changeImg()
{
if(YorN == 0)
{
document.getElementById("img").src = "../../img/22.jpg";
YorN = 1;
}else
{
document.getElementById("img").src = "../../img/11.jpg";
YorN = 0;
}
}·정규표현식과 회원가입 검사
-회원가입은 그동안 그냥 큰 맥락에서만 만들어보고 맞게 입력했는지 검사하는 것은 진행하지 않았다. 그리고 오늘 정규표현식을 배우는 동시에 검사하는 것도 도전해봤다. 사실 정규표현식은 배우긴 했지만, 그냥 큰 맥락에서 배우기만 했고, 교수님도 굳이 외울 필요없이 그냥 검색해보면 다 나오는 내용이니 검색해서 사용하라고 하셨다. 교수님도 외워서 사용해본 적이 없으시다고 했다.(사실 그럴만하다고 충분히 느끼게 되는 수업이었다.)
<body>
<h3>회원가입</h3>
<form name="form1" method="post">
아이디(6~20문자):
<input type="text" id="userId" maxlength="20" name="userId"><br>
비밀번호:
<input type="password" maxlength="20" id="pwd1" name="pwd1"><br>
비밀번호 확인:
<input type="password" maxlength="20" id="pwd2" name="pwd2"><br>
이름:
<input type="text" id="name" name="name" maxlength="20"><br>
주소:
<input type="text" id="addr" name="addr" maxlength="20"><br>
생일:
<input type="date" id="birthday" name="birthday"><br>
이메일:
<input type="text" id="email" name="email"><br>
휴대폰:
<input type="text" id="phone" name="phone"><br>
<br>
<input type="button" value="확인" onclick="return validate();">
<input type="reset" value="다시입력"><br>
<input type="hidden" name="pwd" value=""><!--얘는 비밀번호와 비밀번호 확인이 맞았을 때, 서버로 암호화해서 보내기 위해 사용하는 용도-->
</form>
<script>
//이메일 체크 정규표현식
function isEmail(asValue)
{
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
//여기 regExp는 지역변수 regExp의 객체가 아님.
//정규식은 찾아보면 나옴
return regExp.test(asValue);//asValue를 테스트 메소드로 앞의 regExp에 해당하는지 여부를 판단.
}
//핸드폰 체크 정규표현식
function isCell(asValue)
{
var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/;
return regExp.test(asValue);
}
function validate()
{
//아이디 패턴 6~20자의 영문 대소문자, 숫자와 특수기호(_),(-)
var idPattern = /^[a-zA-Z0-9_-]{6,20}$/;
//비밀번호 패턴 6~20자 영문 대 소문자, 숫자, 특수문자
var pwPattern = /[a-zA-Z0-9!@#$%^&*()_+|<>?:{}]{6,20}/; // 여기는 절대 공백을 넣으면 안됨.
//이름 패턴 한글과 영문 대 소문자를 사용하세요. (특수기호, 공백 사용 불가) – 최소3글자 이상: 얘는 length로 할거임
var namePattern = /^[a-zA-Z가-힣]*$/;
//날짜 패턴
var datePattern2 = /^(19|20)\d{2}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[0-1])$/;
//아이디 체크
if(document.form1.userId.value.trim() == "")
{
alert("아이디를 입력하세요");
document.form1.userId.focus();
return false;
}
if(!idPattern.test(document.form1.userId.value))
{
alert("아이디는 6~20자의 영문 대소문자와 숫자, 특수기호('_','-')로만 입력해야 합니다.");
document.form1.userId.value = "";
document.form1.userId.focus();
return false;
}
//비밀번호 체크
if(document.form1.pwd1.value.trim() == "")
{
alert("비밀번호를 입력해주세요.");
document.form1.pwd1.focus();
return false;
}
if(document.form1.pwd2.value.trim() == "")
{
alert("비밀번호 확인을 입력해주세요.");
document.form1.pwd2.focus();
return false;
}
if(!pwPattern.test(document.form1.pwd1.value))
{
alert("비밀번호는 6~20자의 영문 대소문자, 숫자, 특수문자로만 입력해야 합니다.");
document.form1.pwd1.value = "";
document.form1.pwd1.focus();
return false;
}
if(document.form1.pwd1.value != document.form1.pwd2.value)
{
alert("비밀번호가 일치하지 않습니다.");
document.form1.pwd2.value = "";
document.form1.pwd2.focus();
return false;
}
//이름 체크
if(document.form1.name.value.trim() == "")
{
alert("이름을 입력해주세요");
document.form1.name.focus();
return false;
}
if(!namePattern.test(document.form1.name.value))
{
alert("이름은 한글과 영문 대소문자를 사용하세요.")
document.form1.name.value = "";
document.form1.name.focus();
return false;
}
if(document.form1.name.value.length < 3)
{
alert("이름은 3글자 이상 입력해주세요.");
document.form1.name.value = "";
document.form1.name.focus();
return false;
}
//주소 체크
if(document.form1.addr.value.trim() == "")
{
alert("주소를 입력해주세요.");
document.form1.addr.focus();
return false;
}
//생년월일 체크
if(document.form1.birthday.value == "")
{
alert("생일을 선택해주세요.");
document.form1.birthday.focus();
return false;
}
if(!datePattern2.test(document.form1.birthday.value))
{
alert("생일을 정확하게 선택해주세요.");
document.form1.birthday.value = "";
document.form1.birthday.focus();
return false;
}
//이메일 체크
if(document.form1.email.value.trim() == "")
{
alert("이메일을 입력해주세요.");
document.form1.email.focus();
return false;
}
if(!isEmail(document.form1.email.value))
{
alert("이메일을 올바르게 입력해주세요.");
document.form1.email.value = "";
document.form1.email.focus();
return false;
}
//핸드폰 번호 체크
if(document.form1.phone.value.trim() == "")
{
alert("전화번호를 입력해주세요.");
document.form1.phone.focus();
return false;
}
if(!isCell(document.form1.phone.value))
{
alert("전화번호를 올바르게 입력해주세요.");
document.form1.phone.value = "";
document.form1.phone.focus();
return false;
}
}
</script>
</body>-따로 style을 적용하지 않고 기본만을 갖춘 회원가입의 예제이다. 여기서 이메일과 핸드폰 체크에 대한 함수를 따로 뺀 것은, 어느 곳에서든 동일한 양식이기 때문이다. 아무것도 쓰지 않은 값에 대한 검사를 할 때 trim()메소드를 사용한 이유는 띄어쓰기가 있을 경우를 대비해서이다. 정규표현식.test(검사할요소)->이 메소드는 만약 정규표현식에 맞으면 true 아니면 false를 반환한다. 그래서 만약 여기서 반환된 값이 false라면 정규표현식의 조건을 alert메세지로 알려주고, 해당 input 박스에 focus()->커서가 그쪽으로 이동하는 기능을 해주고, 해당 input 박스를 비워준다. 그 외에는 id나 name 등을 자세하게 세밀하게 작성해야 한다는 점 말고는 딱히 특별한 것은 없다.
·회원가입 검사와 함께 진이 빠진 하루
-사실 교수님은 딱 아이디를 입력해주세요 부분 하나만 해주셨고 나머지는 직접 해보라고 하셨다. 확실하게 하는 방법은 내일 알려주신다고 그동안은 직접해보라고 하셨다. 그래서 아이디에 대한 것, 비밀번호에 대한 것 비밀번호와 비밀번호 확인의 일치에 대한 것 전부 직접 작성하고 하나하나 테스트해봤다. 그래서 다 작성하고 나니, 진이 조금 빠지는 느낌이 들긴 했다. 그래도 수업이 끝나고 학원에서 하나하나 뜯어보면서 머리에 확실하게 넣어서 집에 왔다. 내일 정답으로 알려주신 답이 나와 별로 다르지 않을 것 같다는 생각이 들지만, 열심히 집중해서 듣도록 해야지! 이제 빨리 운동하고 잠자리에 들어야겠다! 앞으로 휴일포함 99일 남은 학원수업! 파이팅하자!
Author And Source
이 문제에 관하여(20211109 자바스크립트 메소드와 회원가입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ysparkr841/20211109-자바스크립트-메소드와-회원가입저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
