본문 바로가기

전체 글

 (85)
[제이쿼리/jQuery] 속성으로 노드찾기 ( attribute selector ) 요약[name] 해당하는 속성을 가지고있는 노드 [name=value] 주어진 문자열과 속성이 동일한 노드 [name~=value]공백으로 구분된 단어와 속성이 일치하는 노드 [name*=value] 주어진 문자열을 포함하고있는 노드 [name$=value] 주어진 문자열로 끝나는 노드 [name!=value] 주어진 문자열이 속성과 다른 노드 [name^=value] 주어진 문자열로 시작하는 노드 [name=value][name2=value2] 다중속성선택자해당하는 속성을 가지고있는 노드 (" [name] ") 해당하는 attribute을 있는 노드를 가져옵니다. html 1.링크로연결 2.링크로연결 js $("[href]").css( "border", "3px solid purple" ); 결과 주어..
[JavaScript] addEventListener() , 이벤트리스너 등록 addEventListener() , 이벤트리스너 등록 addEventListener() 는 document내에 특정요소에 event를 등록할때 사용합니다. 간단한 사용예제는 아래와 같습니다. js var btn = document.getElementById("btn1"); btn.addEventListener("click",btnClick,false); function btnClick(e){ alert("Click!"); } html Click! 위의 예제는 한개의 버튼에 이벤트를 등록하는 방법입니다. 그런데 태그에 직접 onclick="" 을 쓰면되는데 위와같이 하는 이유는 상황에 따라 다른 이벤트를 발생할수있고동일한 이벤트가 발생하는 버튼이 여러개있을때 버튼에 다 직접 입력하는것보다위와같이 작성하는..
[JavaScript] querySelector() , querySelectorAll() 자바스크립트 요소접근 querySelector() , querySelectorAll() 요소접근 querySelector() querySelector 는 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다. (#sections) -> sections 아이디를 가진 요소를 찾습니다(.section) -> section 클래스명을 가진 요소를 찾습니다 반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환합니다. js var section = document.querySelector("#sections .section"); section.style.border = "1px solid #ff0000"; html 1 1-1 1-2 1-..
[JavaScript] getElementsByClassName() 함수 , 자바스크립트 클래스명 접근 getElementsByClassName() 함수 , 자바스크립트 클래스명 접근 이 함수는 태그의 class="" 속성을 사용하여 접근한다. 동일한 class명이 존재할수 있기때문에 ( id속성은 html 문서에 동일한 id속성이 존재하면 안된다..) id 속성을 사용하여 접근하는 getElementById() 와 달리 getElementsByClassName() 은 컬렉션 객체를 반환한다. 따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할수있다. 사용예는 아래와 같다. js var section1s = document.getElementsByClassName("section1"); var section2s = document.getElementsByClassName(..
[JavaScript] getElementsByTagName() 함수 , 자바스크립트 태그명 접근 getElementsByTagName() 함수 , 자바스크립트 태그명 접근 이 함수는 태그의 있는 div, li, p 와 같은 특정 태그명을 가지고 있는 element 의 집합을 가져오는 함수이다. 따라서 반환되는 값은 HTML컬렉션 객체이며 for문 등을 사용하여 element 객체를 사용할수있다. 사용예는 아래와 같다. js var ols = document.getElementsByTagName("ol"); var lis = document.getElementsByTagName("li"); var divs = document.getElementsByTagName("div"); for( var i = 0; i < divs.length; i++ ){ var div = divs.item(i); div.st..
[JavaScript] innerHTML, document.write(), alert(), console.log() 사용법 innerHTML, document.write(), alert(), console.log() 사용법 innerHTMLinnerHTML 을 사용하면 HTML 문서안에는 태그의 내용을 가져오거나 변경할수있다. document.getElementId() 또는 document.getElementName() 과 같이 Element 객체에 불러와 사용한다. js html hi click! 위와 코드에서는 sample.innerHTML 은 태그안의 내용을 가져오는것이며 sample.innerHTML = "bye" 는 태그안의 내용을 bye 로 변경할수있다. document.write()document.write()는 문서안의 텍스트 또는 연산된 숫자를 넣을수있다. window.alert()window.alert() ..
[JavaScript] getElementById() 함수 , 자바스크립트 id 접근 getElementById() 함수 , 자바스크립트 id 접근 이 함수는 태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다. 만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다. 사용예는 아래와 같다. js html hi click! 예제에서는 버튼 클릭할때마다 태그의 내용을 가져와 비교후 hi 일때는 bye 로 bye 일때는 hi 로 변경하도록 하였다. 위와같이 해당하는 태그의 접근하여 동적으로 html 를 변경이 가능하다. 또한 getElementById() 함수를 사용하여 반환된 객체를 변수를 담아놓고 여러번 사용이 가능하다.
[JAVA객체지향디자인패턴] 캡슐화(Encapsulation) 란 무엇인가? 캡슐화(Encapsulation) 란 무엇인가? 캡슐화의 정의를 보면 필요한 속성(Attribute) 와 행위(Method) 를 하나로 묶고그중 일부를 외부에서 사용하지 못하도록 은닉한다 되어있다. 위 내용만 보면 굉장히 추상적이라 뭘 어떻게 하라고 하는지 이해하기 힘들다 따라서 간단한 예를 들어서 캡슐화를 이해해보도록 하겠다. 음료수자판기가 있다고 예를 든다위의 정의를 따라가보도록 하겠다. 우선 필요한 속성(Attribute) 와 행위(Method)를 묶는다고 하였는데그렇다면 음료수 자판기에는 어떠한 속성과 행위가있을까 예를 위해 간단하게 구현해보도록 하겠다. 속성(Attribute) 을 먼저살펴보면속성은 자판기에 필요한 자료를 추려내면 될것이다.1) 음료수목록2) 음료수의가격3) 사용자가 선택한 음료..

티스토리툴바