꾸생의 DevLog

[JS] 자바스크립트 childNodes / children

자바스크립트를 이용하여 HTML요소의 자식 노드와 요소에 접근하는 방법으로 우선 HTML 노드와 요소의 차이점에 대해서 알아야한다. 노드에는 3개, Text와 Element, Comment가 포함되어 있습니다. Text : 의미대로 텍스트 문자열 Element : HTML 요소 Comment : 주석 1. 자식노드 접근 -> ele.childNodes 텍스트 childNodes는 배열의 형태로 노드를 순서대로 반환한다. 태그안 줄바꿈까지 Text로 처리되어 반환되므로 주의해야한다.. 2. 자식요소 접근 -> ele.children 텍스트 ele.children은 해당 HTML 요소의 자식요소를 배열의 형태로 반환한다. childNodes와는 다르게 주석이나 줄바꿈 또는 텍스트는 제외한다.

2021.03.23  

[JS] classList 속성 add, remove, contains, toggle 함수

자바스크립트 이벤트를 배울때 태그에 onClick 이벤트 속성을 자바스크립트 함수와 연결하여 사용했지만 이것은 효과적인 코딩 방법이 아니였다. HTML, CSS, JS는 각기다른 기능을 맡고 있기 때문에 연결되는 접점을 분리를 해주어야 효과적으로 관리할 수 있다. 이를 위해서 자바스크립트에서는 classList 함수를 사용하여 HTML 요소에 class 속성을 추가, 제거, 변경, 여부확인이 가능하다. JavaScript - Element.classList classList를 이용하여 해당 요소를 출력했을 때 DOMTokenList를 출력하며, 여기에는 배열의 형태로 클래스의 이름들이 저장되어있다. ele.classList.add(String) 해당 요소의 클래스 속성값을 추가, 같은 클래스명 있는 경우..

2021.03.23  

자바스크립트 ES6 구조 분해 할당(Destructuring Assignment)

자바스크립트 구조 분해 할당은 배열 또는 객체의 속성 값을 개별로 담을 수 있는 표현식으로 perl이나 파이썬 등 다른 언어에서도 지원하는 기능이다. 1. 기본 변수 구조 분해 할당 let A, B; [A, B] = [123, 456]; console.log(A + '/' + C); // 결과 : 123/456 2. 배열 구조 분해 할당 let foo = ["one", "two", "three"]; let [one, two, three] = foo; console.log(one); // => "one" console.log(two); // => "two" console.log(three); // => "three" 한 번에 여러 변수를 선언하여 배열의 값을 순서대로 초기화 할 수 있다. let C = [..

2021.03.20  

반응형 웹 PC/Tablet/Mobile 미디어 쿼리 분기점

반응형 웹은 CSS 미디어 쿼리(media queries)를 사용해 사용자 기기의 화면 width 사이즈를 비교하여 적절한 CSS를 표시해준다. 미디어 쿼리를 사용하지 않고 HTML 헤더에서 현재 기기의 width에 맞는 스타일 시트를 지정해주는 방식도 있다. 미디어 쿼리를 적용하기 전 HTML 태그안에 뷰포트 태그를 선언해 줘야하는데, 기본 Visual Code에서는 Emmet으로 추가가 되지만 Bracket에서는 기본으로 추가되지 않는다. content ="width=device-width, initial-scale=1.0" -> 화면 넓이를 사용자 디바이스 넓이로 지정, 기본 사이즈 1 반응형웹 디바이스별 분기점 최소 최대 PC 1024px - Tablet 768px 1023px Mobile 320..

2021.03.07  

[JS] 자바스크립트 랜덤

자바스크립트 랜덤 0부터 10까지 랜덤 숫자 구하기 var random = (Math.random() *11) ; console.log(random.toFixed(0)); 5부터 20까지 랜덤 숫자 구하기 var random = Math.floor((Math.random() * 20 - 5) + 5 ); // * 최대값-시작값 ) + 시작값 console.log(random); parseInt() 또는 toFixed()를 사용해 정수로 표현

2021.03.05  

[JS] 자바스크립트 천단위 콤마(,) 찍기

자바스크립트 천단위 콤마 var number = 12345678901234567890; console.log(number.toLocaleString()); 굳이 정규식을 사용하지 않아도 편리하게 천단위 구분 콤마를 찍을 수 있다! Number.prototype.toLocaleString() - JavaScript | MDN Number.prototype.toLocaleString() The toLocaleString() method returns a string with a language-sensitive representation of this number. The source for this interactive example is stored in a GitHub repository. If you..

2021.03.04  

[JS] 자바스크립트 객체와 배열 다루기

자바스크립트 객체(Object) var person = { //person 객체 생성 name : '꾸생', age : 27, blog_url : 'https://juni-official.tistory.com/', print : function() { console.log(this); } } person.print(); 객체에는 각각의 속성이 있고 속성에는 키와 값으로 이루어져 있다. 자바스크립트 객체 접근 방법 person['name'] + '\n' + person['age'] + '\n' + person['blog_url'] 자바스크립트 객체 접근 방법으로는 이와같이 사용하는데, 키 값을 문자형식으로 입력하여 해당 값을 찾는다. 물론 키 값이 숫자일 경우 숫자를 이용하여 접근이 가능하다. 하지만 배열..

2021.03.04  

[JavaScript] 원하는 문자열 추출하기

자바스크립트 원하는 문자열 추출 1. charAt() 함수 let String = "원하는 문자열 추출하기"; console.log(String.CharAt(0)); // 결과 : '원' console.log(String.charAt(String.length-1)); // 결과 : '기' 문자열에서 첫번째와 마지막 문자열을 추출하거나 원하는 index에 위치한 문자를 추출한다면 charAt() 함수를 이용하면 된다. charAt() 함수의 파라미터는 index의 위치 값을 사용한다. 하지만 문자열 하나가 아닌 원하는 위치에서 여러 문자열을 가져와야 한다면 substr() 함수를 이용해야한다. 2. substr() 함수 let String = "원하는 문자열 추출하기"; console.log(String...

2021.03.04