JavaScript에서 지정된 크기의 빈 배열을 만들려면 new 연산자와 함께 Array 생성자를 사용하면 됩니다. var numberArray = new Array(10); 위 코드는 길이가 10인 배열을 생성합니다. 다만 이 시점에는 실제 요소가 존재하지 않으며, length 속성만 10으로 설정된 상태라는 점에 유의하세요. 예제 코드 배열을 생성한 뒤, 새로운 값들을 할당하고 순회하며 출력하는 전체 예제는 다음과 같습니다. var numberArray = new Array(10); console.log(배열의 길이= + num
텍스트 입력 필드에서 사용자가 ENTER 키를 눌렀는지 감지하는 것은 검색창이나 로그인 폼 등 다양한 웹 개발 상황에서 자주 필요한 기능입니다. JavaScript에서는 ENTER 키의 keyCode 값인 13을 활용하여 손쉽게 이벤트를 처리할 수 있습니다.1. 입력 필드 생성하기먼저 ENTER 키 입력을 감지할 텍스트 입력 필드를 만들어 보겠습니다.<input type=text id=txtInput>2. keyCode와 on() 메서드로 ENTER 키 감지하기jQuery의 on() 메서드에 keyup 이벤트를 등록하고,
중첩 배열에 포함된 모든 정수를 합산하려면 같은 함수를 반복해서 호출하는 재귀(recursion) 기법을 사용해야 합니다. 배열의 각 요소를 순회하면서 해당 요소가 배열이면 자기 자신을 다시 호출하고, 정수라면 합계에 더하는 방식으로 동작합니다.예제 코드function sumOfTotalArray(numberArray) { var total = 0; for (var index = 0; index < numberArray.length; index++) {
개요 웹 페이지에서 입력 필드에 안내 문구(힌트)를 미리 표시해 두고, 사용자가 마우스 커서로 해당 필드를 클릭하면 힌트가 자동으로 사라지도록 만들고 싶은 경우가 있습니다. 이럴 때 onFocus(포커스 얻기)와 onBlur(포커스 잃기) 이벤트를 활용하면 아주 간단하게 구현할 수 있습니다. 입력 요소 준비하기 다음과 같은 입력 텍스트 상자가 있다고 가정해 보겠습니다. <label for=name>StudentName:<input name=name id=studentName value=Enter your Name
HTML 파일에서 모듈로 JavaScript 함수를 가져올(import) 때 함수를 찾을 수 없다는 오류가 발생하는 가장 흔한 원인은, 해당 함수 앞에 export 문을 작성하지 않았기 때문입니다. ES 모듈(ES Module) 시스템에서는 다른 파일에서 가져올 함수나 변수를 반드시 export 키워드로 내보내야 합니다. 즉, 스크립트 파일로 가져올 함수 앞에 export를 붙여주어야 정상적으로 임포트할 수 있습니다. 1. 함수 내보내기 — demo.js 아래는 demo.js 파일의 예제입니다. test() 함수 앞에 export
JavaScript에서 객체의 객체(object of objects)를 각 값이 배열인 객체 구조로 변환하려면 Object.fromEntries()와 map() 메서드를 함께 활용하면 됩니다.핵심 아이디어는 다음과 같습니다.Object.entries()로 객체를 [키, 값] 쌍의 배열로 변환합니다.map()으로 각 값을 하나의 요소를 가진 배열 [값]으로 감싸줍니다.Object.fromEntries()로 다시 객체 형태로 되돌립니다.예제 코드const studentDetails = { details1: {Name: John,
iframe에 빈(비어 있는) src를 설정해야 할 때는 단순히 속성을 비워 두는 것보다 about:blank 값을 사용하는 것이 좋습니다. 아래와 같이 <iframe> 요소의 src 속성에 지정하면 됩니다.<iframe src=about:blank></iframe>왜 about:blank를 사용해야 할까요?src 속성을 완전히 비워 두거나 생략하면 브라우저나 상황에 따라 예기치 않은 동작이 발생할 수 있습니다. 반면 about:blank는 명시적으로 빈 문서를 로드하도록 브라우저에 지시하는 표준적인
자바스크립트에서 배열에 담긴 여러 객체 중 특정 조건에 맞지 않는 객체를 제거하고 싶다면 filter() 메서드를 활용하면 됩니다. filter()는 콜백 함수의 반환값이 true인 요소만 모아 새로운 배열을 생성하기 때문에, 원본 배열은 그대로 유지된다는 장점이 있습니다. 예를 들어 다음과 같이 세 개의 객체가 담긴 배열이 있다고 가정해 보겠습니다. 이 중 세 번째 객체에는 details 속성이 없습니다. ObjectValue = [ { id: 101, details: { Name: John, subjectName: Jav
JavaScript에서 null이 아닌 값과 비어 있지 않은 값 개수 세기 배열을 다루다 보면 null이 아니면서 빈 값도 아닌 유효한 요소만 골라서 개수를 세야 하는 경우가 자주 있습니다. 이럴 때 forEach() 메서드를 사용하면 배열을 순회하면서 각 요소를 조건에 맞게 검사할 수 있습니다. 1. 예제 데이터 준비 먼저 다음과 같은 과목 이름 배열이 있다고 가정해 보겠습니다. let subjectNames = [JavaScript, Angular, AngularJS, Java]; 2. forEach() 기본 문법 forEa
웹 개발에서 특정 HTML 요소를 화면에서 잠깐 사라지게 하거나 다시 나타나게 하는 기능은 매우 자주 사용됩니다. 이번 글에서는 jQuery의 hide()와 show() 메서드를 활용해 HTML 요소(태그)를 손쉽게 숨기고 다시 표시하는 방법을 알아보겠습니다. hide()와 show()란? hide()는 선택한 요소를 화면에서 숨기는 역할을 하며, show()는 숨겨진 요소를 다시 화면에 표시합니다. 두 메서드를 버튼 클릭 이벤트와 함께 사용하면 사용자 인터랙션에 따라 콘텐츠를 동적으로 제어할 수 있습니다. 버튼 마크업 준비하기 먼
JavaScript에서 여러 개의 키를 하나의 동일한 값에 매핑해야 하는 경우가 종종 있습니다. 예를 들어, 여러 이름을 모두 같은 값 John으로 초기화하는 객체를 만들고 싶다면 for...of 루프를 활용하면 아주 간단하게 해결할 수 있습니다.1. 키 설정하기먼저 사용할 키들을 배열 형태로 정의합니다.const name = [Name1, Name2];2. for 루프로 키를 동일한 값에 매핑하기빈 객체를 생성한 뒤, for...of 루프를 사용하여 배열의 각 키를 순회하면서 동일한 값을 할당합니다.예제const name = [N
순서 없는 목록(Unordered List, UL)에 새 항목을 줄바꿈 형태로 추가하려면 document.querySelector()와 append() 메서드를 함께 사용하면 됩니다. 사용자가 입력한 값을 텍스트 박스에서 읽어와 <li> 요소를 동적으로 생성한 뒤, 목록에 추가하는 방식입니다.예제 코드아래는 이름을 입력받아 UL 목록에 하나씩 추가하는 완전한 예제입니다.<!DOCTYPE html> <html lang=ko> <head> <meta charset=UTF-8> <
JavaScript에서 객체 배열로 구성된 데이터를 다룰 때, 배열의 첫 번째 요소에 있는 특정 필드 값만 추출해야 하는 경우가 자주 있습니다. 이번 글에서는 BOTID와 담당자 이름(Name)을 가진 레코드 배열에서 첫 번째 BOTID를 가져오는 방법을 알아보겠습니다.예제 데이터다음과 같이 BOTID와 Name 속성을 가진 객체들이 담긴 배열이 있다고 가정해 보겠습니다.let objectArray = [ { BOTID: 56, Name: John }, { BOTID: 57, Name: David }, { BO
JavaScript에서 소수를 가장 가까운 10분의 1(소수점 첫째 자리)까지 반올림하려면 toFixed(1) 메서드를 사용하면 됩니다. 이 메서드는 숫자를 지정한 소수 자릿수만큼 반올림한 결과를 문자열 형태로 반환합니다.기본 문법var anyVariableName = yourVariableName.toFixed(1)예를 들어 다음과 같은 소수 값이 있다고 가정해 보겠습니다.var decimalValue = 200.432144444555; console.log(실제 값 = + decimalValue);예제 코드이제 위 소수를 소수
JavaScript에서 특수 문자 시퀀스 기준으로 문자열 분리하기문자열을 다루다 보면 특정 구분자(특수 문자 시퀀스)를 기준으로 하나의 문자열을 여러 개의 부분 문자열로 나눠야 하는 경우가 자주 발생합니다. 예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.var fullName = John <----> Smith ;위 문자열에서 <---->라는 특수 문자 시퀀스를 기준으로 이름과 성을 분리하려면 정규 표현식(Regex)과 split() 메서드를 함께 사용하면 됩니다.기본 문법var anyVariabl
문자열에서 각 문자가 몇 번 나타나는지 확인하고 싶다면, 각 문자의 빈도를 저장할 객체를 활용하는 것이 효과적입니다. 기본 원리는 간단합니다. 이미 존재하는 문자라면 해당 값에 1을 더하고, 처음 등장한 문자라면 1을 저장하는 방식입니다.기본 원리빈도수를 저장할 객체를 하나 준비합니다. 문자열을 한 글자씩 순회하면서 해당 문자가 객체에 이미 존재하는지 확인하고, 존재하면 카운트를 1 증가시키고, 존재하지 않으면 1로 초기화합니다.예를 들어 다음과 같은 문자열이 있다고 가정해 보겠습니다.var sentence = My name is
HTML 테이블에 담긴 데이터를 JavaScript에서 다루려면 배열 형태로 변환하는 것이 편리합니다. jQuery의 find() 메서드를 사용해 태그에서 데이터를 가져오고, push() 메서드를 사용해 해당 데이터를 배열에 저장할 수 있습니다.예제 테이블다음과 같은 테이블이 있다고 가정해 보겠습니다.<table id="details"><thead><tr><th>Name</th><th>Age</th></tr></thead&g
네, 가능합니다. Object.fromEntries() 메서드와 substr() 메서드를 함께 사용하면 객체 키에서 원하는 부분 문자열만 추출할 수 있습니다. substr() 안에는 부분 문자열을 시작할 인덱스와 잘라낼 문자열의 길이를 지정합니다.동작 원리Object.entries()는 객체를 [키, 값] 쌍의 배열로 변환하고, map()으로 각 키에 substr()을 적용한 뒤, 마지막에 Object.fromEntries()가 다시 배열을 객체 형태로 되돌려 줍니다.예제const originalString = { John
빈 문자열()과 NULL을 활용한 조건문으로 값이 비어 있는지 간단히 확인할 수 있습니다. 이 방법을 사용하면 사용자가 텍스트 상자에 값을 입력하지 않고 폼을 제출할 때 경고 메시지를 표시하도록 처리할 수 있습니다.예제 코드<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initialscale=1.0> <title>Documen
JavaScript로 개발을 하다 보면 배열 안에 동일한 값이 여러 번 중복되어 들어 있는 경우를 자주 마주하게 됩니다. 이럴 때 Set 객체를 활용하면 단 한 줄의 코드로 중복 값을 손쉽게 제거할 수 있습니다.중복 값이 포함된 배열 예시다음과 같이 학생 이름 목록에 중복된 값이 섞여 있는 배열이 있다고 가정해 보겠습니다.const listOfStudentName = [John, Mike, John, Bob, Mike, Sam, Bob, John];Set()을 이용한 중복 제거 방법배열에서 중복된 값을 제거하려면 JavaScript