note

11라인 주석 제거후 Header-0 Header-1 Header-2 class명이 item일 경우 스타일 적용 h1태그에 접근하여 item에 접근 두 가지 클래스를 모두 가지는 태그 선택 Header-0 Header-1 Header-2 더 깊게 접근할 수 있다

Header-0 Header-1 Header-2 id는 유니크해야 합니다 태그 선택자와 ID선택자 혼합 사용 Header-0 Header-1 Header-2 h1에 있는 target에 접근하겠다라는 표현 CSS 방식과 같다

Lorem ipsum Lorem ipsum dolor sit amet. Lorem ipsum consecterur asdasf h1 태그만 적용됨 다중 적용 Lorem ipsum Lorem ipsum dolor sit amet. Lorem ipsum consecterur asdasf 다중

Lorem ipsum *은 모든 것을 뜻함 많이 사용되는 방식은 아님 (모두 적용되기에)

문서가 로드된 후에 function()을 호출하라는 의미 window.onload 와 같다

크롬 실행 결과 Click 익스플로러 코드와 그외 브라우저 코드가 다르다

불일치시 이름 비밀번호 비밀번호 확인 비밀번호 체크시 return false에 걸리면 submit이 실행되지 않아서 이벤트가 발생되지 않는다

ButtonA ButtonB Button A - 0 Button B - 0 innerHTML을 이용해서 카운터를 증가시켜 view 시킴 span 안에 있는 0을 읽어와 +1 시키고 다시 넣어준다 그래서 증가시켜서 보임

Click 마우스 위치를 바꿔서 클릭하면 값이 바뀜 익스플로러 일때는 window.event 사용

Click 클릭을 하면 스타일이 변경됨 this라는것은 가변적 이벤트가 일어나지 않았기 때문에 이벤트가 일어나는 순간 this가 값을 갖게됨

Click 이벤트 핸들러 안에서 this키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있습니다

클릭 태그를 body안에서 제어하는것이 아니라 밖에서 안으로 호출하는 식 요즘에 이런방식을 더 많이 사용한다

Header 참고 CSS와 속성 이름이 약간 다름 자바스크립트는 식별자에 -를 사용할 수 없어서 background-color 가 backgroundColor 로 표현

Header Header

header와 textNode를 생성뒤 appendChild로 연결

Body 안에 문자열을 넣는 예제

Header Header

순차적으로 한개씩 늘어난다