데브마우스

변수나 함수 선언 후 undefined가 출력되는건 정상입니다. 자바스크립트에서 변수나 함수를 선언 후 undefined()만 뜨는건 정상입니다. 이후 출력 값을 보고 싶으시면 console.log()에 담아서 출력시키면 값을 확인하실 수 있습니다. console.log()를 입력해도 undefined가 출력되는 경우 위의 변수나 함수 선언과는 다르게 console.log()를 입력해도 undefined가 출력되는 경우가 있습니다. 이럴 경우 개발자 도구의 Console 탭의 사진처럼 Filter 항목에 무언가 입력된게 있는지 확인해보세요. 위의 사진은 입력된 NodeList로 이미 걸러져서 console.log()로 출력을 시켜도 undefined로 출력이 되지 않고 있었습니다.

자바스크립트로 HTML과 CSS가 할 수 없는 다양한 일들을 할 수 있습니다. 자바스크립트로 HTML 요소와 CSS의 속성 및 속성값을 추가, 수정, 삭제할 수 있습니다. 그런 방법들을 정리해놓은 문서입니다. 요소 생성 또는 변경 방법 정리 메서드 또는 속성 설명 예제 코드 document.createElement(tagName) 새로운 HTML 요소를 생성합니다. var newDiv = document.createElement('div'); newDiv.textContent = '새로운 요소입니다.'; document.body.appendChild(newDiv); innerHTML HTML 문자열을 사용하여 요소를 생성하고 내용을 설정합니다. var newDiv = document.createEleme..

자바스크립트 상대위치 요소 선택 자바스크립트를 활용하면 CSS의 선택자로 할 수 없는, 부모 선택자로 거슬러 올라가거나 형제 선택자중 더 상위의 형제 선택자를 선택할 수 있습니다. 상대위치 요소 선택 정리 상대위치 요소선택 설명 및 특징 paraentNode 선택된 요소의 부모 노드를 선택합니다. childNodes 선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)을 선택합니다. children 선택된 요소의 자식 노드들을 선택합니다. nextSibling 선택된 요소의 다음 형제 노드를 선택합니다. previousSibling 선택된 요소의 이전 형제 노드를 선택합니다. firsChild 선택된 요소의 자식 노드 중 첫 번째 노드를 선택합니다. lastChild 선택된 요소의 자식 노드 중 마지막 ..

자바스크립트에는 CSS 선택자로 요소를 선택할 수 있는 querySelector와 querySelectorAll이 있습니다. 이 둘을 제일 간단하게 설명하자면 하나만 고르는 것(querySelector())과 모두 다 고르는것(querySelectorAll())이라고 할 수 있습니다. 디테일 하게 들어가면 다릅니다. querySelector() vs querySelectorAll() querySelector() vs querySelectorAll() 특성 querySelector() querySelectorAll() 반환값 단일 요소 NodeList 반환 타입 DOM 요소 NodeList (배열과 유사하지만 배열은 아님) 일치하는 요소의 반환 방법 첫 번째 일치하는 요소만 반환 모든 일치하는 요소를 No..

JavaScript Number 객체와 메서드 JavaScript에서 Number 객체를 생성할 수 있습니다. 아래 2가지 방법으로 생성할 수 있습니다. var num = new Number(1); var num = 1; Number 객체의 메서드는 다음과 같습니다. Number 객체의 메서드 메서드 이름 설명 예제 코드 toFixed() toFixed(n)일 때, n값만큼 소수점 자리수를 만듭니다. var num = 111.129; num.toFixed(2); //출력: 111.13 toString() toString(n)일 때, n값의 진수로 만듭니다. var num = 100; num.toString(16); //출력: 64

분류 종류 설명 사용자 정의 함수 선언적 함수 ----------- function func() { console.log("선언적 함수"); } func(); 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 익명 함수 --------- var anony = anonyFunc() { console.log("익명 함수"); }; anony(); 내장 함수 인코딩, 디코딩 함수 프로그램 개발에서 자주 사용하는 기능을 내부적으로 제공해주는 함수 숫자 판별 함수 유한 무한 값 판별 함수 숫자 변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 자바스크립트의 함수 정리 자바스크립트의 함수는 2가지로 나눌 수 있습니다. 개발자가 필요해서 직접 작성한 사용자 정의 함수와 자바스크립트에 작성되어서 개..

자바스크립트 변수 선언 방법 자바스크립트에서는 변수를 2가지 방법으로 선언할 수 있습니다. 변수를 선언하기 위해서는 var과 let으로 선언합니다. 처음에 자바스크립트가 개발되었을 때는 변수 선언 방법이 var로 1가지 뿐이었습니다. 그뒤 let이 추가되었습니다. 변수 선언 설명 var 중복해서 변수 선언 가능합니다. var temp = 3; var temp = 5; let 중복해서 변수 선언 불가능합니다. 자바스크립트 상수 선언 방법 자바스크립트에서 상수는 const로 선언합니다. 상수 선언 설명 const 고정된 값을 할당하는 상수 선언 자바스크립트의 데이터 타입 데이터 타입 데이터 타입 설명 숫자 데이터 정수, 실수, 지수 등 문자 데이터 ' ', " " 등과 같은 문자 데이터 타입 boolean ..

프론트엔드 프로그래밍 언어로 자바스크립트를 사용하는 이유는 뭔가요? 사용자와 상호작용하는 프론트엔드(한글로는 앞단)가 있고 사용자가 보이지 않지만 서버에서 작업하는 백엔드가 있습니다. 백엔드에는 다양한 소프트웨어가 있지만 프론트엔드는 상황이 다릅니다. 프론트엔드 프로그래밍을 하시려면 3가지 언어를 배우셔야합니다. HTML, CSS, JavaScript 이 중 자바스크립트만 프로그래밍언어고 나머지는 프로그래밍 언어가 아닙니다. 다른 프로그래밍 언어로 프론트엔드 프로그래밍을 할 수 없습니다. 그래서 사용자의 입력 및 이벤트를 처리하시거나 동적인 웹 페이지를 만들고 싶으시면 자바스크립트는 필수 입니다.

프로그래밍에서 값을 나중에 사용하거나, 값을 저장하기 위해서 변수를 사용합니다. 그리고 프로그래밍에서 특정한 기능을 수행하는 의미를 가진 단어가 있습니다. 데이터 타입을 지정하거나 반복문(for, while)을 가리키는 경우 등의 경우 원래 기능을 유지하기 위해 변수명이나 함수명으로 지을 수 없게 되어있습니다. 하지만 자바스크립트는 아닙니다. var let = 1; var forEach = 2; var open = 3 위 3줄의 코드는 모두 작동합니다. let은 자바스크립트에서 비교적 새로 만들어진 변수 선언 방법인데 이걸로 변수 선언이 됩니다. 이전에 만들어진 자바스크립트 코드 중 let이 있을 경우도 있으니, 어느정도 이해는 갑니다. forEach는 배열 객체와 함께 사용하는데 변수 선언이 됩니다. ..

자바스크립트에서 Uncaught TypeError: window.open is not a function 에러 발생 시 제일 먼저 확인해야 할 부분이 있습니다. open을 변수명으로 사용하신적이 있나요? 자바스크립트는 예약어가 엄격하지 않습니다. 그렇기 때문에 개발자가 open이라는 변수명을 짓고 사용할 경우 window.open의 open 함수를 사용할 수 없게 됩니다. 아래는 에러가 발생했던 상황을 재현한 코드입니다. 버튼입니다.