반응형 개발/html + javascript13 [javascript] 현재 스크롤 비율 구하는법 세로 스크롤 비율 var scrollPercentage = Element.scrollTop === 0 ? 0 : 100 * (Element.scrollTop + Element.clientHeight) / Element.scrollHeight; 가로 스크롤 비율 var scrollPercentage = Element.scrollLeft === 0 ? 0 : 100 * Element.scrollLeft / (Element.scrollWidth-Element.clientWidth); 2021. 1. 22. [javascript] drag시 화면밖을 벗어났는지 판단하는 법 drag & drop 을 구현하다가 브라우저 안에서 드래그해서 브라우저 밖에다가 놨을때를 판단할 일이 생겼다. 1번에서 시작해서 2번에다가 놓을 때 지금 하고 있는 모든행동을 취소 해야했다. document.addEventListener('dragend', function(event){ if(isOutOfBrowser(event)){ alert('화면 밖을 벗어날 수 없습니다'); } }) function isOutOfBrowser(event){ return event.clientX window.innerWidth; } dragend 이벤트의 event값에 있는 clinetX값은 브라우저를 왼쪽으로 벗어났으면 0보다 작은값 오른쪽으로 벗어났으면 브라우저창의 크기보.. 2020. 12. 22. [javascript] 페이지 첫 요청시 안되는 오류 (두번째부터는 접근될때) 필자는 아래와 같이 페이지이동을 위한 a태그와 function을 하나 만들었다. 그러나 이상한 오류가 발생했다. 첫 요청때는 실패시에나 성공시에 뜨는 alert창이 뜨지도않을뿐더러 아무런 이벤트도 발생하지않았다. (추후에 알고보니 /로 이동했음) 문제점은 어이없게도 a태그의 href에 있었다. 아래부터는 필자의 추측이다. /api/board를 요청했지만 a태그의 기본값이 /이고 /를요청했다. /로 이동을 한 상태기때문에 그 후의 이벤트는 진행되지않았다. 라는것이 필자의추측이다. (정확한 이유를 아시는분은 댓글로 알려주시면 감사하겠습니다) 해결방법은 매우 간단하다. a태그에 href를 없애면된다. 2020. 3. 18. [javascript] Required List parameter 'parameter' is not present Exception 필자는 위에서 보이는바와 같이 ajax를 통해 array타입의 변수를 파라미터로 넘겨주었다. 컨트롤러에서는 List형식으로 받으려고 했다. 필자의 생각대로라면 array로 보냈으니 List로 받을 수 있어야했다. 그러나 필자의 예상과는 달리 위의 오류가 뜨면서 null값이 들어간다. (require = false로 설정시 Controller안까지는 감) 해결방법은 간단하다 @RequestParam(value="") 안의 deleteList를 deleteList[]로 바꿔주기만 하면된다. 배열타입이다보니 []을 붙여줘야하는것같다. 정상적으로 값이 들어오는것을 확인할 수 있다. 2020. 2. 22. [javascript] $( document ).ready() 순수 javascript 로 바꾸기 document.addEventListener("DOMContentLoaded", function(){ 여기에 실행할 내용 입력 }); 위와 같이 작성하면 jquery의 $( document ).ready()와 동일한 기능을한다. 개인적으로 jquery 대신 javascript로 구현하는게 어렵지 않을경우 javascript로만 구현하는걸 좋아하는편이라서 이렇게 사용한다. 2020. 1. 14. [javascript] selected value 가져오기 위와 같은 select가 있다고 할때 선택된 value나 안의 Text를 가져오고 싶다면 이런식으로 사용하면 된다. 문법에서 유추할 수 있듯 text는 안의 Text내용을 가져오는것이고 value는 선택된 value값을 가져오는것이다. 2020. 1. 13. [javascript] after() after() method는 뒤에 Node를 추가할수 있는 method이다. 화면이 이렇게 있을때 1. 답글쓰기를 누르면 temp에 할당 2. 댓글을 달 수 있는 폼(div)를 만들어서 div라는 변수에 할당을 했다고 가정한다. 답글쓰기를 누르면 이런식으로 누른곳 바로 뒤에 form이 추가된다. 이런식으로 다음 Element가 있다면 다음의 다음의 추가하고 없다면 바로 뒤에 추가하는식으로 응용을 할 수 있다. 2019. 12. 11. [javascript] nextElementSibling 한줄요약 : nextElementSibling method는 다음 Element를 반환해주는 method이다. 응용 : 있는지 없는지, 어떤것이 있는지에 따라서 응용가능 화면에 보면 맨위 댓글의 답글쓰기는 다음 Element가 있고 두번째 댓글의 답글쓰기는 다음 Element가 없다. Javascript의 nextElementSibling는 다음 Element가 있으면 다음 element를 없으면 null을 반환해준다. 2019. 12. 11. [javascript] create button and add function 이러한 function이 있다. 그리고 button을 동적으로 생성한뒤에 onClick 이벤트에 addReplyReply함수를 할당해주려고 하였다. id를 찾지 못한다는 오류가 난다. 이 오류가 왜 발생할까? 정답은 button.onclick = addReplyReply(); 에 있다. addReplyReply()는 함수를 호출한다. 호출된 함수에서 x[0].id를 찾지못해 발생되는 오류이다. button.onclick 에 addReplyReply 함수자체를 할당시키고 싶다면 button.onclick = addReplyReply; 로 바꿔서 함수자체를 할당시켜줘야한다. 이렇게 바꾸고 다시 실행하면 오류가 안나고 정상작동된다! 2019. 12. 8. [javascript] <input type ="file">을 innerHTML로 하면 발생하는 문제점 문제점 : file을 선택시 새로운 file form을 추가하는상황에서 추가한 file의 값이 할당이 안되는경우 해결법 : innerHTML을 사용하게 되면 기존의 요소들을 모두 삭제하고 다시 할당(재할당)을 하는것이기때문에 추가한 파일을 못가져오는 경우가 발생할 수 있다. 이러한 경우에 innerHTML 대신 appendChild를 사용하여 해결할 수 있다. 2019. 12. 7. [javascript] 태그안에 있는 값 가져오기 var innerText = document.getElementById(elementId).innerText; td같은태그는 value로 못 가져와서 innerText로 가져와야한다! 2019. 12. 5. [html + javascript] onclick ="write()"가 동작이 안될 때!! html파일 board.js파일 테스트로 버튼을클릭하면 alert창을 띄워지는걸 의도하고 이렇게 작성하였다. 예상대로라면 dd라는 알림창을 떠야한다. 하지만 돌아오는건 dd창도 아니고 빈화면이 돌아왔다. 이유는 바로 onclick을 했을때 js파일의 write()함수가 아닌 document.write() 함수를 호출하기 때문이다. 이런식으로 표시된다 2019. 12. 3. 이전 1 2 다음
