[자바웹프로그래밍] JS, 검색 기능 만들기,간단한 팝업창 구현하기

몇가지 기능들을 구현할건데 이런 기능 처리는 대부분 .js파일로 구현해준다.

 

쉽게 말하면 핵심 로직을 구현하는 것이다.

 

 

어떤식으로 적용되는지 테스트를 해보겠다.

그럼 js 폴더 - js_test.js 를 만들어보겠다.

이렇게 만들었다면

이렇게 코딩을 작성한다.

 

위의 코드를 설명하면 var는 변수 선언할때 사용하는 것이다. 이렇게 코드작성을 완료했어도 사이트에 바로 적용되는게 아니다. 메인 html에서 스크립트 파일을 불러줘야한다. 

 

이걸 head 태그에 작성해준다. 그리고 사이트를 실행하고 F12를 눌러준다.

그럼 위의 이미지처럼 개발자 창이 나올텐데 여기서 Sources를 들어가준다

 

그럼 이렇게 나오는데 이상하게 내가 작성한 js폴더와 파일이 보이지않는다. 왜그럴까?

 

js파일의 이름이 잘못되었다. 이걸 다시 제대로 고쳐서 작성하면

 

이렇게 js폴더와 파일 그리고 작성한 내용까지 확인할 수 있는걸 알 수 있다.

 

즉,오류가 하나라도 있으면 개발자창에선 절대 보이지 않는다.(오류체크방법)

 

그럼 다음과 같이 또 코딩하고 확인해보자.

 

여기서 let이란 변수선언을 더 많이 쓰인다고 했는데 그 이유는 접근에 문제이다.

 

위의 이미지로 설명하면 if 안에 let과var가 있는데 var는 if 밖에서도 접근이 된다.

그래서 접근이 쉽기때문에 버그가 발생할 수도 있고 개발을 오래하다보면 중복으로 변수를 선언하는 실수를 할 수도 있기때문이다.

 

위의 이미지의 함수들이 잘 작동하는지 보려면 console을 가면된다.

이렇게 잘 작동이 되는걸 확인할 수 있다.

 

자바스크립트를 만드는 법을 알았다면 검색창 구현을 해보겠다.

 

js폴더 - search.js를 만들어주고

 

이렇게 코딩을 해준다.

 

위의 최상단 코드를 해석해보면 

 

최상위 문서에서(document.) 특정 Id를 가져와(getElementById) search_btn이라는 Id를 가진 버튼 요소를 찾고 이벤트를 등록한다.(addEventListener)  그 이벤트를 Click(수많은 마우스 이벤트 중 하나)을 하면 search_message()라는 함수를 출력한다.

 

이다.

 

그리고 아래 function은 함수를 정의하는 방법이다. alert는 print 같은 역할이라고 보면된다.

 

html에서 기존의 검색 코드인

이걸

특정 아이디인 search_btn을 추가한다.

 

그리고 스크립트 파일을 부를 수 있게 head 태그에서 불러줘야 한다 (아까 했던 작업들처럼)

 

그리고 사이트를 가서 검색버튼을 눌러보면 실행이 안된다.

 

js파일을 확인해보면 빨간줄이 로딩이 안되는걸 볼 수 있다.

 

그 이유는 바로 로딩을 먼저 해버려서이다.

 

이걸 어떻게 고칠까?? 바로 defer 속성이다.

 

defer은 스크립트부터 로딩하라는 뜻이다.

 

이렇게 하면

정상적으로 실행되는걸 볼 수 있다.

 

근데 이건 지금 빈껍데기이다. 검색을 수행한다는 텍스트만 뜨고 실제론 아무런 기능이 없다. 그래서 그 기능을 지금 추가해볼 예정이다.

 

바로 구글 검색이랑 연동하는것이다. 실제로 많은 사이트들이 쓰고있는 방법이다. 

 

먼저

이 html에 검색기능에 있는 이 3줄을

 

이렇게 바꿔준다.

 

그리고 Search.js내용을

 

이렇게 수정해준다.

참고로 const도 변수 선언중 하나이다.

 

그리고 검색해보면

 

새창으로 테스트가 열리는걸 볼 수 있다.

 

이제 마지막으로 팝업창이다.

 

먼저 popup이라는 폴더를 만들고 popup.html을 만들어준다. 새 창을 여는 행동이니 html을 새로 짜주어야한다.

다음과 같이 짜준다.

참고로 <meta charaset ="UTF-8">은 인코딩이다. 저걸 써주지않으면 이모지,언어,특수문자 등에서 오류가 날 수도 있다.

 

 

js 폴더 - js_popup.js 를 만들어준다.

 

그리고

 

 

다음과 같이 코드를 짜준다.

 

여기서 ..은 저 폴더의 상위폴더라는 뜻이다. 

그리고 당연히 스크립트를 사용할떄처럼 

써줘야한다.

 

그리고 마지막으로 body 태그에

onload="pop_up();" 를 작성해서 바디태그를 로딩하기 시작할때 팝업창이 뜨게 만들어준다. 

 

이제 사이트를 로딩해보면

 

이렇게 팝업창이 잘뜨는걸 확인할 수 있다.