클로리셔 작은 공간

Click 얼마나 진행했는지 또는 본인의 스킬, 성장 등 어느정도인지 나타낼 수 있는 효과라고 생각한다. See the Pen LYpVYQN by chloe Kim (@chlolisher) on CodePen.

Inputbox Validtion Numbers Only 자바스크립트 방법 중 가장 많이 쓰이는 방법 중 하나가 input 텍스트 박스 내에 숫자만 입력하게 하는 방법이다. 다양한 개발 방법 중 자바스크립트 이용하는 방법과 정규식의 인라인으로 작성하는 방법을 알아보자. 1. 정규식 이용한 방법 이렇게 onKeyup 속성을 넣어서 정규식을 입력하면 숫자외에 입력이 되지않는다. 2. 자바스크립트 이용한 방법 function inNumber(){ if(event.keyCode57){ event.returnValue=false; } } 자바스크립트로 키보드 누르는 키를 제어함으로써 숫자만 입력가능하도록 할 수 있다.

1. 변수 변수란 언제든 바뀔 수 있는 이름을 붙이는 것이다. 변수를 선언할때는 let / var 를 앞에 붙인다. 변수 선언할 때는 꼭 초깃값을 지정해야하는 것은 아니다. 초깃값을 할당하지 않았을때는 특별한 값 undefined가 할당된다. let 문 하나에는 변수 여러개를 선언 할 수 있다. let targetTempC, room1 = "conference_room", room2 = "lobby"; 여기서는 변수 3개를 선언 했는데 targetTempC는 값을 할당하지 않았으므로 undefined 받습니다. room1은 선언과 동시에 'conference_room'를 할당 받았고, room2 역시 선언과 동시에 'lobby'를 할당했습니다. 2. 상수 ES6에서 새로 생겼습니다. 상수는 변수처럼 값을..

1. HTML 마크업 메뉴01 메뉴02 메뉴03 내용01 내용02 내용03 우선 HTML 코드로 탭 메뉴 리스트들과 그 메뉴를 선택했을 때 나타나는 탭 컨텐츠를 제작합니다. * 탭 메뉴 리스트 : ul.tabs > li.tab-list * 탭 컨텐츠 영역 : div.tab-content 2. Javascript $(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab..

매개변수란 = 두 변수를 연결해주는 변수 '매개'라는 단어를 사전에서 찾아보면 '둘 사이에서 양편의 관계를 맺어 줌'이라는 뜻을 가지고 있다. 그렇다면 매개 변수는 어떻게 사용되는 것일까? RPG게임을 할때 아이템을 조합하던 그 순간을 떠올려 보자. A라는 아이템과 1~3까지의 카드를 가지고 있고, 아이템과 한가지의 카드를 합치면 새로운 아이템이 탄생하는걸 가정해보자. (1) A + 1카드 = X (2) A + 2카드 = Y (3) A + 3카드 = Z 아이템 A가 있는데 여기에 카드 1을 합치면 아이템 X가 탄생하고, 2를 합치면 Y, 3을 합치면 Z가 탄생하게 된다. 1, 2, 3 중에서 어떤 아이템을 섞느냐에 따라 결과물도 다르게 나온다는 뜻이다. 아이템 A는 항상 고정이고, 최종 아이템 결과물은 ..

동기적 (Synchronous ) 일반적으로 프로그래밍에서 코드의 실행은 작성된 코드의 위에서 부터 아래로 진행된다. 이처럼 코드가 위에서부터 아래로 내려가면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리라고한다. 비동기적 (ASynchronous ) - 이벤트가 언제 일어날지 프로그래머가 전혀 알 수 없는 이벤트를 말한다. 즉, 연속적으로 발생하는 이벤트를 담은 후 완료되는 순서대로 일을 처리하는 실행 순서가 확실하지 않는 것. 사용자의 마우스 클릭도 비동기적 이벤트의 일종이다. 사용자의 마음에 들어가지 않는 한 언제 클릭할지 알 수 없기때문이다. 비동기적 처리가 필요한 이유는? 원하는 데이터를 서버로부터 받아오는 방식의 어플리케이션을 만들었다고 가정해보자. 서버로부터 데이터를 받아서 해당 ..

자바스크립트를 사용하다보면 시간/날짜를 이용해서 작업하는 경우가 많다. 날짜 객체는 문자열과 숫자 모두 반환할 수 있는 유일한 타입이며 어떤 메서드가 있는지 알아보자. 메서드 설명 getDate() 날짜 중에 '일'자를 숫자로 반환 ( 1 - 31 ) getDay() 날짜 중에 '요일'을 숫자로 반환 ( 일요일 : 0 ~ 토요일 : 6 ) getMonth() 날짜 중에 '월'을 숫자로 반환 ( 1월 : 0 - 12월: 11 ) getFullYear() 날짜 중에 '년도'를 4자리 숫자로 반환 ( ex : 2022 ) getTime() 1970년 1월 1일부터 현재까지 시간을 초 단위 숫자로 반환 getHours() 시간 중 '시'각을 숫자로 반환 ( 0 ~ 23 ) getMinutes() 시간 중 '분'..

정규 표현식 소개 - 정규표현식(Regular expression)은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 '형식단어'이다. - 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 '문자열의 검색과 치환'을 위해 지원하고 있다. ​ ​ ​var regex = /정규표현식/; if(!regex.test("검사할문자열")) {...} ​ - Javascript는 정규 표현식을 슬래시( / )로 감싸서 표현한다. (따옴표가 아님에 주의) - 정규 표현식은 하나의 객체 형태가 되고, 내장하고 있는 test() 메서드를 통해 문자열이 그 식에 부합할 경우 true, 그렇지 않을 경우 false를 리턴한다. - 정규 표현식의 검사 결과는 보통 문자열이 식에 부합되지 않을 때에 대한 예외 처리가..

배열 배열은 여러개의 데이터를 순차적으로 저장하는 저장소이며, 사용하는 방법이 다양합니다. 1.문법 var 변수명 = [값1, 값2, 값3......] 배열 사용하는 방법 01 배열을 선언하고 데이터를 순차적으로 선언하는 방법입니다. var arr1 = new Array(); arr1[0] = 100; //첫번째 배열 저장소에 100을 저장 arr1[1] = 200; //두번째 배열 저장소에 200을 저장 배열 사용하는 방법 02 배열을 선언과 동시에 데이터를 넣는 방법입니다. var arr2 = new Array(100,200); 배열 사용하는 방법 02 배열을 선언하지 않고 바로 데이터를 넣는 방법입니다. var arr3 = [100,200]; 2. 배열 객체의 메서드 / 속성 종류 설명 join()..