티스토리 뷰
[01] Event의 처리 3
- 입력 값의 범위 지정.
- 사용자는 시각적인 인터페이스로 사용이 편리.
- CheckBox, RADIO 버튼보다 좁은 공간에 많은 항목의 나열 가능.
1. select 태그 자바스크립트에서 연동하기
- SELECT 태그에서 선택한 값을 텍스트 상자에 출력되도록 아래의 소스를 완성하세요.
- 지역변수로 선언해야 form 인식 가능
var frm = document.frmData;
- select 콘트롤에서 선택한 아이템의 인덱스(순번, 0부터 시작~)
f.ansqu.selectedIndex
- select 콘트롤에서 선택한 아이템의 레이블(출력 문자열)
var str = f.ansqu.options[f.ansqu.selectedIndex].text;
- select 콘트롤에서 선택한 아이템의 value
frm.ansqu.value = f.ansqu.options[f.ansqu.selectedIndex].value;
>>>>> /event/select.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var str = "";
function ansquChange(f) {
//alert(f.ansqu.selectedIndex);
str = f.ansqu.options[f.ansqu.selectedIndex].text; /* optionsssssssssssssss ex)1번의 텍스트값 [질문] */
f.title.value=str; /* 아래의 text박스에 넣어 주겠다 */
}
function partChange(f){
alert(f.pt.selectedIndex);
var str2 = f.title.value; /* 이미 선택한 데이터 담아둠 */
if(f.pt.seletedIndex == 17){ /* 왜안되지?????????????????????????????????????????????????? */
str2 = " ";
}else{
str2 += f.pt.options[f.pt.selectedIndex].text + ""; /* 추가 */
}
f.title.value=str2; /* 아래의 text박스에 넣어 주겠다 */
f.title.focus();
}
</script>
</head>
<body>
<form name="frm">
<select name="ansqu" onchange='ansquChange(this.form)'> <!-- onchange : 값이 변경되었을 때 발생되는 이벤트 -->
<!-- 아하!!!!!!!!!!!!여기서 this는 select이고 this.form는 그것의 폼을 말한다. -->
<option selected='selected'>[종류 선택]</option> <!-- selectedIndex = 0 -->
<option>[질문]</option> <!-- selectedIndex = 1 -->
<option>[답변]</option>
<option>[참고]</option>
<option>[공지]</option>
<option>[추천]</option>
<option>[선택 안함]</option> <!-- selectedIndex = 6 -->
</select>
<select name="pt" onchange='partChange(this.form)'> <!-- onchange : 값이 변경되었을 때 발생되는 이벤트 -->
<option selected='selected'>[분야 선택]</option> <!-- selectedIndex = 0 -->
<option> [ANDROID] </option>
<option> [C] </option>
<option> [C++] </option>
<option> [JAVA] </option>
<option> [JSP] </option>
<option> [MOBILE] </option>
<option> [JavaScript] </option>
<option> [ORACLE] </option>
<option> [MS-SQL] </option>
<option> [DB 설계] </option>
<option> [SI/MIS/ERP] </option>
<option> [알고리즘] </option>
<option> [정보처리기사/기능사] </option>
<option> [사무자동화산업기사] </option>
<option> [전자상거래관리사] </option>
<option> [컴퓨터활용능력] </option>
<option> [선택 안함] </option> <!-- 17 -->
</select>
<input type="text" name="title" size="60" style="font-size:12; color:#000000; height:18; border:1px dashed;" maxlength="100">
</form>
</body>
</html>
>>>>> /event/select2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ansquChange(f){
var frm = document.frmData; // value 값을 출력할 폼
var str = f.ansqu.options[f.ansqu.selectedIndex].text; // 레이블
f.title.value=str;
frm.ansqu.value = f.ansqu.options[f.ansqu.selectedIndex].value; // 서버로 전송되는 값
}
function partChange(f){
var frm = document.frmData;
var str = f.title.value + f.pt.options[f.pt.selectedIndex].text + " ";
f.title.value = str;
f.title.focus();
frm.pt.value = f.pt.options[f.pt.selectedIndex].value;
}
</script>
</head>
<body>
<form name="frmSelect">
<select name="ansqu" onchange='ansquChange(this.form)'>
<option selected='selected' value=''>[종류 선택]</option> <!-- selectedIndex = 0 -->
<option value='A001'>[질문]</option>
<option value='A002'>[답변]</option>
<option value='A003'>[참고]</option>
<option value='A004'>[공지]</option>
<option value='A005'>[추천]</option>
<option value='A006'>[선택 안함]</option> <!-- selectedIndex = 6 -->
</select>
<select name="pt" onchange='partChange(this.form)'>
<option value=''> [분야 선택] </option>
<option value='P001'> [JAVA] </option>
<option value='P002'> [JSP] </option>
<option value='P003'> [Spring] </option>
<option value='P004'> [JavaScript] </option>
<option value='P005'> [ORACLE] </option>
<option value='P006'> [선택 안함] </option>
</select>
<input type="text" name="title" size="85" style="font-size:12; color:#000000; height:18; border:1px dashed;" maxlength="100">
</form>
<hr>
<form name="frmData">
분야 선택 전송값: <input type = 'text' name='ansqu' value='' size='50'><br>
언어 서낵 전송값: <input type = 'text' name='pt' value='' size='50'>
</form>
</body>
</html>
2. substring 함수
>>>>>> /event/substring.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var str = '123ABC 가나다/가나다';
//123ABC 가나다/가나다
document.write(str + '<br>');
//'123' (0부터 3이전까지)
document.write(str.substring(0, 3) + '<br>');
//'ABC'
document.write(str.substring(3, 6) + '<br>');
//'가나다/가나다' 7부터 시작
document.write(str.substring(7) + '<br>');
//'가나다' 문자열이 마지막으로 나타난 위치
document.write(str.lastIndexOf('가나다') + '<br>'); //11
</script>
</head>
</html>
3. 문자열에서 공백을 제거하는 스크립트
>>>>>> /event/space.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function trimSpace(f){
var str = f.txtData.value;
for(var i = 0; i < str.length; i++){
if(str.charAt(i)==' '){ //공백이면
str = str.substring(0,i) + str.substring(i + 1, str.length); //공백을 안포함하고
i = i - 1; //그리고 공백을 뺐으니까 i 하나 빼준다
}
}
f.txtData2.value = str;
}
</script>
</head>
<body>
<form name = "myform" method="get">
원본 문자열 : <input name = "txtData" type="text" size = 60 maxlength=60>
<a href="javascript:trimSpace(myform)"><b>문자열 공백 지우기</b></a>
<br><br>
공백 제거 문자열 : <input name="txtData2" type="text" size =60 maxlength=60>
</form>
</body>
</html>
4. 정규 표현식을 이용한 문자열 공백 제거, trim()함수의 구현
function trim(s) {
s += ''; // 숫자라도 문자열로 변환
return s.replace(/^\s*|\s*$/g, '');
}
'web > javascript' 카테고리의 다른 글
| 원하는 자릿수까지 버림 (0) | 2018.08.14 |
|---|---|
| 카카오 지도 api 이용하기 (0) | 2018.04.01 |
| CHECKBOX, RADIO 태그의 Event 처리 (0) | 2018.02.23 |
| BUTTON, SUBMIT 태그의 Event 처리 (0) | 2018.02.23 |
| 함수-confirm, escape, isFinite, eval, split/ innerHTML (0) | 2018.02.22 |
댓글