본문 바로가기

개발 이야기/HTML | CSS | JS8

Click Event 와 DOM 다루기 (Pure Javascript) 순수 자바스크립트로 특정 DOM Element에 Click Event를 추가 하는 방법은 아래와 같습니다. var divElement = document.getElementById('sample'); divElement.addEventListener('click', (e) => { // To do something... alert('Click'); }); document로 부터 element를 찾음. addEventListener(type, event) 메서드를 통해 이벤트 추가 웹개발자라면 위 코드 정도는 구글링 없이도 충분히 알 수 있을 겁니다. 그렇다면, 아래와 같은 간단한 문제를 해결해 봅시다. 아래 html에서 click 한 요소의 색깔을 변경 해보세요. 월 화 수 목 금 토 일 #sample .. 2020. 12. 19.
간단 fixedHeader 테이블 만들기 table 요소 표시할때 header를 고정 시키는 방법을 정리하려합니다. 사실 여러 UI 라이브러리들이 고정된 header로 표시하는 기능을 옵션 형태로 제공 하기도 합니다. 여기서는 css 속성 중 아래 속성을 이용해서 해당 기능을 구현하고자 합니다. overflow: auto position: sticky 먼저 아래와 같은 형태로 테이블을 만들어 봅시다. No. Name Dept Email Expired 1 강팔자 웹개발팀 8888@naver.com Y 2 강호식 기획팀 2222@naver.com Y (...중략) css는 아래와 같이 해줍니다. table { width: 100%; background-color: #f1f1f2; } table > thead > tr > th { font-weigh.. 2019. 9. 29.
Javascript로 key 이벤트 발생 시키기(Pure Javascript) jquery로 특정 이벤트를 일으킬려면 $.trigger를 사용 하면 됩니다. 하지만 jquery없이 순수 자바스크립트로 keydown이벤트를 발생 시킬려면 아래와 같이 하면 됩니다. (function(){ document.addEventListener('keydown', function(e){ const keyCode = e.keyCode; console.log('pushed key ' + e.key); if(keyCode == 13){ // Enter key document.dispatchEvent(new KeyboardEvent('keydown', {key: 'e'})); // document.dispatchEvent(new KeyboardEvent('keyup', {key: 'e'})); } el.. 2019. 7. 15.
JavaScript Date() 자바스크립트는 날짜와 시간을 표현하는 객체 Date()가 있다. var dDate = new Date(2018,0,2); // Tue Jan 02 2018 00:00:00 GMT+0900 (대한민국 표준시), 2018년1월2일목요일var hDate = new Date(2018,0,2,17,10,00); // Tue Jan 02 2018 17:10:00 GMT+0900 (대한민국 표준시)var now = new Date(); // 현재시간 hDate.getFullYear(); // 2018hDate.getMonth(); // 0 : 0이 1월이다hDate.getDate(); // 2hDate.getDay(); // 2(Tuesday) 요일(0:Sunday, 1:Monday) hDate.toLocaleDat.. 2018. 5. 31.
JavaScript Math객체 정리 자바스크립트에서 복잡한 수치 연산을 할 때 Math객체를 사용 할 수 있다. Math.pow(2,10); // 2의 10승 : 1024 Math.round(0.4); // 반올림 : 0Math.ceil(0.4); // 올림 : 1Math.floor(0.4); // 내림 : 10Math.abs(-5); // 절대값 : 5Math.max(x,y,z); // 가장큰 인자 반환(min도 있음)Math.random() // 0과 1.0 사이에 임의수 반환// 이 외 삼각함수, 제곱근, 로그 등도 있다 ** 자바스크립트는 0으로 나눌 때, 에러가 발생할까? 정답은 아니다. NaN이라는걸 본적 있는데, NaN도 아니고 특정 양수를 0으로 나누니 Infinity 라는 무한대를 의미하는 값이 출력된다.( 0/0 은 Na.. 2018. 5. 31.
jQuery-UI sortable 사용해보기 어떤 아이템들의 순서가 존재하고 사용자 화면단에서 유연하게 순서를 조작하는 방법으로는 jQuery-ui의 sortable기능을 사용하는 방법이있다. 1234 Colored by Color Scriptercs 12345678910111213141516171819202122232425$('#subitemlist').sortable({ handle : 'label', // label 태그로 핸들링 start: function(e, ui) { // 이동 시킬 아이템 클릭 시 $(this).attr('data-previndex', ui.item.index()); // 기존 순서값을 data-previndex에 저장 }, update : function(e,ui){ // 이동 완료 후, 순서를 서로 바꿔줌 var .. 2018. 5. 25.
Javascript 타이머 만들기 페이지에 남은 시간을 타이머로 표시 시킬려고 한다. 우선 아래와 같이 1초간격으로 수행되는 setInterval함수를 작성 1234$(document).ready(function(){ tid=setInterval('msg_time()',1000); // 타이머 1초간격으로 수행}); Colored by Color Scriptercs 이어서, msg_time()을 아래와 같이 작성해준다. 123456789101112131415161718192021var stDate = new Date().getTime();var edDate = new Date('2018-10-25 24:00:00').getTime(); // 종료날짜var RemainDate = edDate - stDate; function msg_tim.. 2018. 5. 25.
숫자입력시 ,(콤마) 찍기 1000000000와 같이 자리수가 커지면 숫자를 읽기가 불편하다. 100,000와 같이 3자리 단위로 ,를 찍어주면 수월해진다. 우선 javascript함수를 하나 만든다. 123456function numberWithCommas(x) { x = x.replace(/[^0-9]/g,''); // 입력값이 숫자가 아니면 공백 x = x.replace(/,/g,''); // ,값 공백처리 $("#money").val(x.replace(/\B(?=(\d{3})+(?!\d))/g, ",")); // 정규식을 이용해서 3자리 마다 , 추가 } Colored by Color Scriptercs 그리고 html에 해당 콤마 효과를 줄 input태그에 이벤트함수르 추가한다. 12 Colored by Color Scr.. 2018. 5. 25.

티스토리툴바