⚡ 랜덤함수 이용한 보안코드( javascript )
<script> se_load(); //해당 함수를 페이지 실행시 즉시 실행되게 하는 명령어 function se_load(){ var w = 1; var security = ""; //보안코드 4자리를 저장하는 변수 var seimg = ""; //이미지 출력태그에 사용할 병수 do{ var n = Math.floor(Math.random()*10); //0~9 security += n; seimg += "<img src='./no/no"+ n +".png' style='height : 40px;'>" w++; }while(w <= 4); //4개의 보안 난수코드 document.getElementById("sec").innerHTML = seimg; } //전체 새로고침 function page_load(){ window.location.reload(); //전체 페이지를 새로고침 하는 함수 } </script> <body> <div style="width : 200px; height : 50px; margin-bottom : 10px; line-height : 50px; text-align : center; background-image : url('./no/security_back.png'); " id="sec"></div> <input type="text" maxlength="4" placeholder="보안코드 4자리를 입력하세요."> <!-- 사용자가 입력한 내용은 그대로 유지, 해당 사항만 재실행 --> <button type="button" onclick="se_load()">새로고침</button> <button type="button" onclick="page_load()">전체 새로고침</button> </body>
✅ API 연결 (application programming interface)
- API는 왜 쓰는가?
- XML,JSON(javascript object notation),CSV (comma-separated values / 구글 스프레트시트 같은거) 형태로 보내줌
- My server ▶데이터 주고받음◀ 공공데이터 포털( Restful-API )
⚡ 이메일 선택에 따른 인터페이스 적용
<script> var user = document.getElementById("myemail"); function mail_select(mail){ if(mail == ""){ //직접입력 선택시 user.value = ""; //사용자가 입력한 값을 초기화 }else{ //사용자가 입력한 내용 + email도메이명 추가 if(user.value.indexOf("@") == -1){ //@없을 경우 var modify = user.value + "@" + mail; //@와 사용자가 선택한 옵션값을 적용 }else{ //@를 입력시 split을 이용하여 이메일 아이디만 추출 후 사용자가 선택한 값을 적용 var modify = user.value.split("@")[0] + "@" + mail; } user.value = modify; //해당 입력값에 새롭게 데이터정보를 입력 } } </script> <body> <li> <span>이메일</span> <input type="text"> <select id="semail" onchange="mail_select(this.value)"> <option value="">직접입력</option> <option value="naver.com">naver.com</option> <option value="nate.com">nate.com</option> <option value="hanmail.net">hanmail.net</option> <option value="google.com">google.com</option> <option value="hotmail.com">hotmail.com</option> </select> <label> <input type="checkbox"> 정보/이벤트 메일 수신에 동의합니다. </label> </li> </body>
'CLASS > JAVA' 카테고리의 다른 글
| #3-2 / 반복문 (0) | 2024.05.02 |
|---|---|
| #3-1 / 외부class,if문 (0) | 2024.05.02 |
| #2-2 / JAVA - OOP 🔥 (0) | 2024.04.30 |
| #1-2 / Apache-tomcat 웹 페이지 (0) | 2024.04.29 |
| #1-1 / start,setting (0) | 2024.04.29 |
