Programming_Language/JavaScript13 [JavaScript] DOMContentLoaded, onload 차이점. DOM(Document Object Model) 트리란? 오늘은 DOMContentLoaded, onload의 차이점과 DOM 트리의 대해 간단하게 적어보려고 합니다. 전부터 제이쿼리를 많이 사용했었지만 최근에는 DOM형으로 사용한다고 하여 공부할 겸 적어봐요. ㅎㅎ 1. DOM 넌 뭐야!? DOM(Document Object Model) : document(문서) Object(객체) Model(모델) 즉, HTML 문서를 구성하는 요소(Element)를 객체 로 표현한 것을 트리 형태로 구성한 것입니다. 트리 형태 : | Hello, Java 화면 개발을 하실 때 위에 같은 요소들을 많이 접해봤을거에요. 같은 HTML문서의 요소들을 JavaScript가 이용할 수 있는 객체를 "문서의 객체"라고 하는데요. 구현 방법은 1. 위에 HTML를 작성해서 로드를 하.. 2024. 2. 5. [tag/CSS] Text 띄어쓰기 JSP에서 적용하기 위해서는 <pre> 사용 pre : HTML에서 미리 서식이 지정된 텍스트를 정의하는 태그로 공백이나 줄바꿈을 유지해야하는 코드나 텍스트를 표시할 때 주로 사용된다. 사용방법은 두 가지가 있는데요. 1. HTML 태그 사용 띄어쓰기가 들어간 텍스트 2. CSS 스타일 적용 pre-wrap : CSS에서 사용되는 속성 중 하나로, 텍스트의 줄바꿈과 공백을 유지하는 기능을 가진다. 저렇게 사용할 수도 있고 도 가능하다. 이렇게 하면 DB에서 가져온 띄어쓰기가 적용된 텍스트를 가져올 수 있다. - 을 입혀서 가져올 수 있지만, 해킹 방지로 특수기호를 텍스트로 바꾸는 필터를 거친다면 태그를 사용할 수 없게 되므로 저렇게 사용해도 되고, 아니면 다시 필터를 해서 특수 부분만 적용되게 할 수도 있다. 그건 개발자가 알아서 잘 활용하면 된다. 2024. 1. 30. [Event] 반응형 - 페이지 이동 및 화면 크기 변경으로 load, resize 이벤트 화면 크기 변경해보자!! 오늘은 브라우저 페이지 이동으로 onload 진행과 화면 크기가 갑자기 변경 되었을 때 발생하는 이벤트를 알아보려고 합니다. 이걸 사용하는 이유는 반응형을 사용할 때 좋은 이벤트로 예를 들어 핸드폰 화면과 태블릿 화면 크기가 다르잖아여 이벤트 발생으로 인해 그 화면의 맞게 크기 조정을 해주는 겁니다. 제일 먼저 함수를 사용하려면 load 할때와 화면 크기가 변경 될 때 발생하는 이벤트를 1 순위로 작성해야겠죠?? 위에 코드를 보시면 로드시와 화면크기 변경 시 해당 이벤트가 발생해요. 그 안에 원하는 로직을 작성하면 되는데요. console.log(); 찍어서 확인을 하시면, 새로고침과 페이지 이동시에는 load 이벤트가 발생하고, F12 눌러서 모바일 디바이스로 바꾼 후 모바일 버전을 변경하면 resiz.. 2024. 1. 17. [JavaScript] TextArea 작성 및 유효성(특수기호) 검사, 복사 붙이기 오늘은 TextArea를 가지고 유효성 검사와 복사붙이기 어떻게 활용하는지 알아볼건데요. (이게 웹개발 할 때 은근 많이 사용하더라구요....) 물론 저는 html이나 jsp로 작성할 때 쓰고 있어서 다른 프론트는 어떻게 하는지 잘 모릅니다.. 일단 먼저 TextArea를 만들어봐야겠죠?? [기본 html 작성] TextArea 테스트 이렇게 기본적으로 html파일을 만듭니다. 그 다음 그냥 작성하셔도 상관없긴해요. 하지만! 이대로 사용하면 데이터를 넣을 때 문제들이 발생할 수 있어 몇 가지 옵션을 넣어볼거에요. 1. document.on("",function(){}) 사용 - Textarea를 사용하면 아무래도 작성이 중점이니 paste, keyup, change, input를 주로 사용합니다. 그래서.. 2024. 1. 12. [JavaScript] 뒤로가기 문제 해결은 이것! OnpageShow * onpageshow : 웹 페이지가 로드되거나, 새로고침이 될 때 발생하는 이벤트. 주로 모바일에 많이 사용하는데요. onpageshow 이벤트는 페이지가 완전히 로드되기 전에 발생되고, 페이지의 상태에 따라 여러 가지 상태 값을 가질 수 있어요. 그렇다면! 어디서 이벤트를 사용할까요?? 바로 "뒤로가기" 입니다. (주로 뒤로가기 발생 시 문제가 되는경우가 있거든요) 거기다.. ios 사파리 경우는 화나게.. BFCache 가 존재하는데요. BFCache : Back/ForWard Cache 의 약자로 브라우저의 성능을 향상시키는 기술 중 하나. (뒤로가기 및 앞으로가기 눌렀을 때 페이지의 상태를 캐시하여, 페이지를 다시 로딩하지 않고 이전 상태로 복원해주는 기술인데요.) 이게 문제는 API 호출로 .. 2024. 1. 9. [JQuery] 모달 팝업 동작 시 부모창 스크롤 동작 못하게 하기 모바일 작업을 하다보면 팝업 창을 띄울 때가 종종 있잖아여? 그럴 때 가끔 요청하는 건이 팝업을 띄울 때 뒤에 창이 못움직이게 해주세요.. 이런 요청들이 많이 와요. 그래서 저도 찾아 보다가 요런 방법이 있다는 걸 알고 적용해봤습니다. 수정이 편하기 위해 저는 두 개의 함수를 만들어 줍니다. 1. function bodyScrollDis(); 2. function bodyScrollEn(); function bodyScrollDis(){ $('html, body').css({'overflow':'hidden','height':'100%'}); // 팝업 실행 중 html,body의 스크롤을 hidden 시킨다. $('#element').on('scroll touchmove mousewheel',funct.. 2024. 1. 9. [JQuery] 특정 ID 속성이 "" 로 시작하는 모든 요소 선택 오늘은 JQuery로 특정 ID 속성에 해당 되는 데이터를 가져오는 것을 알아 볼 겁니다. Atrribute Starts With Selector (attribute^=value)인데요. 예를 들어 : [id^='con'] 즉, id 속성이 'con'로 시작하는 모든 요소를 선택합니다. 라는 뜻이에요. $("[id^='con']").on("click", function(){ console.log($(this).attr("id")); });위에 코드로 작성을 하면 됩니다. 만약 위에 id 속성 요소가 input일 경우 위에 코드처럼 id 속성을 con으로 시작해서 작성하면 해당 요소가 클릭 되었을 때 콘솔에 해당 요소의 id가 찍힙니다. 보통 이는 팝업 창을 열 때나, 해당 요소를 클릭 했을 때 데이터를 .. 2023. 12. 28. [EVENT] 웹페이지, 모바일 웹 document.on 이벤트 웹 페이지만들 때 이 이벤트를 많이 사용할 겁니다. 저 역시 매번 사용하고 있으니까요 ㅎㅎ document.on 이벤트는 여러 옵션이 있는데요. change : id및 class 안에 checkBox, Text, radio 등이 뭔가 변화가 있을 때 들어오는 이벤트. keypress : 해당 태그 id, class 에서 키보드를 눌렀을 때 들어오는 이벤트. (keydown, keyup : 키보드 키를 누르고 있을 때, 키보드 키를 땠을 때 들어가는 이벤트) input : input의 텍스트의 값이 감지 될 때 들어오는 이벤트 select : input의 텍스트가 선택되었을 때 들어오는 이벤트 주로 위에 옵션들을 많이 사용하는데요. 코드로 작성 한다면? 이렇게 기본 코드를 작성해주고 그 안에 써야할 코드를.. 2023. 12. 19. 이전 1 2 다음 반응형
