자바스크립트 (54) 썸네일형 리스트형 [자바스크립트] - 검색창에 검색기록 추가, 삭제하는 예제/ 텍스트필드로 노드 추가, 삭제하기 / input태그에 사용자가 입력한 내용 받아오기 / value / parentNode / removeChild / insertBefore html Web Programming 공부할 주제를 기록해 보세요 추가 return false; -> 한번만 실행하게 한다. 자바스크립트 //1. 새로운 요소 만들고 연결하기 function newRegister() { let newItem = document.createElement("li"); //생성 let subject = document.querySelector("#subject"); //input태그 선택 //input태그에 사용자가 입력한 내용(value)를 텍스트 노드로 생성 let newText = docume.. [자바스크립트] - 속성 값이 있는 노드 추가하는 법 속성 값이 있는 노드 추가하기 1. 요소노드 만들기 - createElement( )매서드: DOM에 새로운 요소를 추가할 때 가장 먼저 해야 할 일은 요소 노드를 만드는 것이다. 이때 사용하는 매서드는 createElement( )매서드인데 괄호 안에 해당하는 요소 노드를 만들면 된다. [기본형]document.createElement('노드명'); 2. 속성노드 만들기 - createAttribute( )매서드: 속성 노드를 추가할 때 createAttribute( )매서드를 사용한다. [기본형]document.createAttribute('속성명' ) 3. 속성로드에 값 추가하기 - .value프로퍼티: 생성한 속성 노드에 값을 추가할 때에는 .value프로퍼티를 이용한다. [기본형]요소노드.val.. [자바스크립트] - DOM에서 노드 추가, 삭제하기 / 노드리스트 / 텍스트 노드를 사용하는 새로운 요소 추가하는 법 '태그를 동적으로 생성한다' = html에 없는 태그를 자바스크립트로 생성한다 라는 뜻 웹 문서에서 처음 화면에서는 보이지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이런 동작은 CSS의 display 속성을 사용해서 만들 수도 있지만, DOM트리에 새로운 노드를 추가하는 방법도 있다. 이때 주의할 점은 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해주어야 한다는 점이다. 노드리스트란?DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 '노드리스트(node list)' 를 사용해야 한다. dom에 접근할 때 querySelectorAll( )매서드를 사용하면 노드를 한꺼번에 여러 개 가져올 수 있다. 이때 노드 정보를 여러 개 저장한 것이 노드 리스트.. [자바스크립트] - 이벤트 여러 개 연결하기 / ★ addEventListener()매서드 / 이미지에 마우스를 올리면 다른 이미지를 보여줬다가 마우스가 떠나면 기존의 이미지를 보여주는 예제 ★ addEventListener( )매서드 앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트만 연결할 수 있다. 하지만 하나의 요소에 여러 이벤트를 연결해야 할 경우 addEventListener()를 사용하면 하나의 요소에 여러 이벤트를 동시에 연결할 수 있다. [기본형]요소선택. addEventListener(1.'이벤트명', 2.함수, 3.캡처 여부);- 1. 이벤트명 : 이벤트의 유형. click이나 keypress처럼 이벤트 이름이 들어간다. 단 on키워드는 빼고 이벤트 이름만 쓴다. ' '문자열로 들어가야한다 - 2. 함수 : 이벤트가 발생하면 실행할 명령이나 함수를 지정한다. 여기에서 함수를 정의할 때 ev.. [자바스크립트] - 이벤트에서의 this 이벤트는 많이 쓰기 때문에 이벤트의 this는 알아두어야한다. 이벤트의 this앞에서 배운 이벤트 객체에는 이벤트에 대한 정보만 들어있다.만약 이벤트가 발생한 대상에 접근하려면 이벤트 핸들러에서 this를 사용해야 한다. 이벤트에서의 this는 '이벤트가 발생한 객체'를 가리킨다. (이벤트가 발생한 해당 요소) this.style.width = '500px' -> 이벤트가 발생한 요소의 스타일 넓이 값을 500으로 바꿔라이런 식으로 this 키워드를 이용해서 쓸 수 있다. 이벤트가 발생한 해당 요소를 찝어서 기능을 실행할 수 있다. this 키워드가 없으면 뭘 클릭했는지 브라우저가 잘 몰라서 일단 이벤트를 실행시킨다. 원하는 요소에 딱 이벤트를 실행시키기 위해서 this를 사용한다. 예제 1) this.. [자바스크립트] - 이벤트 객체 / 이벤트 객체의 프로퍼티와 매서드 DOM의 이벤트 객체 DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다. 이벤트 객체는 이벤트 함수의 매개변수 자리에 event 또는 e라는 변수명으로 받아올 수 있다. (이벤트객체는 매개변수 자리에 생긴다.)* 다른 단어도 쓸 수 있지만 보통 알아보기 쉽게 event , e라는 것으로 쓰는 것 뿐이다. let imageTag = document.querySelector("img"); imageTag.onclick = function (event) { alert( "이벤트 유형 : " + event.type + .. [자바스크립트] - 이벤트 처리 방식 총 정리 이벤트의 처리 방식 그동안 예제에서 사용하던 방법은 html이 주인이 되어 자바스크립트의 함수를 호출해서 사용하는 베이직한 방식이다. 하지만 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트 처리를 하게 만들 수 있다. 중요한 점은 이벤트 처리를 HTML이 하게 만드는가, 혹은 자바스크립트가 처리하게 만드는가를 중심을 잡고 코드를 처리해야 한다. - 웹 요소를 클릭했을 때 실행할 함수를 연결하려면- 웹 요소를 클릭했을 때 실행할 함수를 연결하려면, 아래 기본형을 사용.이 방식은 자바스크립트가 주인이 되어 이벤트를 처리함. [기본형]요소명.on이벤트명 = 함수명;function 함수명(){ 이벤트 자바스크립트 코드; }ex) document.querySelector('#아.. [자바스크립트] - 이벤트 종류 / 간단한 이벤트 실습 이벤트의 종류 (전부 소문자이다) 이것말고도 훨씬 많다. 검색해서 사용 1. 마우스 이벤트 : 마우스를 이용해 버튼이나 휠 버튼을 조작할 때 사용한다. 아래 종류보다 더 많으니 원할 때 찾아보면 된다. 종류설명- ★ click 사용자가 html 요소를 클릭할 때 이벤트가 발생한다. - dblclick사용자가 html요소를 더블클릭할 때 이벤트가 발생한다. - mousedown 사용자가 요소 위에서 버튼을 눌렀을 때 이벤트가 발생한다. (click이랑 거의 동일해서 잘 안쓴다)- ★ mousemove사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다. ( 마우스 포인터 자체를 원하는 요소를 바꿀 때나 마우스를 따라다니는 요소를 만들 때 사용한다. 움직이는 배경이 마우스를 따라다닐때, 쇼핑몰에.. [자바스크립트] - DOM에서 이벤트 처리하기 > 해당 요소에 이벤트 직접 적용하기, 함수명으로 이벤트 연결하기 DOM에서 이벤트 처리하기 DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다. 이벤트 : 클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그 위에 마우스를 올리는 등 모든 행위자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다. (실무에서는 이벤트 핸들러, 핸들러라고 한다)html 태그에 직접 이벤트 핸들러를 연결시킬 수도 있지만 태그와 스크립트 소스가 섞여있어서 복잡한 프로그램에는 적합하지 않다. 이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다. [기본형] 요소명.on이벤트명 = function(){ 자바스크립트 코드; }-----------------.. [자바스크립트] - ★ 속성을 가져오거나 수정하는 getAttribute(), setAttribute()매서드 속성을 가져오거나 수정하는 getAttribute()매서드, setAttribute()매서드 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성노드가 추가되면서 속성값이 지정된다. getAttribute( ) : 속성에 접근한다. 속성에 지정되어있는 값을 데려온다. 속성에 어떤 값이 들어있는지 볼 수 있다. setAttribute( ) : 속성을 수정한다. 선택한 요소의 해당 속성을 원하는 속성값으로 바꾼다. [기본형]요소명.getAttribute('속성명'): 선택한 요소의 해당 속성명에 들어있는 값을 반환한다.요소명.setAttribute('속성명', '값'): 선택한 요소의 해당 속성을 속성값으로 바꾼다.만약 해당 속성이 태그에 없다면 속성과 속성값을 새로 추가한다.문자열로.. 이전 1 2 3 4 ··· 6 다음
