전체 글 (127) 썸네일형 리스트형 HTML5 template 태그 태그는 추가되거나 복사될 수 있는 HTML 요소들을 정의할 때 사용합니다. 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않습니다. 하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다. 요소는 특정 HTML 요소들을 원하지 않을 때까지 계속해서 다시 사용할 수 있게 해줍니다. 만약 요소를 사용하지 않고 이러한 작업을 수행하려면, 자바스크립트를 사용하여 브라우저가 해당 HTML 요소들을 렌더링하지 않도록 HTML 코드를 작성해야 합니다. 템플릿 엘리먼트는 자바스크립트 코드로 많은 양의 코드를 적지 않아도 되고, 조건에 따라 DOM의 변경도 가능합니다. 이러한 변경은 강력한 DOM API들을 그대로 사용할 수 있어 편리합.. createDocumentFragment document.createDocumentFragment() 는 새로운 빈 DocumentFragment를 생성합니다. DocumentFragments는 DOM 노드들입니다. 이들은 메인 DOM 트리의 일부가 되지 않습니다. 일반적인 사용법은 다큐먼트 조각을 생성하고, 엘리먼트들을 다큐먼트 조각에 추가하고, 그 다큐먼트 조각을 DOM 트리에 추가하는 것입니다. DOM 트리 내에서 다큐먼트 조각은 그것의 모든 자식들로 대체됩니다. DocumentFragment란? DocumentFragment 인터페이스는 부모가 없는 아주 작은 document 객체를 나타냅니다. Document의 경량화된 버전으로 사용되며 표준문서와 같이 노드로 구성된 문서 구조의 일부를 저장합니다. 중요한 차이점은 DocumentFra.. DOM과 자바스크립트 DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text -는 문서를 위한 document object model의 한 부분입니다. 때문에, 이러한 요소들을 DOM과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것입니다. 초창기에는 자바스크립트와 DOM이 밀접하게 연결되어 있었지만, 나중에는 각각 분리되어 발전해왔습니다. 페이지 콘텐츠(the page content)는 DOM에 저장되고, 자바스크립트를 통해 접근하거나 조작할 수 있습니다... CSS 선택자(Selector) CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다. 선택자의 종류 디자인 요소를 의도에 알맞게 적용하기 위해서는 많은 종류의 선택자를 잘 혼합해서 사용하는 것이 중요합니다. 1. 전체 선택자(Universal Selector) * { } : HTML 페이지 내부의 모든 태그를 선택합니다. 전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS속성을 적용합니다. 그렇기 때문에 보통 margin이나 padding값을 초기화하는 등 기본값을 정해 둘 때 사용합니다. 하지만 이를 사용하면 문서안의 모든 요소를 읽어내려야 하기 때문에 페이지 로딩의 속도가 느려질 수 있습니다. 따라서 자주 사용하지 않는.. TDZ (Temporal Dead Zone) TDZ 영역에 있는 변수들은 사용할 수 없습니다. let과 const는 TDZ의 영향을 받습니다. 할당을 하기 전에는 사용할 수 없습니다. 이는 코드를 예측가능하게 하고, 잠재적인 버그를 줄일 수 있습니다. 변수의 생성과정 var 1. 선언 및 초기화 단계 2. 할당 단계 let 1. 선언 단계 2. 초기화 단계 3. 할당 단계 const 1. 선언 + 초기화 + 할당 var : 함수 스코프(function-scoped) let, const : 블록 스코프(block-scoped) 함수, if 문, for 문, while 문, try/catch 문 등 객체 메소드(Object methods) 코딩 앙마 자바스크립트 중급 강좌 #3 - 객체 메소드, 계산된 프로퍼티 유튜브를 보고 정리한 글입니다. Object.assign() : 객체 복제 const user = { name : 'Mike', age : 30 } const newUser = Object.assign({}, user); const cloneUser = user; 하면 안됩니다. user 변수에는 객체 자체가 들어있는게 아니라, 객체가 저장되어있는 메모리 주소인 객체에 대한 참조값이 저장됩니다. 그러므로 cloneUser를 만들어서 user를 넣으면 객체가 복사되면서 들어가는게 아니라, 그 참조값만 복사되는 것입니다. cloneUser를 만들어서 참조값을 복사하게 되면, cloneUser.name = 'Tom'; 으로 cloneUs.. slice, substring, substr 차이 메서드 추출할 부분 문자열 음수 허용 여부(인수) slice(start, end) start 부터 end까지(end는 미포함) 음수 허용 substring(start, end) start 와 end 사이 음수는 0으로 취급함 substr(start, length) start부터 length개의 글자 음수 허용 ℹ️ 어떤 메서드를 선택해야 하나요? 모두 사용해도 괜찮습니다. 그런데 substr에는 단점이 하나 있습니다. substr는 코어 자바스크립트 명세서(ECMA-262 – 옮긴이)가 아닌, 구식 스크립트에 대응하기 위해 남겨 둔 브라우저 전용 기능들을 명시해 놓은 부록 B(Annex B)에 정의되어있습니다. 거의 모든 곳에서 이 메서드가 동작하긴 하지만 브라우저 이외의 호스트 환경에서는 제대로 동작하.. isFinite isFinite(value) - 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환함 alert( isFinite("15") ); // true alert( isFinite("str") ); // false, NaN이기 때문입니다. alert( isFinite(Infinity) ); // false, Infinity이기 때문입니다. isFinite는 문자열이 일반 숫자인지 검증하는데 사용되곤 합니다. let num = +prompt("숫자를 입력하세요.", ''); // 숫자가 아닌 값을 입력하거나 Infinity, -Infinity를 입력하면 false가 출력됩니다. alert( isFinite(num) ); 빈 문자열이나 공백만 있는.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 16 다음
