Developer Gonie

document의 getElementById() 메소드 * 나중에 크롤링하는 프로그램들 보니까 document의 getElement~ 메소드들로 원하는 이미지 요소를 정확히 찝어오더라. document의 getElementById() 메소드를 이용해 얻어진 객체의 innerHTML 속성에 넣고싶은 텍스트를 할당하면 실제 그 요소의 영역에 출력된다. 이 방식은 Jquery의 html() 함수와 비슷하며, append()는 아닌게 innerHTML 속성에 재할당 하면 기존의 텍스트는 덮어씌워지기 때문에 그렇다. document의 메소드는 이게 전부가 아니니 추가적인 메소드는 아래의 링크를 참고하자. http://www.tcpschool.com/javascript/js_dom_document

window 객체의 onload 속성 이전에 body 태그에 onLoad 속성을 추가해서 body 영역이 모두 로드된 뒤에 호출될 콜백함수를 지정해 주었는데, 이와 같은 기능으로 아래와 같이 자바스크립트 코드를 작성해두면 비슷한 시점에 자동으로 호출된다. 단, 이걸 사용할 땐 body 태그에 onLoad 속성이 없어야 정상작동 한다. 둘 중 하나만 실행되기 때문에. window.onload = function(){ } * setInterval(), setTimeout() 은 시간에 의해 자동으로 불려지는 콜백 함수이기 때문에 작성만 해두면 따로 호출을 위한 코드를 작성하지 않아도 자동으로 불려진다는 것을 알아두자. window 객체의 setInterval() 메소드 특정 시간마다 지속적으로 여러번 반복되..

window 객체의 opener 속성 window 객체는 여러가지 속성들이 있는데 그중에서도 opener 속성은 open() 메소드로 자신의 윈도우를 열리게 한 부모의 윈도우를 저장하고 있다. 이를 이용하면 자식 윈도우 입장에서 부모 윈도우의 모든 요소들에 접근이 가능하여 직접 부모 윈도우에 있는 데이터를 읽어올 수 있고, 자식 윈도우에서 입력한 값을 부모의 특정 요소에 옮겨놓을 수도 있다. 사용 예시코드 * 텍스트 라벨 요소가 내부에 위치해야 이런 구현이 가능하다는 것을 알아두자. 팝업창 열기 버튼을 누르면 자식창이 열리며, 자식창에는 onLoad 속성을 추가해 두었는데, 여기서는 부모창의 텍스트 라벨 요소에 들어있는 value 값을 가져와 자신의 요소에 옮겨놓는 일을 한다. 그리고나서 닫기 버튼을 또..

window 객체의 open 메소드 새로운 브라우저 창을 여는 기능으로 공지사항 같은 팝업창을 띄울 때 사용할 수 있기도 하다. window 키워드는 생략하고 open만 사용해도 된다. 자주 사용하던 document.write()도 맨 앞에 windows.이 생략된 형태였던 것임 예시코드 onLoad속성을 주어 body 영역이 로드되고 나서 호출되도록 하여 공지사항 팝업처럼 열리게 하는 예시임. 예시코드(함수를 새로 만들어 인자 전달부분의 길이를 줄인 버전) window 객체의 close 메소드 window 객체의 open()메소드와 동작이 반대되는 메소드이다. window.open() 메소드는 객체를 하나 반환하는데 이를 변수에 할당시켜 두었다가 변수.close()를 하면 원하는 창을 닫치게 할 수 있..

검색태그 : charAt, indexOf, slice, substring, substr, toUpperCase, toLowerCase

이 게시글에서 얻을 수 있는 내용 핵심1. 요소에서 특정 원소가 선택될 시 발생하는 이벤트 처리 이번 예시는 첫번째 선택박스에서 하나를 선택했을 때 발생하는 이벤트를 이용해 두번째 선택박스에 그에 맞는 적절한 메뉴들을 띄워주는 예시이다. 또한, 두번째 선택박스가 선택되면서 발생하는 이벤트를 이용해 노란색 공간에 첫번째, 두번째 선택박스에서 선택된 값들을 띄워준다. "발생하는 이벤트 처리를 위해 요소에서 onChange 속성을 부여해야 한다." 핵심2. 요소내 선택된 곳의 index 밑 value 혹은 text를 얻는 과정 요소의 객체를 id 속성의 값을 이용해 가져와 이 객체의 selectedIndex 멤버 값을 읽어와 선택된 index를 알아내고, 이 index를 이용해 요소의 객체의 text 혹은 v..

* javascript에서 BOM(브라우저 객체모델)은 html 내에 요소가 존재하면 이를 객체화 하여 관리한다. 따라서, 혹은 으로 id 또는 name속성을 부여했다면 이것을 통해 해당 요소에 접근할 수 있고, form 내부의 요소도 id 또는 name 속성을 가진다면 이를통해 바로 원하는 요소에 접근할 수 있다. 주의할 점으로, form 요소 내부의 요소에는 form 요소를 통하지 않고 바로 접근할 수 없다. * select 요소에 대한 객체 내부에는 options 멤버가 준비되어 있는데 이 멤버는 크기가 정해지지 않은 배열을 가져 options = new Array() 와 같이 준비되어 있어 바로 원소들을 추가할 수 있다. * 보통 요소의 요소들은 화면이 뜨는 동시에 추가되어 있어야 하므로 body..

기본 내장객체 내장객체란, javascript 에서 바로 사용할 수 있도록 내부에 구현되어 있는 객체로 다음과 같은 것들이 있다. 객체 내부에는 속성(java로 치면 멤버변수) 및 메소드 들이 존재하여 이를 추가적으로 사용할 수 있어 유용하다. 자주 사용되는 내장 객체는 다음과 같은 것들이 있다. Array : 배열을 사용할 수 있게 함. 이 객체의 대표적인 멤버함수는 sort() 등이 있음 Date : 날짜와 시간을 다룰 수 있게 함. 이 객체의 대표적인 멤버함수는 getHours() 같은게 있음 Math : 수학적인 함수를 사용할 수 있게 함, 이 객체의 대표적인 멤버함수는 Math.random()으로 난수 생성할 때 사용 Number : 문자로된 숫자를 진짜 숫자로 바꿔줌 String : 문자열을 ..

아래서는 버튼에 대한 예시만 기록해 두었지만 실제로는 다른 요소 p, div 등에 대해서도 같은 방법으로 똑같이 적용할 수 있다. 그냥 onClick 속성을 추가하여 클릭이벤트 발생시 수행할 함수를 지정해주면된다.

버튼 내부의 글자색은 color 를 이용해 바꿀 수 있고 버튼 또한 border-radius 르 이용해 바깥을 둥굴게 만들 수 있다.

적용 가능 대상이 all, print, screen, speech 4가지가 있는데 이 중에서 screen을 공부하였었다. 아래는 창의 크기가 달라짐에 따라 보여지는 이미지 파일이 달라지는 예제이다. 사용예시

transform-origin - 회전 등을 할 때 이용할 원점의 위치를 지정하는 속성으로 이것만 사용하면 아무런 일도 일어나지 않는다. 회전을 수행하는 transform : rotate(25deg) 등과 같이 사용해야 적용된다. + transform-origin: center; 회전의 기준점을 중앙으로 지정(디폴트) + transform-origin: top left; 회전의 기준점을 왼쪽 위 지점으로 지정 + transform-origin: 50px 50px; 회전의 기준점을 왼쪽 위 지점에서 x축으로 50px, y축으로 50px 이동한 곳으로 지정 + transform-origin : 20% 40%; 아마도 바로 위의 것과 비슷한듯 생략{ transform : rotate(25deg); /* 25도..