Topic

자바스크립트

A collection of 197 posts
자바스크립트

정규식으로 정상 이메일 주소 여부 체크하기

이메일 주소 문자열을 입력받아 이메일 주소가 정상이면 true를, 아니면 false 를 반환합니다. 정규식으로 심플하게 처리가 되고, 대소문자 구분은 하지 않습니다. function checkEmail(email){  var emailChecker=/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i;  return emailChecker.test(email) );}
1 min read
자바스크립트

쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수

쿼리 스트링 문자열을 받아서 JSON 문자열을 리턴하는 자바스크립트 함수입니다. function QueryStringToJSON(qs) { //파라메터별 분리 var pairs = qs.split('&'); var result = {};//json 빈 객체 //각 파라메터별 key/val 처리 pairs.forEach(function(pair) { pair = pair.split('=');//key=val 분리 result[pair[0]] = decodeURIComponent(pair[1] || ''); }); return
1 min read
자바스크립트

제이쿼리로 엘리먼트 보이기, 감추기, 활성화, 비활성화 하기

제이쿼리로 엘리먼트(들)을 보이게, 또는 보이지 않게 하는 방법은 5가지가 있습니다. 가장 추천하는 방법은 제이쿼리 내장 메써드인 .show()/.hide() 입니다. 제이쿼리 기본 메써드 사용 - 파라메터로 밀리세컨드 단위인 양수값을 받아 페이드 인/아웃 애니메이션 효과 적용 가능. - 기본적으로는 CSS "display" 속성을 변경하는 것과 동일하지만, 제이쿼리 내부에 변수값으로 감춤
2 min read
자바스크립트

[Javascript] 초간단 메모리 카드 게임 만들기

최소한의 코드로 카드를 뒤집어서 맞는 짝을 찾는 메모리 카드 게임을 만듭니다. 자바스크립트 코드 100줄 이내로 구현하는 간단한 게임 구현으로 랜덤으로 카드 셔플을 해서 배치를 하고, 짝을 맞추는 방식을 알 수 있습니다. 카드 숫자 배열을 랜덤으로 섞는 방법에 대한 자세한 내용은 다음 글을 참고하면 도움이 됩니다. > [Javascript] 배열을 이용한 카드 섞기(
18 min read
자바스크립트

[Javascript] 코딩테스트 - "H" + "i" + +", there."의 결과는?

코딩테스트로 자주 나오는 간단한 문제입니다. 먼저 함정 체크부터 합니다. "Hi, there." 라고 썼으면 -100점입니다. "i" 뒤에 "+"가 두개 있는 것이 오타라고 생각하거나, "+"가 한 개라고 착각하면 이미 탈락입니다. 이 문제는 두 가지 문제를 이해하는지를 확인하는 문제입니다. 문자열 텍스트는 다양하게 바뀝니다. 혼동을 주기 위해 특수문자를 넣기도 하고, "+ +" 뒤에 오는 문자열에 숫자를
3 min read
자바스크립트

[Javascript] 함수 선언(Function declaration)과 함수 표현(Function expression)의 차이를 이해하자 - 함수 호이스팅

자바스크립트는 함수를 선언하는 방식이 두 가지 있습니다. 함수 선언(Function Declaration)과 함수 표현(Function Expression)으로 함수 정의 방법을 구분하고, 둘 의 가장 큰 차이는 호이스팅(Hoisting)이 지원되는지 여부로 구분을 할 수 있습니다. 호이스팅은 순서대로 실행이 되는 인터프리터 방식 언어인 자바스크립트에서 코드 아래쪽에 정의된 함수를 코드 위쪽에서 사용할
10 min read
자바스크립트

[Javascript] 멀티라인 속보형 무한 롤링 텍스트 배너 만들기

멀티라인 무한 롤링 배너에 앞서 한 줄로 동작하는 무한 롤링 텍스트 배너를 만드는 방법을 먼저 학습하는 것을 추천합니다. 기본적인 구조가 유사하고, 구현이 더 쉽기 때문에 개념을 이해하는데 더 도움이 됩니다. > 속보형 무한 롤링 텍스트 배너 만들기 먼저 한 줄 롤링 배너에서는 기본적인 CSS 클래스 초기화 작업이 되어있는 HTML을  생성했지만, 멀티라인
18 min read
자바스크립트

[Javascript] JSON 데이터를 전송하는 기술

서버와, 또는 서버 사이에 데이터를 전송하는 대표적인 자바스크립트의 기술은 JSON입니다. XML로 데이터를 교환하기도 하지만, 데이터 크기와 효율면에서 JSON이 더 좋기 때문에 JSON을 주로 사용해서 사실상 표준 데이터를 교환하게 됩니다. 1. 객체를 JSON 문자열로 변환 웹에서 자바스크립트로 생성하는 데이터는 주로 배열, 또는 객체입니다. 서버에 데이터를 전송하려면 이 배열, 또는 객체를 전송가능한
2 min read
자바스크립트

[Javascript] 더 짧은 코드 작성을 도와주는 새로운 연산자들

1. 객체의 유효성을 체크하는 연산자 ? 객체의 속성 값에 접근할 때 하위 속성이 추가로 있을 경우 상위 속성의 유효성을 체크하지 않으면 예기치 않은 오류가 발생할 수 있습니다. const obj = { name : { firstName : 'John', lastName : 'Doe', }, age : 25 } 기본적으로 조건문으로 유효성을 체크하는 방법은 다음과 같습니다. if(obj.name){ if(obj.name.firstName){ console.
3 min read
자바스크립트

[Javascript] 한번에 끝내는 정규표현식(Regular Expression) 기초

정규표현식은 문자열에서 특정한 규칙과 일치하는 조합을 찾는 규칙을 작성한 패턴입니다. 사전 정의된 특수문자(메타문자) 규칙을 조합해 찾고자 하는 패턴을 정의함으로써 복잡한 형태(거의 무제한)의 문자열 패턴을 만들어낼 수 있습니다. 자바스크립트는 정규표현식을 하나의 객체로 정의하며, RegExp 내장 객체를 사용해 정규표현식을 생성하고, 문자열에서 정규표현식과 일치하는 패턴을 검색할 수 있습니다. 정규표현식은 객체를
12 min read