본문 바로가기

분류 전체보기

 (177)
DOM 기초(8) - 댓글 구현(CRUD) 1) 댓글 구현(CRUD) 1-1) update 1-2) delete 1-3) try / catch 1-4) 코드 실습 1) 댓글 구현(CRUD) // 함수 선언문 function comment1() { } // 생성자 함수와 class는 객체 리터럴 문법과 더불어 객체를 찍어낼 때 사용하는 방법임!! // 생성자 함수 // 생성자 함수의 경우, new 키워드를 써서 새로 객체를 생성할 시 아래와 같이 "this = {}", "return this"가 생략되어 있다고 보면 됨!! function Comment2() { // this = {}; // return this; } // class class Comment() { constructor() { } } new Comment() // 생성자 함수와 c..
DOM 기초(7) - 숫자 증감기, 댓글(Create / Read) 구현 1) 코드 실습 1-1) 숫자 증감기 1-2) 댓글(Create / Read) 1) 코드 실습 1-1) 숫자 증감기 코드 설계 /* Counter 예제 처음에는 "0"으로 값이 설정(초기화)되어 있어야 함 "+" 버튼을 생성해야 함 "-" 버튼을 생성해야 함 "+" 버튼을 누르면 1씩 증가하도록 이벤트를 걸어줘야 함 "-" 버튼을 누르면 1씩 감소하도록 이벤트를 걸어줘야 함 1. 화면 그리기(html 구성 작업) 2. 어떻게 구성할지 고민 3. 입력값이 무엇인지 살펴볼 계획 */ // 첫번째 형태 const display = document.querySelector("#counter"); const incrementBtn = document.querySelector("#increment"); const ..
DOM 기초(6) - 메뉴 / 서브메뉴, 이미지 슬라이드, 로또 1) 코드 실습 1-1) 메뉴 / 서브메뉴 1-2) 이미지 슬라이드(미완성) 1-3) 로또 번호 뽑기 1) 코드 실습 1-1) 메뉴 / 서브메뉴 index.html logo menu1 menu1-1 menu1-2 menu1-3 menu1-4 menu2 menu2-1 menu2-2 menu2-3 menu2-4 menu3 menu3-1 menu3-2 menu3-3 menu3-4 menu4 menu4-1 menu4-2 menu4-3 menu4-4 1234 index.css * { margin: 0; padding: 0; } ul, li { list-style: none; } a { text-decoration: none; } #wrap { width: 100%; } #header { display: flex;..
DOM 기초(5) - 이미지 슬라이드, preview / next 버튼 구현 1) visual 영역 구현 1-1) 이미지 2개 슬라이드 구현 1-2) 이미지 3개 슬라이드 및 preview / next 버튼 구현 1-3) 실행 순서 1) visual 영역 구현 1-1) 이미지 2개 슬라이드 구현 (중요!!) classList와 className의 차이점 classList는 add와 remove를 써서 기존 class가 있다면 해당 class 이름은 그냥 둔 상태(즉, 기존에 이미 존재하던 class 이름을 수정하지 않는다는 것이 point임!!)에서 새로운 이름을 추가(add)하거나 삭제(remove)할 수 있음!! className은 기존에 이미 class 이름이 존재한다면 해당 class 이름을 새로 할당한 이름으로 바꿔줌(즉, 기존에 이미 존재하던 class 이름을 완전히 ..
DOM 기초(4) - setTimeout, setInterval, single thread, event loop 1) Javascript 동작방식 1-1) setTimeout / setInterval 1-2) single thread / event loop 1-3) 동기와 비동기 2) 코드 실습 1) Javascript 동작방식 1-1) setTimeout / setInterval setTimeout, setInterval의 경우, 엄밀히 따지면 DOM이 아니다!! setTimeout, setInterval은 window(전역객체)에 포함되어 있다(window 객체 안에 있다)!! 즉, setTimeout, setInterval은 자바스크립트의 기본 스펙이 아니라 브라우저가 만들어 놓은 메서드(브라우저가 제공해주는 기능)이다!! window.setTimeout window.setTimeout(callback, 10..
DOM 기초(3) - DOMContentLoaded, Form 태그 이벤트, Element 생성 1) Event 1-1) DOMContentLoaded 1-2) Form 태그 이벤트 예제 1-3) Element 생성 1-4) 정리 2) 코드 실습 - Lotto 번호 뽑기(중복값, 정렬 이슈 해결) 1) Event +) // JS version1 function submitHandler() { alert("!!!"); } function init() { const form = document.querySelector("#loginForm"); // console.log(form); // 코드 동작 확인용 form.addEventListener("submit", submitHandler); // "submit" 이벤트는 form element에서만 이벤트 등록 가능. } document.addEvent..
DOM 기초(2) - Event, 코드 실습(Lotto) 1) Event 1-1) Element에 직접 넣기 1-2) DOM 속성으로 넣는 방법이 있음 1-3) addEventListener 2) 코드 실습 - Lotto 번호 뽑기 1) Event 1-1) Element에 직접 넣기 브라우저(웹 페이지 상 render가 되는 영역) 기준으로 배울 예정! 다양한 이벤트('click', 'mouseover', 'mouseout')에 대해 그 중 필요한 이벤트가 발동하여야 특정함수가 호출되도록 할 수 있음!! ...js function a() { console.log('hello world'); } ... 버튼 on[Event 이름] onClick onMouseout onMouseover 1-2) DOM 속성으로 넣는 방법이 있음 ..
DOM 기초 - DOM, Window, Array 1) DOM / BOM 1-1) 정의 및 구분 1-2) Window(전역객체) 1-3) window.document 내의 메서드 2) Javascript 배열 2-1) push / pop 2-2) splice / slice 2-3) 선형검색(완전탐색) 2-4) 코드 예시 - Lotto 1) DOM / BOM 1-1) 정의 및 구분 DOM(Document Object Model) - 여기서 문서는 html을 의미함!! - DOM 또한 Javascript로 조작하지만 대부분의 사람들은 이 둘을 구분하여 배우려 함!! - DOM: Javascript로 HTML을 조작하는 기능을 '브라우저'로 구현한 것 - 브라우저는 HTML, CSS, Javascript를 해석해줌! BOM(Browser Object Mode..

티스토리툴바