자바스크립트

자바스크립트의 다양한 빌트인 메소드와 기능을 설명하는 튜토리얼을 다룹니다.

또한 다양한 상황에 사용할 수 있는 예제와 설명을 통해 바로 실제 상황에 적용할 수 있는 스크립트를 제공합니다.

자바스크립트 코드 실행 시간 측정

by

원본: 자바스크립트 함수 실행에 걸리는 시간 알아내기 다음의 기능을 사용하면 함수 실행 시간 측정을 할 수 있습니다. Date.now()로 실행 시간 측정 이 메소드를 사용하면 현재 시간을 밀리초 단위로 가져올 수 있습니다. 이러한 기능을 활용해 함수가 실행되기 전과 후의 시간을 알아볼 수 있습니다. 함수 실행 후의 시간에서 함수 실행 전의 시간을 빼면 함수가 실행되는데 얼마만큼의 시간이 … Read more

자바스크립트 타이머 함수 setTimeout setInterval

by

원본: 자바스크립트 타이머 함수: setTimeout, setInterval 스크립트 작성 시 타이밍 이벤트를 사용하여 특정 코드의 실행을 지연시키거나 특정 간격으로 반복할 수 있습니다. 자바스크립트에서는 이러한 작업을 수행하기 위해 setTimeout()과 setInterval() 두 가지 기본 메소드를 제공합니다. setTimeout 타이머 함수 이 메소드는 전달된 함수의 실행을 지정된 시간만큼 지연시킵니다. 메소드에서 받는 매개변수는 호출하려는 함수와 함수 실행을 지연할 시간(밀리초) 두 가지입니다. … Read more

자바스크립트 퍼센트, 백분율 구하는 공식

by

원본: 자바스크립트에서 퍼센트 백분율 계산하기 백분율 계산은 수학, 금융, 교육 등의 분야에서 중요한 자리를 차지하고 있습니다. 웹 개발 및 자바스크립트 개발에서 백분율 계산은 보다 동적이고 사용자 친화적인 애플리케이션을 구축하게 하고 데이터를 명확하고 의미 있게 표현할 수 있도록 하기 때문에 중요한 면을 가집니다. 이 포스트에서는 자바스크립트를 통해 백분율 계산하는 과정을 알아보겠습니다. 백분율 계산하는 방법 자바스크립트에서 퍼센트를 … Read more

자바스크립트 소수점 자르기 (toFixed)

by

원본: JavaScript: Number toFixed() method 이 포스트에서는 자바스크립트 Number 객체의 toFixed() 메소드 사용 방법을 문법 구문과 예제를 통해 알아보겠습니다. toFixed 설명 자바스크립트에서 toFixed() 메소드는 숫자를 고정 소수점 표기법으로 변환(필요한 경우 반올림)하고 해당 값을 문자열로 리턴하는 Number 객체의 메소드 입니다. 이 메소드는 Number 객체의 메소드이기 때문에 Number 클래스의 특정 인스턴스를 통해 호출해야 합니다. 문법 구문 메소드의 … Read more

자바스크립트 문자열을 숫자 변환 방법

by

원본: Quick Tip: 자바스크립트에서 문자열 숫자 변환 방법 스크립트를 작성하다 보면 폼 양식 같은 요소에서 받은 값은 항상 문자열입니다. 이처럼 숫자가 문자열 형식으로 저장되는 다양한 상황있습니다. 자바스크립트는 일반적으로 숫자만 들어있는 문자열을 자동으로 변환해 처리해 줍니다. 하지만 문자열에서 특정 숫자를 추출하거나 복잡하게 변환해야 하는 경우도 있습니다. 이 포스트에서는 문자열 숫자 변환 방법 세 가지를 알아보겠습니다. Number … Read more

자바스크립트 절대값 구하기 (abs)

by

원본: 자바스크립트 절대값 – Math.abs() 이 포스트에서는 자바스크립트의 절대값 Math.abs() 메소드를 살펴보고 실제 사용 사례를 통해 구문 사용 방법을 알아보겠습니다. 절대값 구하는 방법 Math.abs() 메소드는 자바스크립트에서 숫자의 절대값 변환 결과를 리턴해 줍니다. 다시 말해, 숫자의 기본 부호를 제거하고 양수 값을 리턴합니다. 개발자 도구에서 위의 예제 코드를 확인해 보면 결과로 2를 리턴하는 것을 확인할 수 있습니다. … Read more

자바스크립트 문자열 길이 확인하기 (length)

by

원본: 자바스크립트 문자열 길이 String 객체의 length 속성은 문자열의 문자 수를 리턴합니다. 문자열 길이 length 문법 length 속성의 문법 구문은 다음과 같습니다: 여기서 str은 String 객체입니다. 문자열 길이 length 리턴 값 length 속성의 리턴 값은 문자열의 문자 수를 리턴합니다. String.length 속성은 UTF-16 문자열 포맷에 따라 문자 수를 계산합니다. 일부 희귀한 문자는 두 개의 코드 단위로 … Read more

HTML button 버튼 만들기

by

원본: 자바스크립트로 버튼 만드는 방법 이 포스트에서는 HTML과 자바스크립트로 버튼 요소를 만드는 과정을 단계별로 알아보겠습니다. 다음의 실용적인 예제와 함께 시작해 보겠습니다. HTML로 버튼 만들기 자바스크립트를 만지기 전에 기본적인 HTML을 사용하여 간단히 만들어 보겠습니다. HTML에서는 다음의 예제와 같이 <button> 태그를 사용하면 됩니다: 위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 열면 “Click me!”라는 텍스트가 있는 간단한 버튼 … Read more

자바스크립트 배열 최대값, 최소값 찾기

by

원본: 배열의 최소값 및 최대값 요소 가져오기 사용자에게 통계를 보여주거나 슬라이더의 경계를 설정할 때 배열에서 최대값, 최소값을 알아내야합니다. 이 포스트에서는 자바스크립트 배열에서 최소/최대 값을 알아내는 여러가지 방법을 알아보고 이들 사이의 속도를 비교해 보겠습니다. Math를 이용해 최대값, 최소값 얻기 Math 객체는 수학적 계산을 위한 유용한 메소드와 상수를 포함하는 자바스크립트의 빌트인 객체입니다. 여기서는 Math.min()과 Math.max() 두 개의 … Read more

자바스크립트 최대값 최소값 (Math.min Math.max)

by

원본: What are Math.min() and Math.max() in JavaScript? 자바스크립트에서는 다음을 사용할 수 있습니다: 문법 구문 두 메소드 모두 number 타입의 값을 매개변수로 받아 (1, 2), (1, 2, 3) 형태로 입력할 수 있습니다. 또한 스프레드 연산자를 통해 (…numbers)와 같은 형식으로 입력할 수도 있습니다. n 개 숫자의 최소값(min) 찾기 다음의 예제를 개발자 도구를 활용하여 실행하고 console.log() 메소드를 … Read more

자바스크립트 랜덤 문자열 만들기 (random)

by

원본: 자바스크립트에서 랜덤 문자열 생성하는 방법 랜덤 문자열은 사용자 ID, 비밀번호 생성, 토큰 생성 등 다양한 목적으로 사용됩니다. 이 포스트에서는 자바스크립트를 사용하여 무작위 데이터인 랜덤 문자열 생성하는 방법을 알아보겠습니다. 랜덤 문자열 필요성 이는 소프트웨어 개발 시 사용자 ID, 비밀번호, 토큰 등을 구성하는데 필요합니다. 웹 애플리케이션을 만든다고 가정했을 때 각각의 사용자가 로그인 할 수 있도록 임의의 … Read more

자바스크립트 날짜 정규식 체크

by

원본: 자바스크립트에서 문자열 날짜 정규식 확인 방법 이번 포스트에서는 자바스크립트에서 문자열 타입의 날짜 정규식 유효성 검사 방법에 대해 알아보겠습니다. 문자열 날짜 타입의 유효성을 검사하려면 해당 날짜가 해당 형식을 따르는지 확인하고 연도, 월, 일 구성 요소의 순서를 준수하는지 확인해야 합니다. 날짜 타입이 올바른지 여부를 확인하는 방법은 여러 가지가 있습니다. 예제를 통해 여러 방법과 구현을 살펴보겠습니다. Date.parse()로 … Read more

자바스크립트 특수문자 제거 (replace)

by

원본: 자바스크립트 정규 표현식으로 특수문자 제거 알파벳이나 숫자가 아닌 구두점, 악센트, 기호 등 읽을 수 없는 문자를 특수문자 라고 합니다. 문자열을 읽거나 이해하기 더 쉽도록 문자열에서 특수문자 제거를 해야합니다. 이 작업을 가장 간단하게 하는 방법은 정규 표현식을 사용하는 것 입니다. 포스트를 시작하기 전에 자바스크립트의 정규 표현식에 대해 간단하게 살펴보고 넘어가겠습니다. 자바스크립트의 정규 표현식 정규 표현식은 … Read more

자바스크립트 랜덤 숫자(난수) 생성 (random)

by

원본: 자바스크립트로 범위 내의 랜덤 숫자 생성하기 자바스크립트의 Math.random()은 0과 1 사이의 난수를 생성하는 랜덤 함수입니다. 즉, 0과 같거나 크고 1 보다 작은 값을 리턴합니다. (0 <= x < 1) 다른 범위의 숫자가 필요한 경우 간단한 수학을 사용하여 원하는 범위의 값을 얻을 수 있습니다. 참고로 이 메소드는 암호학적으로 안전한 랜덤 값을 생성하지 않습니다. 보안과 관련된 … Read more

자바스크립트 반올림, 올림, 내림 (round, ceil, floor)

by

원본: 자바스크립트의 round(), ceil(), floor()를 사용하여 반올림 이 포스트에서는 자바스크립트의 round(), ceil(), floor() 메소드를 사용하여 숫자를 반올림, 올림, 내림 하는 방법을 알아보겠습니다. 위의 모든 메소드는 Math 객체의 정적 메소드입니다. 즉, Math 객체의 인스턴스에서 메소드를 호출하는 것이 아니라 Math.method()와 같은 형태로 직접 호출합니다. (Math에는 생성자가 없습니다.) 참고로 이 메소드는 숫자(정수, 소수)에 대해서만 호출할 수 있으며, 그 … Read more

자바스크립트 라디오 버튼 만들기 (radio button)

by

원본: HTML로 라디오 버튼 만들기 방문자를 늘리기 위해 매년 새로운 웹 기술이 도입되지만, 시간이 지나도 변하지 않는 기술도 있습니다. 이번 포스트에서 그런 요소 중 하나인 HTML 라디오 버튼에 대해 알아보겠습니다. Form 양식에서 라디오 버튼 타입을 통해 여러 가지 옵션 중 하나를 선택하는 필드를 본 적 있을 것 입니다. HTML에서는 편리하게도 input 태그의 type 으로 라디오 … Read more

자바스크립트 특정 문자열 제거 (replace, slice, split, substring)

by

원본: 자바스크립트에서 문자열 제거 방법 자바스크립트의 문자열은 기본 자료형으로 작은따옴표(‘), 큰따옴표(“), 백틱(`)으로 묶인 일련의 문자를 가집니다. 문자열은 수정할 수 없습니다(immutable). 즉, 문자열을 변경하려면 원래 문자열은 놔두고 새 문자열을 만들게 됩니다. 문자열을 조작해주는 빌트인 메소드로 문자열을 수정하고 변환할 수 있으며, 이는 더 적은 코드로 작업을 더 쉽게 만듭니다. 문자열을 조작하는 작업 중 하나는 문자열에서 문자를 제거하는 … Read more

String.substring 자바스크립트 문자열 자르기

by

원본: JavaScript Substring Method 이번 포스트에서는 자바스크립트의 substring() 메소드를 효과적으로 사용하는 방법에 대해 알아보겠습니다. 여기서는 메소드의 작동 방식을 알아보기위해 예제와 패턴, 특이점 등을 확인해 보겠습니다. 일반적으로 substring() 메소드는 문자열의 일부를 추출하고 저장할 때 사용하는 String 객체의 메소드입니다. 추출하는 동안 원본 문자열은 그대로 유지되며 대상 부분만 새 문자열로 리턴됩니다. 문자열의 특정 부분을 가져올 때 사용하기 좋습니다. … Read more

자바스크립트 체크박스 생성, 사용법

by

원본: 자바스크립트 체크박스 이 포스트에서는 자바스크립트를 사용하여 체크박스가 선택되었는지 확인하고, 선택된 값을 가져오고, 모든 체크박스를 선택/해제하는 방법을 알아보겠습니다. 체크박스 생성 체크박스를 생성하기 위해서는 다음 예제와 같이 <input> 요소의 type 속성을 checkbox로 설정하면 됩니다: 가용성과 접근성을 향상시키기 위해 체크박스와 <label> 요소를 항상 연결하여 사용하는 것이 좋습니다. 이렇게 하면 다음과 같이 레이블을 클릭해도 체크박스가 선택되거나 해제됩니다: 또는: … Read more

자바스크립트 select option으로 메뉴 만들기

by

원본: HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element 대부분의 웹 페이지나 응용프로그램에서는 드롭다운 메뉴를 사용하여 정보 목록을 표시합니다. 우리는 이를 사용하여 탐색 메뉴, Form 옵션 등을 만들 수 있습니다. 웹 사이트나 프로그램의 메뉴를 보면 ‘메뉴를 만들기 복잡할 것 같다’라는 생각이 들 것 입니다. 맞습니다. 경우에 따라 복잡해지기도 합니다. … Read more