웹 개발/JavaScript (6) 썸네일형 리스트형 JS (6) : To-Do List 추가 기능 구현(Google 검색) 이전 포스팅까지 진행했던 To-Do List에 추가 기능을 구현해 보려고 한다. 우선, Google 검색이 가능한 검색창을 추가해 보자. 구현 방법 Google에 접속하여 검색 기능을 사용하면, 검색 결과의 url은 다음과 같다. 구글의 일반적인 URL 형태를 유지하면서, /search?q= 뒤에 우리가 검색을 진행한 키워드 및 다른 값들이 따라오는 것을 볼 수 있다. 우리는 이 url을 이용하여 구글 검색 기능을 웹페이지에 추가할 것이다. HTML 수정 HTML 파일을 다음과 같이 수정해 보자 DOCTYPE html> Document Search in Google To-Do List 검색창을 만들어 주기 위해 form 태그와 input 태그를 사용하였다. 검색 기능을 담당하는 JS 파일을 따로 만들어 .. JS (5) : To-Do List 만들기 (3) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 local storage를 사용하여 우리의 To-Do 들을 저장하고 불러오는 기능을 구현하였다. 이번 포스팅에서는 이 To-Do 들을 삭제하는 기능을 구현해 보자. 현재, 우리는 삭제 버튼을 눌렀을 때 화면에서는 삭제가 적용된다. 하지만 local storage에서는 적용되지 않는다. 이제부터 local storage에서 데이터를 삭제하는 기능을 구현해 보자. toDos array 개선 우선, toDo.. JS (4) : To-Do List 만들기 (2) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 HTML 및 JS를 이용하여 To-Do List의 몇 가지 기능을 구현하였다. 이번 포스팅에서는 local storage를 사용하여 우리의 To-Do 들을 저장하는 기능을 구현해 보자. 우리는 추가한 To-Do들을 브라우저에 저장할 것이다. 이때, 사용할 수 있는 것이 바로 local storage이다. 우리는 to-do를 추가하면, 그 to-do를 local storage에 저장할 것이다. 그리고 페.. JS (3) : To-Do List 만들기(1) 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 포스팅까지 우리는 JS에 대한 기본적인 내용을 알아보았다. 이번 포스팅부터는 To-do List를 만들어 보면서 실제로 개발 진행 시 JS를 어떻게 사용하는지 설명할 예정이다. Setting 우선 HTML파일과 JS 파일을 만들고, 두 파일을 연결시켜 주자. HTML 파일 DOCTYPE html> Document hello world JS 파일 console.log('connected'); 결과 그 후, 우리에게 필요한.. JS (2) : Style 및 Event 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co 이전 JS 포스팅에서 HTML에서 어떤 것을 가져오는 방법에 대해 배웠다. 이번엔 특정 element를 가져와서 style을 조작하고 event를 처리하는 방법에 대해 알아보자. 우리가 가져온 element 내부를 확인해 보자. element 내부를 확인하고 싶다면 console.dir() 을 사용하면 된다. 이전 포스팅에서 사용한 HTML에서 다음과 같이 수정해 주었다. DOCTYPE html> Document Grab m.. JS (1) : JavaScript로 Browser 조작하기 이 게시물은 Nomadcoders의 JS 무료강의를 참고하여 작성하였다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co JavaScript를 사용하는 이유? HTML과 상호작용 하기 위해서 JS를 사용한다. => HTML의 Element들을 JS를 통해 변경하고, 읽을 수 있다. JS로 HTML파일 조작하기 (with 'document') 자신의 HTML 파일을 열어 console에 document를 입력해 보자. 자신의 HTML 코드를 확인할 수 있다. 이처럼 document는 브라우저에 이미 존재하는 object이다. 우리는 이 objec.. 이전 1 다음
