Devjo의 코딩

비표준속성 지금까지 써왔던 class, id 속성을 쓰지 않고 나만의 방식으로 속성을 정하고 분류할 수 있다 속성이름="속성값" HTML //nonstandard 라는 속성을 임의대로 만들어보았다 Javascript non-standard properties CSS와의 연결 [속성 이름]{ }; [nonstandard]{ color: blue; } *다른 속성과는 달리 [대괄호] 안에 넣고 사용한다 자바스크립트 비표준속성 연결 querySelectorAll('[속성이름]') 을 사용하여 연결한다 const nonstandard = document.querySelectorAll('[nonstandard'); console.log(nonstandard); *nonstandard라는 상수에 querySelec..

style 프로퍼티를 이용해 스타일에 접근할 수 있다 today.children[0].style.textDecoration = 'line through'; *text-decoration이 아닌 textDecoration, background-color가 아닌 backgroundColor로 접근한다 [카멜표기법] 요소.style.속성 = ' 속성값 ' ; 하지만 여러 개의 요소의 스타일을 변경하기는 매우 번거롭다 = 스타일형식을 클래스 안에 넣고 해당 클래스를 적용한다 클래스를 적용하는 방법은 크게 두가지가 있다 클래스 전체를 덮어씌우거나 일부분을 변경하는 방법이다 style을 클래스 형식으로 적용하기 전체를 덮어씌운다(className) element.className = 'name'; 원래 클래스는 지..

DOM은 웹페이지에 나타난 html 문서 전체를 → 객체로 표현한다 HTML 문서가 만들어지면 객체들의 정보가 DOM객체에 입력된다(태그→요소노드,텍스트노드) HTML 태그 속성(property)들은 대부분 DOM객체의 요소노드의 속성이 되지만 HTML 표준이 아닌(ex: href) 속성은 요소노드의 속성이 되지 않는다 //link 라는 href링크를 가진 id가 존재한다 console.log(link); //출력된다 console.log(link.href); //undefined가 출력된다. //href는 HTML의 표준 속성이 아니기 때문이다 HTML표준이 아닌 속성의 접근 / 추가 / 삭제 하는 메소드명에는 Attribute 단어가 공통으로 들어간다 자바스크립트 → HTML 속성 접근하기 eleme..

요소노드 DOM을 노드로 이루어져 있으며 요소노드는 뼈대를 이룬다 요소노드들을 다루는 속성들을 익힌다면 자바스크립트에서 HTML 요소를 변경할 수 있다 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue //먼저 연결을 하고 const myPro = document.querySelector('#list-1'); //list-1은 태그이다 //속성들을 적용해본다 console.log(myPro.innerHTML); // #list-1의 내부 요소들을 보여준다 console.log(myPro.outerHTML); // #list-1를 포함한 내부 요소들을 보여준다 console.log(..

브라우저도 객체 window객체를 활용해 브라우저 열고 닫기, 크기 반환 등을 수행할 수 있다 window 객체를 자바스크립트 내에서 불러올 수 있다. 전역개체(Global Object)이다 window 객체(전역개체) window.innerWidth 브라우저 창의 너비 반환 window.innerHeight 브라우저 창의 높이 반환 window.open() 브라우저 창 열기 window.close() 브라우저 창 닫기 console 또한 window.console이지만 전역개체이므로 생략가능하다 DOM(Document Object Model) 문서 객체 모델이제껏 사용해왔던 document객체가 DOM의 최상단 객체이다 DOM은 웹페이지에 나타난 html 문서 전체를 객체로 표현한다 document 알..

이벤트 웹페이지에서 일어나는 다양한 일 가장 대표적인 이벤트는 클릭이다 1. 쿼리셀렉터로 버튼을 가져온다 const btn = document.querySelector('#myBtn'); 2. 버튼에 이벤트 속성을 부여한다 btn.onclick = 3. 해당 이벤트 속성에 함수값을 부여한다 btn.onclick = function( ) { console.log('Hello'); } *2~3의 단계를 이벤트 핸들링(Event Handling)이라고 한다(html파일에서 속성으로 사용 가능) 4. 버튼을 누를 때마다 해당 함수가 실행된다 추가지식 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다 alert('massag..

" " 내에 연결할 자바스크립트 파일명을 입력한다 *index.html과 index.js가 연결되었다 id 태그 선택은 document.getElementById( ); *get Element: 요소를 가져온다 / By Id: 아이디를 통해 document.getElementById(' id 값 ' ); 특정 id를 출력하는 구문을 만들고, html파일을 Server로 열면 '개발자도구-console'란에 출력된다 const myTag = document.getElementById('myNumber'); console.log(myTag); document.getElementById( ); id가 존재O id의 요소를 반환 id가 존재X null class 태그 선택은 document.getElements..