자바스크립트로 HTML 문서를 다룰 때 앵커(anchor) 태그는 매우 자주 등장하는 요소입니다. 자바스크립트는 문서 내 앵커의 총 개수를 간편하게 확인할 수 있도록 document.anchors.length 속성을 제공합니다. 이 속성은 프로그램의 다른 코드에 아무런 영향을 주지 않으면서 오직 앵커 태그의 개수만 반환합니다.문법length = document.anchors.length;이 구문은 문서 내 앵커 태그의 개수만을 반환하며, 다른 코드의 실행 결과에는 전혀 영향을 미치지 않습니다.알아두면 좋은 점document.anch
JavaScript의 앵커(anchor) 태그는 배열과 유사한(array-like) 구조를 따릅니다. 따라서 특정 앵커 태그에 접근하려면 배열처럼 인덱스를 사용하면 되며, 이때 document.anchors 컬렉션을 활용합니다.기본 문법element = document.anchors[i].innerHTML;위 문법에서 i는 원하는 앵커 요소의 인덱스 번호입니다. 인덱스는 0부터 시작하므로 첫 번째 앵커는 document.anchors[0]으로 접근합니다.예제 1: 첫 번째 앵커 요소 출력하기다음 예제에서는 두 개의 앵커 태그 중 첫
JavaScript DOM은 문서와 관련된 다양한 정보를 손쉽게 얻을 수 있는 여러 속성을 제공합니다. 그중 document.links.length 속성을 사용하면 현재 문서에 포함된 링크(<a> 태그)의 총 개수를 간단히 확인할 수 있습니다. 이 속성은 기존 코드의 정상적인 동작에는 전혀 영향을 주지 않으므로 안심하고 사용할 수 있습니다.document.links.length란?document.links는 HTML 문서 내 모든 <a> 태그(링크)를 담고 있는 컬렉션입니다. 여기에 length 속성을 붙이면
JavaScript에서 문서 내 링크의 href 속성을 찾는 방법JavaScript는 문서 내 특정 링크의 href 속성을 가져올 수 있도록 document.links 기능을 제공합니다. 이 방법은 배열에서 특정 요소에 접근하는 방식과 완전히 동일하게 동작합니다. 참고로 document.links는 문서 안의 모든 <a> 태그(영역이 있는 <area> 태그 포함)를 담고 있는 컬렉션을 반환하며, 각 링크에는 순서대로 인덱스가 부여됩니다. 지금부터 예제를 통해 자세히 살펴보겠습니다.예제 1다음 예제에는 세 개의
JavaScript는 document 객체를 통해 문서와 관련된 다양한 정보를 얻을 수 있도록 지원합니다. 그중 document.domain 속성을 사용하면 현재 문서가 로드된 서버의 도메인을 손쉽게 확인할 수 있습니다. document.domain이란? document.domain은 브라우저에서 기본적으로 제공되는 내장 속성으로, 현재 실행 중인 문서가 속한 서버의 도메인 이름을 문자열로 반환합니다. 별도의 설치나 복잡한 설정 없이 즉시 사용할 수 있으며, 동일 출처 정책(Same-Origin Policy) 환경에서 서브도메인 간
JavaScript는 document 객체를 통해 문서와 관련된 다양한 정보를 다룰 수 있도록 지원합니다. 이 객체가 제공하는 document.cookie 속성을 사용하면 특정 문서에 연결된 쿠키를 간단하게 가져올 수 있습니다. 이 방법은 코드의 다른 부분에 전혀 영향을 주지 않으므로 안전하게 사용할 수 있습니다.문법cookie = document.cookie;예제다음 예제에서는 document.cookie를 사용하여 현재 문서에 연결된 쿠키를 가져오고, 그 결과를 화면에 출력합니다.<html> <body> &
웹 개발을 하다 보면 브라우저 화면의 실제 사용 가능한 크기를 알아야 하는 경우가 자주 있습니다. JavaScript에서는 window.screen 객체가 제공하는 다양한 속성을 통해 브라우저 화면과 관련된 정보를 손쉽게 얻을 수 있습니다.특히 screen.availWidth와 screen.availHeight 속성을 사용하면 운영체제 인터페이스 요소(예: Windows 작업 표시줄)를 제외한 실제 사용 가능한 너비와 높이를 픽셀 단위로 확인할 수 있습니다. 지금부터 각각의 사용법을 자세히 살펴보겠습니다.사용 가능한 너비 (Avai
/g 플래그란 무엇인가?/g는 사용자의 작업을 한결 수월하게 만들어 주는 정규 표현식(regular expression) 플래그 중 하나입니다. 여기서 g는 global(전역)을 의미하며, 제공된 단어를 문자열 전체 범위에서 검색하도록 지시합니다. 따라서 문자열에 등장하는 특정 단어의 모든 항목을 다른 단어로 치환해야 할 때 /g 플래그가 반드시 필요합니다. 지금부터 예제와 함께 자세히 살펴보겠습니다./g 플래그 없이 replace() 사용하기다음 예제에서는 문자열에 포함된 모든 blue라는 단어를 red로 바꾸려고 합니다. 일반적
자바스크립트는 대소문자를 엄격하게 구분(case sensitive)하는 언어입니다. 따라서 특정 단어를 다른 단어로 치환할 때는 해당 글자가 대문자인지 소문자인지까지 확인해야 합니다. 단어가 한두 개라면 수동으로 검사하는 것도 어렵지 않지만, 처리해야 할 단어가 많아지면 이야기가 달라집니다. 바로 이런 상황에서 /i 플래그가 유용하게 사용됩니다. /i 플래그를 사용하면 대소문자와 관계없이 일치하는 단어를 모두 찾아 다른 단어로 교체할 수 있습니다. /i 플래그 없이 치환하는 경우 다음 예제에서는 문자열에 포함된 모든 blue를 r
HTML DOM에 새 요소 추가하기HTML DOM에 새로운 요소를 추가하려면 두 단계를 거쳐야 합니다. 먼저 createElement()로 요소를 생성한 다음, appendChild()를 사용해 기존 요소에 연결하는 것입니다. 요소를 생성만 하고 문서에 추가하지 않으면 화면에는 아무것도 나타나지 않습니다.따라야 할 단계먼저 <div> 섹션을 만들고 <p> 태그를 이용해 텍스트를 넣습니다.document.createElement(p) 메서드를 사용해 새로운 <p> 요소를 생성합니다.document.cr
JavaScript로 웹 페이지의 DOM을 조작하다 보면 특정 HTML 요소를 화면에서 제거해야 하는 경우가 자주 발생합니다. 이때 가장 대표적으로 사용되는 메서드가 바로 removeChild()입니다.removeChild() 메서드란?removeChild()는 부모 요소(parent element)에서 자식 요소(child element)를 삭제하는 DOM 메서드입니다. 즉, 어떤 요소든 해당 요소의 부모 노드를 통해 접근하여 제거할 수 있습니다.문법(Syntax)removeChild(element);이 메서드는 매개변수로 제거하
문자열이 특정 문자나 문자열로 시작하는지 확인해야 할 때, 전통적으로 indexOf() 메서드를 사용해 왔습니다. 하지만 고급 애플리케이션 개발 환경에서는 이 방식이 다소 구식으로 여겨집니다. 그래서 ES6(ECMAScript 2015)에서는 이러한 작업을 더 직관적이고 효율적으로 수행할 수 있는 startsWith() 메서드를 새롭게 제공합니다.기존 방식: indexOf() 메서드먼저 indexOf() 메서드를 사용하여 문자열이 특정 문자로 시작하는지 확인하는 전통적인 방법을 살펴보겠습니다.예제<html> <bod
자바스크립트의 test() 메서드는 정규 표현식(Regular Expression)과 함께 사용되는 메서드입니다. 주어진 문자열 안에서 특정 패턴이 존재하는지 검색한 뒤, 패턴을 찾으면 true, 찾지 못하면 false를 반환합니다.이 메서드는 기본적으로 대소문자를 구분(case sensitive)한다는 점을 꼭 기억해야 합니다. 아래 예제를 통해 자세히 살펴보겠습니다.기본 문법/패턴/.test(검사할문자열)test() 메서드는 정규 표현식 객체의 메서드로, 인자로 전달된 문자열에서 패턴과 일치하는 부분이 있는지 확인하고 불리언(B
exec() 메서드란?exec() 메서드는 자바스크립트의 정규 표현식(regex) 메서드 중 하나로, 문자열 안에서 지정된 패턴을 검색하는 역할을 합니다. test() 메서드와 달리, exec()는 찾아낸 텍스트를 객체(object) 형태로 반환한다는 점이 특징입니다. 만약 일치하는 패턴이 없다면 null을 반환합니다. 반환되는 객체에는 매칭된 텍스트(obj[0])와 매칭 위치(index) 같은 유용한 정보가 담겨 있어, 단순히 패턴의 존재 여부만 알려주는 test()보다 더 많은 정보를 활용할 수 있습니다. 아래 예제를 통해 자세
개요게터(Getter)와 세터(Setter)는 자바스크립트에서 객체 접근자(Object Accessor)를 정의할 수 있게 해주는 기능입니다. 두 기능의 핵심적인 차이점은 게터는 객체에서 속성 값을 가져올(get) 때 사용하고, 세터는 객체에 속성 값을 설정(set)할 때 사용한다는 점입니다.get과 set 키워드를 사용하면 겉보기에는 일반 속성처럼 보이지만, 실제로는 함수 로직이 실행되는 특별한 속성을 만들 수 있습니다. 아래 예제를 통해 각각의 동작 방식을 자세히 살펴보겠습니다.Getter(게터)란?게터는 get 키워드로 정의하
복제(Clone)란 한 변수에 담긴 객체를 다른 변수로 복사하는 것을 의미합니다. 하지만 단순히 할당 연산자(=)를 사용해 객체를 복사하면 우리가 기대한 대로 동작하지 않습니다. 올바른 복제가 이루어지려면 한 변수의 값을 변경했을 때 다른 변수에는 아무런 영향을 주지 않아야 합니다. 그러나 할당 연산자를 사용하면 두 변수가 같은 객체를 참조하기 때문에, 한쪽에서 변경한 내용이 반드시 다른 쪽에도 반영됩니다. 이러한 단점을 보완하기 위해 ES6에서는 스프레드 연산자(...)를 제공합니다. 할당 연산자 사용 시 문제점 다음 예제는 단순
JavaScript에서 문자열을 반복하는 방법은 크게 두 가지가 있습니다. 하나는 string.repeat() 메서드를 사용하는 방법이고, 다른 하나는 fill() 메서드를 사용하는 방법입니다. 지금부터 두 방법을 자세히 살펴보겠습니다.1. repeat() 메서드문법string.repeat(number);이 메서드는 숫자를 매개변수로 받아, 해당 횟수만큼 문자열을 반복합니다.2. Array.fill()과 join() 조합문법Array(number).fill(string).join();이 방법은 먼저 지정한 숫자만큼의 슬롯(공간)을
JavaScript에서 문자열을 분할(split)하는 방법은 크게 3가지가 있습니다. 가장 전통적인 방식은 string.split() 메서드를 사용하는 것이며, 이후 등장한 ES6에서는 스프레드 연산자(spread operator)와 Array.from() 메서드라는 두 가지 새로운 방법이 추가되었습니다. 지금부터 세 가지 방법을 하나씩 자세히 살펴보겠습니다. 1. String.split() 문법 string.split(); 예제 다음 예제에서는 string.split() 메서드를 사용하여 주어진 문자열을 개별 문자 단위로 분할합니
자바스크립트에서 문자열(string) 안에 포함된 부분 문자열(substring)을 확인하는 방법은 크게 두 가지가 있습니다. 하나는 indexOf() 메서드를 사용하는 것이고, 다른 하나는 ES6의 includes() 메서드를 사용하는 것입니다. 지금부터 각각의 방법을 자세히 살펴보겠습니다. indexOf() 문법 indexOf(str); 이 메서드는 찾고자 하는 부분 문자열의 인덱스(index)를 확인합니다. 인덱스가 존재한다면 해당 부분 문자열이 문자열 안에 있다는 의미이므로 결과로 true가 출력되고, 존재하지 않으면 fal
JavaScript는 navigator 객체를 제공하여 브라우저와 관련된 다양한 정보를 손쉽게 확인할 수 있습니다. 이 객체를 활용하면 사용자가 어떤 브라우저를 통해 웹 페이지에 접속했는지 파악할 수 있으며, 이를 기반으로 브라우저별로 다른 동작을 처리하거나 호환성 문제를 해결할 수 있습니다.브라우저의 애플리케이션 이름과 버전 정보를 얻기 위해서는 각각 navigator.appName과 navigator.appVersion 속성을 사용하면 됩니다. 지금부터 두 속성을 하나씩 자세히 살펴보겠습니다.브라우저의 애플리케이션 이름 확인하기