본문 바로가기
웹 개발/JavaScript

JS (6) : To-Do List 추가 기능 구현(Google 검색)

JayCee.___. 2023. 8. 27. 01:20

이전 포스팅까지 진행했던 To-Do List에 추가 기능을 구현해 보려고 한다.

우선, Google 검색이 가능한 검색창을 추가해 보자.

 

구현 방법

Google에 접속하여 검색 기능을 사용하면, 검색 결과의 url은 다음과 같다.

구글의 일반적인 URL 형태를 유지하면서, /search?q= 뒤에 우리가 검색을 진행한 키워드 및 다른 값들이 따라오는 것을 볼 수 있다.

우리는 이 url을 이용하여 구글 검색 기능을 웹페이지에 추가할 것이다.

 

HTML 수정

HTML 파일을 다음과 같이 수정해 보자

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- 검색창 -->
        <h1>Search in Google</h1>
        <form id="search-form">
            <input type="text" placeholder="search..." />
        </form>

        <h1>To-Do List</h1>
        <!-- 입력 양식 -->
        <form id="todo-form">
            <input type="text" placeholder="할 일을 입력해 주세요." required />
        </form>

        <!-- 화면에 보여줄 todo들 -->
        <ul id="todo-list"></ul>

        <!-- JS 파일들 -->
        <script src="todo.js"></script>
        <script src="search.js"></script>
    </body>
</html>

 

검색창을 만들어 주기 위해 form 태그와 input 태그를 사용하였다.

검색 기능을 담당하는 JS 파일을 따로 만들어 HTML 파일에 불러오는 코드를 추가하였다.

 

수정 후 결과는 다음과 같다. 이제 검색을 했을 때 검색 결과를 google을 통해 보여주는 기능을 만들어 보자.

JS 추가

search 기능을 담당하는 search.js 파일에 다음과 같이 JS 코드를 추가해 보자.

 

const searchForm = document.querySelector('#search-form');
const searchInput = document.querySelector('#search-form input');

function handleSearchSubmit(event) {
    event.preventDefault();
    const url = 'https://www.google.com/search?q=' + searchInput.value;
    window.open(url);
    searchInput.value = '';
}

searchForm.addEventListener('submit', handleSearchSubmit);

id 속성값을 통해 search를 담당하는 form과 input 요소를 변수에 저장한다.

 

searchForm에서 submit event(enter를 누르는 이벤트)가 일어났을 때 실행하는 함수인 handleSearchSubmit 함수를 만들어 주었다. 

위에서 설명한 것 처럼, 기존의 url + search?q=는 고정이고, 우리가 입력한 검색 키워드를 붙여서 새로운 url을 만들어 준다. 이 url은 우리에게 google에서 검색 키워드를 검색한 결과 화면을 보여줄 것이다.

 

이 url을 새 창에서 열 수 있도록, window.open()을 사용하였다. 이 함수를 통해서 인자로 전달한 url을 새 창에 띄울 수 있다.

그 후, searchInput.value를 공백으로 바꿔주었다.

 

결과

 

 

원하는 검색 키워드를 입력하고 enter를 눌러보면 다음과 같은 결과를 볼 수 있다.

 

 

정상적으로 검색 기능이 작동하는 것을 확인할 수 있다.

'웹 개발 > JavaScript' 카테고리의 다른 글

JS (5) : To-Do List 만들기 (3)  (0) 2023.08.22
JS (4) : To-Do List 만들기 (2)  (0) 2023.08.17
JS (3) : To-Do List 만들기(1)  (0) 2023.08.11
JS (2) : Style 및 Event  (0) 2023.08.05
JS (1) : JavaScript로 Browser 조작하기  (0) 2023.08.01

'웹 개발/JavaScript' Related Articles

티스토리툴바