-
051020 JavaScript 회원가입JavaScript 2020. 10. 5. 08:32
2. 이름, 아이디, 비밀번호를 필수적으로 입력하게끔 제한한다. (required)
입력 안하면 경고창. (oninvalid="alert('alert!')") - focus는 자동인듯?var nameCheck = $("#name").val() //jQuery로 value값 어떻게 가져오지 val()네 console.log(nameCheck); var idCheck = document.getElementById("id").value; console.log(idCheck); var pwCheck = document.getElementById("pw").value; if(nameCheck==""){ alert("name is omitted"); $("#name").focus(); return false; } if(idCheck==""){ alert("id is omitted") $("#id").focus(); return false; }
3. 라디오버튼에서 수신이라는 글자를 클릭해도 수신이 선택되게 해주세요. (label for = id)<tr> <td>메일/sns 정보 수신</td> <td> <input type="radio" name="receive_or_not" id="receiveOk"> <label for = receiveOk>수신</label> <input type="radio" name="receive_or_not" id="receiveNo"> <label for = receiveNo>수신 거부</label> </td> </tr>
4. 비번 첫글자는 대문자, 6자 이상, 12자 이하, 숫자, 영문자, 언더바_ 까지 입력이 가능.
— 비밀번호는 대문자, 소문자, 숫자가 반드시 1개 이상 입력되는 조건.
— 입력조건에 맞지 않는 겨우 alert창을 띄워 *조건에 맞게 입력해주세요*//password 유효성 검사 //첫글자는 무조건 대문자로, 대소문자+숫자+특수문자 중 6글자 이상 12글자 이하, 특수문자는!@#^*만 가능하다. $("#submit").click(function(){ var password = document.getElementById("pw").value; var pw_reg = /^[A-Z][a-zA-Z0-9!@#^*_]{6,12}$/; // $표시 해야지,,, 닫는 태그같은거야 var pw_result = pw_reg.test(password); if (pw_result == false) { alert('비밀번호는 첫 글자는 대문자로, 총 6글자 이상 12글자 이하여야 합니다.'); pw.value = ""; pwCh.value = ""; $("#pw").focus(); return false; checked = $("input[type=checkbox]:checked").length; if(!checked) { alert("You must check at least one checkbox."); return false; } } }) //비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다. function chkPW(){ var reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/; var pw = $("#password").val(); if(false === reg.test(pw)) { alert('비밀번호는 8자 이상이어야 하며, 숫자/대문자/소문자/특수문자를 모두 포함해야 합니다.'); }else { console.log("통과"); } }
5. 비밀번호와 비밀번호 확인란이 동일하지 않으면 alert 창으로 *동일하게 입력해주세요*
—기존에 입력한 비밀번호를 싹 지워주세여(초기화) value="X" 띄어쓰기 없다
—비밀번호 확인란에서 포커스 아웃이 되면 그때 동일한지 확인한다.
on / event?$("#pwCheck").focusout(function(){ if(pw.value != pwCh.value){ alert('not same'); pw.value=""; pwCh.value=""; $("#pw").focus(); //jQuery고, () 필수로 써야해 } else { alert('same'); } })
6. 관심분야에서 1개 이상 선택하여야 한다. -선택하지 않았다면 *1개이상 선택해주세요*checked = $("input[type=checkbox]:checked").length; if(!checked) { alert("You must check at least one checkbox."); return false; }-1를 return하는 경우 확인!
-1 = 찾지 못할 경우 나타나는 값
문제해결시나리오
1. 중첩함수 (선언하지 않고 담는거)
2. 변수에 함수 넣기
3. 콜백함수
(p.60 예제)
4. 자료형 type
4.1. undefined / Infinite(대문자 확인) / null
ex) if($("#id").val() == null)
id="id"가 존재하지 않으면 undefined,
id="id"가 존재하고 value가 없다면 ""
""는 false.
4.2. new Array( ) 만드는 3가지 방법
4.3. Object 만드는 2가지 방법
4.4. 참조복사 etc.
4.5. 반복문, for in 확인
4.6. 형변환 (자동이 되는 조건들)
5. 내장함수
5.1. time / date / random / math / string / array / object
6. BOM
6.1. window
6.1.1. navigator / screen
6.1.2. history
go / back / forward
6.1.3. location
replace / assign / reload
6.1.4. document
7.DOM (load가 끝나야 사용가능하다 onload이후 사용 가능)
7.1. event 걸어주는 방법
7.1.1. inline <body onload="function()"> or <button onclick="function()">
7.1.2. document.getElementsByName / Class / TagName ... (" ").onclick = function( );
7.1.3. document.getElementsByName / Class / TagName ... (" ").addEventListener('click', 'function()'); (onclick아닌 거 확인)
7.2. Node 생성 - createTextNode("<h2>Title</h2>" );
7.3. Element 생성 - createElement(" tagName ");
7.4. Node 연결 - 엘리먼트명.appendChild(노드명);
7.5. removeChild(노드명);
7.5. innerHTML
7.5.1. 특징: 처음부터 다시 쓰는 것
7.6. innerText
8. jQuery (JavaScript로 만든 library)
8.1. $
8.2. selector (p.59~60)
8.2.1. $("selector").click(function(){ } );
8.2.1. $("selector").click(function( event ){
event.target
});
8.2.2. $("selector").css( {"attr1" : "value1", "attr2" : "value2", "attr3" : "value3" ,,,,});
8.3. this
8.4. find / parent / children / prev / next
8.5. 노드 생성, 추가, 삭제, 이동
8.5.1. 생성: var $이름 = $("<div id=" "></div>");
8.5.2. 추가: append / appendTo / prepend / prependTo
8.5.3. 삭제: remove / clear
8.5.4. 이동: append / appendTo / prepend / prependTo + insert / after / before / insertBefore,,,,
8.6. html( ) / text( ) : 둘이 꺼내 나오는 방식이 다르다.
'JavaScript' 카테고리의 다른 글
061020 JavaScript: button으로 구현 (0) 2020.10.06 051020 JavaScript 정리 (0) 2020.10.05 280920 Web SQL Database (0) 2020.09.28 280920 #JavaScript Exercises (0) 2020.09.28 240920 #003 BOM / DOM (0) 2020.09.24