자바스크립트에서 문자열을 다루는 메소드 종류 자바스크립트에서는 문자열을 편하게 다루게 해주기 위한 메소드들이 있다. 메소드 기능 length 문자열의 길이 반환 slice, substring, substr 문자열을 원하는 길이만큼 자르기 trim 공백제거 toUpperCase, toLowerCase 대/소문자 치환 padStart().padEnd() 문자열을 원하는 길이만큼 다른 문자로 채우기 'strtext'.charAt(n), 'strtext'[n] 문자열의 원하는 인덱스의 문자를 찾기 'strtext'.charCodeAt(n) 문자열의 원하는 인덱스의 문자를 유니코드로 변환 'strtext'.indexOf(ch) 문자열의 원하는 문자의 인덱스를 찾기 strtext'.includes('str') 문자..
JAVASCRIPT / NODE Node DOM객체의 모든 것은 Node에 속한다. 요소를 더욱 세분화 하면 element node와 text node로 나눌 수 있다. (주석은 comment node) 각각의 노드에 접근하고 변경할 수 있다. element node, text node element node HTML의 태그들이라고 생각하면 된다. (, 등 ) ex > 이거는 text node 입니다. text node 각각의 태그 사이에 들어가는 정보 ex > 이게 text node 입니다. 문법 // element node에 text node를 삽입한다. element_node.appendChild(text_node) // text node가 삽입된 (안돼도 됨) element node를 html 요..
CSS / PSEUDO-CLASS Pseudo-Class 선택자에 가상 클래스를 사용하여 해당 요소의 특정 상황만을 선택할 수 있다. 선택자 뒤에 : 을 붙혀 원하는 상황을 선택한다. 가상 클래스의 종류 first-child, nth-child(n/even/odd), last-child -> 요소가 부모의 특정 번째 요소일 때를 선택 first-of-type, nth-of-type(n/even/odd),last-of-type -> 요소가 같은 타입들 중에서 특정 번째 요소일 때를 선택 ※ 둘다 동일한 방법으로 사용 예제 1 2 3 /* span 하위의 첫번째 div */ span > div:first-child{ border: solid 1px; } /* div중 짝수만 (우선순위 낮음) */ div:n..
JAVASCRIPT / 비교연산 JavaScript의 비교연산 (자바와의 차이점) 자바스크립트의 비교연산은 자바와 거의 비슷하지만 다른것들이 몇가지 있다. ==, != : 값이 일치(불일치) 하면 true ===, !== : 값과 타입이 모두 일치(불일치)해야 true 예제 console.log('1 == 1 ? ', 1 == 1); // true console.log('1 == \'1\' ?', 1 == '1' ); // true console.log('1 == 2 ? ' , 1 == 2); // false console.log('--------------------') console.log('1 === 1 ? ', 1 === 1 ); // true console.log('1 === \'1\' ?', ..
element.style.property 요소의 스타일 속성에 접근해서 값을 변경할 수 있다. 문법 const yellow = document.getElementById("yellow"); yellow.style.backgroundColor = "yellow"; id가 yellow인 요소에 배경색을 노란색으로 변경한다. 예제 여러개의 요소를 선택하고 반복문을 사용하여 선택된 요소 전체의 값을 변경하는 방법 여러개의 요소를 선택하고 각각의 요소에 접근하고 싶을땐 배열처럼 사용할 수 있다. class가 "yellow"인 모든 것들의 style을 변경 노란색 안 노란색 노란색 노란색 노란색아님 위의 반복문을 아래처럼 변경 가능하다. ( for -> forEach ) Array.from(yellow).forEa..
javascript / getAttribute() getAttribute() 선택한 요소의 선택한 속성 값을 가져온다. 문법 element.getAttribute('attribute'); document.getElementById('div1').getAttribute("class") id가 div1인 요소의 class값을 가져온다 . 예제 출력된 이미지의 경로를 가져오기 id가 img-1인 것의 src값을 가져올 수 있다.
JAVASCRIPT / attribute attribute 요소의 속성에 접근하여 값을 변경, 추가할 수 있다. element.attribute = "값" 의 형태로 사용한다. 문법 const img = document.getElementById("img"); img.src = "./아무사진1.png"; 위의 코드를 사용하면 인 태그를
JAVASCRIPT / innerHTML innerHTML 요소의 태그 사이 내용을 변경할 수 있다. 문법 // 1 html 객체에 바로 접근해서 사용 document.getElementById("out").innerHTML = "추가할 내용 " // 2 html 객체에 변수에 담아서 사용 var out = document.getElementById("out"); out.innerHTML = "추가할 내용" 예제 id가 "out"인 태그내에 innerHTML을 이용해서 내용 추가
JAVASCRIPT / getElementById() getElementById('id') HTML 태그의 id값을 가져오는 메소드 문법 document.getElementById('id'); //id정보를 변수에 저장 var item = document.getElementById('item'); 예제 id값을 가져와서 innerHTML로 태그사이에 값 넣기 기존 div 내용 getElementById 이외의 다른 메소드들 getElementById 이외의 HTML 태그에 접근하는 방법은 여러가지가 있다. 요소를 가져올 때 값이 여러개라면 (class, tag등) 배열처럼 사용할 수 있다. getElementsByTagName('tag_name') 태그 정보를 가져온다. // 태그가 div인 것들 doc..
opacity 요소의 불투명도를 설정할 수 있다. 기본은 1이고 낮을수록 투명해진다. 예제 #div1{ opacity: 0.1; } #div2{ opacity: 0.4; } #div3{ opacity: 0.7; } #div4{ opacity: 1.0; }