"Hello cmingg World!" "Hello cmingg World!"

❗ 분명 유효성 검사로 form 못넘어가게 막았는데 유효성 검사 알람창 다 뜨더니 그냥 submit 되버린다....why... 📌 해결 ☞ button 태그를 form 태그 밖으로 뺀다. ☞ button 태그 말고 input type="button"으로 바꾼다. ☞ button 태그 안에 type="button"을 추가한다.

: 웹페이지 제어하기 위해, 웹페이지의 모든 요소에 대한 처리가 끝났음을 알려주는 이벤트 * 보통방법 : 가 맨 마지막에 위치 ☞ load : 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후 실행된다 -> 지연 (부작용) * 부분에 위치, load이용 ☞ DOMContentLoaded : load 개선, 스크립트 작업 할 수 있을 때 실행된다 ☞ click : 클릭했을 때 발생 ☞ dbclick : 더블클릭 했을 때 ☞ mousedown : 마우스를 누를 때 ☞ mouseup : 마우스버튼을 땔 때 ☞ mousemove : 마우스를 움직일 때 ☞ mouseout : 마우스가 엘리먼트에서 빠져나갈 때 ☞ contextmenu : 컨텍스트 메뉴가 실행될 때 + 키보드 조합 : 특수키가 눌려진 ..

: 어떤 사건 : 사용자가 클릭했을'때', 스크롤을 했을'때', 필드의 내용을 바꾸었을'때' 등 * onclick 속성의 js코드는 사용자가 이 버튼을 클릭 했을 '때' 실행된다 ☞ event target : 이벤트 발생할 대상/객체, ,, ☞ event type : 이벤트 종류, onclick, scroll, mousemove ☞ event handler : 이벤트가 발생했을 때 동작하는 코드 ☞ inline 방식 : inline 방식으로 이벤트 등록 : 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것 * this == 그 함수가 속해있는 객체, 자기 자신 ☞ 프로퍼티 리스너 방식 : 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식 * 이벤트 객체 이용 : 이벤트가 실행된 그 시점에서..

: DOM의 시작점 : 문서 전체를 의미하는 Node ☞ 노드 생성 API : createElement() : createTextNode() ☞ 문서정보 API // document.--- : title : URL : referrer : lastModified : DOM에서 실질적인 데이터가 저장되는 객체 ☞ 값 가져오기 API : nodeValue : data * data도 text값 변경가능 ☞ 조작 API : appendData() : deleteData() : insertData() : replaceDate() : substringData() * start.value는 0부터 숫자 세기, end.value는 start.value끝난 지점부터 value=5면 다섯개 세면된다.

: firstChild : nextSibling : prviousSibling : childNodes : parentNode : 선택된 노드가 어떤 타입인지 확인 : nodeType/ nodeName ☞ nodeType : 노드의 종류에 따라 정해진 상수가 존재 : 어떠한 엘리먼트의 node 타입 의미 ex) console.log(s.nodeType === 1); // true console.log(s.nodeType === Node.ELEMENT_NODE); // true, 이름을 작성해도 됨 ELEMENT_NODE 1 이기 때문 ☞ nodeName : node의 이름, 태그명을 의미 ex) console.log(s.nodeName); // BODY : 어떠한 함수가 실행될 때 자기 자신을 호출 * t..

: 부가적인 정보, attribute : getAttribute : setAttribute : hasAttribute : removeAttribute -> 둘의 결과는 같다 cf) 속성의 값과 프로퍼티의 값이 다를 수 있다 + 속성의 이름과 다른 이름을 갖는 경우도 있다 =>property 방식을 사용할 때 조심해야한다 : attr : removeAttr : 속성(attribute)와 프로퍼티 구분 * 속성 == attr , 프로퍼티 == prop 메서드 사용 * jQuery 속성 프로퍼티 값은 알아서 보정해주기 때문에 어떤 언어를 쓰던 같은 결과값을 얻는다

: 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어 라이브러리 : DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구 ☞ 최신버전 : : $('태그 선택자').css('color', 'blue'); * $() == jQuery 함수 $('태그 선택자') == 리턴값, jQuery 객체 => jQuery로 간단하게 작성 가능 * class는 . id는 # ☞ $(태그 선택자).css(효과, 설정값); -> 설정 $('li').css('text-decoration', 'underline'); ☞ $(태그 선택자).css(효과); -> 가져오기 $('li').css('text-decoration'); -> text-decoration 효과의 값을 가려오려고 함, underlin..

: 엘리먼트를 조회하기 위한 식별자 (이름, id, class)를 가져오고 변경하는 역할 ☞ Element.tagName , 읽기전용 ☞ Element.id : 단 하나만 등장할 수 있는 식별자 ☞ Element.className : 클래스는 여러대의 엘리먼트를 그룹핑할때 사용 : 위와같이 class명이 추가 된걸 확인할 수 있다 ☞ Element.classList : className보다 더 편리 : 없으면 만들어주고 있으면 없애고 == toggle : classList.add(); : classList.remove(); : classList.toggle(); : 문서 내에서 객체를 찾는 방법 => document 객체의 메서드 이용 ☞ document.getElementsByTagName : elem..