검색어를 입력하고 포털사이트(다음, 네이버, 구글)을 선택한 후 검색페이지 이동 버튼을 누르면
아래와 같이 해당 포털 사이트에서의 검색결과가 나오는 프로그램을 생성해보자
검색조건으로는 2자이상이 입력되도록 하였다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 검색어가 2자이상 되어야 검색진행
const goSearch = function() {
const query = document.frm.query.value;
// 입력값 검사
if( query.length < 2 ) {
// 잘못 입력
alert( '2자 이상의 검색어를 입력하셔야 합니다.' );
} else {
// 정상 입력
//console.log( '정상 입력' );
const sitename = document.frm.sitename.options[document.frm.sitename.options.selectedIndex].value;
//console.log( sitename );
// https://search.naver.com/search.naver?query=%EC%B6%95%EA%B5%AC
// https://search.daum.net/search?q=%EC%B6%95%EA%B5%AC
// https://www.google.com/search?q=%EC%B6%95%EA%B5%AC
let url = '';
switch( sitename ) {
case 'naver':
url = 'https://search.naver.com/search.naver?query=' + query;
break;
case 'daum':
url = 'https://search.daum.net/search?q=' + query;
break;
case 'google':
url = 'https://www.google.com/search?q=' + query;
}
//console.log( url );
location.href = url;
}
}
</script>
</head>
<body>
<form name="frm">
검색어 : <input type="text" name="query" placeholder="검색어 입력" />
<select name="sitename">
<option value="naver">네이버</option>
<option value="daum" selected>다 음</option>
<option value="google">구 글</option>
</select>
<input type="button" value="검색페이지 이동" onclick="goSearch()"/>
</form>
</body>
</html>'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글
| [Javascript] 년, 월 선택하면 달력(캘린더) 보여주는 프로그램 (0) | 2024.04.26 |
|---|---|
| [Javascript] 시작단과 끝단을 입력하면 구구단이 출력되는 프로그램 (0) | 2024.04.26 |
| [Javascript] 중복없는 로또번호 출력 (0) | 2024.04.25 |
| [Javascript] 국영수 총점과 평균 나타내는 표 만들기 (0) | 2024.04.25 |
| [Javascript] 구구단 테이블 만들기 (0) | 2024.04.25 |
