자바스크립트

ALL

자바스크립트 문자열 뒤에서부터 자르기 slice

문자열을 자르기 위해 대표적으로 substring 함수를 사용합니다. 앞에서부터 문자열을 자른다면 substring로 충분하지만 뒤에서부터 자르고 싶은 경우에는 slice 함수를 사용해야 합니다. 문자열에서 substring 함수와 slice 함수의 자세한 차이점을 아래를 참조해주세요. 자바스크립트 문자열 자르기 slice와 substring 차이점 링크링크 slice 함수로 문자열을 뒤에서부터 자르는 방법을 보겠습니다. slice 문자열 뒤에서부터 자르기 slice (시작위치, 종료위치) 기본적인 사용방법은 아래 예제처럼 사용합니...
ALL

자바스크립트 문자열 자르기 slice와 substring 차이점

slice 함수는 배열을 자를때 많이 사용하지만 문자열을 자를 때도 사용합니다. 그리고 문자열을 자르기 위해 substring 함수를 많이 사용합니다. slice 함수와 substring 함수로 문자열을 자를때 차이점을 보도록 하겠습니다. slice와 substring 차이 substring(시작위치, 종료위치) slice(시작위치, 종료위치) 예제1 var str = "ABCDEFGHIJK"; var subRs = str.substring(0,2); var sliceRs = str.slice(0,2); console.log("su...
ALL

자바스크립트 LocalStorage 사용 방법과 쿠기와 차이점

자바스크립트를 사용하면서 값을 저장해야 하는 경우 변수를 사용합니다. 화면 이동이 있거나 영구적으로 저장해야 하는 경우 DB에 저장을 하거나 임시적으로 저장하고 싶은 경우 쿠키(cookie)를 사용하기도 합니다. 이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다. LocalStorage란? ・데이터를 사용자 로컬에 보존하는 방식. ・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능. ・자바스크립트(JavaScript)로 조작....
ALL

자바스크립트 ==와 === 차이점과 Object.is 사용 방법

자바스크립트에서 값을 비교하는 경우 == 또는 === 을 사용해 값을 비교합니다. 비교 연산자인 == 와 === 의 차이점에 대해서 알아보려고 합니다. 이미 알고 계신 내용이라면 끝가지 읽지 않으셔도 괜찮습니다. 그리고 Object.is 대해서도 살펴보도록 하겠습니다. == 와 === 차이 먼저 비교 연산자 == 와 === 에 대해서 살펴보겠습니다. 자바스크립트를 공부하면서 값을 비교하기 위해 사용하는 연산자로 ==를 배우게 됩니다. 하지만 == 보다는 ===를 사용하는 경우가 더욱 많습니다. 이유는 ==에는 형변환 기능이 암묵적으...
ALL

자바스크립트 console 사용 방법 크롬 콘솔 출력하기

이번에 소개할 것은 자바 스크립트 console 메서드입니다. 대부분 console.log로 디버그 확인용으로 많이 사용을 합니다. log 외에도 많은 함수들이 있으며 디버깅에 도움이 되는 기능도 많이 있기 때문에 정리를 해보았습니다. 브라우저는 크롬(Chrome)을 사용하도록 하겠습니다. console.log() 〇 문자 리테랄 log메서드 안에서 문자 리테랄을 사용할 수 있습니다. 사용할 수 있는 형식은 다음과 같습니다. ・%o / %O - for objects; ・%d / %i - for integers; ・%s - for s...
ALL

자바스크립트 for…of(이터레이터) 반복문 사용 및 예제

자바스크립트에서 for...of를 사용하여 반복문을 사용하는 방법과 예제를 보도록 하겠습니다. 지금 까지 사용해왔던 for문은 아래 예제처럼 사용해왔습니다. for문 예제1 var forItera = ; for (var i = 0; i < forItera.length; i++) { var value = forItera; console.log(value); } 일반적으로 가장 많이 볼 수 있는 for문의 작성방법이기도 합니다. 그리고많이 볼 수 있는 for문의 작성 방법으로는 다음과 같은 방법도 있습니다. for문 예제2 var fo...
ALL

자바스크립트 배열을 문자열로 변경 join 사용 방법

배열에 들어가 있는 값을 하나의 문자열로 사용하는 방법입니다. join을 사용하여 배열을 문자열로 간단하게 만들 수 있습니다. 예제를 보면서 join의 사용 방법을 확인하도록 하겠습니다. var array = ; var result = array.join(''); console.log( result ); 실행 결과 게스트님 안녕하세요. 배열 요소에는 라는 문자열이 저장되어 있습니다. 이것을 join 함수를 사용하여 하나의 문자열로 결합하였습니다. 배열을 이용하여 값을 저장해두는 경우가 많기 때문에 유용하게 사용할 수 있습니다. 그리...
ALL

자바스크립트 연산자를 이용 문자열 결합 방법 예제

자바스크립트에서 문자열을 결합하는 방법입니다. 크게 2가지 방법이 있습니다. join 함수를 사용하는 방법과 연산자 + 를 사용하는 방법입니다. + 연산자 사용 문자와 문자를 연결하는 경우 + 연산자를 주로 사용합니다. //문자와 문자를 연결하여 하나의 문자열로 완성 var str = 문자 + 문자 + 연산자는 덧셈을 하는 경우에 자주 사용되지만 문자를 결합하고 싶은 경우에도 사용됩니다. 실제 사용 var result = '게스트님' + ' 안녕하세요.'; console.log( result ); 출력 결과 게스트님 안녕하세요. 이...
ALL

자바스크립트 TOP 버튼 만들기 jQuery 사용X

jQuery를 사용하지 않고 JavaScript만을 사용하여 페이지의 가장 처음 부분으로 돌아가는 버튼을 만들도록 하겠습니다. 페이지 내에서 버튼을 눌렀을때 화면을 다시 표시하는 방식이 아닌 오른쪽 스크롤 바가 위로 이동을 하는 형식입니다. 스크롤바 조작은 jQuery를 이용하면 편리하지만 읽어 들이는 시간이 걸리기 때문에 이번에는 JavaScript만을 사용하도록 하겠습니다. HTML 샘플 <button class="scroll-top" id="js-button"> <i class="fa fa-chevron-up" aria-hid...