'분류 전체보기' 카테고리의 글 목록 (15 Page)

1. 개요

OOP(객체 지향 프로그래밍)에서는 객체간의 상속을 프로토타입이라는 메커니즘을 통해 구현한다.

prototype의 사전적 의미는 원본, 초본이며, 이처럼 수정하지 않은 메소드나 생성자의 '원본'을 상속시키는 역할을 한다.

굉장히 생소해보이지만 프로그래밍 언어를 조금이라도 다뤄본 사람이라면 쉽게 이해가 가능하다.

2. 함수 생성

F12를 눌러 관리자모드로 들어간 후 a(name)이라는 함수를 정의한다.

a를 출력해보니 위처럼

arguments, caller, length, name, prototype, __proto__가 나오는걸 볼수있다.

위의 용어를 하나하나 살펴보자.

용어	의미
arguments(인수)	함수가 호출될 때 함수로 값을 전달해주는 값
parameter(매개변수, 없지만 헷갈릴까봐)	전달받은 argument를 함수 내부로 전달하기위해 사용하는 변수
caller	현재 함수를 호출한 함수
length	인수의 개수(길이)
name	함수의 이름
prototype	상속시킬 객체의 원형
__proto__	상속받은 객체

이 중에서 오늘의 주제인 prototype과 __proto__에 대해 알아보도록 하자.

3. Prototype

prototype의 사전적 의미는 '원형, 원본'이다. 상속을 받을 때 해당 함수의 원형을 받아야 하기 때문에 prototype이라는 단어를 사용하는 것 같다. 그리고 prototype 객체는 함수를 생성할때 동시에 생성된다. 왜? 언제든 상속시켜줄수있도록 원본을 보존해야하니까.

function은 prototype이라는 프로퍼티를 사용해 prototype에 새로운 프로퍼티나 메소드를 추가할 수 있고,

prototype은 constructor(생성자)를 사용해 function에 접근할 수 있다.

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미합니

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0)	2019.08.09
[JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0)	2019.07.24
[JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0)	2019.07.19
[Javascript] 모듈의 정의, 장점 및 예제 (0)	2019.07.01
[Javascript] 객체의 사용, 변수, 함수, 반복문 (0)	2019.07.01

모듈(module)

- 코드를 재사용할 수 있는 단위로 나누어 다른 프로그램의 부품으로 사용하는 것.

- 단위로 나누는 것은 모듈화(Modularization)이라 함.

날이 갈수록 프로그램은 복잡해지고 있습니다.

복잡한 프로그램일수록 유지보수와 관리, 재활용성을 높이기 위해 코드를 여러개의 파일로 나누기 시작합니다.

바로 이게 모듈입니다.

모듈의 장점 (출처 - 생활코딩)

- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있습니다.

- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선됩니다.

- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있습니다.

- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있습니다.

- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있습니다.

모듈 사용 예제

그렇다면 '안녕하세요'라는 텍스트를 HTML상에 출력시키는 기능을 가진 모듈을 만들고, 다른프로그램에서 사용하는 코드를 만들어보겠습니다.

아래의 두가지만 유의하세요

1) 모듈파일의 확장자는 js파일.

2) 모듈을 import시키는 코드는 head 태그 안에.

1

<script src = "모듈파일.js"></script>

3) 모듈은 javascript이므로 모듈에 있는 함수를 사용하려면 <script>태그 안에서 사용해야함

`

1. 모듈 파일을 만든다(modulefile.js). 파일 안에 output이라는 함수를 만들었다.

1
2
3

function output(){
    document.write("안녕하세요");
}

2. 모듈을 사용할 HTML 파일을 만들고 <script src = "modulefile.js"></script>를 입력한다.

3. body 태그 안에 <script> 태그를 넣고 그 안에 modulefile.js에서 쓸 함수명인 output()을 입력한다.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!doctype html>
<html>
<head>
    <title>?</title>
    <meta charset="utf-8">
    <script src = "modulefile.js"></script>
</head>
<body>
    <script>
        output();
    </script>
</body>
</html>
 

출력화면

module.html 파일에서 modultfile.js 내의 함수 호출 성공

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0)	2019.08.09
[JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0)	2019.07.24
[JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0)	2019.07.19
[JavaScript] 상속, Prototype, 함수 및 생성자 (1) (0)	2019.07.18
[Javascript] 객체의 사용, 변수, 함수, 반복문 (0)	2019.07.01

Javascript에서의 객체(object)란?

사전적 의미

1. 물건, 물체 2. 욕망, 연구, 관심 등의 대상

많은 사람들이 객체에 대한 정의를 하는데 조금씩 다름을 느꼈습니다.

쉬운 정의가 있는 반면, 되게 심오하고 복잡하게 정의하신 분도 있었습니다.

때문에 제가 내린 정의도 다른 정의 중 하나라고 생각하시고 글을 봐주시기 바랍니다.

제가 정의한 객체란

1. 물건, 물체 2. 욕망, 연구, 관심 등의 대상

사전적 의미와 똑같습니다.

단! 차이점이 하나 있습니다. 바로 설명입니다.

만약 우리가 자전거라는 객체 정보를 친구에게 준다고 가정해봅시다.

나(25살) : 친구야 내가 자전거에 대해 알려줄게. 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈 수 있고...

친구 : XX아

친구가 이미 자전거에 대한 정보를 알고 있고, 내가 아는 자전거에 대한 정보와 다를 수 있습니다. 친구는 말을 무시할 수도 있고, 자신이 생각하는 정보와 다르다면 그것을 비교하여 다시 재정의할 수 있습니다. 정보를 전달한다고 한들 그것을 받아들이는 것은 친구의 몫이죠.

그렇다면 컴퓨터에게 객체 정보를 준다고 가정해봅시다.

나 : 컴퓨터야 자전거에 대해 알려줄게. 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈 수 있고...

컴퓨터 : 아하 자전거는 바퀴가 3개이고 페달을 밟으면 앞으로 나갈수 있고...

이처럼 컴퓨터는 자전거 객체에 대한 정보가 전~혀 없습니다.

따라서 알려주는 데로 정보를 받아들이게 됩니다. 정보가 잘못되었더라도 자전거라고 정의하게 되죠.

자전거가 멈추는 것을 알려주지 않으면, 컴퓨터에게 있어 자전거는 멈추지 않습니다. 마치 핸들이 고장 난 8ㅌ..

즉 설명에 따라 객체가 정의된다는 것입니다.

javascript에서 객체를 정의할 때에는 key값과 value값으로 나눠서 정의합니다.

바퀴 : 2개

소재 : 알루미늄

무게 : 10kg

가격 : 14만원

기능 : 앞으로 가기, 멈추기, 점프하기

또한 함수를 넣을 수 있습니다.

객체를 정의할 때 함수 또한 그 객체에 포함시킬 수 있다는 것이죠.

그렇다면 컴퓨터에게 객체를 정의하는 것이 얼마나 중요한가를 느끼실 수 있을 겁니다. 바로 소스코드를 보겠습니다.

소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<body>
    <script type="text/javascript">
        var bycycle={
            wheel : '2개',
            material : '알루미늄',
            weight : '10kg',
            price : '14만원',
            func : function(){
                document.write('앞으로가기 ');
                document.write('멈추기 ');
                document.write('점프하기 ');
            }
        }
    </script>
 
</body>
 

bycycle이라는 객체에 wheel, material 등의 변수와 func라는 함수 데이터를 넣어주었습니다.

정의하는 방법은

변수는 'key : value' 형태로 저장해야 합니다. 객체의 값은 key값을 통해 참조할 수 있기 때문입니다.

함수는 'key : funciont(){ 데이터 }' 형태로 입력해야 합니다.

정의를 했으니 이제 호출하는 방법을 알아보도록 하겠습니다

소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<body>
    <script type="text/javascript">
        var bycycle={
            wheel : '2개',
            material : '알루미늄',
            weight : '10kg',
            price : '14만원',
            func : function(){
                document.write('앞으로가기 ');
                document.write('멈추기 ');
                document.write('점프하기 ');
            }
        }
 
        for (name in bycycle){
            document.write(name+': '+bycycle[name]+'<br>');
        }
        
    </script>
</body>

객체의 데이터를 출력하기 위해서는 반복문을 사용해야 합니다. 배열을 출력하는 것과 비슷한 맥락입니다.

다만 배열은 데이터에 대한 index값이 자동적으로 들어가고, 객체는 index값을 사용자가 정해줍니다.

array

index	0	1	2	3
value	'핸들이'	'고장난	'에이톤'	'퉉'

for (int i=0;i<arr.length;i++){

print(value[i])

}

이처럼 index값을 i라는 변수로 지정하여 value값을 출력.

object(객체)

index	wheel	material	weight	price	func
value	2개	알루미늄	10kg	14만원	function()

그렇다면 객체는 어떻게 할까요.

array처럼 index 값을 변수로 지정해주는 것이 아닌 객체에서 직접 가져와야 합니다.

15번 라인은 bycycle이라는 객체 안에 있는 데이터의 key값을 반복문이 돌 때마다 하나씩 name으로 넣어줍니다.

아까 말씀드렸던 'key:value' 의 형태가 이처럼 사용되는 것입니다.

그렇다면 16번 라인의 name에는 객체의 첫 번째 키값인 'wheel'이 출력되게 됩니다.

value값은 객체명['key값']을 통해 참조할 수 있는데요.

16번 라인의 bycycle[name]은 곧 bycycle ['wheel']가 됩니다. wheel의 value값인 '2개'가 출력됩니다.

다음 반복문에서는 두 번째 key값인 material이 들어가겠고, bycycle[name]에는 bycycle['meterial']이 들어가게 되겠죠?

출력 화면

출력을 시켰더니 뭔가 이상하죠?

func 키값은 func이고 value는 function(){~~~} 라서 그렇군요

그럼 보기 좋게 출력시켜보도록 하겠습니다.

소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<body>
    <script type="text/javascript">     
        var bycycle={
            info:{wheel:'2개',material:'알루미늄',weight:'10kg',price:'14만원'},
            func:function(){
                document.write('앞으로가기 ');
                document.write('멈추기 ');
                document.write('점프하기 ');
            }
        }
        for (name in bycycle['info']){
            document.write(name+': '+bycycle['info'][name]+'<br>');
        }
        document.write('func: ');
        bycycle.func();
    </script>
 
</body>
 

위처럼 객체 안에 또 다른 객체를 정의해주었습니다.

4번 라인에 bycycle이라는 객체 안에 info라는 객체의 이름으로 또다른 객체를 정의했습니다.

객체 안에 또다른 객체를 정의할 때는 key:{key:value,key:value ...} 형태로 해주시면 됩니다.

11번 라인에 bycycle['info']라는게 뭔지 아시겠죠? bycycle의 객체의 info 객체입니다.

아까와 마찬가지로 name에는 info 객체 안의 key값인 wheel, material, weight, price가 차례로 들어가게 되고

bycycle['info'][name] 은 bycycle['info']['whell'] -> bycycle['info']['material'] -> ... 이 되어 각각에 해당하는 value값이 출력되게 됩니다.

15번 라인에 bycycle.func(); 은 bycycle 객체 안에 있는 func 함수를 호출합니다.

func 함수는 앞으로 가기, 멈추기, 점프하기라는 문자열이 HTML 문서에 출력되게 하므로 보기 좋게 앞선 14번 줄에 'func:'라는 문자열을 출력시켰습니다.

출력 화면

(whell 오타)

'프론트엔드 > Javascript' 카테고리의 다른 글

[Javascript] 정규 표현식(Regular expression), 정규식 패턴, 사용법, 날짜 차이 구하기 예제 (0)	2019.08.09
[JavaScript] 상속, Prototype, 함수 및 생성자 (3) (0)	2019.07.24
[JavaScript] 상속, Prototype, 함수 및 생성자 (2) (0)	2019.07.19
[JavaScript] 상속, Prototype, 함수 및 생성자 (1) (0)	2019.07.18
[Javascript] 모듈의 정의, 장점 및 예제 (0)	2019.07.01

html의 table 태그는 표를 만드는 태그이다.

table을 태그로 이루어져 있으며 <table><th><tr><td>로 구성된다.

태그	기능
<table>	테이블의 기본 태그
<th>	테이블의 head 부분
<tr>	테이블의 행
<td>	테이블의 열

한번 해보는게 이해가 훨씬 빠를 것이다.

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

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
 
    <title>Page Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>th1</th>
            <th>th2</th>
            <th>th3</th>
        </tr>
        <tr>
            <td>td1</td>
            <td>td2</td>
            <td>td3</td>
        </tr>
        <tr>
            <td>td4</td>
            <td>td5</td>
            <td>td6</td>
        </tr>
 
    </table>
</body>
</html>

가장 기본적인 형태의 테이블이며 <th> 태그는 진하게 + 가운데 정렬 속성이 자동으로 들어가 있는 것을 볼 수 있다.

그렇다면 표와 관련된 속성들을 알아보자

속성 명	기능
border	테이블 선의 너비
bordercolor	테이블의 테두리 색상
width	테이블 전체 너비
height	테이블 전체 높이
bgcolor	테이블 셀 배경 색
align(테이블의 위치를 정렬하는 것)	center : 가운데 정렬 right : 오른쪽 정렬 lleft : 왼쪽 정렬
colspan	열 병합
rowspan	행 병합

위의 속성을 가지고 테이블을 만들어 보도록 하겠다.

소스코드

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

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
 
    <title>Page Title</title>
    <style>
        table{
            text-align: center;    
        }
    </style>
</head>
<body>
    <table border="2" width="300" height ="300" bordercolor="blue">
        <tr bgcolor = "red">
            <th bgcolor = "orange">th01</th>
            <th>th02</th>
            <th>th03</th>
            <th>th04</th>
        </tr>
        <tr>
            <td bgcolor="red">td01</td>
            <td bgcolor = "orange">td02</td>
            <td>td03</td>
            <td rowspan="2">td04<br>+<br>td08</td>
        </tr>
        <tr>
            <td bgcolor="red">td05</td>
            <td>td06</td>
            <td bgcolor = "orange">td07</td>
        </tr>
        <tr>
            <td bgcolor="red">td09</td>
            <td colspan = 2>td10+td11</td>
            <td bgcolor = "orange">td12</td>
        </tr>
 
    </table>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

실행결과

테이블 내부의 텍스트 정렬에 관한 속성이 따로 없는 것 같아 css의 text-align:center; 코드를 삽입하여

가운데 정렬하였다.

자세한 설명은 생략.

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 이미지 삽입 - <img> 태그 (0)	2019.06.25
<p>, <br>, <h1> 태그 (0)	2019.06.25
<a> 태그 (0)	2019.06.19

<img> 태그는 HTML 문서에 이미지를 삽입시키기 위한 태그이다.

<img> 태그의 기본 속성으로는

src - 이미지의 source(출처/경로)
width - 이미지의 너비
height - 이미지의 높이
alt - 설명

가 있으며 아래와 같은 방식으로 사용한다.

1

<img src = money.png width = "300" height = "200" alt="동전과 지폐">

alt는 alternative text의 약자로 '대체 가능한 텍스트'라는 의미이다.

이미지에 대한 부가 설명을 나타내는 속성인데 이를 넣어주는 이유는 다음과 같다.

첫째, 만약 이미지의 경로가 잘못되거나 웹서버에서 img 파일이 사라졌을 경우 "엑박 + 설명" 형태로 출력되게 하므로 사용자 출력되지 않은 이미지가 무엇인지를 대략적으로 알 수 있다.

둘째, 시각장애인분들께서 음성인식 기반의 웹서핑을 할 때 img 태그에 적혀있는 alt를 듣게 됨으로써 이미지에 대한 정보를 얻을 수 있다.

셋째, SE (Search Engine), 즉 구글의 검색엔진에 사용되어 검색순위를 점하는데 도움이 됩니다.

실행화면

'프론트엔드 > HTML' 카테고리의 다른 글

<table> 태그 - 표 (0)	2019.06.27
<p>, <br>, <h1> 태그 (0)	2019.06.25
<a> 태그 (0)	2019.06.19

부가 설명이 필요없는 간단하고 기본적인 태그이다.

<br> = 줄바꿈

<p> = 단락

<h1~h4> = 제목, 부제목, 소제목

<br> 태그는 개행('띄어쓰기')를 하기 위해 사용한다.

<p>는 paragraph의 약자로 말 그대로 단락을 표시하기위해 사용한다.

<h1~h4>는 타이틀과 어울리는 형태의 크기로 내용을 출력해주며 끝에 개행이 들어간다.

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

    <h1>h1 : 어머님께</h1>
    <h2>h2 : 어머님께</h2>
    <h3>h3 : 어머님께</h3>
    <h4>h4 : 어머님께</h4>
 
    태그 사용 x<br>
    어려서부터 우리집은 가난했었고 남들 다하는 외식 몇번 한적이 없었고 
    일터에 나가신 어머니 집에 없으면 언제나 혼자서 끓여먹었던 라면 
    그러다 라면이 너무 지겨워서 맛있는것좀 먹자고 대들었었어 
    그러자 어머님이 마지못해 꺼내신 숨겨두신 비상금으로 시켜주신 
    자장면하나에 너무나 행복했었어 하지만 어머님은 왠지 드시질 않았어 
    어머님은 자장면이 싫다고 하셨어 어머님은 자장면이 싫다고 하셨어<br><br>
 
    br태그 사용<br>
    어려서부터 우리집은 가난했었고<br>남들 다하는 외식 몇번 한적이 없었고<br>
    일터에 나가신 어머니 집에 없으면<br>언제나 혼자서 끓여먹었던 라면<br>
    그러다 라면이 너무 지겨워서<br>맛있는것좀 먹자고 대들었었어<br>
    그러자 어머님이 마지못해 꺼내신<br>숨겨두신 비상금으로 시켜주신<br>
    자장면하나에 너무나 행복했었어<br>하지만 어머님은 왠지 드시질 않았어<br> 
    어머님은 자장면이 싫다고 하셨어<br>어머님은 자장면이 싫다고 하셨어<br><br>
 
    p태그 사용
    <p>
        어려서부터 우리집은 가난했었고 
        남들 다하는 외식 몇번 한적이 없었고 
        일터에 나가신 어머니 집에 없으면 
        언제나 혼자서 끓여먹었던 라면 
        그러다 라면이 너무 지겨워서 
        맛있는것좀 먹자고 대들었었어 </p>
    
    <p>
        그러자 어머님이 마지못해 꺼내신 
        숨겨두신 비상금으로 시켜주신 
        자장면하나에 너무나 행복했었어 
        하지만 어머님은 왠지 드시질 않았어 
        어머님은 자장면이 싫다고 하셨어 
        어머님은 자장면이 싫다고 하셨어
    </p>
        
</p>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

'프론트엔드 > HTML' 카테고리의 다른 글

<table> 태그 - 표 (0)	2019.06.27
HTML 이미지 삽입 - <img> 태그 (0)	2019.06.25
<a> 태그 (0)	2019.06.19

<a> 태그의 a란 anchor 즉 '닻'을 의미합니다.

배가 닻을 놓는다는 의미는 거기에 정박한다. 즉 '그곳으로 이동했다.' 라는 의미입니다.

따라서 <a> 태그란 어디론가 이동하거나 연결되는 의미를 가지고 있습니다.

<a>태그의 속성은 href, title, target 총 세가지입니다.

1. href

- 이동할(연결될) 주소를 지정하는 속성입니다.

- "http://www.naver.com" 과 같은 URL 주소 또는 "login.html"과 같은 html 파일로 이동할 수 있습니다.

2. target

- href 속성에 있는 주소나 파일을 어떻게 열지를 정하는 속성입니다.

이름	기능
target="_blank"	기입한 경로를 새 탶으로 엽니다.
target="_top"	기입한 경로를 브라우저 화면으로 엽니다.
target="_self"	기입한 경로를 같은 프레임에서 열게 합니다.
target="프레임"	기입한 경로를 입력한 페이지의 name에서 열게 합니다.
target="_parent"	기입한 경로를 현재 페이지의 한 단계 상위 페이지에서 출력되도록 합니다.

3. title

- 링크에 마우스를 갖다 대면 설명이 나오도록 하는 속성입니다.

테스트

1

<a href = "http://www.naver.com" target="_blank" title="네이버">네이버 홈페이지로 이동</a>

'프론트엔드 > HTML' 카테고리의 다른 글

<table> 태그 - 표 (0)	2019.06.27
HTML 이미지 삽입 - <img> 태그 (0)	2019.06.25
<p>, <br>, <h1> 태그 (0)	2019.06.25

과거의 HTML은 웹페이지에서 '정보'를 나타내기 위해 존재하였다.

그리고 머지않아 '정보'를 '효과적'으로 나타내기 위해 '디자인' 기능을 넣게 된다.

디자인 기능의 예로 font 태그가 있다.

하지만 디자인은 무언가를 창조하는 것이다.

디자인의 유행, 변화에 따라 창조는 계속되었고, 본래의 기능인 '정보'와 멀어졌다. 언어 또한 조금씩 무거워졌다.

결국 HTML의 본래 기능인 정보에만 집중하도록 하기 위해 디자인과 분리시켜야 한다는 결정을 내린다.

그리고 그 디자인은 CSS라는 새로운 언어 형식으로 개발된다.

HTML = 정보

CSS = 디자인

이것이 CSS의 등장배경이다.

'프론트엔드 > CSS' 카테고리의 다른 글

[CSS] Table 셀 테두리 사이 간격 없애기 / border-collapse : collapse; (0)	2021.06.10
[CSS] !important 란? (1)	2019.07.26

1. Goal

비밀번호 입력 시 길이에 따른 보안성 항목 추가

2. Using

HTML
Javascript

3. Source Code

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
67
68
69
70
71
72

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>젊은이여 그대의 이름을 가치있게 하라</title>
    </head>
    <script>
        function check_pw(){
 
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                document.getElementById('pw_pro_label').innerHTML ='비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.';
                document.getElementById('pw_pro').value='0';
                return;
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                document.getElementById('pw_pro_label').innerHTML = '비밀번호에 !,@,#,$,% 의 특수문자를 포함시켜야 합니다.'
                return;
            }
            document.getElementById('pw_pro_label').innerHTML = '';
            if(pw.length < 8){
                document.getElementById('pw_pro').value='1';
            }
            else if(pw.length<12){
                document.getElementById('pw_pro').value='2';
            }
            else{
                document.getElementById('pw_pro').value='3';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
    <style>
        td{padding:5px;}
    </style>
    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()">&nbsp;<span style="color:cadetblue">보안성</span> <progress id="pw_pro" value="0" max="3"></progress>&nbsp;<span id="pw_pro_label"></span></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
</html>
Colored by Color Scripter

cs

4. Explanation

1부와 소스코드가 비슷하니 추가된 부분만 간단하게 설명하도록 하겠다.

참고로 비밀번호 조건을 확인하는 부분의 조건문 내에 return 문을 추가해주었다고 한다. (가독성(?)을 위해...)

63

<td><input type="password" name="userPW" id="pw" onchange="check_pw()">&nbsp;<span style="color:cadetblue">보안성</span> <progress id="pw_pro" value="0" max="3"></progress>&nbsp;<span id="pw_pro_label"></span></td>

63번 라인에 <span style="color:cadetblut">보안성</span>은

보안성이라는 글자 + 스타일을 입히기 위해서 삽입해주었다.

<progress> 태그는 진행 정도를 아래와 같이 출력시키는 것이다.

봐줄만하다.(?)

<progress> 태그의 속성은

id, value, max가 있는데

max는 그려질 바(bar)에 대한 최대값

value는 현재 값이다.

위의 그림에서는 max = "3", value="2" 인 상태이기 때문에 약 66.6%의 영역이 색칠되어져 있다.

그럼 script문에서 이 value값만 컨트롤할수 있다면? (@_@)

아참 pw_pro_label은 bar에 대한 간단한 설명을 넣기 위한 id였는데! 사용하지 않았으므로 무시해주길 바란다.

script문은 정말쉽다. 추가된 부분은 아래와 같다.

일단 비밀번호에 대한 조건이 충족되지 않으면 pw_pro의 value값을 0으로 설정한다.

그럼 당연히 bar는 빈상태가 될것이다.

비밀번호에 대한 조건을 충족시킨 상태에서 비밀번호의 길이가 6~7자 사이일 시 value에 1을

8~11자 사이일 시 2를

12~16자 사이일 시 3을 입력해줌으로 써 <progress> 태그를 컨트롤 하였다.

(@_@)!

5. Result

6. Feelings

HTML을 배우면서 갑자기 뜬금! 궁금한게 생기곤 했는데 그중 하나가 이 부분이었다.

공부를 하고 나니 생각보다 구현하기 쉬웠다.

(@_@)

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자) (0)	2019.08.19
[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml) (0)	2019.08.19
[WEB] 2. 회원가입 비밀번호 조건 및 일치 여부 확인 1 (2)	2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력 (0)	2019.06.04

1. Goal

비밀번호 입력 조건 삽입 (비밀번호 길이, 특수문자 삽입)
비밀번호 일치 여부 확인

2. Using

HTML
JavaScript

3. Source Code

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>젊은이여 그대의 이름을 가치있게 하라</title>
    </head>
    <script>
        function check_pw(){
 
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
                document.getElementById('pw').value='';
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                window.alert('!,@,#,$,% 의 특수문자가 들어가 있지 않습니다.')
                document.getElementById('pw').value='';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
    <style>
        td{padding:5px;}
    </style>
    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()"></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
</html>
Colored by Color Scripter

cs

4. Explanation

4.1. 아주 간단한 회원가입 페이지 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    <body>
        <table>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">아이디</td>
                <td><input type="text" name ="userId" id="id"></td>
            </tr>
            <tr >
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호</td>
                <td><input type="password" name="userPW" id="pw" onchange="check_pw()"></td>
            </tr>
            <tr>
                <td width="5%" align="center">*</td>
                <td width="20%">비밀번호 확인</td>
                <td><input type="password" name="userPW2" id="pw2" onchange="check_pw()">&nbsp;<span id="check"></span></td>
            </tr>
        </table>
    </body>
Colored by Color Scripter

cs

여백주기와 일치여부 메시지 출력이 편하기 때문에 table 태그를 사용하였다.
<tr> 태그는 테이블의 row, 즉 행이고 <td>태그는 col, 즉 열을 의미한다.
<td> 태그의 width, align 속성을 사용하여 *(필수입력) 기호와 아이디, 비밀번호, 비밀번호 확인 셀을 만들어주었다.
width는 너비를 나타내며 align은 정렬을 의미한다.

11번째 줄에 onchange 속성을 사용하였는데, 이는 키보드로 입력 후 변화가 생겼을 때 발생하는 이벤트를 의미하고, check_pw()라는 함수를 실행시키도록 하였다.
16번째 줄도 위와 같다.

4.2. 비밀번호 조건 설정

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

<script>
        function check_pw(){
            var pw = document.getElementById('pw').value;
            var SC = ["!","@","#","$","%"];
            var check_SC = 0;
 
            if(pw.length < 6 || pw.length>16){
                window.alert('비밀번호는 6글자 이상, 16글자 이하만 이용 가능합니다.');
                document.getElementById('pw').value='';
            }
            for(var i=0;i<SC.length;i++){
                if(pw.indexOf(SC[i]) != -1){
                    check_SC = 1;
                }
            }
            if(check_SC == 0){
                window.alert('!,@,#,$,% 의 특수문자가 들어가 있지 않습니다.')
                document.getElementById('pw').value='';
            }
            if(document.getElementById('pw').value !='' && document.getElementById('pw2').value!=''){
                if(document.getElementById('pw').value==document.getElementById('pw2').value){
                    document.getElementById('check').innerHTML='비밀번호가 일치합니다.'
                    document.getElementById('check').style.color='blue';
                }
                else{
                    document.getElementById('check').innerHTML='비밀번호가 일치하지 않습니다.';
                    document.getElementById('check').style.color='red';
                }
            }
        }
    </script>
Colored by Color Scripter

cs

* document.getElementById('pw')

- pw라는 이름을 가진 id를 참조한다.

* document.getElementById('pw').value;

- pw라는 이름을 가진 id의 value값을 참조한다.

* SC

- 비밀번호 입력 조건에 들어가는 특수문자를 배열 형태로 정의한 것이다.

* check_SC

- 특수문자 체크 변수로 특수문자 발견 시 1, 발견되지 않을 시 0이 입력되도록 한다.

* if(pw.length <6 || pw.length >16) ~

- 비밀번호의 길이가 6글자 미만 또는 16글자 초과 시 window.alert 메소드를 사용해 오류 메시지를 출력시키고 입력했던 pw를 초기화시킨다.

* for(var i=0;i<SC.length;i++) ~

- SC 배열의 모든 값을 pw와 비교한다.
pw.indexOf('SC[i]')은 사용자가 입력한 비밀번호(pw)에 SC[i]가 있는지 확인하는 메소드이며 존재할 시 존재하는 위치를 반환하고 그렇지 않을 시 -1을 반환한다.
즉, SC에 들어있는 문자열이 존재할 시 check_SC를 1로 만들어 준다.

* if(check_SC == 0)~
- check_SC가 0일 경우 특수문자가 들어있지 않다는 메시지와 함께 입력했던 비밀번호를 초기화시킨다.

* if(document.getElementById('pw'.) !=''~~
- 위의 두가지 비밀번호 입력조건에는 공통점이 있다. 바로 조건을 만족하지 않을 시 입력했던 비밀번호를 초기화한다는 것이다. 반대로 초기화가 되지 않았다는 것은 조건을 만족했다는 의미이기 때문에 일치여부 확인을 위한 단계로 넘어가야 한다.

만약 이 코드가 없다면 위의 두가지 비밀번호 입력 조건을 만족하지 않았음에도 불구하고 일치여부를 확인하게 된다. 일을 두 번한다는 것이다.

* if(document.getElementById('pw').value==document.getElementById('pw2').value)
- pw의 value값과 pw2의 value값가 일치한다면

* document.getElementById('check').innerHTML='비밀번호가 일치합니다';~
- check 라는 id를 참조하여 그 안에 데이터를 넣는다. 즉 수정하기 위한 코드이다.

* document.getElementById('check').style.color='blue';
- 색을 변경해주었다.

5. Result

6. feelings

소스코드의 29번째 줄에 document.getElementById('check').innerHTML 가 있는데 생각해보니 document.getElementById('check').value와 똑같지 않나 라는 궁금증이 들어서 실험을 해보았다.
결과는 아래와 같다.

옆에 나와야 할 '비밀번호가 일치합니다' 라는 메시지가 뜨지 않는다.

처음엔

inner = 수정, 삽입 가능

value = 값 읽기 가능

이런 기능을 하는줄 알았으나 간단한 실험을 통해 알아보니

inner는 html 태그의 사이!<tag>'여기를 말합니다'<tag>

value는 tag의 value! <tag value = '여기를 말합니다'> <tag>

를 의미한다는 것을 알게 되었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
 
</head>
<script type="text/javascript">
    function test(){
        document.getElementById('test').innerHTML = '이 부분이 innerHTML';
    }
</script>
<body>
    <input type="text" id="test" value="이 부분이 value"></span>
    <input type="button" value="클릭" onclick = test()>
</body>
</html>
Colored by Color Scripter

cs

 

1. 클릭이라는 버튼을 눌렀을 때 test() 함수가 실행.

2. id가 test인 태그의 사이에 '이 부분이 innerHTML' 이라는 글을 삽입

3. 편...안

이상!

'프론트엔드 > 기타' 카테고리의 다른 글

[WEB] Ajax 통신 시 한글 깨짐 현상(???, 특수문자) (0)	2019.08.19
[WEB] Servlet - Ajax 통신하기(이클립스, tomcat, web.xml) (0)	2019.08.19
[WEB] 3. 회원가입 비밀번호 조건 및 일치 여부 확인 2 (0)	2019.06.04
[WEB] 1.CheckBox 상태에 따른 안내메시지 및 이미지 출력 (0)	2019.06.04

영암사는 승경이네