키패드 누르기 - 2020 카카오 인턴십 프로그래머스 ( JavaScript )
최대한 직관적이게 소스코드를 만들어 보았습니다. 1. 키패드 모양의 배열을 만든다. (* = 11, # = 22 의로 임의의 숫자를 만들어 숫자 타입 만들기) 2. 왼손 오른손의 위치를 지정한 배열을 만든다. 3. 눌러야 할 위치값 측정 4. 손의 위치값과 눌러야 할 위치값 비교 5. 손 위치 변경 후 값 리턴 계산을 위한 함수 2개를 추가로 만들었습니다. find_num_loca = 눌러야할 위치값 측정 함수 check_lr = 왼손 오른손 중 선택 하는 함수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49..
2021.09.28
LED 저항값 계산기 (블로그) - 아두이노
권장 저항값 계산기 입니다. 전류 단위 mA로 되어있으니 잘 확인하고 입력해주세요. 입력 전압(V) 최소 전압(V) 전류(mA) 권장 저항값
2020.09.20
PHP 로그인 화면 구성 FORM 태그 POST 전송 mysql
안녕하세요. JohnComputer 입니다. 바로 앞에 올렸던 게시글을 참고하시면 도움이 됩니다.https://johncom.tistory.com/23 앞에서 설명했기에 소스코드 바로 첨부하겠습니다. 12345678910111213141516171819202122232425262728293031323334353637 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_form 이름을 가진 form 안의 id_val 의 value가 없으면 { alert("아이디를 입력하세요!"); document.login_form.id_val.focus(); // 화면 커서 이동 return; } ..
2020.09.04
no image
PHP form 전송 방법 POST / GET 이용방법
안녕하세요. Johncomputer 입니다. 이번에는 PHP 에서 기본적으로 Form에서 사용되는 POST / GET 방식입니다. GET은 기본적으로 URL에 정보를 담아서 전송됩니다. 그래서 보안에 취약하게 되죠 이런식으로 전송이 되기 때문에 무엇을 검색하는지 바로 알수 있죠. POST방식은 HTTP헤더 속으로 감춰줘서 비밀번호 같은 개인정보등을 전송하는 방식에서 사용됩니다. PHP에 간단한 예제를 보겠습니다. 123456789101112131415161718192021222324252627282930313233343536 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_for..
2020.09.04
no image
키보드 타이핑 효과 글자쓰기 효과 Typeit 예시 사용법
안녕하세요. John Computer 입니다.이번에 웹사이트를 제작하면서 새로운 오픈소스를 들고와서 사용해보았는데 한글로 만들어진 사용방법이 없어서직접 소스코드를 올립니다.아래 깃허브에 들어가셔서 다운로드 받으면 소스코드 안에 주석으로 한글설명 적혀있습니다.추가적인 기능은 개발자 사이트를 참고하셔서 이용하세요. 개발자 사이트 : https://typeitjs.com/ 블로그 내용 소스 :https://github.com/JohnComputer/typeIt_example
2020.09.03
HTML javascript 자바스크립트 로그인 화면 form 구성 빈칸 체크 focus placeholder
아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.사용 방법 주석 확인. HTML Forms ID: Password: 12345678910111213141516171819202122232425262728293031323334353637 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_form 이름을 가진 form 안의 id_val 의 value가 없으면 { alert("아이디를 입력하세요!"); document.login_form.id_val.focus(); // 화면 커서 이동 return; } if (!document.login_form.pw_val.value) { a..
2020.08.28
반응형

최대한 직관적이게 소스코드를 만들어 보았습니다.

1. 키패드 모양의 배열을 만든다. (* = 11, # = 22 의로 임의의 숫자를 만들어 숫자 타입 만들기)

2. 왼손 오른손의 위치를 지정한 배열을 만든다.

3. 눌러야 할 위치값 측정

4. 손의 위치값과 눌러야 할 위치값 비교

5. 손 위치 변경 후 값 리턴

 

계산을 위한 함수 2개를 추가로 만들었습니다.

find_num_loca = 눌러야할 위치값 측정 함수

check_lr = 왼손 오른손 중 선택 하는 함수

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function solution(numbers, hand) {
//     numbers 배열  hand = right or left
    var answer = '';
    const numArr = [[1,2,3],[4,5,6],[7,8,9],[11,0,22]];// * = 11, # = 22 키패드 만들기
    const numLen = numbers.length;
    let lhLocation = [3,0];
    let rhLocation = [3,2];
 
    for(let i = 0; i < numLen; i++){
        let numLocation = find_num_loca(numArr,numbers[i]); // 위치 좌표값 받기
        answer += check_lr(numLocation,lhLocation,rhLocation,hand);
        console.log(numLocation);
        console.log(lhLocation);
    }
    return answer;
}
 
function find_num_loca(numArr,checkNum){
    let retR = 0;
    let retC = 0;
 
    for(let i = 0; i < numArr.length; i++){
        for(let j = 0; j < numArr[0].length; j++){
            if( numArr[i][j] === checkNum){
                return [i, j];
            }
 
        }
    }
}
 
function check_lr(numLocation,lhLocation,rhLocation,hand){
    if(numLocation[1=== 0){ 
        lhLocation[0= numLocation[0];
        lhLocation[1= numLocation[1];
        return 'L'
    }else if(numLocation[1=== 2){ 
        rhLocation[0= numLocation[0];
        rhLocation[1= numLocation[1];
        return 'R'
    }
    else// numLocation = 1 중간위치
        let leftSize = Math.abs(numLocation[0]-lhLocation[0]) + Math.abs(numLocation[1]-lhLocation[1]);
        let rightSize = Math.abs(numLocation[0]-rhLocation[0]) + Math.abs(numLocation[1]-rhLocation[1]);
 
        if(leftSize < rightSize){
            lhLocation[0= numLocation[0];
            lhLocation[1= numLocation[1];
            return 'L'
        }else if(rightSize < leftSize){
            rhLocation[0= numLocation[0];
            rhLocation[1= numLocation[1];
            return 'R'
        }else{
            if(hand === 'left'){
                lhLocation[0= numLocation[0];
                lhLocation[1= numLocation[1];
            }
            else {
                rhLocation[0= numLocation[0];
                rhLocation[1= numLocation[1];
            }
            return hand.substr(0,1).toUpperCase();
        }
    }
}
cs
반응형
반응형

권장 저항값 계산기 입니다.


전류 단위 mA로 되어있으니 잘 확인하고 입력해주세요.



입력 전압(V)
최소 전압(V)
전류(mA)
권장 저항값
반응형
반응형

안녕하세요. JohnComputer 입니다. 

바로 앞에 올렸던 게시글을 참고하시면 도움이 됩니다.

https://johncom.tistory.com/23


앞에서 설명했기에 소스코드 바로 첨부하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="login_check.php" name="login_form" method="post">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
 
cs

로그인 화면 구성입니다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php
  $id_val = $_POST["id_val"];
  $pw_val = $_POST["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
 
  $con = mysqli_connect("localhost(DB서버)""root(DB아이디)""1234(DB페스워드)""TEMPDATA(DB명)");
  $sql = "select * from members(테이블명) where id='$id_val'";
  $result = mysqli_query($con$sql);
 
  $num_match = mysqli_num_rows($result);
 
  if(!$num_match)
  {
    echo("
          <script>
            window.alert('등록되지 않은 아이디입니다!')
            history.go(-1)
          </script>
        ");
   }
   else
   {
       $row = mysqli_fetch_array($result);
       $db_pass = $row["pw_val"]; // DB칼럼명
 
       if($passwd != $db_pass)
       {
 
          echo("
             <script>
               window.alert('비밀번호가 틀립니다!')
               history.go(-1)
             </script>
          ");
          exit;
       }
       else
       {
           session_start();
           $_SESSION["id"= $row["id_val"];
           $_SESSION["name"= $row["name"];
           // SESSION에 저장.
           mysqli_close($con);
           echo("
             <script>
               location.href = './login.php';
             </script>
           ");
       }
    }
 ?>
 
cs

PHP를 사용하여 POST로 값을 받고 MYSQL에 저장하는 방법입니다. 소스코드를 참고하셔서 한글로 적혀있는 부분들을
본인한테 맞게 수정하셔서 사용하시면 됩니다.


반응형
반응형

안녕하세요. Johncomputer 입니다.


이번에는 PHP 에서 기본적으로 Form에서 사용되는 POST / GET 방식입니다.


GET은 기본적으로 URL에 정보를 담아서 전송됩니다. 그래서 보안에 취약하게 되죠 

이런식으로 전송이 되기 때문에 무엇을 검색하는지 바로 알수 있죠.


POST방식은 HTTP헤더 속으로 감춰줘서 비밀번호 같은 개인정보등을 전송하는 방식에서 사용됩니다.



PHP에 간단한 예제를 보겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="login_check.php" name="login_form" method="post">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
cs

전송하게 되는 페이지 입니다. FORM 태그에 보시면 POST방식으로 login_check로 보내게 됩니다.




1
2
3
4
5
6
7
<?php
  $id_val = $_POST["id_val"];
  $pw_val = $_POST["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
?>
cs

받는 login_check.php 입니다. 보시는 것과 같이 받아서 print_r 함수로 출력하게 되면 post로 보낸 id와 패스워드를 확인하실수 있습니다.

GET도 마찬가지입니다. GET으로 보내고 받을 때 


1
2
3
4
5
6
7
<?php
  $id_val = $_GET["id_val"];
  $pw_val = $_GET["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
?>
cs

위와 같이 이용해주시면 똑같은 결과를 얻을 수 있습니다.


반응형
반응형

안녕하세요. John Computer 입니다.

이번에 웹사이트를 제작하면서 새로운 오픈소스를 들고와서 사용해보았는데 

한글로 만들어진 사용방법이 없어서

직접 소스코드를 올립니다.

아래 깃허브에 들어가셔서 다운로드 받으면 소스코드 안에 주석으로 한글설명 적혀있습니다.

추가적인 기능은 개발자 사이트를 참고하셔서 이용하세요.


개발자 사이트 : 

https://typeitjs.com/


블로그 내용 소스 :

https://github.com/JohnComputer/typeIt_example





반응형
반응형

아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.

사용 방법 주석 확인.


HTML Forms










1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="#이동할곳 URL#" name="login_form">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
 
cs


반응형