IT 블로그

Javascript 오늘 날짜 구하기 자바스크립트에서 오늘 날짜 구하기에 대한 내용이다. 자바스크립트에서 에서 오늘 날짜, 현재 날짜와 현재 시간 가져와야할 때가 있는데, 그때는 date객체를 이용하면 쉽게 가져올 수 있다. 1. Date객체 사용하기 Date객체를 사용하면 오늘 날짜를 쉽게 가져올 수 있다. 먼저 아래 코드를 작성하고 Date객체에 무엇이 담겨있는지 F12를 눌러 console을 확인해보자. 12var date = new Date();console.log(date); 기본적으로 위와같이 작성했을때 현재 날짜와 현재 시간이 나온다. 2. Date관련 메소드 사용하기 솔직히 위와 같이 나오면 쓸곳이 없다.. Date객체에는 각 년월일, 시분초 를 가져올 수 있는 각각의 메소드를 사용하여 2..

Javascript 문자열 자르기 javascript에서 거의 매번 사용 된다 싶을 정도로 자주 쓰이는 문자열 자르기에 사용되는 메소드인 substring, substr에 대해 알아보자 1. Substring() 첫번째 문자열 자르기 메소드인 substring에 대해알아보자. substring는 문자열의 길이를 기준으로 지정한 두 위치 사이의 문자를 반환해 준다. 예를 들어 아래 코드처럼 "0123456789" 라는 문자열에서 위치 값을 2,5로 지정했을때 나오는 문자열은 234가된다. 12var str = "0123456789";alert(str.substring(2, 5)); 2. Substr() 두번째 문자열 자르기 메소드인 substr에 대해알아보자. substr은 시작문자 위치를 기준으로 잡고 ..

Css 3D 큐브 애니메이션 이번에는 transform을 이용해 아래와 같은 3D 큐브 애니메이션을 만들어 봤는데 그냥 재미로 한번 만들어 보자.. front back top btm left right Html 구조 잡기 html은 아래 코드와 같이 생각보다 엄청 간단하다. 정육면체의 앞, 뒤, 위, 아래, 좌, 우면과 각각의 면들을 감싸는 요소만 있으면 된다. 12345678 front back top btm left right Css 작성하기 먼저 큐브를 감싸는 녀석부터 원하는 크기와 각 면들의 3D애니메이션을 위해 transform-style에 preserve-3d를 지정해주었다. 123456.cube { position: relative; width: 200px; height: 200px; tra..

Javascript 배열(Array) / 2차원 배열(Array) / 사용하기 배열(Array)은 하나의 변수에 한개의 데이터 값이 아닌 여러개의 데이터 값을 동시에 가질 수 있다. 때문에 여러 데이터를 저장할 때는 문자, 숫자 타입 대신에 사용한다. 1. 사용하기 배열을 선언해보자. 1var array = []; 선언과 동시에 데이터를 넣어 줄 수도 있다. 1var array = ["어레이", "선언", "할당"]; 이제 데이터를 가져와 보자. 가져오는 방법은 데이터의 순서대로 0, 1, 2 방식의 key 값을 가지게 되는데 아래와 같이 사용하면 가져올 수 있다. 12345var array = ["흠", "포스트", "글"]; alert(array[0]); // 흠alert(array[1]); // 포..

Javascript 초성검색 하이라이트 javascript로 초성검색과 검색 결과 하이라이트를 만들었다. 어렵다.. 초성검색만 하면 하이라이트는 어렵지 않은 것 같다. console.log로 값을 확인 하면서 보길.. 다음에 더 자세히 설명해 포스팅하겠다..ㅜㅜ 구현하기 원리는 데이터와, 검색어를 모두 받아와 초성으로 변환 후 데이터에서 초성으로 바꾼 검색어가 들어 갈 수 있는 모든 값을 가져온다 - **참고 찾은 데이터와 검색어를 비교후 검색어가 초성이 아닌경우 같은 위치에 있는 데이터의 초성을 초성 변환전의 원본 글자로 치환한다. 그후 두 단어 비교후 일치시 반환 하는 것이다. ** 검색 데이터 = "가나다/가누다/가내다", 검색어 = "가ㄴ다" 초성 변환시 검색어가 검색데이터 처음에 나오는 ㄱㄴㄷ,..

Javascript reduce란 javascript의 reduce는 활용도가 높은 메소드다. 실제로 사용해보면 코드가 간결해 지고 가독성도 높아질 뿐만 아니라 인자 값을 어떻게 넣어주냐에 따라 활용 방식이 달라진다. reduce 사용법 reduce는 배열을 한번씩 모두 돌면서 현재 값을 b에 넣고 이전에 저장한 값은 a에 들어간다. 처음에는 배열의 첫번째 값이 이전값으로 들어간다 아래 코드를 보자 아래코드를 보면 return 값이 이전값으로 저장되어 a로 들어가게된다. console을 띄워 a와 b의 값을 확인해보면 쉽게 이해된다. 1234567891011var data = [1, 2, 3, 4, 5]; var sum = data.reduce(function(a, b) { console.log(a, b..

Javascript 문자열 검색 문자열에서 특정 문자나 문자열을 찾아야 하는 경우가 종종 있다. 이럴경우 indexOf 메소드를 이용하면 검색시 쉽게 찾을 수 있는다. 1. IndexOf 알아보기 indexOf는 문자(string)타입과 배열(Array)타입에서 모두 검색이 가능하며 찾고자 하는 요소가 있을 경우 위치를 반환해 준다. 2. IndexOf 사용하기 사용방법은은 앞에 문자열또는 배열을, ()안에는 찾고자 하는 값을 넣으면 된다. 검색 값이 존재하면 위치를 반환, 존재하지 않을 시 -1을 반환 한다. 123456var str = "가나다라마바사";var search = "나다";var search2 = "아"; var idx = str.indexOf(search); // 2var idx2 = ..

Javascript 조건문 (if / switch) 코드를 작성할때 가장 많이, 가장 자주 쓰이는 조건문에 대해 알아보자. 1. If문 if문은 괄호안의 조건이 참일경우 그 안의 코드를 실행시킨다. 사용방법은 간단하다, 아래 코드를 보자 123if (true) { alert('참')}cs 1-1. else 조건문 작성시 조건이 참이 아닐경우 실행되지 않게되는데 해당문이 끝난뒤 아래 코드와 같이 else문을 적어주면 조건이 참이 아닐경우 그 안의 코드가 실행되게된다. 12345if (false) { // 실행안됨 alert("호호");} else { // 실행됨 alert("하하");}cs 1-2. else if 앞서 나오는 조건문이 통과되지 않았을때 아래 코드와 같이 다른 조건문을 걸 수 있다. 1234..