웹 개발을 하다 보면 버튼을 클릭했을 때 특정 콘텐츠 영역(div)을 보여주거나 숨겨야 하는 경우가 자주 발생합니다. 이번 글에서는 JavaScript의 style.display 속성을 활용해 버튼 클릭 한 번으로 div를 토글(표시/숨김)하는 방법을 알아보겠습니다.기본 HTML 구조먼저 화면에 표시할 div 요소를 준비합니다.<div id=showOrHide> Welcome in JavaScript </div>다음으로 클릭하면 위 div를 숨기거나 다시 보여줄 버튼을 만듭니다. 버튼에는 onclick 이벤트로
JavaScript에서 문자열의 각 단어 첫 글자만 대문자로 바꾸고 싶다면, split(), charAt(), toUpperCase() 세 가지 메서드를 조합하면 간단하게 해결할 수 있습니다.핵심 로직처리 순서는 다음과 같습니다.먼저 split( ) 메서드를 사용해 공백을 기준으로 문자열을 단어별로 분리합니다. 이후 각 단어에서 charAt(0)으로 첫 번째 문자를 추출하고, 추출한 문자에 toUpperCase()를 적용해 대문자로 변환합니다. 마지막으로 나머지 문자열과 결합한 뒤 join( )으로 다시 하나의 문장으로 합치면 됩니
개요 JavaScript에서 동적으로 생성한 자식 요소가 부모 요소의 CSS 스타일을 그대로 적용받도록 하려면 classList.add() 메서드와 append() 메서드를 함께 활용하면 됩니다. 먼저 document.createElement()로 새로운 div 요소를 생성한 뒤, classList.add()를 사용해 CSS 클래스(.class 선택자)를 추가하고, 이 요소를 부모 컨테이너에 추가하는 방식입니다. 주요 메서드 살펴보기 document.createElement() – 지정한 태그 이름의 새로운 HTML 요소를 생성합
match()와 정규 표현식으로 특수 문자 분리하기JavaScript에서 문자열에 포함된 특수 문자를 분리하려면 match() 메서드와 정규 표현식(Regular Expression)을 함께 사용하면 됩니다. 기본 문법은 다음과 같습니다.yourStringName.flatMap(anyVariableName => yourVariableName.match(/\w+|\W+/g));여기서 사용된 정규 표현식 /\w+|\W+/g는 각각 다음과 같은 의미를 가집니다.\w+ : 알파벳, 숫자, 언더스코어(_)로 이루어진 연속된 문자(단어)
JavaScript에서 배열 안에서 특정 속성 값을 기준으로 데이터를 찾으려면 find() 메서드와 map() 메서드를 함께 사용하면 됩니다. 예를 들어 이름(FirstName), 학번(RollNo), 과목(Subject) 정보를 담고 있는 학생 레코드 배열이 두 개 있다고 가정해 보겠습니다. 첫 번째 배열의 각 요소에 대해 두 번째 배열에서 동일한 RollNo를 가진 객체를 찾아 교체하는 작업을 수행할 수 있습니다. 예제 코드 second.RollNo == first.RollNo) || first)); console.log(ou
JavaScript에서 문자열을 원하는 글자 수까지만 남기고 나머지를 잘라내려면 substr() 함수를 사용하면 됩니다. 아래 예제 코드는 문자열을 9번째 문자까지만 남긴 뒤, 앰퍼샌드(&) 기호를 덧붙이는 방식으로 구현되어 있습니다. 예제 var myName = JohnSmithMITUS; console.log(원본 문자열 = + myName); var afterXCharacter = myName.substr(0, 9) + \u0026; console.log(잘라낸 후 문자열 = + afterXCharacter); 위 코드에서
JavaScript에서 객체 데이터를 배열로 변환하려면 push() 메서드를 활용하면 됩니다. 반복문과 함께 사용하면 객체 배열에서 특정 값만 추출해 새로운 배열을 손쉽게 만들 수 있습니다. 아래 예제 코드를 통해 자세히 살펴보겠습니다.예제studentDetails = [ { studentName:Chris, studentMarks:34}, { studentName:David, studentMarks:89} ] var convertIntoArray = []; for (var i = 0; i < st
JavaScript에서 집합의 모든 부분집합 찾기JavaScript에서 집합(set)의 모든 부분집합을 구하려면 reduce()와 map() 메서드를 함께 활용하면 됩니다. 이 방식은 배열의 각 요소를 순회하면서 기존에 만들어진 부분집합들에 새로운 요소를 추가한 조합을 점차 확장해 나가는 원리로 동작합니다.예를 들어, [8, 9]라는 배열이 주어졌을 때 모든 부분집합을 구하는 과정을 살펴보겠습니다.예제 코드const findAllSubsetsoOfGivenSet = originalArrayValue => originalArra
JSON 데이터를 구문 분석(parse)할 때는 parseJSON() 메서드를 사용하고, 특정 이름/값 쌍을 화면에 표시하거나 처리할 때는 $.each() 함수를 활용하면 됩니다. 예를 들어 다음과 같은 JSON 문자열이 있다고 가정해 보겠습니다. 이 데이터를 jQuery.parseJSON()으로 구문 분석하는 과정은 아래와 같습니다. const APIData = [{Name:John,Age:21},{Name:David,Age:24},{Name:Bob,Age:20}]; const getObject = jQuery.parseJSON
jQuery에서 :visible 선택자를 사용하면 현재 화면에 실제로 보이는 요소만 선택할 수 있습니다. 이 선택자는 display:none 등으로 숨겨진 요소를 자동으로 제외하기 때문에, 화면에 나타난 텍스트만 골라서 처리할 때 매우 유용합니다.:visible 선택자란?:visible은 jQuery에서 제공하는 특수 선택자로, 다음 조건을 만족하는 요소를 보이는 상태로 판단합니다.문서 내에 존재하면서 너비와 높이가 0보다 큰 요소display:none 또는 visibility:hidden으로 숨겨져 있지 않은 요소반대로 숨겨진 요
JavaScript에서 문자열과 숫자를 섞어서 연결할 때는 의도치 않은 결과가 나오기 쉽습니다. 이런 예기치 않은 문자열 연결(unexpected string concatenation)을 방지하려면 백틱(`)을 사용한 템플릿 리터럴(Template Literal)을 활용하는 것이 가장 안전하고 깔끔합니다. 템플릿 리터럴로 변수 값 삽입하기 먼저 다음과 같은 문자열 변수가 있다고 가정해 보겠습니다. const concatValue = John,David,Mike; var friendNames = `${concatValue}`; 이제
JavaScript에서 사용자가 어떤 문자 키를 눌렀는지 확인하려면 window.event 객체와 keyCode 속성을 함께 사용하면 됩니다. 이번 글에서는 예제 코드와 함께 그 방법을 자세히 살펴보겠습니다. 예제 코드 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initialscale= 1.0> <title>Documen
JavaScript에서 사용자의 키 입력(keypress)을 감지하는 가장 쉬운 방법은 onkeypress 이벤트 핸들러를 사용하는 것입니다. document.onkeypress 키 입력은 keyCode 속성과 비교하여 판별할 수 있습니다. keyCode 속성은 onkeypress 이벤트를 발생시킨 키의 유니코드(Unicode) 문자 코드를 반환하며, 이 값을 활용해 어떤 키가 눌렸는지 확인할 수 있습니다. 예제 코드 다음은 Enter 키와 그 외의 다른 키 입력을 구분하여 처리하는 예제입니다. <!DOCTYPE html&g
버튼 클릭으로 값 더하기이번 글에서는 버튼을 클릭할 때마다 특정 값을 누적해서 더하는 JavaScript 기능을 만들어 보겠습니다.먼저 아래와 같은 버튼이 있다고 가정해 봅시다.<button type="button" onclick="addTheValue(10)">Sum </button>위 버튼은 클릭될 때 addTheValue(10) 함수를 매개변수 10과 함께 호출합니다. 즉, 버튼을 클릭할 때마다 현재 표시된 값에 10씩 더해지는 방식입니다.전체 예제 코드아래는 완성된 H
HTML 폼에서 input type=submit을 사용하면 폼을 제출할 수 있고, 별도의 input type=button에 클릭 이벤트를 연결하면 입력된 값을 지울 수 있습니다. 아래 예제 코드를 통해 자세히 알아보겠습니다.예제 코드<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
JavaScript로 개발을 하다 보면 배열의 각 요소에 불필요한 특수 문자가 붙어 있는 경우를 자주 만나게 됩니다. 대표적인 예가 문자열 앞에 + 기호가 붙어 있는 상황입니다. 이번 글에서는 map()
addEventListener()로 버튼 클릭 이벤트 반복 처리하기JavaScript의 addEventListener()는 onclick 속성과 달리 기존 이벤트 핸들러를 덮어쓰지 않고 새로운 리스너를 추가하기 때문에, 버튼을 클릭할 때마다 등록된 함수가 계속해서 실행됩니다. 버튼을 클릭할 때마다 addEventListener()가 반복적으로 작동하도록 구현하려면 아래 코드를 사용하면 됩니다.예제<!DOCTYPE html> <html lang="ko"> <head> <meta
JavaScript에서 중첩된 JSON 배열 구조 안에 있는 특정 키의 값만 깔끔하게 추출하고 싶다면, 배열 메서드인 map()을 활용하는 것이 가장 간단하고 효율적인 방법입니다.JSON 배열 예시먼저 다음과 같은 JSON 배열이 있다고 가정해 보겠습니다. 각 객체는 customerDetails라는 배열을 포함하고 있으며, 그 안에 고객 이름과 국가 정보가 들어 있습니다.var details = [ { customerDetails: [ { customerName
문제 상황다음과 같은 배열이 있다고 가정해 보겠습니다.var numbers = [10, 3, 40, 50, 20, 30, 100];이 배열의 요소 중에서 서로 다른 두 숫자를 골라 그 합이 80이 되는 쌍(pair)을 찾아야 합니다.가장 단순한 방법은 모든 조합을 비교하는 이중 반복문이지만, 이 경우 시간 복잡도가 O(n²)로 비효율적입니다. 더 나은 방법은 객체(해시 맵)를 활용하여 단 한 번의 반복(O(n))만으로 원하는 두 숫자를 찾는 것입니다.예제 코드function specificPairsOfSumOfTwoNumbers(n
JavaScript에서 문자열 앞뒤에 포함된 불필요한 공백(whitespace)을 제거하고 싶다면 replace() 메서드와 정규식(Regex)을 함께 사용하면 간단하게 해결할 수 있습니다.공백이 포함된 문자열 예시다음과 같이 앞뒤에 공백이 포함된 문자열이 있다고 가정해 보겠습니다.var fullName= John Smith ;이제 replace() 메서드 안에 정규식을 설정하여 공백을 제거하는 함수를 만들어 보겠습니다.예제 코드function removeSpacesAtTheBeginningAndTheEnd(name) { r