어제 오늘 내일

HTML로 이미 정의한 버튼의 이름을 이벤트가 발생했을 때 변경하는 방법입니다. 여기서는 버튼을 클릭했을 때, 버튼의 이름을 변경해 보도록 하겠습니다. 1. 일 경우 2. 일 경우 1. 일 경우 function changeBtnName() { const btnElement = document.getElementById('btn'); btnElement.value = "새이름!"; } btnElement.value = "새이름!"; 버튼이 으로 정의된 경우 element의 value 값을 변경하여, 버튼 이름을 변경할 수 있습니다. 2. 일 경우 텍스트 변경 하기 클릭!! function changeBtnName() { const btnElement = document.getElementById('btn'..

HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (text-decoration-line) 블로그 메인으로 가기 a { text-decoration-line: none; /* text-decoration-line: underline; */ /* text-decoration-line: overline; */ /* text-decoration-line: line-through; */ /* text-decoration-line: underline line-through overline; */ } 밑줄을 없애기 위해서 'text-decoration-line' 속성을 none..

지난 번에는 테이블에 행(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; 테이블의 행..

테이블 행 개수 구하기 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..