본문 바로가기

Web39

DOM-getElementsByClassName 오늘은 getElementsByClassName 에 대해 알아보도록 하겠습니다. 영어 그대로 클래스의 이름을 선택(?)/추출(?) 하는 메소드입니다. 그럼 코딩을 통해 알아보도록 하겠습니다. 결과화면은 다음과 같습니다. 감사합니다~ 2017. 5. 5.
DOM-getElementsByTagName 오늘은 JavaScript에서 DOM에 대해 알아보도록 하겠습니다. DOM은 Document Object Model 의 약자로 웹페이지를 자바스크립트로 제어하기 위한 객체 모델을 의미합니다. 첫번째로 getElementsByTagName에 대해 알아보겠습니다. getElementsByTagName은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환합니다. 그럼 거두절미 하고 코딩을 통해 알아보도록 하겠습니다. 우선 getElementsByTagName는 document라는 객체에 속해있습니다. 따라서 사용할땐 document.getElementsByTagName 으로 사용하면 됩니다. 결과화면은 다음과 같이 나오게 됩니다. 이해가 안가시면 소스를 차.. 2017. 5. 5.
Javascript-Location 객체 오늘은 Location 객체에 대해 알아보도록 하겠습니다. location객체는 브라우저의 주소, 즉 URL과 관련있는 객체라고 볼 수 있습니다. 그럼 location객체의 속성을 알아보도록 하겠습니다. 속성 설명 href 문서의 URL 주소 host 호스트 이름 + 포트 번호 hostname 호스트 이름 port 포트 번호 pathname 디렉토리경로 hash 앵커이름 search 요청매개변수 protocol 프로토콜 종류 그럼이제 코딩을 통해 속성들을 알아보도록 하겠습니다. 이렇게 코딩을 하게 되면 결과화면에 현재 웹 페이지의 URL값이 나오게 됩니다. 이제 속성들의 값을 넣어보도록 하겠습니다. 먼저 href 속성을 넣어보도록 하겠습니다. location.toString() 의 값과 location... 2017. 4. 24.
JavaSctipt-대화상자(alert, confirm, prompt) 오늘부터는 JavaScript에 대해 알아볼게요. 먼저 JavaScript란 무엇일까요? 쉽게 웹페이지는 HTML, CSS, JavaScript로 구분이 되어지는데요 HTML 은 웹페이지의 틀을 짜주는 역할을 하고 (스케치) CSS 는 웹페이지에 디자인을 담당하고 (색칠) JavaScript는 웹페이지에 기능을 추가한다고 할 수 있습니다. (Function) 그럼 이제부터 어떤 기능을 추가할 수 있는지, 어떤 기능들이 있는지 알아보도록 하겠습니다. 첫번째로 알아볼것은 alert 입니다. alert는 한마디로 팝업창(?)이라고 할 수 있어요. alert() 함수는 경고메세지를 전달하고 싶을 때 사용하구요 경고메세지를 알리는 대화상자에는 확인버튼이 있습니다. 코딩을 통해 알아보도록 할게요~ JavaScrip.. 2017. 4. 10.