728x90 반응형 javascript/javascript HTML DOM8 [Javascript DOM]Scroll 이벤트 See the Pen Untitled by namminimi (@namminimi) on CodePen. 스크롤 이벤트 1) 스크롤값 반환 document.documentElement.scrollTop; ex)console.log(위에값) 2) document.addEvnetListener("scroll", function(){ 스크롤 될때 동작하는 코드 } 3)스크롤 위치 이동 - window.scrollTo(xpos, ypos) - window.scrollTo({top: 0, behavior: "smooth"}) scrollTo 메서드는 지정된 좌표로 스크롤해주는 기능(window는 생략가능) behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.) .. 2023. 1. 5. [javascript]화면에 나타내기(호출/출력) 자바스크립트 화면에 나타내는방법(호출/출력) 1. window.alert(), alert() 경고창으로 나타냄 alert("경고창입니다"); See the Pen Untitled by namminimi (@namminimi) on CodePen. 2. document.write() 사이트에 나타냄 document.write("안녕") See the Pen Untitled by namminimi (@namminimi) on CodePen. 3. console.log() 사이트 콘솔창에 나타냄 -- (자신이 작성한 코드 확인하기 위해 자주 사용) console창 띄우는법 : 1)화면 우클릭 해서 검사 > console클릭 / 2) F12/ 3) ...세로정렬 클릭> 도구 더보기> 개발자 도구(크롬) cons.. 2022. 12. 4. [javascript]HTML 내용, 속성, 스타일 변경하기 1. html의 내용 변경 .innerHTML = "" 예를 들어 html로 div안에 홍길동이라는 이름을 화면에 출력되있음 홍길동 홍길동을 이순신으로 바꿔서 출력하고 싶을때는 document.getElementById("id명").innerHTML = "이순신"; document.querySelector("div(태그명)").innerHTML = "이순신"; el.innerHTML => 태그를 포함하여 수정 el.innerTEXT => 글자만 수정 See the Pen Untitled by namminimi (@namminimi) on CodePen. 2. html 속성변경 document.getElementById("id명").src = 'pic.gif'; document.querySelector(".. 2022. 12. 3. [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 현재 글은 전 자료에서 이어짐 2022.12.03 - [javascript/DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 솔직히 자세히는 모르겠다... ㅠㅠ 아직 지식이 별로 없어서... 찾아본 정보들과 배운 자료들로만 정리해봄 HTMLCollection은 복수선택할 수 있는 document.getElementByclassName("class명") - html 컬렉션(유사배열) document.getElementByTagName("tag명") - html컬렉션(유사배열) 에서 확인할 수 있다 HTMLCollection은 유사 배열 형태이긴 한데 제공하는 모든 메서드(함수)는 없음 배열에 사용되는 .forEach나 .map 등등 사용하면 오류 발생함 메서드를 사용할 방.. 2022. 12. 3. [javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Document 박스1입니다. 박스2입니다. 박스3입니다. 박스4입니다. 박스5입니다. text1 text2 text3 text4 text5 console.log(document.getElementById("box1")); //id명 box1 element(요소) 선택/콘솔 출력 console.log(document.querySelector("#box2")); //id명 box2 element(요소) 선택/콘솔 출력 console.log(document.getElementsByClassName("divbox".. 2022. 12. 3. [javascript]change이벤트 실습1 See the Pen Untitled by namminimi (@namminimi) on CodePen. change 이벤트 사용 하여 10을 선택했을 때 div에 "가"가 출력되고 20은 "나"출력!!!!! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Document 10 20 30 40 document.querySelector("#num").addEventListener("change", function(){ //change 이벤트사용 document.querySelector("div").innerHTML = this.value; //값이 바뀔때마다 #num value값 div에 출력 }) Colored by Color Scripter cs ※.. 2022. 12. 3. 불 끄고 켜기 실습 See the Pen Untitled by namminimi (@namminimi) on CodePen. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Document 불켜기 불끄기 console.log(document.querySelector("img").src); function buloff() { document.querySelector("img").src = "./images/pic_bulboff.gif"; } function bulon() { document.querySelector("img").src = "./images/pic_bulbon.gif"; } Colored by Color Scripter cs 사용한 DO.. 2022. 12. 1. [javascript]요소 노드 생성 및 요소 노드 자식 추가 보호되어 있는 글 입니다. 2022. 11. 29. 이전 1 다음 728x90 반응형
