데브마우스

자바스크립트로 현재 주소의 URL을 얻기 위해서 자바스크립트 함수를 찾아보다가 window.location.pathname(이하 pathname)과 window.location.href(이하 href)를 알게 되었습니다. 하지만 두 함수의 반환 값은 다릅니다.pathnamepathname은 현재 URL의 경로를 출력합니다.http://www.devmoue.tistory.com/post/my-first-post이런 URL이 있다면 /post/my-first-post를 출력합니다.만약 ?나 #이 URL에 있어도 출력되지 않습니다.https://devmouse.tistory.com/?search=javascript 혹은 https://devmouse.tistory.com/post/my-fisrt-post#co..

배열(Array)의 요소 접근 방법 자바스크립트에서 배열의 요소에 접근하는 다양한 방법이 있습니다. for of, forEach, map 그리고 filter가 있습니다. for...of 배열의 요소에 순차적으로 접근합니다. for...of는 배열의 요소에 순차적으로 접근하는 방법입니다. for...in은 배열의 index 값을 가지니 for...of와 헷갈리지 않도록 조심하셔야 합니다. var dog = ['말티즈', '콜리', '진돗개']; for (var i in dog) { console.log(i); } var dog = ['말티즈', '콜리', '진돗개']; for (var i of dog) { console.log(i); } forEach() 배열의 요소에 순차적으로 접근합니다. forEach..

자바 스크립트의 배열 생성 방법 자바스크립트 배열 객체 생성 방법 1 var subject = new Array(1, 2, 'js'); 자바스크립트 배열 객체 생성 방법 2 var subject = [1, 2, 'js']; 배열의 객체 프로퍼티 객체 프로퍼티 설명 예제 코드 length 배열의 개수를 반환합니다. var subject = [1, 2, 'js']; subject.length; // 출력: 3 배열의 메서드 메서드 이름 설명 예제 코드 slice() slice(0,4)인 경우 인덱스 0번 부터 인덱스 3번까지의 배열을 반환합니다. var alphabet = ['a', 'b', 'c', 'd', 'e']; console.log(alphabet.slice(0, 3)); join() 특정한 문자를..

JavaScript의 String 객체는 무엇인가요?자바스크립트에서 String 객체는 텍스트 데이터를 나타내는 데 사용되며, 문자열과 관련된 다양한 작업을 수행하는 메서드를 제공합니다. JavaScript의 속성JavaScript의 속성으로는 length가 있습니다. String 문자열의 길이를 반환합니다. JavaScript의 메서드 정리메서드설명charAt(index)주어진 인덱스에 해당하는 문자를 반환합니다.concat(str1, str2)현재 문자열에 다른 문자열을 연결하여 새로운 문자열을 반환 합니다.indexOf(substring)주어진 부분 문자열이 처음 등장하는 인덱스를 반환합니다.lastIndexOf(substring)주어진 부분 문자열이 마지막으로 등장하는 인덱스를 반환합니다.incl..

for를 활용하여 JavaScript의 객체에 접근하는 방법 JavaScript의 객체에 접근 하기 위해서는 하나한 수동으로 접근하거나 for를 활용하여 한 번에 접근할 수 있는 방법이 있습니다. for를 활용하여 JavaScript의 객체에 접근하는 방법 분류 코드 예제 설명 for for(var i in obj) { // 코드실행 } 순차적으로 객체의 속성에 접근할 수 있습니다. for...in for(var i=0; i

자바스크립트의 객체란 무엇인가요? 자바스크립트는 객체지향언어가 아닌 프로토타입 기반 언어로 분류하고 있습니다. ES6부터 클래스가 추가되었습니다. 그렇다면 객체란 무엇일까요? 자바스크립트 객체의 데이터는 이름:값의 쌍으로 이루어져 있으며 이것을 속성이라고 합니다. 자바스크립트의 객체 설명 객체 [이름:값]의 쌍으로 이루어 진 것입니다. 이것을 속성이라고 부릅니다. 객체의 속성: 프로퍼티 변수와 동일한 기능을 수행하며 값을 저장하는 용도로 사용합니다. 객체의 속성: 메서드 함수와 동일한 기능을 수행하며 기능을 정의하는 용도로 사용합니다. 예시 코드 var 변수 = {name:devmouse; write: function() { console.log("글을 작성합니다."); }; 주의사항 객체 생성 후 마지..

자바스크립트 적용 방법 HTML에서 자바스크립트를 선언하기 위해서는 정해진 위치에서 선언하셔야합니다. 적용 방법 위치 작성 방법 문서 내부 태그 안 문서 내부 태그 안 문서 외부 - 태그 안 - 태그 안 자바스크립트 적용시 주의점 자바스크립트를 태그 안에서 적용 후 HTML 문서의 요소를 건드릴 경우 제대로 적용이 되지 않을 수 있습니다. 왜냐하면 프로그래밍 코드는 위에서 아래로 순서대로 읽으면서 내려오는데, HTML 문서가 완전히 읽히지 않은 상태에서 자바스크립트 코드를 먼저 읽었기 때문에 적용시킬 HTML 요소들이 없기 때문입니다. 그러므로 안전하게 태그 안에서 외부 파일로 호출하시는걸 추천합니다.

자바스크립트 alert alert("출력할 문구"); 반환값이 없으며 사용자에게 알림을 주는 용도로 사용합니다. 프로그래밍을 할 때 console.log()와 함께 디버그 용도로도 사용합니다. 자바스크립트 prompt prompt("출력할 문구"); 확인을 누를 경우 입력한 문자열을 반환합니다. 취소를 누를 경우 null이 반환됩니다. 자바스크립트 confirm confirm("출력할 문구"); 확인을 누를 경우 true를 반환합니다. 취소를 누를 경우 false를 반환합니다.

자바스크립트 이벤트란 무엇인가요? 자바스크립트에서의 이벤트는 웹 페이지에서 발생하는 다양한 상황이나 사용자 행동에 대한 신호를 나타냅니다. 이벤트의 예를 들면, 버튼 클릭, 키보드 입력, 마우스 움직임 등이 해당됩니다. 이벤트를 사용하기 위해서는 HTML요소.addEvenetListener("이벤트 발생 방법", "함수");와 같은 코드로 작성하셔야합니다. 각각의 이벤트마다 다른 HTML요소를 요구할 수 있습니다. 마우스 이벤트 이벤트 타입 설명 예제 코드 click 요소를 클릭했을 때 발생 element.addEventListener('click', function() { /* 코드 */ }); dblclick 요소를 더블 클릭했을 때 발생 element.addEventListener('dblclick..

자바스크립트로 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..