어제 오늘 내일

배열의 원소를 삭제하는 다양한 방법을 정리해 보았습니다. 1. 배열 전체 값 삭제 2. 배열 첫번째 값 삭제 3. 배열 뒤에서 삭제 4. 특정 index의 값 삭제 5. 특정 값 삭제 1. 배열 전체 값 삭제 빈 배열 할당하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr = []; document.write(arr.length); arr = []; 배열 전체 값을 모두 삭제하고, 빈 배열로 만들기 위해 새로운 빈 배열을 만들어서, 배열 변수에 할당 하였습니다. 배열의 길이를 0으로 변경하기 let arr = ['a', 'b', 'c']; // 배열 값 전체 삭제 arr.length = 0; document.write(arr.length); arr.length = 0; ..

배열에서 특정 값 개수를 구하는 방법을 정리하였습니다. 1. for 반복문 2. filter 3. reduce for 반복문 const arr = ['a', 'b', 'c', 'a']; // 배열에서 'a' 개수 구하기 let count = 0; for(let i=0; i '..

Javascript 배열의 여러 원소들 중 최대값, 최소값을 구하는 방법을 정리합니다. 1. Math.max(), Math.min() 소개 2. Function.prototype.apply() 사용하기 3. Spread Operator(전개 연산자) 사용하기 1. Math.max(), Math.min() 소개 const maxValue = Math.max(1, 2, 3, 4, 5); const minValue = Math.min(1, 2, 3, 4, 5); document.write('Max : ' + maxValue); document.write(' '); document.write('Min : ' + minValue); Math.max()와 Math.min() 함수는 파라미터로 입력받은 숫자들 중 최..

Javascript(ES6)에서는 함수를 호출할 때 파라미터를 넘겨주지 않은 경우 기본값을 설정해 줄수 있습니다. 함수 파라미터(매개변수) 기본값 설정하기 예제1. ES6이전 function multiply(a, b){ if(b === undefined){ b = 1; } return a * b; } document.write(multiply(3, 2)); document.write(' '); document.write(multiply(3)); ES6 이전의 Javascript에서는 함수 매개변수의 기본값을 설정하기 위해서 함수의 안에서 조건문을 사용하여 매개변수의 값을 체크하고, 기본값을 설정해 주었습니다. 위 예제 코드의 multiply() 함수는 두번째 파라미터인 b가 입력되지 않으면 기본값을 '1..

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName() 4. querySelector() 5. querySelectorAll() 1. getElementById() Div1입니다. Div2입니다. function getDiv1() { const div1 = document.getElementById('div_1'); alert(div1.innerText); } document.getElementById(); 파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다. id는 유일한 값이므로, 하나의 element만 리턴합니다. ..

지난번에는 안의 내용을 추가, 변경, 삭제하고, 읽어오는 방법을 알아보았습니다. [Javascript] div 안의 내용 가져오기, 추가, 변경, 삭제 (text, html) 이번에는 태그를 생성하고, 삭제하고, 숨기는 방법을 정리해 보도록 하겠습니다. 1. element 생성하기 function createDiv() { // 1. element 만들기 const newDiv = document.createElement('div'); // 2. 에 들어갈 text node 만들기 const newText = document.createTextNode('안녕하세요'); // 3. 에 text node 붙이기 newDiv.appendChild(newText); // 4. 에 1에서 만든 element 붙이기..

태그 안에 있는 내용을 읽고, 추가하고, 변경하고, 삭제하는 방법을 정리해보았습니다. 1. div 내용 가져오기 2. div 내용 변경 3. div 내용 추가 4. div 내용 삭제 1. div 내용 가져오기 안녕하세요? Javascript에서 div element에 접근하여, div 안의 내용을 읽을 때는 다음 3가지 속성을 사용할 수 있습니다. element.innerHTML element 안의 HTML, XML을 읽습니다. element.innerText element 안의 텍스트를 사용자에게 "보여지는 대로" 읽습니다. node.textContent node 안의 텍스트를 (, 에 상관없이) 읽습니다. 위 3가지 속성의 차이점은 지난 포스팅을 참조하세요. [Javascript] innerText와..

innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. innerHTML과 innerText의 차이점은 지난 포스팅에서 살펴보았습니다. [Javascript] innerText와 innerHTML의 차이점 이번에는 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다. innerHTML vs innerText vs textContent 안녕하세요? 만나서 반가워요. 숨겨진 텍스트 function getInnerHTML() { const element = document.getElementById('my_div'); alert(element.innerHTML); } fu..

지난 번에는 하이퍼링크(a href)의 밑줄을 없애는 방법을 알아보았습니다. [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (tex hianna.tistory.com 기본 하이퍼링크는 사용자가 링크를 클릭하기 전과 후의 링크 색깔이 다릅니다. 이번에는 하이버링크의 색깔을 바꾸는 방법에 대해서 정리합니다. 하이퍼링크 글자색 바꾸기 블로그 홈으로 이동하기 a:link { color : pink; } a:visited {..

버튼에 강제 클릭 이벤트 발생 시키기 (click()) function handleInputOnkeyup() { document.getElementById('my_btn').click(); } function handleButtonOnclick() { alert('버튼이 클릭되었습니다!!'); } 위 예제는 사용자가 input 창에 키보드로 값을 입력했을 때 강제로 '확인'버튼의 이벤트를 발생시키는 예제입니다. 조금 이상하지만, 특정 이벤트가 발생했을 때 버튼을 강제로 클릭시키는 것을 보여주기 위해 이렇게 만들었습니다. 먼저 '확인' 버튼을 눌러보세요. '확인' 버튼을 클릭하면, '버튼이 클릭되었습니다!!' 라는 alert 창이 뜹니다. input 창에 키보드로 아무거나 타이핑을 해보세요. input 창..