2024/07/09 5

DOM의 요소 관계와 JS에서의 사용

DOM이 무엇인지는 다음을 참고하시고 : HTML에서의 DOM 구조요소 관계중요한 것은 DOM이 hierachical(계층적)이라는 것이다.계층적임의 예시는 다음을 보자.This is a paragraph of text with alink.를 DOM 구조를 나타내면,자식들은 순서대로 first, second... 가 되고자식들의 부모는 parentNode로 접근이 가능하며자식들 끼리는 nextSilbing, previousSibling으로 접근이 가능하다.요소 접근하기document.getElementById(id)html페이지에서 유일한 id를 찾아서 그것의 DOM을 반환한다.!주의! : getElement"S"임에 주의!! id는 유일해서 Element이지만 얘네는 여러개 가능해서 복수형임!!docu..

JS에서 Random 값 받기(Math.random())

근데 random 메서드가 Math 내장 객체에 있다.그래서 Math.random()으로 쓴다.Math.random()리턴 값: 0~1사이의 실수ex. 0.9099821, 0.00212313.....그래서 정수로 받고 싶으면var rand1to10 = Math.floor(Math.random() * 10 + 1)처럼 곱하기 해주고, 1 더해준 다음 floor() 메서드로 감싼다. (가우스 함수 같이 정수만 떼서 줌)위 예시는 1부터 10까진데 1부터 100까지는var rand1to100 = Math.floor(Math.random() * 100 + 1)이런 식으로. Few Examples)0~255var ex = Math.floor(Math.random() * 256) // return 0~255100~..

JS에서 시간 받기(Getting Date in Javascript)

Date ObjectJS 내장 객체중 하나로, 날짜 및 시간 작업을 하는데 유용하다.Date를 숫자로 쓰면(as a Number) -> 1970년 1월 1일 00시00분00초부터 지난 시간을 ms단위로 준다.Date를 문자열로 쓰면(as a String) -> 요일 월 일 년도 hh:mm:ssDate 객체 생성(선언)하기기본형: var now = new Date()밀리초형: var now_ms = new Date(milliseconds)다양하게: var now_str = new Date(dataString)세세하게: var now_ex = new Date(year, month, date..)기본형 빼고 코드로 보면var now_ms = new Date(10000); // 1970/01/01 이후 시각 밀..

JS에서의 객체(Object in Javascript)

객체란"어떠한 사물"의 "속성(Property)"과 "동작(Method)"을 표현한 것.ex. 자동차property : 메이커, 차종, 색상method : 출발하기, 정지하기, 시동 키기Object in Javascript종류내장 객체(built-in object) 코어 객체: Date, String, Math... HTML DOM 객체: 이전 게시글(HTML의 DOM 구조:https://mitdog.tistory.com/26) 참조 브라우저 관련 객체(BOM): 브라우저 종류, 스크린 정보, ...사용자 정의 객체(custom object)생성 방법2가지가 있다.하나의 유일한 객체로 쓸거다 객체 상수로 직접 생성var person = { firstName: "John", lastNam..

HTML의 DOM 구조

DOM(Document Object Model)HTML, XML의 프로그래밍 interface(웹프로그래밍 수업 중) 브라우저가 소스 코드를 읽고, 랜더링을 할텐데그 사이 과정 읽고->쓰는 사이에 어떻게 읽어 놓느냐?바로 DOM 형식으로 읽어 놓는다.이 읽어 놓은 DOM 형식은 HTML과 JS가 데이터를 주고 받을 때어떻게 주고 받을지 약속한 '글 양식'이라고나 할까?DOM은 트리 자료구조로 그려진다.하나 하나가 DOM 객체이고,예시를 들어서 까 보면DOMProperty(속성) : ValuetageName : "IMG"src : "octopus.jpg"alt : "an octopus"id : "icon01"이걸 JS에서 쓴다면var icon = document.getElementById("icon1");..