기본 기능 설명 ( ES5 )

 

- "-"을 기준으로, 앞자리 2~3자리, 가운데 3~4자리, 마지막 3~4자리의 숫자로만 이루어진 문자열 체크

- "-"(하이픈)을 제외하여 검사하고 싶을땐 아래 코드의 if문의 정규식에서 하이픈을 모두 삭제하여 실행

 

 

예제 코드

function telValidator(args) {
    const msg = '유효하지 않는 전화번호입니다.';
    // IE 브라우저에서는 당연히 var msg로 변경
    
    if (/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/.test(args)) {
        return true;
    }
    // alert(msg);
    return false;
}

 

사용법

telValidator(검사할 문자열);

이상 없을 시(성공) : true

이상 있을 시(실패) : false

 


 

*테스트 *

위 콘솔 로그의 각 라인 의미 : 실제 입력된 문자열 : 예상하는 리턴값 => 실제 리턴값

 

 

'Javascript > 코드 모음' 카테고리의 다른 글

[JAVASCRIPT] 이메일 유효성 검사  (1) 2019.12.09
[JAVASCRIPT] 비밀번호 유효성 검사  (0) 2019.12.09

 

 

 

 

 

 

순수 자바스크립트이며, 지속적으로 추가/확장됩니다.

 

 

 

 

기본 기능 설명 ( ES5 )

 

- 최소/최대 문자 입력 범위 ( 9~16 자리의 입력 체크 )

- 같은 숫자 연속 금지 ( 3자리를 기준으로, ex: pwd111(X), pwd11d(O) )

- 순차적 숫자 금지 ( ex : 123456 )

- 알파벳 순 문자 금지 ( ex : abcde )

 

 

실제 코드


function passwordValidator(args, opt) {
    // v1.0
    var obj = opt || {   // options의 기본 값들입니다. 
        min: 9, max: 16, conseq: 5, special: true,
        msg: '숫자와 영문자,특수문자 조합으로 9~16자리를 사용해야 합니다.',
    }

    var specialChar = opt.special ? '(?=.*[!@#$%^*+=-])' : '';
    var rules = new RegExp("^(?=.*[a-zA-Z])"+specialChar+
    "(?=.*[0-9]).{" + obj.min + "," + obj.max + "}$");
    if (!rules.test(args)) {
        console.log(opt.msg);
        return false;
    }
    if(!checkSequential(args, obj)) return false; // 필요없을 경우 주석하세요
    return true;
}

function checkSequential(s, obj) {   // 순차적 숫자, 알파벳, 동일한 숫자 체크 함수
    // Check for sequential numerical characters
    for(var i in s) 
        if (+s[+i+1] == +s[i]+1 && 
            +s[+i+2] == +s[i]+2) return false;
    // Check for sequential alphabetical characters
    for(var i in s) 
        if (String.fromCharCode(s.charCodeAt(i)+1) == s[+i+1] && 
            String.fromCharCode(s.charCodeAt(i)+2) == s[+i+2]) return false;
    // check for consecutive numbers
    var count = 0;
    for(var i = 0; i < s.length; ++i)
    {
        if(s[i] === s[i+1]) count++;
        else count = 0;
        if(count >= obj.conseq - 1) return false;
    }
    return true;
}

 

 

//사용법 

var options = {
    min:9, max:16, // 최소/최대 입력 범위 ( 9 ~ 16자리 )
    conseq:5, // 최대 연속 숫자 입력 ( ex: pwd22222 )
    special: true, // 특수문자 포함여부 (true일경우 반드시 포함하여야 함)
    msg: 'test message' // 실패할 경우의 출력 메시지 (ex : 비밀번호가 유효하지 않습니다..등 )
}

passwordValidator([String:검사할 문자열],[Object:옵션]);

 

 


*테스트 *

 

위 콘솔 로그의 각 라인 의미 : 실제 입력된 문자열 : 예상하는 리턴값 => 실제 리턴값

 

'Javascript > 코드 모음' 카테고리의 다른 글

[JAVASCRIPT] 이메일 유효성 검사  (1) 2019.12.09
[JAVASCRIPT] 전화번호 유효성 검사  (1) 2019.12.09





window.onload() : image, style, script가 모~두 로드 되었을 때 trigger된다.

DOMContentLoaded : HTML(DOM)이 로드되었을때 발생하고, image나 css등을 기다리지 않는다.







순서


(초기값은 readyState = loading)

  1. 가장 먼저 window 객체가 생성. (window는 전역 객체로 웹 페이지와 탭마다 생성)

  1. documet객체가 window의 프로퍼티로 생성되며 DOM트리의 구축을 한다. document객체는 readyState 프로퍼티를 가진다.

       3. DOM트리를 구축 중 script요소를 만나면 해당 script의 구문 분석 후 오류 발생하지 않으면 바로 그 자리에서 실행한다. 
         실행시 동기적으로 실행되어 html문서의 DOM트리 구축은 블로킹 된다. 오류가 발생한다면 멈추며, HTML DOM트리 구축을 중단한다. 

       4. script까지 모두 읽고 DOM구축이 성공한다면 readyState = interactive를 가진다.

       5. 이때 웹 브라우저는 DOM트리 구축을 알리기 위해 DOMContentLoaded 이벤트를 발생시킨다.

       6. img등 이미지 파일등의 외부 리소스를 읽어 들여야 한다면 이 시점에 읽는다

       7. 리소스까지 모두 읽어 들인 후에는 readyState = complete 으로 바뀌고 브라우저는 Window객체를 상대로 load이벤트(onload)를 발생시킨다.

모던 자바스크립트 ( 487page )






'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 스크롤 거리 구하기  (2) 2019.12.01
[JAVASCRIPT] event processing  (0) 2019.12.01



  • IE, firefox
document.documentElement.scrollLeft : x 축 방향으로 스크롤한 거리
document.documentElement.scrollTop : y 축 방향으로 스크롤한 거리
  크롬, 사파리, 오페라에도 같은 프로퍼티가 있지만 값이 항상 0

  • Chrome, safari, opera, edge, Quirks Mode
document.body.scrollLeft : x 축 방향으로 스크롤한 거리
document.body.scrollTop : y 축 방향으로 스크롤한 거리

  • Firefox, chrome, safari, opera, edge, IE>=9
window.pageXOffset : x 축 방향으로 스크롤한 거리
window.pageYOffset : y 축 방향으로 스크롤한 거리


  • 크로스브라우징 대응








function getScrollTop()
{
    if(window.pageYOffset !== undefined)
    {
        return window.pageYOffset;
    } else {
        return document.documentElement.scrollTop || document.body.scrollTop;
    }
}

function getScrollLeft()
{
    if(window.pageXOffset !== undefined)
    {
        return window.pageXOffset;
    } else {
        return document.documentElement.scrollLeft || document.body.scrollLeft;
    }
}

'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 브라우저 로드 순서  (0) 2019.12.01
[JAVASCRIPT] event processing  (0) 2019.12.01


  • event 등록 방법

  1. HTML 요소의 속성으로 등록하는 방법
            onclick, ondblclick, 등의 html 속성에 javascript 함수를 정의하여 작동시키는 방법.
            <input type="button" onclick="이런식();">

  1. DOM 요소의 프로퍼티로 등록하는 방법
            DOM의 객체인 window의 onload를 사용하여 등록하는 방법.
            
            ex) 
                        





  • addEventListener 메서드를 사용하는 방법
            
  • 등록
        
        target.addEventListener(type, listener, useCapture);
        
        target : 보통은 등록할 DOM 노드, Element, Document, Window, XmlHttpReqeust와 같이 이벤트를 지원하는 모든 객체
        type : 이벤트 유형 문자열 ( "click", "mouseup"..... )  https://developer.mozilla.org/ko/docs/Web/Events
        listener : 처리 담당 함수
        useCapture : 이벤트 단계 ( default : false )

  • 삭제
            target.removeEventListener(type, listener, useCapture);


문제점
1의 경우, HTML/JS가 섞여 가독성이 떨어짐. 특정 요소의 특정 이벤트(input button의 onclick에 단 하나의 이벤트)만 등록할 수 있는 단점이 있고, 그 요소에 똑같은 이벤트를 등록하면 override됨. 
2의 경우, HTML/JS를 분리 할 수 있다. 그러나 1과 같이 특정 요소의 특정 이벤트에 대해서 이벤트 처리기를 단 하나만 등록할 수 있는 단점이 있다.
1.2의 경우 공통적인 단점이 여러 개발자가 작성할 경우 이전 이벤트가 override 되는 단점을 갖고 있다.




  • 이벤트 전파
HTML에서는 부모 요소의 보더 박스 안에 자식 요소를 배치하며, 자식 요소는 부모 요소 안에 겹쳐진 상태로 표시된다. 이런 상태에서 자식 요소를 클릭하면 컴퓨터는 클릭한 요소가 부모/자식인지 알 수가 없다. 그래서 요소에서 이벤트가 발생하면 해당 요소의 조상요소를 포함한 전체에 이벤트 처리기나 이벤트가 리스너가 등록되어 있는지 확인하는 작업을 거쳐 등록된 함수가 있을 때 그 함수를 실행하도록 설계되어 있다.

  • 이벤트 객체

  • 이벤트의 단계
        
  1. 캡쳐링 단계(useCatpure : true)

[ 캡쳐링 - 최상위에서 타겟 요소까지 전파 ]

            이벤트가 최상위 window 객체에서 DOM트리를 타고 이벤트 타겟(발생한 요소)까지 전파됨. 이 단계에서 이벤트 타겟에 등록한 리스너보다
            타고 내려가는 중간 과정에 어떠한 이벤트 리스너등이 있으면 그것이 먼저 실행됨. 즉 이벤트 타겟이 이벤트를 수신하기 전에 이벤트를 
            중간에 가로채기(캡쳐)한다고 하여 캡쳐링 단계라고 한다. useCatpure의 기본값은 false이며 버블링단계에서만 리스닝 한다. true일 경우 캡쳐링단계.

  1. 타겟 단계
            이벤트가 이벤트 타겟에 도착(전파)된 단계. 이벤트 타겟에 등록된 이벤트는 이 시점에 실행됨.

  1. 버블링 단계(useCapture : false)

[ 버블링 - 하위 엘리멘트에서 상위 엘리먼트로 전파 ]


            이벤트가 이벤트 타겟에서 출발하여 DOM 트리를 타고 window객체까지 거슬러 올라가 전파되는 단계. 이 단계에 반응하도록 등록된 이벤
            트 리스너는 타겟에 등록된 이벤트 이후에 실행됨. 단 focus / blur이벤트는 그 요소만 필요한 이벤트이므로 버블링이 발생되지 않음.
            이벤트 리스너의 useCapture가 true면 타겟과 캡쳐링 단계에서만 실행되고 false이면 타겟 단계와 버블링 단계에서만 실행된다.
            이벤트 처리기와 리스너 모두 같은 요소에 등록되어 있다면 이벤트 처리기 먼저 실행되고 리스너에 등록된 순서에 따라 순차적 실행된다.

  1. 제공 메서드
            stopPropagation : 그 다음 요소로 이벤트가 전파되는 것을 막는다. 버블링 또한 되지 않음. 같은 단계의 리스너는 수행됨. 상위로 전파안됨
            stopImmediatePropagation : 상위로의 전파뿐만 아니라 같은 단계로도 전파되지 않고 일시적으로 멈춤.
            preventDefault : 웹 브라우저에 구현된 기본 동작을 취소. 해당 이벤트 객체의 cancelable 프로퍼티가 true일 경우만 사용가능.

  • 주요 이벤트 처리기






  • 이벤트 위임

개념 : 하위 요소에 각각 이벤트를 직접 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식.




















'Javascript > DOM 관련' 카테고리의 다른 글

img, a 태그의 CORS 문제  (0) 2024.04.23
[DOM API] DOM 그리고 HTMLElement  (0) 2019.12.17
[JAVASCRIPT] 브라우저 로드 순서  (0) 2019.12.01
[JAVASCRIPT] 스크롤 거리 구하기  (2) 2019.12.01

문제

정수를 저장하는 큐를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.

명령은 총 여섯 가지이다.

  • push X: 정수 X를 큐에 넣는 연산이다.
  • pop: 큐에서 가장 앞에 있는 정수를 빼고, 그 수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.
  • size: 큐에 들어있는 정수의 개수를 출력한다.
  • empty: 큐가 비어있으면 1, 아니면 0을 출력한다.
  • front: 큐의 가장 앞에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.
  • back: 큐의 가장 뒤에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.

입력

첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에는 명령이 하나씩 주어진다. 주어지는 정수는 1보다 크거나 같고, 100,000보다 작거나 같다. 문제에 나와있지 않은 명령이 주어지는 경우는 없다.

출력

출력해야하는 명령이 주어질 때마다, 한 줄에 하나씩 출력한다.













워낙에 문제가 간단하여, 바로 풀이한다. 이지만, 생각해야 할 것이 있다.


우선 큐의 구현에는 크게 2가지의 방법이 있다.


1. 배열 이용

2. 링크드 리스트를 이용


여기서는 단순 배열을 이용한다.


배열을 이용하는 큐는 기본적으로 메모리 공간 낭비라는 문제점이 있다.


왜냐하면 큐는 스택과 달리 입출력이 2개 이므로 front/rear를 갖는 인덱스가 필요하는데  ( front 삭제 , rear 삽입 )

삭제 시 front++, 삽입 시 rear++ 된다. 그런데 계속 삽입이 된다면 배열의 구조 상으로 0,1,2,3~~ 앞의 인덱스는 영원히 

사용하지 못하게 될 뿐만 아니라. 메모리가 부족해지고 나중에는 아무것도 삽입 할 수가 없다. 

이런 현상을 표류 현상(Drift, Rightward Shift)이라고 한다.


이를 해결하기 위하여 특정 rear가 배열의 특정 index에 도달하면 배열의 모든 큐 값들은 왼쪽으로 정리(Shift Left)할 수 있으나, 비용이 매우 크다.

그러므로 왼쪽 이동(Shift Left)을 피하면서 빈 공간을 재사용하고자 원형 배열(Circular Array)를 사용한다.


이를 위한 개념은 단순히 rear/front의 인덱스를 ++하는 것이 아니라 원형으로 증가해야한다.


7개의 배열 크기를 예로써

7에서 1을 증가시킨 인덱스가 8이 아닌 다시 0을 가리키게 하는 것이다.( 이는 리어 인덱스를 증가시킬 공간이 없으므로 다시 처음 인덱스인 0을 되돌려 그곳에 삽입하기 위함이다.)


이 인덱스를 다시 처음으로 돌릴 수 있게 하는 연산자가 모듈로(Module,%)함수로서, (Rear + 1) % MAX로 표시할 수 있다.

이 모듈로 함수에 대한 힌트는 본인도 교재에서 힌트를 얻었다.


역시 삽입/삭제시 검사를 해야한다. 삭제는 인덱스를 증가하면 되지만, 삽입은, 기존의 큐 값을 지울 수가 있다. (

 이를 위하여 삽입시 count변수를 두어 ++, 삭제 시 count변수를 --하는 식으로 현재 큐안의 값을 알아내고, 이것을 이용하여 count값이 배열의 크기를 초과하지 않았을 때만 push하여 기존의 큐 값이 덮어씌워지는 것을 방지할 수 있다.







#include 
#include 
#define MAX 10000

using namespace std;

class Queue {
public:
	void push(int value);
	int pop();
	bool empty() { if (count == 0) return true; else return false; };
	int size() {return count;};
	int front() {
		if (empty()) return -1;
		return q[front_]; 
	}
	int back() {
		if (empty()) return -1;
		return q[rear_];
	}

private:
	int q[MAX];
	int front_{ 0 };
	int rear_{ -1 };
	int count{ 0 };
};

void Queue::push(int value) {
	if (count <= MAX) {
		++count;
		rear_ = (rear_ + 1) % MAX;
		q[rear_] = value;
	}
}

int Queue::pop() {
	int temp;
	if (empty()) {
		return -1;
	}
	temp = q[front_];
	front_ = (front_ + 1) % MAX;
	--count;
	return temp;
}


int main() {

	int end{ 10000 };
	int num{ 0 };
	string cmd{ "" };
	int i = 0;
	Queue queue;

	cin >> end;
	
	while (i < end) {
		cin >> cmd;
		if (cmd == "push") {
			cin >> num;
			queue.push(num);
		}
		else if (cmd == "front") {
			cout << queue.front() << endl;
		}
		else if (cmd == "pop") {
			cout << queue.pop() << endl;
		}
		else if (cmd == "size") {
			cout << queue.size() << endl;
		}
		else if (cmd == "back") {
			cout << queue.back() << endl;
		}
		else if (cmd == "empty") {
			cout << queue.empty() << endl;
		}

		
		++i;
	}

	

	return 0;
}



C++ 17버전이고 이하버전에서는 {}이용한 변수 초기화 빌드 에러등이 발생 할 수 있다.




+ Recent posts