2014. 5. 29. 15:33

[자바스크립트][예제] 간단한 password 체크 프로그램

web/javascript

[자바스크립트][예제] 간단한 password 체크 프로그램

=> 아주 간단한 예제, 예외처리 해서 써야 하는 부분들은 많지만, 간단히 password체크 해 볼 수 있다!






<html>

<head>

<script language="javascript">

function passwordCheckk()

{

var password = document.getElementById("password").value;

var passwordCheck = document.getElementById("passwordCheck").value;


if ( passwordCheck == "")

                        {  

                               document.getElementById("passwordCheckText").innerHTML = "" } 

                         else if ( password != passwordCheck )

{

document.getElementById("passwordCheckText").innerHTML = "<b><font color=red size=5pt> Not Ok PW. </font></b>"

}

else

{

document.getElementById("passwordCheckText").innerHTML = "<b><font color=red size=5pt> Ok PW. </font></b>"

}

}

</script>

</head>

<body>

<table border=1>

<tr style="border-left-style:dashed;border-right-style:dashed">

<td>

패스워드

</td>

<td colspan="2">

<input type="password" id="password" name="pw"><br>

</td>

</tr>

<tr style="border-left-style:dashed;border-right-style:dashed">

<td>

패스워드체크

</td>

<td>

<input type="password" id="passwordCheck" name="pw" onkeyup="passwordCheckk()"><br>

</td>

<td id="passwordCheckText" width=100>

</td>

</tr>

</table>

</body>

</html>





'web > javascript' 카테고리의 다른 글

[자바스크립트][예제] 아이디 중복확인 예제 / 문자열 비교  (1) 2014.05.29
[자바스크립트] Javascript Char Codes (Key Codes)  (0) 2014.05.29
[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기  (1) 2014.05.29
javascript에서 Element에 접근하는 3가지 방법  (0) 2014.05.20
Posted by Triany
2014. 5. 29. 15:12

[자바스크립트][예제] 아이디 중복확인 예제 / 문자열 비교

web/javascript

[자바스크립트][예제] 아이디 중복확인 예제

간단한 아이디 중복확인 예제

지정해 둔 아이디배열 값과 중복되면 "존재하는 아이디입니다."라고 alert를 띄우고 

input 박스를 clear 하는 예제이다!


<html>

<head>

<script language="javascript">

function duplicationCheck()

{

var users = ["name1", "name2", "name3"];

var userId = document.getElementById("userId").value;


for(var i =0; i < users.length; i++)

{

if ( userId == users[i])

{

document.getElementById("userId").value = "";

return alert(userId + "는 존재하는 아이디 입니다.");

}

}

}

</script>

</head>

<body>

<table border=1>

<tr style="border:2px solid green">

<td>

아이디

</td>

<td colspan="3">

<input type="text" id="userId" name="name" onkeyup="duplicationCheck()">

</td>

</tr>

</table>

</body>

</html>



여기서 팁! Onkeydown보다 Onkeyup을 사용하면 더 편함!

Onkeydown은 누루면서 찍히는 거라 제대로 안 될 수도 있음!

여기서 OnkeyDown, Onkeyup, OnkeyPress 내용도 참고로 정리!

Onkeydown : 키보드 자판을 누르는 순간에 발생하는 이벤트 

                    => 영문, 숫자, 한글, BackSpace 등에서 발생

Onkeyup : 키보드 자판을 누른 후, 올라올 때 발생하는 이벤트

                    => 영문, 숫자, 한글, BackSpace 등에서 발생

Onkeypress : down과 up 중간에 발생하는 이벤트 => 영문, 숫자 등에서만 이벤트가 발생


'web > javascript' 카테고리의 다른 글

[자바스크립트][예제] 간단한 password 체크 프로그램  (0) 2014.05.29
[자바스크립트] Javascript Char Codes (Key Codes)  (0) 2014.05.29
[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기  (1) 2014.05.29
javascript에서 Element에 접근하는 3가지 방법  (0) 2014.05.20
Posted by Triany
2014. 5. 29. 11:57

[자바스크립트] Javascript Char Codes (Key Codes)

web/javascript

Javascript Char Codes (Key Codes)

자주 사용하는 것만 스크랩


Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46 


아래와 같이 쓰입니다.!

    //자바스크립트

    function enter(ev)

    {

      key = ev.charCode || ev.keyCode || key.whitch;


      if ( key == 13 )  //엔터면!!

        func1();

    }

<input id="...."  type="text' .... onKeydown="enter(event)">


더많은 KeyCode를 볼려면 

아래 출처 사이트 참조하세요!

출처 : http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-code

'web > javascript' 카테고리의 다른 글

[자바스크립트][예제] 간단한 password 체크 프로그램  (0) 2014.05.29
[자바스크립트][예제] 아이디 중복확인 예제 / 문자열 비교  (1) 2014.05.29
[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기  (1) 2014.05.29
javascript에서 Element에 접근하는 3가지 방법  (0) 2014.05.20
Posted by Triany
2014. 5. 29. 11:43

[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기

web/javascript

[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기




처음 페이지가 열릴때 (window.onload) 동적으로

날짜를 select박스에 넣는 예제!


Year

[1980]~[2019]년까지..

Day

[1]~[12]월까지,

Month

[1]~[31]일까지 넣기!



<!-- 자바스크립트로 구현! -->

<script language="javascript">

window.onload = function(){

var sYear=1980

var eYear=2019

var sMonth=1

var eMonth=12

var sDay=1

var eDay=31


var strYear="";

var strMonth="";

var strDay="";


for(var i=sYear; i<=eYear; i++)

{

strYear +="<option value="+i+">"+i+"</option>";

}


for(var i=sMonth; i<=eMonth; i++)

{

strMonth +="<option value="+i+">"+i+"</option>";

}


for(var i=sDay; i<=eDay; i++)

{

strDay +="<option value="+i+">"+i+"</option>";

}


document.getElementById("year").innerHTML = strYear

     document.getElementById("month").innerHTML = strMonth

     document.getElementById("day").innerHTML = strDay




}

</script>

<!-- HTML 코드! -->

<body>

<table border=1>

<tr>

<td>

날짜선택

</td>

<td>

<select id="year" name="year">

</select>

</td>

<td>

<select id="month" name="month">

</select>

</td>

<td>

<select id="day" name="day">

</select>

</td>

</tr>

</table>

</body>


결과!





'web > javascript' 카테고리의 다른 글

[자바스크립트][예제] 간단한 password 체크 프로그램  (0) 2014.05.29
[자바스크립트][예제] 아이디 중복확인 예제 / 문자열 비교  (1) 2014.05.29
[자바스크립트] Javascript Char Codes (Key Codes)  (0) 2014.05.29
javascript에서 Element에 접근하는 3가지 방법  (0) 2014.05.20
Posted by Triany
2014. 5. 20. 17:29

javascript에서 Element에 접근하는 3가지 방법

web/javascript


* JavaScript에서! Element에 접근하는 방법은 3가지! 있어! 

  => ID, CLASS, TAGNAME


document.getElementById : ID를 이용해서 접근

document.getElementsByTagName : TagName을 이용해서 접근

document.getElementsByClassName : ClassName을 이용해서 접근 (ie에선 잘 안됨)


var : 변수 선언시! .. 배열, 문자, 숫자, 구분 없음

innerHTML : 내용이 저장되는 부분을 바꿔주는 것으로 text 대체 가능!

'web > javascript' 카테고리의 다른 글

[자바스크립트][예제] 간단한 password 체크 프로그램  (0) 2014.05.29
[자바스크립트][예제] 아이디 중복확인 예제 / 문자열 비교  (1) 2014.05.29
[자바스크립트] Javascript Char Codes (Key Codes)  (0) 2014.05.29
[자바스크립트][예제] innerHTML로 <select><option> 으로 날짜 구현하기  (1) 2014.05.29
Posted by Triany

티스토리툴바