JavaScript (20) 썸네일형 리스트형 [자바스크립트 문법] DOM Method DOM 요소 추출, HTML element 가져오기 document.getElementById("id 명칭"); document.getElementByClass("class 명칭"); document.querySelector("css 선택자"); document.querySelectotrAll("css 선택자"); getElementById와 querySelector 차이점은? - 모두 element를 반환하는 메소드이다. 사용방법, 반환 요소, 성능면에서 차이가 있다. - getElementById는 DOM 방식으로 html에서 'id명'과 일치하는 element를 반환한다. 따라서 document 객체에서만 가져올 수 있다. (예: document.getElementById) - querySelect.. [자바스크립트 예제 #04] Math.random으로 로렘입숨 Lorem ipsum 만들기 실행화면 미리보기 HTML 삽입 미리보기할 수 없는 소스 기능 및 자바스크립트 개념 사용자가 원하는 문단 수 만큼 더미 텍스트를 만들어주는 기능 - parseInt() - Math.floor(), Math.random() - inNaN() - slice 메서드 - event.preventDefault() app.js 조건 - 사용자는 input#amount에 원하는 문단 수 길이를 입력한다. - 그 결과로 HTML에 문단 태그를 문단 수 만큼 생성한다. - 사용자가 입력한 문단 수 길이 값(input#amount)이 오류일 때, 문단 태그에 더미 텍스트 배열 중 원소 하나만 출력한다. 즉, 1개의 구문만 보여진다. 1. 원하는 더미 텍스트 배열을 만든다. 동작할 form과 input(#amout), ... [자바스크립트 문법] var, let, const 차이점 재선언은 다음과 같이 이미 선언된 변수에 다시 선언하는 것이다. var variables = '변수 선언'; console log(variables); // 변수 선언 var variables = '재선언'; console.log(variables); // 재선언 재할당은 값을 다시 변경(업데이트)하는 것이다. 호이스팅(hoisting)은 자바스크립트에서 변수와 함수 선언이 맨 위로 이동되는 것이다. 함수나 변수는 선언 방식에 따라 달라진다. 함수를 먼저 호출 했을 때 작동여부를 확인 할 수 있다. 변수 재선언 재할당(업데이트) hoisting(호이스팅*) var 가능 가능 가능 let 불가능 가능 가능, but 초기화 불가능. -> 선언전에 사용할 경우 참조 오류 const 불가능 불가능 (객체 속성은.. [자바스크립트 예제 #03] filter() 필터 메뉴 만들기 HTML 삽입 미리보기할 수 없는 소스 소개 및 자바스크립트 개념 메뉴를 필터링해주는 페이지. - 배열, 객체 - forEach() - DOM : DOMContentLoaded - map, reduce, filter - innerHTML - includes() app. js 1. menu 배열 및 보여줄 항목들에 대한 부모요소 선택 - menu는 객체 배열로 바뀔 부분에 대한 데이터가 키:값 구성으로 되어있다. - .btns-wrap과 .items-wrap을 querySelector로 선택 // items const menu = [ { id: 1, title: "buttermilk pancakes", category: "breakfast", price: 15.99, }, { id: 2, title: "d.. [자바스크립트 예제 #02] Tabs 탭메뉴 만들기 HTML 삽입 미리보기할 수 없는 소스 기능 소개 및 자바스크립트 개념 간단한 탭 메뉴, 탭1 누르면 탭1의 내용 나오고 탭2 나오면 탭2의 내용이 나옴 - DOM : querySelector, querySelectorAll, getElementById - addEventListener - classList.add(), remove() - forEach() - e.target.dataset.id HTML, CSS 자바스크립트 전에, html에서 간단히 해야 할 부분은 다음과 같다. button.tab-btn에는 data-id=""라는 사용자 정의 속성과 원하는 값을 넣어준다. 이 값을 각각의 탭(.tab)의 id 속성에도 넣어서 일치하게 한다. tab-01 tab-02 tab-03 tab-01 Lorem.. [자바스크립트 문법] classList와 forEach() classList DOM의 속성으로 개별 클래스 관리할 때 사용한다. 클래스 하나만 조작 가능하고 DOM의 요소의 클래스명을 읽어오는 속성이다. forEach() forEach()는 각 배열의 요소에 콜백 함수를 한번씩 실행하는 메서드이다. 파라미터로 콜백함수를 갖고 배열 요소를 처음부터 끝까지 반복하며 각각의 요소에 함수를 실행한다. 보통 querySelectorAll() 전체 선택자를 활용하여 사용한다. const list = document.querySelectorAll('li'); list.forEach((listItem) => { listItem.addEventListener('click', () => { list.forEach((e) => { e.classList.remove('active'.. [자바스크립트 예제 #01] Color Flipper 만들기 (hex-code.ver) HTML 삽입 미리보기할 수 없는 소스 HTML, CSS는 출처 소스와 같으므로 생략한다. 목적은 자바스크립트 응용 예제를 실습하는 것이므로 JS에 대한 이해를 위해 코드를 설명하고 요약하는 포스팅이다. 예제 개요 1. 기능 - 메뉴를 필터링 해주는 페이지 2. 자바스크립트 개념 - arrays, array.length - DOM : getElementById(), querySelector(), style.backgroundColor - addEventListener() - Math : floor(), random() 3. app.js - getRandomNum()으로 생성된 랜덤 숫자가 DOM의 body와 .color의 색상을 조작하는 기능 - 배열로 정해진 색상만 바꿀 수 있다. 4. hex.js -.. 바닐라 자바스크립트 응용 예제 모음 with 리액트, 타입스크립트 바닐라 자바스크립트의 필요성은 느꼈지만, 어떻게 시작해야할지 모르겠다. HTML, CSS를 잘 다룰줄 알고 자바스크립트의 기본 문법인 변수, 연산자, 조건문, 함수, 객체, 배열의 개념은 알고 있다. 기본적인 예제들은 따라할 줄 알지만 기능을 설계하고 응용하는 법을 알고 싶다. 구글링 하던 중 '초보자를 위한 40가지의 자바스크립트 프로젝트'를 발견했다. DOM을 다루고 이벤트를 처리하고 HTML과 CSS 속성을 다루는 등 자바스크립트로 간단하게 활용할 수 있는 예제이다. 아직 몇 가지만 해보았지만, 10가지 이상 정도 따라해보고 복습해보면서 충분히 감을 익힐 수 있을 것이라 생각이 든다. 원문 출처 외에도 이 프로젝트를 수행한 다른 블로거도 도움이 많이 되었다. 원문에는 자바스크립트 외에도 프레임워크인.. Vanilla JS, 바닐라 자바스크립트의 필요성 요약 jQuery는 자바스크립트의 라이브러리이다. 제이쿼리는 쉬운 문법으로 많은 사랑을 받았지만, 어느순간 의존도가 확 줄어들었다. 그 이유 중 하나는 자바스크립트의 지속적인 개선이었고 바닐라 자바스크립트로 대부분의 기능이 구현되는 것이다. 무엇보다도 가상 돔(Virtual DOM)을 사용하는 라이브러리가 등장해서 바닐라 자바스크립트로 개발하는 사례가 늘었다. 가상 돔을 이용한 대표적인 프레임워크로는 React, Vue.js, Angular 가 있다. 이러한 프레임워크에서 가상 돔을 이용할 때 제이쿼리를 쓰면 스크립트랑 충돌 가능성이 높다. 가상돔을 이용하는 프레임워크는 DOM을 갱신하는 같은 목적이 있고 이는 제이쿼리와 역할이 비슷하다. 같은 목적의 도구를 이중으로 사용할 필요가 없기 때문에, 스크립트와 제.. [자바스크립트 문법] querySelector, querySelectorAll 차이점 자바스크립트에서 HTML 요소, 즉 문서 객체(document object)를 조작하려면 다음과 같은 메소드를 사용해서 접근할 수 있다. document.querySelector(css 선택자) document.querySelectorAll(css 선택자) (css 선택자)가 들어가는 부분은 css 파일에서 사용하는 모든 선택자를 다 넣을 수 있다. 태그(button), #아이디(#btn), 클래스(.btn), 속성 선택자(\[class="btn"\]), 자식 선택자(.btn span) querySelector()과 querySelectorAll() 차이점 querySelector() 메소드는 문서 객체(요소) 하나만 가져오고, querySelectorAll()은 문서 객체(요소) 여러 개를 가져올 수 .. 이전 1 2 다음