검색어를 입력하고 포털사이트(다음, 네이버, 구글)을 선택한 후 검색페이지 이동 버튼을 누르면
아래와 같이 해당 포털 사이트에서의 검색결과가 나오는 프로그램을 생성해보자
검색조건으로는 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 |
검색어를 입력하고 포털사이트(다음, 네이버, 구글)을 선택한 후 검색페이지 이동 버튼을 누르면
아래와 같이 해당 포털 사이트에서의 검색결과가 나오는 프로그램을 생성해보자
검색조건으로는 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 |
