#9
검색사이트를 선택해서 검색하기
<script type="text/javascript">
const goUrl = function() {
/* 디버깅
console.log('goUrl');
alert('goUrl');
console.log(document.frm.query.value);
- > query(검색어) 값을 가져옴
console.log(document.frm.sitename.options[document.frm.sitename.options.selectedIndex].value);
-> 택된 옵션(사이트)를 가져옴
*/
// 입력오류 차단 - > value값만 있을 때 실행되게하기
let query = document.frm.query.value;
if(query.length < 0 ) {
alert('1자 이상의 검색어를 입력해야 합니다.');
} else {
let sitename = document.frm.sitename.options[document.frm.sitename.options.selectedIndex].value;
let url = '';
switch(sitename) {
case 'naver' :
url = 'https://search.naver.com/search.naver?&query=' + query;
break;
case 'daum' :
url = 'https://search.daum.net/search?t&q=' + query;
break;
case 'google' :
url = 'https://www.google.com/search?q=' + query;
}
location.href = url;
}
};
</script>
</head>
<body>
<form name="frm">
검색어 : <input type="text" name="query" placeholder="검색어 입력"/>
<br><br>
검색사이트 :
<select name="sitename">
<option value="naver">네이버</option>
<option value="daum">다음</option>
<option value="google">구글</option>
</select>
<input type="button" value="검색하기" onclick="goUrl()"/>
</form>
</body>계산기
<script type="text/javascript">
const calculate = function() {
let query = document.cal.query.value;
let query1 = document.cal.query1.value;
let buho = document.cal.buho.options[document.cal.buho.options.selectedIndex].text;
let result = document.cal.result.value;
if(query == '' || query1 == '') { // 공백 입력시 알림창 실행
alert ('값을 입력하세요');
}else{
let buho = document.cal.buho.options[document.cal.buho.options.selectedIndex].text;
// 정수화
let iquery = parseInt(query);
let iquery1 = parseInt(query1);
let result = 0;
switch(buho) {
case '+' :
result += iquery + iquery1;
break;
case '-' :
result += iquery - iquery1;
break;
case 'x' :
result += iquery * iquery1;
break;
}
document.cal.result.value = result;
}
};
</script>
</head>
<body>
<form name = cal>
<input type="text" name="query"/>
<select name="buho">
<option selected>+</option>
<option >-</option>
<option >x</option>
</select>
<input type="text" name="query1" />
=
<input type="button" value="계산" onclick="calculate()"/>
<input type="text" name="result" placeholder="결과" readonly/>
</form>
</body>DOM
구구단 출력
<script type="text/javascript">
const viewGugudan = function() {
let dan1 = parseInt(document.frm.dan1.value);
let dan2 = parseInt(document.frm.dan2.value);
let html = '<table>';
for( let i=dan1; i<=dan2; i++){
html += '<tr>';
for(let j=1; j<=9; j++){
html += '<td>' + i + 'X' + j + '=' + i*j + '</td>';
}
html += '</td>';
}
html += '</table>';
let div = document.querySelector('#result');
div.innerHTML = html;
};
</script>
</head>
<body>
<table>
<td>
<tr>
<form name = 'frm'>
시작단수
<input type="text" name="dan1" placeholder="시작단"/>
~
끝단수
<input type="text" name="dan2" placeholder="끝단"/>
<input type="button" value="구구단 출력" onclick="viewGugudan()"/>
</form>
</tr>
</td>
</table>
<hr/>
<br/><br/><br/>
<div id="result">결과</div>
</body>