HTML 요소에서 클래스를 제거하는 것은 JavaScript classList 속성의 remove()를 사용하면 간단합니다. 방법. 요소에 클래스를 추가하는 방법을 이미 읽었다면 클래스를 제거하는 것이 완전히 같은 방식이며 역순이라는 것을 알게 될 것입니다. 먼저 일반 classList.remove() 수식을 살펴보고 실용적인 예를 살펴보겠습니다. 공식 var element = document.querySelector(selector) element.classList.remove(class) 위의 일반적인 예에서 첫 번째 HTM

이 깔끔한 코드 조각으로 JavaScript를 사용하여 기존 HTML 요소에 ID 속성을 추가할 수 있습니다. 코드 let featuredTitle = document.querySelector(h1); featuredTitle.id = featured-title; 다음은 동영상에서 일어나는 일입니다. 먼저 웹페이지에서 h1 요소를 찾아 featuredTitle이라는 변수에 할당합니다. . 이 경우에는 점 표기법(variableName.attribute)을 통해 해당 변수에 ID 속성을 첨부합니다. featuredTitle.i

JavaScript 개체를 서버로 직접 보낼 수는 없지만 할 수 있습니다. send JSON — 보편적으로 접근 가능한 문자열 형식. 이 코드 스니펫을 사용하면 JavaScript 개체를 JSON 문자열로 빠르게 변환하여 데이터를 서버로 보낼 수 있습니다. 다음은 한 사람을 나타내는 JavaScript 개체입니다. let personObject = { name: Adam, age: 25, city: San Diego, profession: Web Developer, }; 위의 JavaScript 객체를 JSON

초보자 친화적이고 실용적인 바닐라 자바스크립트 튜토리얼. 중요한 시사점:고성능 창 이벤트 작성 방법 사용자의 하드웨어를 죽이지 않습니다. 대상:초보자부터 중급자까지 오늘 우리는 Viewport Dimensions라는 멋진 작은 앱을 만들고 있습니다. 이 기능은 한 가지 정말 잘합니다. 브라우저 창의 크기를 조정할 때 브라우저 뷰포트의 너비와 높이 값을 표시합니다. 이것은 반응형 디자인을 할 때 매우 중요한 도구입니다. CodePen에도 비슷한 기능이 있습니다. 하지만 더 큰 것과 몇 가지 추가 기능이 필요했기 때문에 직접 만들

요소에 클래스가 있는지 확인하는 것은 JavaScript classList 속성의 contains()를 사용하여 간단하고 빠릅니다. 방법. 먼저 classList.contains()를 사용하기 위한 일반 공식을 살펴보겠습니다. 그런 다음 실용적인 사용 사례. classList.contains() 수식 var element = document.querySelector(selector) element.classList.contains(class) 위의 일반적인 예에서는 다양한 querySelector()를 사용합니다. 선택자 이름

사용자의 마우스가 해당 영역에 들어갈 때 표시하려는 보이지 않는 요소(예:작업 표시줄/메뉴)가 있다고 가정합니다. JavaScript mouseenter 이벤트를 설정하여 이를 수행할 수 있습니다. 방법: HTML 마크업 좋아하는 편집기에 다음 HTML 코드를 추가합니다(온라인의 경우 CodePen을 권장합니다. CSS 스타일 스타일시트에 다음 CSS를 추가하세요. .invisible-box { opacity: 0; transition: all 500ms; padding: 32px; margin-top: 32

JavaScript로 요소의 클래스를 전환하는 방법은 개발자로서 배울 수 있는 가장 실용적인 기술 중 하나입니다. 토글은 메뉴 표시 및 숨기기, 검색 필터 추가 및 제거, 소셜 미디어 버튼(좋아요, 추천 등)을 포함하여 많은 작업에 사용됩니다. 물론 컨텍스트에 따라 토글이 몇 줄의 코드보다 더 복잡할 필요는 없습니다. 오늘은 토글 뿐만 아니라 자바스크립트 전반을 배우는 간단한 방법을 배울 것입니다. HTML 구조 JavaScript로 기능적인 내용을 다루기 전에 상호 작용할 수 있는 몇 가지 HTML 요소를 설정해 보겠습니다

JavaScript를 사용하여 문자열에서 마지막 문자를 제거하는 가장 간단한 방법은 slice()를 사용하는 것입니다. 방법. 그렇게 하려면 slice() 안에 두 개의 매개변수를 추가해야 합니다. 방법: 시작점(0) 제거할 항목 수(1) 다음은 철자가 잘못된 회사 이름을 수정하는 예입니다. const companyName = Netflixx const fixCompanyName = companyName.slice(0, -1) console.log(fixCompanyName) // output: Netflix 참고:spl

JavaScript로 문자열에 특정 단어 값이 포함되어 있는지 어떻게 확인합니까? JavaScript의 내장 includes()를 사용하여 문자열에 찾고 있는 특정 문자가 포함되어 있는지 여부를 결정하는 메서드입니다. 따라서 이 HTML 페이지에 JavaScript라는 단어가 포함되어 있는지 알고 싶다고 가정해 보겠습니다. JavaScript를 통해 알아내려면 먼저 찾고 있는 문자열 값(단어)이 포함된 것으로 의심되는 요소를 선택해야 합니다. 이 경우 <article>입니다. 요소: const findJavaScr

JavaScript 배열에서 처음 X개의 요소에 어떻게 액세스합니까? JavaScript의 내장 slice()를 사용합니다. 방법. 예를 들어 배열의 처음 3개 항목을 조작해야 한다고 가정해 보겠습니다. 이 경우 배열은 연습 목록입니다. const exerciseList = [ Deadlift, Squat, Push-up, Pull-up, Turkish Get-up, Kettlebell Swing, ] 먼저 액세스하려는 항목의 수를 정의합니다. // get the first 3 items const numb

일반 바닐라 JavaScript로 DOM 요소를 숨기고 표시하는 방법을 알아보세요. JavaScript에는 style이라는 적절한 스타일 속성이 있습니다. , 요소에 CSS 속성을 설정하고 CSS로 스타일을 지정하는 데 사용할 수 있습니다. 시도해 봅시다! JavaScript로 DOM 요소를 숨기는 방법은 다음과 같습니다. element.style.display = none DOM 요소를 다시 표시하려면: element.style.display = block 참고:DOM 요소가 원래 inline으로 설정된 경우 또는 inli

JavaScript를 사용하여 배열에 항목을 추가하는 몇 가지 방법 알아보기 배열에 항목을 추가하려면 JavaScript의 push() 메소드 또는 concat() 컨텍스트에 따라 방법. 두 메서드 모두 JavaScript Array 개체에서 제공됩니다. 실제로 두 가지 방법을 모두 사용하는 방법과 이유를 알려 드리겠습니다. 배열에 단일 항목 추가 기존 야채 목록(배열)에 야채를 추가해 보겠습니다. const vegetables = [broccoli, onion, spinach] vegetables.push(carot) 이제

두 가지 방법을 사용하여 JavaScript 개체의 속성 수를 계산하는 방법을 알아보세요. JavaScript 개체 속성의 수를 계산하려면 다음 중 하나를 사용할 수 있습니다. for 루프 또는 Object.keys() 방법. 둘 다 살펴보겠습니다! for 루프로 개체 속성 계산 다음은 dog라는 JavaScript 객체입니다. : const dog = { name: Naya, age: 2, color: black, Breed: Rottweiler mix, } dog의 개체 속성 수를 계산하려면 , 먼저 c

JavaScript로 요소 외부의 클릭을 감지하는 방법을 배우는 것은 많은 상황에서 사용할 수 있는 강력한 기술입니다. 메뉴 또는 모달 창을 숨기기 위해. 몇 분 안에 방법을 알게 될 것입니다. 요소 감지 외부의 기본 JavaScript HTML로 상자 요소 만들기: CSS로 상자의 스타일을 지정하고 요소 유틸리티 클래스 숨기기를 만들어 보겠습니다. .box { margin: 1rem auto 1rem auto; max-width: 300px; border: 1px solid #555; border-radiu

텍스트 내에서 패턴을 찾기 위한 도구인 Regex(정규 표현식)를 사용하여 문자열 내부의 공백을 JavaScript로 바꾸는 방법을 알아보세요. Regex(종종 RegEx 또는 RegExp로 표기됨)는 문자열(텍스트) 작업을 위한 고성능 도구입니다. 정규식의 가장 일반적인 사용 사례는 다음과 같습니다. 텍스트 유효성 검사 텍스트 검색 오늘은 정규식을 사용하여 한 줄의 텍스트(문자열)에 있는 모든 공백을 아무것도으로 바꾸는 간단한 예에서 배울 것입니다. — 하지만 다음 코드 예제를 사용하여 공백을 다른 문자로 바꿀 수 있습니다

두 가지 다른 방법을 사용하여 JavaScript로 배열을 문자열로 변환하는 방법을 알아보세요. JavaScript에는 배열 내용을 문자열로 반환할 수 있는 몇 가지 메서드가 있습니다. toString()이라고 합니다. 및 join() . 표면적으로는 거의 동일하게 보이지만 앞으로 보게 되겠지만 그렇지 않습니다. 둘 다 테스트해 봅시다! 다음은 숫자 목록이 있는 배열 개체입니다. const numbersArray = [2, 4, 6, 8, 10] 배열을 문자열로 변환하려면 toString()을 첨부해 보겠습니다. numbers

JavaScript를 사용하여 문자열에서 큰따옴표 사이의 텍스트를 추출하는 방법을 알아보세요. 텍스트 블록에서 인용된 텍스트를 가져오고 싶다고 가정해 보겠습니다. 따옴표는 일반적으로 큰따옴표(" " ). 문제 없습니다. JavaScript의 match()를 사용할 수 있습니다. 메소드 및 일부 RegEx 마술. 다음은 textWithQuote라는 변수에 할당하는 하나의 큰따옴표 문장을 포함하는 텍스트 블록(문자열 값)입니다. : const textWithQuote = One of my favorite quo

JavaScript를 사용하여 문자열에서 하나 이상의 숫자를 추출하는 방법을 알아보세요. 숫자가 포함된 문자열이 있고 숫자만 추출하려고 한다고 가정해 보겠습니다. 문제 없습니다. JavaScript의 match()를 사용할 수 있습니다. 방법. 다음은 하나의 숫자(1995 ) stringWithOneNumber라는 변수에 할당 : const stringWithOneNumber = JavaScript was invented in 1995 by Brendan Eich 이제 match()를 첨부하겠습니다. 변수에 메소드를 추가하고

정규식(RegEx) 및 replace()를 사용하여 JavaScript에서 단어(문자열)의 모든 인스턴스를 바꾸는 방법 알아보기 방법. 회사의 최신 제품에 대해 이야기하는 방대한 텍스트 블록이 있지만 불행히도 한 단어의 철자가 여러 번 틀리는 경우를 가정해 보겠습니다. 다음 텍스트 블록은 Glorious Games가 아니라 Epic Games로 표시되어야 했습니다. const textBlock = We at Glorious Games, are very proud to present the latest edition of the

정규식(RegEx) 및 replace()를 사용하여 (문자열) 안의 문자를 JavaScript로 바꾸는 방법 알아보기 방법. 텍스트 블록이 있고 엠 대시를 사용하려고 한다고 가정해 보겠습니다. (—), 하지만 실수로 하이픈을 사용했습니다. (-): const textBlock = When you’re typing fast it’s normal to make a few spelling mistakes here and there - it just means you’re human. 다행히 정규 표현식과 replace()를 사용하