JavaScript URL 속성 소개현재 열려 있는 HTML 문서의 전체 URL을 확인하고 싶다면 JavaScript에서 제공하는 document.URL 속성을 사용하면 됩니다. 이 속성은 해당 문서가 로드된 완전한 주소(프로토콜, 도메인, 경로 포함)를 문자열 형태로 반환합니다.document.URL은 읽기 전용(read-only) 속성이므로 값을 변경할 수는 없으며, 단순히 현재 페이지의 주소를 조회하는 용도로 사용됩니다.예제 코드다음 예제를 실행하면 JavaScript를 통해 문서의 전체 URL을 화면에 표시할 수 있습니다.&
JavaScript의 정규 표현식(RegExp)에서 주어진 문자 집합에 포함되지 않은 임의의 단일 문자를 매칭하려면 [^aeiou]와 같은 부정 문자 클래스(negated character class) 메타문자를 사용합니다.부정 문자 클래스란?대괄호 [] 안에서 맨 앞에 캐럿(^) 기호를 붙이면, 해당 집합에 속하지 않는 모든 문자와 일치시킬 수 있습니다. 예를 들어 [^aeiou]는 모음(a, e, i, o, u)을 제외한 모든 단일 문자를 찾습니다.예제 코드아래 예제에서는 문자열 Welcome!에서 [^lc] 패턴을 사용하여 l
현재 열려 있는 웹 문서의 제목(Title)을 확인하고 싶다면 JavaScript에서 기본으로 제공하는 title 속성을 사용하면 됩니다. document.title은 HTML 문서의 <head> 영역에 있는 <title> 태그에 설정된 텍스트를 문자열 그대로 반환해 주기 때문에, 별도의 복잡한 처리 없이 한 줄의 코드로 제목을 읽어올 수 있습니다.예제 코드아래 예제를 실행하면 문서의 제목을 가져와서 화면에 출력합니다.<!DOCTYPE html> <html> <
JavaScript 정규 표현식(RegExp)에서 주어진 문자 집합에 포함된 임의의 단일 문자와 일치시키려면 대괄호([]) 메타문자를 사용합니다. 예를 들어 [aeiou]는 모음 a, e, i, o, u 중 하나와 일치합니다.대괄호([]) 메타문자의 동작 원리대괄호 안에 나열된 문자 중 하나라도 발견되면 매칭에 성공합니다. 여기에 g(global) 플래그를 함께 사용하면 문자열 전체에서 조건에 맞는 모든 문자를 한 번에 찾아낼 수 있습니다.예제<html> <head>
JavaScript 개발을 하다 보면 숫자 값을 문자열로 변환해야 하는 경우가 자주 발생합니다. 예를 들어 화면에 결과를 출력하거나, 문자열과 연결하거나, 특정 형식으로 데이터를 처리할 때 유용합니다.String() 함수를 이용한 변환가장 간단하고 직관적인 방법은 전역 함수인 String()을 사용하는 것입니다. 숫자 값을 인자로 전달하면 해당 값이 문자열로 변환되어 반환됩니다.예제 코드<!DOCTYPE html> <html> <body>
자바스크립트(JavaScript) 정규 표현식에서 특정 문자가 0번 또는 1번 나타나는 문자열을 찾고 싶다면 p? 형태의 ? 수량자(quantifier)를 사용하면 됩니다. 물음표(?)는 바로 앞의 문자가 선택 사항(optional)임을 의미하므로, 해당 문자가 없어도 일치하고 하나만 있어도 일치합니다. 예제 아래 코드를 실행하면 0개 또는 1개의 대상 문자를 포함하는 부분 문자열을 모두 찾을 수 있습니다. 이 예제에서는 숫자 패턴 /10?/g를 사용하여 1 뒤에 0이 없거나 하나만 오는 경우를 매칭합니다. <html>
JavaScript에서 문서에 포함된 링크의 개수를 알아내려면 document.links 컬렉션과 length 속성을 함께 사용하면 됩니다.links 속성이란?document.links는 HTML 문서 내의 모든 <a> 태그와 <area> 태그를 담고 있는 컬렉션입니다. 여기에 length 속성을 붙이면 문서 전체에 존재하는 링크의 총 개수를 숫자로 반환받을 수 있습니다.예제 코드다음 예제를 실행하면 문서 내 링크의 개수가 화면에 표시됩니다. 네 개의 링크가 있는 문서에서 실제로 4라는 값이 출력되는 것을 확인
문서에 포함된 앵커(anchor)의 개수를 알아내려면 JavaScript의 anchors 속성을 사용하면 됩니다.document.anchors는 HTML 문서 내에서 name 속성이 지정된 모든 <a> 요소의 컬렉션을 반환하며, length 프로퍼티와 함께 사용하면 전체 앵커 수를 손쉽게 구할 수 있습니다.예제 코드아래 예제를 실행하면 문서에 있는 앵커의 총 개수를 화면에 출력할 수 있습니다.<!DOCTYPE html> <html> <body>
자바스크립트 정규 표현식(RegExp)에서 p* 수량자(Quantifier)를 사용하면, 문자 p를 0번 이상 포함하는 모든 문자열과 매칭할 수 있습니다.수량자(Quantifier)란?수량자는 앞에 위치한 문자나 그룹이 몇 번 반복되어야 하는지를 지정하는 특수 기호입니다. 별표(*)는 해당 문자가 0번 이상, 즉 없어도 되고 여러 번 반복되어도 된다는 의미입니다. 따라서 /p*/ 패턴은 p가 하나도 없는 문자열부터 pppp처럼 연속으로 반복되는 문자열까지 모두 일치시킬 수 있습니다.예제아래 코드를 실행하면 0개 이상의 e 앞에 오는
JavaScript의 정규 표현식(RegExp)에서 {N} 수량자(Quantifier)를 사용하면 특정 문자가 정확히 N번 연속으로 나타나는 문자열과 일치시킬 수 있습니다. 예를 들어 문자 p가 N번 반복되는 시퀀스를 찾으려면 p{N} 패턴을 사용하면 됩니다.핵심 개념{N} : 바로 앞의 문자가 정확히 N번 반복됨을 의미합니다.\d : 숫자(0~9) 한 글자와 일치합니다.g 플래그 : 문자열 전체에서 일치하는 모든 항목을 검색합니다.예제다음 코드를 실행하면 숫자가 3번 연속으로 나타나는 구간(\d{3})을 찾아 화면에 출력합니다.&
웹 개발을 하다 보면 현재 브라우저에 로드된 문서가 어떤 서버에서 왔는지, 즉 해당 서버의 도메인 이름이 필요한 경우가 종종 있습니다. 이럴 때 JavaScript에서 제공하는 domain 속성을 사용하면 아주 간단하게 확인할 수 있습니다.document.domain 속성이란?document.domain은 현재 문서를 로드한 서버의 도메인 이름을 문자열로 반환하는 속성입니다. 예를 들어 www.example.com에서 페이지를 열었다면 이 속성은 www.example.com 값을 가지게 됩니다.이 속성은 주로 동일 출처 정책(Sam
JavaScript에서 이미 정의된 객체에 새로운 속성(property)이나 메서드(method)를 추가하려면 prototype 프로퍼티를 사용합니다. prototype은 특정 생성자 함수로부터 생성된 모든 객체가 공유할 수 있는 속성과 메서드를 정의할 때 매우 유용한 기능입니다.prototype 프로퍼티란?JavaScript의 모든 함수는 내부적으로 prototype이라는 프로퍼티를 가지고 있습니다. 이 prototype에 속성이나 메서드를 추가하면, 해당 생성자 함수로 만들어진 모든 인스턴스가 이를 상속받아 사용할 수 있습니다.
JavaScript 정규 표현식(RegExp)에서 특정 문자가 2개에서 3개까지 연속해서 나타나는 문자열을 찾으려면 {2,3} 수량자(Quantifier)를 사용하면 됩니다.{2,3} 수량자란?수량자는 바로 앞에 위치한 문자나 그룹이 반복되는 횟수를 지정하는 메타 문자입니다. 예를 들어 p{2,3}은 문자 p가 최소 2번, 최대 3번 연속으로 등장하는 모든 패턴과 일치합니다.p{2} : p가 정확히 2번 반복되는 경우p{2} : p가 2번 이상 반복되는 경우p{2,3} : p가 2번에서 3번 사이로 반복되는 경우예제 코드<ht
JavaScript로 쿠키의 이름/값 쌍 표시하기현재 문서에 저장된 쿠키의 이름/값 쌍을 확인하려면 document.cookie 속성을 사용하면 됩니다. 이 속성은 해당 문서와 연관된 모든 쿠키를 이름=값 형태의 문자열로 반환하며, 쿠키가 여러 개일 경우 각 쌍은 세미콜론(;)으로 구분됩니다.예제 코드아래 코드를 실행하면 JavaScript를 이용해 문서 내 쿠키의 이름/값 쌍을 화면에 출력할 수 있습니다.<!DOCTYPE html><html> <body>
JavaScript에서 불리언을 숫자로 변환하기 JavaScript에서는 true가 1로, false가 0으로 변환됩니다. 가장 대표적인 방법은 전역 함수인 Number()를 사용하는 것입니다. 이 함수는 인자로 전달된 값을 명시적으로 숫자 타입으로 변환해 줍니다. Number() 함수 사용 예제 다음 예제를 실행하면 불리언 값이 숫자로 변환되는 과정을 직접 확인할 수 있습니다. <!DOCTYPE html> <html> <body> <
JavaScript로 첫 번째 이미지 ID 가져오기JavaScript에서 문서 내 첫 번째 이미지의 ID를 반환하려면 document.images 속성을 사용하면 됩니다. 이 속성은 HTML 문서에 포함된 모든 <img> 요소를 담고 있는 컬렉션(HTMLCollection)을 반환하며, 배열과 같은 방식으로 인덱스를 통해 각 이미지에 접근할 수 있습니다.핵심 문법document.images[0].id처럼 인덱스 0에 접근하면 문서에서 가장 먼저 등장하는 이미지의 id 속성 값을 얻을 수 있습니다. 또한 document.i
JavaScript에서 reduce() 메서드를 사용하면 배열의 두 값에 대해 왼쪽에서 오른쪽 방향으로 함수를 순차적으로 적용하여, 배열 전체를 하나의 값으로 줄일 수 있습니다. 배열의 합계 구하기, 누적 계산 등 다양한 상황에서 유용하게 활용됩니다.reduce() 메서드의 주요 매개변수callback − 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 누적값(accumulator)과 현재값(current value)을 인자로 받습니다.initialValue − 콜백 함수의 첫 번째 호출 시 첫 번째 인자
HTML 문서에 포함된 폼(양식)의 개수를 구하려면 JavaScript에서 document.forms 속성과 length 속성을 함께 사용하면 됩니다.document.forms는 현재 문서 안의 모든 <form> 요소를 담고 있는 컬렉션이며, 여기에 .length를 붙이면 해당 문서에 존재하는 폼의 총 개수가 숫자로 반환됩니다. 별도의 복잡한 로직 없이 한 줄의 코드로 간단히 확인할 수 있습니다.예제다음 예제 코드를 실행하면 문서 내 폼의 개수를 화면에 출력할 수 있습니다.<!DOCTYPE html> <h
JavaScript에서 toSource() 메서드는 배열의 소스 코드를 나타내는 문자열을 반환합니다. 쉽게 말해, 배열을 배열 리터럴 형태의 문자열로 변환해 주는 메서드입니다.다만 이 메서드는 ECMAScript 표준이 아니며 Mozilla(Firefox)에서만 지원된다는 점에 유의해야 합니다. 따라서 Chrome, Safari, Edge 등 다른 브라우저까지 고려하는 웹 개발 환경에서는 사용을 피하고, 대신 JSON.stringify()와 같은 표준 메서드를 활용하는 것이 좋습니다.toSource() 메서드의 반환 값배열에 toS
문서에서 첫 번째 폼(form)의 이름을 가져오려면 document 객체의 forms 속성을 사용하면 됩니다. 이 속성은 문서 내 모든 폼을 컬렉션 형태로 반환하며, 인덱스를 통해 각 폼에 접근할 수 있습니다.아래 예제 코드를 실행하면 문서에 포함된 폼의 개수와 함께 첫 번째 폼의 이름이 화면에 표시됩니다.예제<!DOCTYPE html> <html> <body> <form name ="formOne">