본문 바로가기

Front-end85

Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) - 이전 포스팅에서 지역저장소에 데이터를 저장하여 toDoList를 생성하는 방법까지 알아보았다. - 오늘은 삭제하는 기능을 구현해보자. 1. 삭제기능 - 아래의 사진처럼, 할일을 작성하면 li태그에 입력값이 하나씩 저장되고 x버튼을 눌러 삭제하는 방식이다. - 삭제를 위해 x버튼을 눌렀을 때, HTML상에서 어떤 x버튼이 어떤 li태그에 존재하는지 구분할 수 있어야 한다. 어떻게 할 수 있을까? a) event.target - event.target은 해당 event가 발생한 엘리먼트를 가리키는 기능이다. - eventHandler 함수를 작성할 때, 매개변수로 선언되어야지 사용할 수 있다. [구현내용] 1) x버튼이 눌렸을 때, event.target을 이용하여 어떤 엘리먼트에서 이벤트가 발생했는지 .. 2020. 10. 16.
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) 1. 복기 - 지난 시간에 간단하게 지역저장소(Local Storage)에 대해서 알아보았다. - 지역저장소란, 브라우저가 제공하는 일종의 DB이며, JS를 이용해 접근 및 통제하여 브라우저를 운영하는데 필요한 정보를 사용자 측에 저장하는 것을 의미한다. - 이번 포스팅에서는 지역저장소에 정보를 저장하고 저장된 정보를 활용하는 방법을 다루려고한다. - 이를 위해, 저장 및 삭제 기능을 갖는 간단한 toDoList를 만들어보자. 2. 기본코드 - 지난 포스팅에서 사용했던 코드를 그대로 이어서 사용해보자. - 추가된 사항은 다음과 같다. toDoList를 만들기 위해, 입력란이 필요하다. → input태그 input태그에 입력된 정보를 활용해야 한다. → form태그 toDoList는 여러개의 입력을 받을 .. 2020. 10. 12.
Vanilla JS - 지역 저장소(Local Storage) 1. 지역 저장소(Local Storage)란? - 브라우저를 운영하는데 필요한 정보를 사용자의 컴퓨터에 저장하는 것을 말한다. - 다시 말해, 브라우저가 제공하는 일종의 DB이다. 이를 이용해 필요한 정보를 저장 및 사용할 수 있다. - 모든 웹사이트에서 사용할 수 있으며, JS를 이용해 통제할 수 있다. - 크롬의 개발자 도구를 사용하면 Application탭에서 쉽게 찾아볼 수 있다. [예시화면] - momentum extension에서 사용하는 local storage의 모습이다. - 현재까지 ToDoList에 기록했던 모든 정보들이 들어 있다. - 스크린샷에서 확인할 수 있듯이, key와 value 형식으로 정보가 저장된다. 2. 어떻게 사용하는가? - 직접 예제를 만들어 보면서 Local St.. 2020. 10. 10.
Vanilla JS - 시계 만들기 1. Date() 객체 생성 - Date는 시간정보를 담고있는 클래스다. 이를 이용해서 시간정보를 갖는 객체를 생성할 수 있다. const date = new Date(); // 시간정보를 담고있는 객체를 생성 - Date 클래스를 이용하면 해당 클래스가 갖고있는 메소드를 이용해서 다양한 정보를 알아낼 수 있다. console.log(date); // 현재 시간정보를 출력 console.log(date.getDay()); // 1 = 월요일 console.log(date.getDate()); // 일자를 가져옴 console.log(date.getHours()); // 시간 console.log(date.getMinutes()); // 분 console.log(date.getSeconds()); // 초.. 2020. 10. 10.
Vanilla JS - 조건문(if~else) 1. if 조건문 사용 형식 - JS에서 if 조건문을 사용하는 방식은 다음과 같다. if (condition) { // 해당 조건에 수행할 명령문 } else if (condition){ // 해당 조건에 수행할 명령문 } else { // 위의 2가지 조건에 해당하지 않는 경우, 수행할 명령문 } 기본적인 비교/논리 연산자 - 앞으로 조건문을 사용할 때, 비교와 논리연산자를 통해 표현을 많이 하게 될 것이다. - JS에서는 어떻게 표현하는지 아래의 사진을 참고하여 알아두자. 2. 조건문을 사용한 JS - 이번에는 조건문을 사용하여 JS 적용하는 예제를 만들어보자. - 예제) h1태그를 클릭하면 글자색이 변하도록 만드는 이벤트를 조건문을 이용해서 구현한다. [기본 HTML] Hello, JavaScri.. 2020. 10. 8.
Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) 1. Event란? - JavaScript는 단지 HTML과 CSS를 수정하기 위한 스크립트 언어가 아니라 이벤트에 대응하기 위해 만들어진 언어이다. - 이벤트란, 웹사이트에서 발생하는 모든 것(사건)을 의미한다. ex) 클릭, 새로고침, 닫기, 버튼입력, 제출(submit), etc. - JavaScript를 사용하면 웹사이트에서 발생하는 이벤트 상황을 control 할 수 있다. ex) 새창이 열리기 전/후, 버튼 클릭 후, etc. Window 이벤트 - 윈도우 이벤트는 웹사이트 내부에서 발생하는 것이 아니라, 윈도우 환경 자체에서 발생하는 이벤트를 말한다. 예를 들어, 브라우저 창의 사이즈를 조절하거나 브라우저를 최소화 하거나 닫는 경우 등이 존재한다. - 예시로 브라우저 창의 사이즈를 조절할 때.. 2020. 10. 7.
Vanilla JS - DOM(Document Object Model)(2) 1. DOM을 이용해 HTML 바꿔보기 - DOM의 의미는 HTML(= Document)을 객체화(Object)하여 사용하는 것을 의미한다. - 저번 포스팅에서 배운 getElementById를 사용해서 HTML의 특정 엘리먼트 요소를 객체화하여 내용을 바꿔보자. [기본 HTML] This works! [출력화면] 위의 기본 HTML을 기반으로, h1태그를 객체로 만들어서 내용과 글씨색을 바꿔보도록 하자. [JavaScript 소스코드] const title = document.getElementById("title"); title.innerHTML = "This is JAVASCRIPT!!!! "; [출력화면] - 위와 같이 HTML을 수정할 수 있는 이유는 title이 JS로 인해 객체화 되었기 때문.. 2020. 10. 6.
Vanilla JS - DOM(Document Object Model)(1) 1. DOM, DOM조작이란 무엇인가? - JS를 이용해 HTML에 접근하여 문서 구조, 스타일, 내용, 속성 등을 변경하는 방법 - 선택자를 이용해 특정 엘리먼트를 지정할 수 있으며, 지정된 엘리먼트를 객체로 만든다. - 더 자세한 내용은 아래 링크를 참고하자. developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C DOM 소개 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 developer.mozilla.org 2. 어떻게 사용하는가? - 아래와 같은.. 2020. 10. 3.
Vanilla JS - 기본문법(2) 1. JS 함수와 객체의 관계 - 프로그래밍에서 함수란, 어떤 기능을 의미한다. 그리고 해당 기능을 구현하기 위해서 어떤 코드의 집합으로 구성되어있다. - 이전 포스팅에서 출력을 위해 사용했던, console.log()에서 log라는 부분이 하나의 함수이다. 그렇다면 앞부분에 있는 console이라는 것은 무엇인가? - 저번 포스팅에서 객체가 갖고 있는 특정 key의 value를 출력하기 위해서 다음과 같은 코드를 사용했다. const myInfo = { name: "abc", location: "Seoul, Korea", gender: "Male", handsome:"true", favFood: [ { name: "Kimchi", healthy: true }, { name: "Hamburger", he.. 2020. 10. 2.

티스토리툴바