JavaScript 정규 표현식(RegExp)을 사용해 문자열에서 단어가 아닌 문자(non-word character), 즉 영문자(a-z, A-Z), 숫자(0-9), 밑줄(_)을 제외한 모든 문자를 찾으려면 다음 메타 문자를 사용하면 됩니다.\W\W는 [^A-Za-z0-9_]와 동일한 의미를 가지며, 공백, 특수문자, 기호처럼 단어를 구성하지 않는 모든 문자와 일치합니다.예제다음 코드를 실행하면 문자열에서 단어가 아닌 문자를 손쉽게 찾을 수 있습니다.<html> <head> <title>
정규 표현식(RegExp)에서 줄 바꿈(newline)을 제외한 임의의 문자 하나를 찾으려면 메타문자인 마침표(.)를 사용하면 됩니다.마침표(.)는 개행 문자를 제외한 모든 단일 문자와 일치하는 특수 메타문자입니다. 예를 들어 /p.o/g 패턴은 p로 시작하고 임의의 문자 하나가 오며 o로 끝나는 세 글자 조합을 전역(g) 옵션으로 문자열 전체에서 검색합니다.예제 코드다음 코드를 실행하면 줄 바꿈을 제외한 문자가 포함된 패턴 매칭 결과를 확인할 수 있습니다.<html> <head> &nb
Navigator 객체란?현재 웹페이지가 실행 중인 브라우저에 대한 정보를 확인하고 싶다면, 자바스크립트에 기본적으로 내장된 navigator 객체를 활용하면 됩니다. 이 객체는 별도의 선언 없이 즉시 사용할 수 있으며, 다양한 메서드와 속성을 통해 브라우저의 이름, 버전, 운영체제, 언어 설정 등 유용한 정보를 제공합니다.Navigator 객체의 주요 속성appName – 브라우저의 공식 이름appVersion – 브라우저의 버전 및 관련 세부 정보userAgent – 브라우저가 서버로 전송하는 User-Agent 문자열platf
JavaScript에서 delete 연산자를 사용하면 객체(object)에서 특정 속성(property)을 제거할 수 있습니다. 아래 예제 코드를 직접 실행해 보면 delete 연산자의 동작 방식을 쉽게 이해할 수 있습니다. 여기서는 book 객체의 가격(price) 속성을 삭제해 보겠습니다. 예제 코드 <html> <head> <title>JavaScript Delete Operator</title> <script> function
정규 표현식으로 숫자(0~9) 찾기자바스크립트 정규 표현식(RegExp)에서 숫자(0~9)를 찾으려면 \d 메타 문자를 사용하면 됩니다. 이 패턴은 아라비아 숫자 한 글자와 일치하며, 반대로 숫자가 아닌 문자를 찾고 싶다면 대문자 형태인 \D를 사용하면 됩니다.\d예제 코드다음 예제는 문자열 100% Responsive!에서 모든 숫자를 찾아 화면에 출력하는 코드입니다. match() 메서드와 전역 검색 플래그인 g를 함께 사용하면, 문자열 안에서 일치하는 모든 숫자를 배열 형태로 한 번에 얻을 수 있습니다.<html>&
정규식 수정자(Modifiers)란?JavaScript에서 정규식(Regular Expression)을 더 쉽고 유연하게 다루려면 수정자(Modifiers)를 활용하면 됩니다. 수정자를 사용하면 여러 줄에 걸친 검색, 대소문자를 구분하지 않는 검색 등 복잡한 조건의 검색 작업도 간단한 코드로 처리할 수 있습니다.JavaScript의 주요 수정자JavaScript에서 자주 사용되는 대표적인 수정자는 다음과 같습니다.번호수정자 및 설명1i대소문자를 구분하지 않는(case-insensitive) 매칭을 수행합니다.2m문자열에 개행(new
HTML 테이블에 캡션(제목)을 추가하려면 JavaScript DOM에서 제공하는 createCaption() 메서드를 사용하면 됩니다. 이 메서드는 테이블 객체에서 호출되며, 해당 테이블에 <caption> 요소를 생성한 후 반환합니다. 반환된 캡션 요소의 innerHTML 속성에 원하는 텍스트를 할당하면 화면에 캡션이 표시됩니다. createCaption() 메서드 동작 원리 createCaption() 메서드는 이미 캡션이 존재하는 경우 새로 생성하지 않고 기존 캡션을 그대로 반환합니다. 따라서 버튼을 여러 번 클릭
JavaScript의 exec() 메서드는 정규 표현식(RegExp) 객체에 포함된 메서드로, 지정한 패턴이 문자열 안에 존재하는지 검색하는 역할을 합니다.검색 결과 일치하는 항목이 발견되면 그 결과를 담은 배열을 반환하며, 일치하는 항목이 하나도 없으면 null을 반환합니다. 이때 반환되는 배열에는 단순히 일치한 텍스트뿐만 아니라 index(일치가 시작된 위치)와 input(검색 대상이 된 원본 문자열) 같은 추가 정보도 함께 들어 있습니다.예제다음 코드를 실행하면 JavaScript 정규 표현식에서 exec() 메서드를 실제로
마우스 이벤트를 활용해 이미지 롤오버 효과를 구현하려면 아래 예제 코드를 참고하여 실행해 보세요.예제<html> <head> <title>Rollover with a Mouse Event</title> <script> <!-- if(docume
JavaScript 정규 표현식(RegExp)에서 대괄호 안에 포함되지 않은 문자, 즉 특정 문자를 제외한 나머지 모든 문자를 찾으려면 부정 문자 클래스(negated character class)를 사용해야 합니다. 이때 대괄호 안의 맨 앞에 캐럿(^) 기호를 추가하면 됩니다.부정 문자 클래스 [^...]란?일반적인 [...] 패턴은 대괄호 안에 나열된 문자 중 하나와 일치하지만, [^...]처럼 캐럿(^)을 맨 앞에 붙이면 그 반대로 동작합니다. 즉, 대괄호 안에 포함되지 않은 모든 문자와 일치하게 됩니다.[^...]예를 들어
JavaScript 정규 표현식(RegExp)에서 특정 문자를 찾으려면 대괄호 [ ] 안에 해당 문자를 넣고, match() 메서드를 사용하면 됩니다.[...]기본 문법대괄호 안에 찾고자 하는 문자를 작성하고, 플래그 g를 추가하면 문자열 전체에서 일치하는 모든 문자를 찾을 수 있습니다.var reg = /[m]/g;예제 코드아래 예제는 문자열에서 문자 m을 찾아 출력하는 코드입니다. 직접 실행해 보면서 동작 방식을 확인해 보세요.<html> <head> &nbs
JavaScript에서 HTML 테이블의 행을 삭제하려면 DOM의 deleteRow() 메서드를 사용하면 됩니다. 이 메서드는 테이블 객체에 직접 호출할 수 있으며, 삭제하고자 하는 행의 인덱스 번호를 인수로 전달합니다.deleteRow() 메서드의 기본 문법기본 사용법은 다음과 같습니다.document.getElementById(테이블ID).deleteRow(인덱스);여기서 인덱스는 0부터 시작합니다. 즉, deleteRow(0)을 호출하면 테이블의 첫 번째 행이 삭제됩니다. 만약 인덱스를 지정하지 않으면 -1이 기본값으로 설정되
JavaScript 정규식에서 대괄호([]) 안의 숫자 범위에 포함되지 않는 문자를 찾으려면 캐럿(^) 기호를 활용하면 됩니다.부정 문자 클래스(^)란?대괄호 안에서 맨 앞에 ^를 붙이면, 해당 문자 집합을 제외한 나머지 모든 문자와 일치하는 부정 문자 클래스(negated character class)가 됩니다.[^0-9]예를 들어 위 패턴은 숫자 0부터 9를 제외한 모든 문자와 일치합니다. 만약 특정 범위의 숫자만 제외하고 싶다면 아래와 같이 작성할 수 있습니다.[^4-6]이 패턴은 4, 5, 6을 제외한 모든 문자와 일치합니다
JavaScript 정규 표현식(RegExp)에서 대괄호 []를 사용하면 특정 범위의 문자를 손쉽게 매칭할 수 있습니다. 특히 0부터 9까지의 십진수 숫자를 찾고 싶다면 아래 패턴을 사용하면 됩니다.[0-9]대괄호 안의 하이픈(-)은 문자 범위를 의미합니다. 예를 들어 [4-6]은 4, 5, 6 중 하나와 일치하는 단일 문자를 나타냅니다.예제 코드아래 예제는 문자열 987654에서 4부터 6 사이의 숫자만 추출하는 코드입니다. 정규식 뒤에 붙인 g 플래그는 전역(global) 검색을 의미하여, 일치하는 모든 문자를 배열로 반환합니다
JavaScript 정규 표현식(Regular Expression)에서 대소문자를 구분하지 않는 매칭을 수행하려면 i 수정자(modifier)를 사용하면 됩니다.i 수정자란?정규 표현식의 끝에 i 플래그를 붙이면 패턴을 검색할 때 영문자의 대소문자 차이를 무시합니다. 예를 들어 /welcome/i는 Welcome, WELCOME, welcome 등 어떤 형태든 모두 일치하는 것으로 처리합니다.예제 코드다음 코드를 실행하면 대소문자를 구분하지 않고 문자열 내에서 패턴을 찾을 수 있습니다.<html>
레거시 DOM(Legacy DOM)은 초기 웹 브라우저에서 사용되던 문서 객체 모델 방식으로, document 객체를 통해 다양한 문서 속성에 접근할 수 있습니다. 현대적인 W3C DOM이 표준화되기 전부터 널리 쓰였으며, 일부 속성은 현재 지원이 중단(deprecated)된 상태입니다.아래 표는 레거시 DOM으로 접근할 수 있는 주요 문서 속성과 각각의 설명입니다.번호속성 및 설명1alinkColor(지원 중단) 활성화된 링크(activated link)의 색상을 지정하는 문자열입니다.예제 − document.alink
정규 표현식(regular expression)에서 특수 문자는 단일 문자나 대괄호로 묶인 문자 시퀀스의 반복 횟수 또는 위치를 나타내는 데 사용됩니다. 각 특수 문자는 고유한 의미를 가지며, +, *, ?, $ 같은 기호는 항상 문자 뒤에 붙어 해당 문자의 반복 규칙이나 출현 위치를 지정합니다.주요 특수 문자 정리번호표현식 및 설명1p+p가 하나 이상 포함된 모든 문자열과 일치합니다.2p*p가 없거나 하나 이상 포함된 모든 문자열과 일치합니다.3p?p가 없거나 최대 하나만 포함된 모든 문자열과 일치합니다.4p{N}p가 정확히 N개
IE4 문서 객체 모델(DOM)은 마이크로소프트 인터넷 익스플로러 4(Internet Explorer 4) 버전에서 처음 소개되었습니다. 이후 발표된 IE 5 이상 버전부터는 대부분의 기본적인 W3C DOM 기능을 지원하기 시작했습니다. W3C DOM이란? W3C DOM(World Wide Web Consortium Document Object Model)은 HTML 및 XML 문서를 프로그래밍적으로 다룰 수 있도록 정의한 표준 API입니다. 이 표준을 따르면 브라우저 종류와 관계없이 일관된 방식으로 문서의 요소에 접근하고, 내용을
JavaScript에서 웹 문서의 콘텐츠에 접근하고 수정하기 위해 사용할 수 있는 DOM(Document Object Model)에는 여러 가지 유형이 있습니다. 각 모델은 도입된 시기와 지원 범위가 다르며, 아래에서 주요 세 가지 DOM 유형을 살펴보겠습니다. JavaScript에서 사용되는 DOM의 세 가지 유형 1. 레거시 DOM (Legacy DOM) 레거시 DOM은 JavaScript 언어 초창기 버전에서 도입된 모델입니다. 모든 브라우저에서 폭넓게 지원된다는 장점이 있지만, 문서 전체가 아닌 폼(form), 폼 요소, 이
W3C DOM(Document Object Model)은 자바스크립트를 통해 HTML 문서의 구조와 내용에 접근하고 조작할 수 있도록 표준화된 인터페이스를 제공합니다. 그중에서도 document 객체가 가진 속성들을 활용하면 문서의 핵심 요소들에 손쉽게 접근할 수 있습니다.W3C DOM으로 접근 가능한 주요 문서 속성아래 표는 W3C DOM을 사용하여 액세스할 수 있는 대표적인 문서(document) 속성과 각각의 설명입니다.번호속성 및 설명1body문서의 <body> 태그를 나타내는 Element 객체에 대한 참조입니다