별초롱언니는 개발중

my head title enter your name : transforms first display... click me...   enter your name : removeEventListener()addEventListener() 메서드로 첨부된 이벤트 핸들러를 제거한다. click button remove mousemove 마우스 커서 mousemove에 가져다 대면 숫자 랜덤으로 생성되서 보여줌remove 클릭하면 해당 숫자에서 더이상 다른 숫자는 보여지지않고 멈춤add.EventListener() 괄호안에 적은내용 제거시 removeEventListener() 괄호안에 똑같이 기재해야 제거된다

마우스 이벤트설명click마우스를 클릭했을 때 이벤트가 발생dbclick마우스를 더블클릭 했을때 이벤트가 발생mouseover (mouseenter)마우스를 오버했을때 이벤트가 발생mouseout (mouseleave)마우스를 아웃했을 때 이벤트가 발생mousedown마우스를 눌렀을 때 이벤트가 발생mouseup마우스를 떼었을 때 이벤트가 발생mousemove마우스를 움직였을 때 이벤트가 발생키 이벤트설명keydown키를 눌렀을 때 이벤트 발생keypress문자 키를 누른상태에서 이벤트 발생 (연속적) keyup 키를 떼었을 때 이벤트 발생 (1번)폼 이벤트설명focus포커스가 이동되었을때 이벤트가 발생blur포커스가 벗어났을때 이벤트가 발생change값이 변경되었을때 이벤트가 발생submitsubmit..

자바스크립트의 사용의 궁극적인 목적은 동적 웹페이지의 작성이다. 따라서 사용자가 웹페이지의 HTML 요소를 클릭하거나 마우스를 이동하는 등의 경우 이벤트가 발생하며, 이벤트가 발생하면 그에 반응하는 과정을 자바스크립트에 의해 처리할 수 있다. 사용자가 HTML 요소를 클릭할 때 코드를 실행하려면 자바스크립트 코드를 HTML 이벤트 속성에 추가한다. 이벤트는 주로 다음의 경우에 발생한다.  1. 웹페이지가 로드 되었을 때2. 사용자가 마우스를 클릭하거나 요소 위로 또는 위에서 움직일 때 3. 이미지가 로드 되었을 때 4. 입력 필드가 변경되었을 때5. HTML 양식이 제출되었을 때6. 키보드를 사용할 때  이벤트 : 웹 브라우저가 처리해야 할 특정 사건이벤트 타겟 : 이벤트를 발생시킬 객체 이벤트 타입 :..

document.anchors 컬렉션anchors 컬렉션은 name 특성이 있는 문서의 모든 요소 모음을 반환한다. 컬렉션의 요소는 소스 코드에 나타나는 순서대로 정렬된다. 컬렉션은 속성과 메서드를 갖는다. 속성/메서드설명length컬렉션에 있는 요소의 수 반환[index]인덱스 값을 이용하여 컬렉션 요소 반환item(index)인덱스 갑을 사용하여 컬렉션 요소 반환nameditem(id)지정된 id를 가진 컬렉션에서 요소 반환 HTML CSS JS Try it  document.body 속성문서의 본문을 설정하거나 반환한다. document.body; // body 속성을 반환한다document.body = newContent; // 새로운 콘텐츠값으로 설정한다.  Try i..

HTML 문서가 웹 브라우저에 로드되면 문서 객체가 된다. document 객체는 HTML 문서의 루트노드이며, 다른 모든 노드의 "소유자"이다. document 객체는 JavaScript내에서 모든 노드 객체에 접근하기 위한 속성 및 메서드를 제공한다.  속성설명document.anchorsname 속성을 가진 모든 요소 반환document.applets모든 요소 반환document.baseURLdocument 문서의 절대기본 URL 반환document.body 요소 반환document.cookiedocument의 쿠키 반환document.doctypedocument의 doctype 반환document. document.Elementhtml 요소 반환document. document.Mode브라우저..

메서드설명document.createElement(요소)HTML 요소 생성document.createTextNode(요소)text 삽입document.appendChild(요소)HTML 요소 추가document.removeChild(요소)HTML 요소 제거document.replaceChild(요소)HTML 요소 대치 ( 교환)document.write(text)HTML_출력 스트림에 쓰기           : 주로 같이 사용됨 createElement()이 메서드는 HTML요소를 생성한다. (생성만 하는 거라서 따로 출력해주어야한다.)만약, HTML 요소가 텍스트를 포함하고 있다면 해당 요소에 텍스트를 삽입할 수 있도록 해야한다. create new button element with text Tr..

HTML 요소 바꾸는 메서드메서드설명element.innerHTML = 새로운 html content;HTML 요소 내용 변경element.attribute = 새로운 value;HTML 요소 속성 값 변경* 속성 없으면 undefinedelement.setAttribute(attribute, value);HTML 요소 속성 값 변경 메서드* 속성 없으면 새로 생성element.style.property = 새로운 style;HTML 요소 스타일 변경**getAttribute(attribute); // 문서객체의 태그속성값을 얻어오는 메서드, 게터 기존 내용입니다. 위 내용은 변경된 문자열입니다. Try it  try it 클릭시 alt값 test_img 속성 변경 속성 바꾸기2중입니..

HTML DOM 객체 HTML Dom에서 document 객체는 웹페이지에 있는 모든 객체의 소유자라고 생각하면 된다. 즉, document 객체는 웹페이지를 의미한다. HTML 페이지의 요소에 접근하려면 항상 document 객체에 접근해야 가능하다 . HTML 요소 찾는 메서드 (get)메서드설명document.getElementById(id)해당 id값의 요소 찾기document.getElementByTagName(name)해당 name값의 요소 찾기document.getElementByClassName(name)해당 class값의 요소 찾기 Hello World! The DOM is very useful. This example demonstrates the getElementsByTagNa..

DOM (Document Object Model) : HTML 문서객체  자바스크립트 페이지는 HTML 문서에 의해 작성되고 CSS에 의해 꾸밈이 이루어진다. 자바스크립트는 동적으로 홈페이지를 관리하는 역할이며 HTML DOM을 사용하면 자바스크립트가 HTML 문서의 모든 요소에 액세스하여 이를 변경할 수 있다. 앞선 내용을 합치면, 자바스크립트는 HTML문서와 웹 브라우저를 객체로 다룬다. HTML 문서 객체럴 DOM, 웹 브라우저 객체럴 BOM이라고 한다.  HTML DOM웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다. HTML DOM은 객체 트리로 구성된다. (즉, DOM에서 모든 HTML요소는 객체로 정의된다.)문서 노드는 DOM 트리의 최상위에 존재하는 루트 노드로,..

URL구성URL : 인터넷에서 자원의 위치를 지정하는 문자열 (주소) 01. url 구성프로토콜 : https호스트 : www.naver.com 포트 : 80 (기본적으로 HTTP의 포트는 80이지만 명시적으로 적어 놓은 경우)경로 : /docs/search쿼리 문자열 : ?category=javascript&lang=ko프래그먼트 : #intro**url에서 특정 자원 경로를 / (루트 경로) 라고 표시하면, 암묵적으로 index.html을 요청한다.** index.html만 요청했는데 추가로 받아진 리소스들은 무엇인가? HTML파일(index.html)을 파싱하는 도중에 link태그,script태그, img태그 등 리소스를 요구하는 태그를 만나면 HTML의 파싱을 일시 중단하고, 해당 리소스 파일을 ..