어제 오늘 내일

지난 번에는 테이블에 행(row)를 추가/삭제하는 방법을 알아보았습니다. 이번에는, 테이블에 열을 추가하고, 삭제하는 방법을 알아보도록 하겠습니다. 열(column) 추가하기 사과apple 오렌지orange 바나나banana function addColumn() { const table = document.getElementById('fruits'); for(let i = 0; i < table.rows.length; i++) { const newCell =table.rows[i].insertCell(-1); newCell.innerText = 'New'; } } document.getElementById('fruits'); 열을 추가할 테이블을 선택합니다. table.rows.length; 테이블의 행..

HTML에서 링크된 페이지를 새창 또는 새탭으로 여는 방법입니다. 블로그 새창에서 열기 태그로 링크된 페이지를 새창 또는 새탭으로 열기 위해서는 target 속성을 추가하고, 그 값을 '_blank'로 지정해야합니다. 하지만, 아쉽게도 '새창'에서 열 것이냐, '새탭'에서 열 것이냐는 HTML로 지정할 수 없습니다. 그것은 사용자 브라우저의 설정을 따릅니다. 인터넷 익스플로러(IE) 링크 새탭/새창에서 열기 설정 구글 검색 결과 새탭에서 열기

인터넷 익스플로러에서 링크를 클릭했을 때, 새창에서 열지, 새탭으로 열지 설정하는 방법입니다. 1. 설정 > 인터넷 옵션 2. 일반 탭 > 탭 3. 다른 프로그램의 링크 새탭에서 열지, 새창에서 열지 선택합니다. 저는 링크를 새탭에서 열기로 선택하였습니다. 이 설정은 컴퓨터를 다시 시작한 이후부터 적용됩니다.

테이블 행 개수 구하기 Header Row 1 Row 2 Row 3 Footer const table = document.getElementById('myTable'); const totalRowCnt = table.rows.length; result.innerText = '전체 행 개수: ' + totalRowCnt + '\n'; const tbody = table.tBodies[0].rows.length; result.innerText += 'Tbody 행 개수 : ' + tbody; 전체 행 개수 table.rows.length; HTMLTableElement는 rows라는 속성을 가지고, 이 속성은 모든 element를 포함하는 HTMLCollection 객체를 리턴합니다. (, , 안의 모든 을..

class 이름 읽기 class 추가/수정 class 삭제 class toggle 특정 클래스 이름이 class 속성에 포함되는지 확인하기 1. class 이름 읽기 예제 1. className function handleOnClick() { alert(document.getElementById('ex').className); } document.getElementById('ex').className; element.className 속성은 element의 클래스 이름을 문자열로 리턴합니다. 예제 2. classList // class 이름 읽기 function getClassName() { alert(document.getElementById('ex').classList); } // class item..

지난번에는 Javascript에서 사용할 수 있는 알림창의 종류에 대해서 알아보았습니다. [Javascript] 알림창 종류 (alert, confirm, prompt) 모든 알림창에는 메시지를 표시할 수 있는데, 이 메시지를 줄바꿈하여 여러줄 표시할 수 있는 방법을 알아보도록 하겠습니다. function handleOnClick() { alert('a\nb\nc'); alert(`d e f`); } '\n'을 이용하는 방법 alert('a\nb\nc'); 줄바꿈을 하고 싶은 곳에 '\n'을 입력합니다. 템플릿 문자열을 이용하는 방법 alert(`a b c`); 백틱(`)으로 감싸인 문자열인 템플릿 문자열을 이용하면 백틱 사이의 내용이 그대로 문자열로 전환됩니다. 줄바꿈 표시도 따로 '\n'을 쓸 필요없..

Javascript에서 사용할 수 있는 메시지 박스 3종류 alert confirm prompt 1. alert function handleOnClick() { alert('Hello!!'); } alert()은 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 창입니다. 2. confirm function handleOnClick() { let like = confirm("좋아요 눌러주실거죠?"); document.getElementById('result').innerText = like; } confirm()은 사용자에게 메세지를 보여주고, [확인/취소] 중 둘 중 하나를 선택하도록 합니다. confirm()은 사용자가 [확인]을 선택하면 true를 리턴하고, [취소]를 선택하면 false를 리턴합니..

2개 이상의 객체를 합쳐서 하나의 객체로 만드는 방법 4가지를 소개합니다. 반복문 사용하기 Object.assign() Spread Operator (전개연산자) _.merge() (lodash 라이브러리) 1. 반복문 사용하기 const obj1 = { name : 'banana', price : 1000 }; const obj2 = { name : 'banana', price : 2000, count : 10 }; // merge object 함수 function mergeObj(obj1, obj2) { const newObj = {}; for (let att in obj1) { newObj[att] = obj1[att]; } for(let att in obj2) { newObj[att] = obj2..

Javascript에서 URL에 포함된 파라미터(쿼리스트링)의 값을 읽어오는 방법입니다. 현재 페이지의 URL과 파라미터 읽기 특정 파라미터 값 읽기 특정 파라미터가 있는지 체크하기 파라미터 추가, 변경, 삭제하기 전체 파라미터 목록 가져오기 1. 현재 페이지의 URL과 파라미터 읽기 현재 페이지의 URL을 가져오는 방법과 쿼리스트링을 가져오는 방법은 지난 포스팅에서 소개했습니다. [Javascript] 현재 페이지 URL 가져오기 간단하게 다시 정리하면 현재 페이지의 URL을 가져오기 위해서는 아래와 같이 하고, // "https://hianna.tistory.com/325?category=764998" window.location.href 전체 URL중 쿼리스트링(파라미터)만 가져오고 싶은 경우에는 ..

Javascript에서 현재 페이지의 URL 주소를 가져오는 방법을 소개합니다. window.location (Location 객체) 현재 페이지의 URL을 알아오기 위해 window.location 속성을 사용할 수 있습니다. window.location 속성에 접근하면 Location 객체에 접근할 수 있는데 이 Location 객체의 속성들을 사용해서 현재 페이지의 URL 정보를 알아낼 수 있습니다. // "https://hianna.tistory.com/325?category=764998" window.location.href // "https:" window.location.protocol // "hianna.tistory.com" window.location.host // "hianna.tis..