<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String 객체로 HTML 코드 생성</title>
<script language = "javascript">
function findText(){
var txt = document.getElementById("txtm").value;
// txtm의 입력값을 value로 얻어와 txt에 저장
var fon = document.getElementsByName("1a");
// 1a 라는 이름을 가진 값들을 fon에 저장
var a = document.getElementById("print");
// print 라는 id를 가진 태그를 a에 저장
txt = txt.fontcolor(color.value);
// fontcolor라는 내장객체를 이용해 color이름의 값을 통해 색을 변경해준다.
txt = txt.fontsize(fonts.value);
// fontsize라는 내장객체를 이용해 fonts라는 이름의 value를 통해 사이즈를 변경시켜줌
if(fon[0].checked){
txt = txt.strike(); // 취소선
} // fon의 0번째 인덱스에 있는 값이 checked가 되어있으면 strike()함수를 적용시킴
if(fon[1].checked){ // 큰글씨
txt = txt.big(); // html5로 버전업이 되면서 쓰이지 않는 함수라 함.
}
if(fon[2].checked){ // 작은글씨
txt = txt.small();
// small () 메서드는 표준이 아니며 모든 브라우저에서 예상대로 작동하지 않을 있다고 함.
}
if(fon[3].checked){
txt = txt.bold(); // 굵은글씨
} // fon의 3번째 인덱스에 있는 값이 checked가 되어있으면 bold()함수를 적용시킴
if(fon[4].checked){
txt = txt.italics();
} // fon의 4번째 인덱스에 있는 값이 checked가 되어있으면 italics()함수를 적용시킴
if(fon[5].checked){
txt = txt.sup();
} // fon의 5번째 인덱스에 있는 값이 checked가 되어있으면 sup()함수를 적용시킴
if(fon[6].checked){
txt = txt.sub();
} // fon의 6번째 인덱스에 있는 값이 checked가 되어있으면 sub()함수를 적용시킴
if(fon[7].checked){
txt = txt.toLowerCase();
} // fon의 7번째 인덱스에 있는 값이 checked가 되어있으면 toLowerCase()함수를 적용시킴
if(fon[8].checked){
txt = txt.toUpperCase();
} // fon의 8번째 인덱스에 있는 값이 checked가 되어있으면 toUpperCase()함수를 적용시킴
a.innerHTML = txt; // innerHTML을 통해 a의 값에 txt의 저장된 값을 출력해준다.
// document.getElementById("txtm").value = ""; // 입력 후 텍스트 초기화
}
</script>
</head>
<body>
<input id = "txtm" type="text" name=txt size=12>
<input type ="button" value="미리보기" onclick="findText()"></button> <br>
<a>색상:
</a><select id="color">
<option value="red">빨강</option>
<option value="green">초록</option>
<option value="yellow">노랑</option>
</select>
<br>
<a>크기:
<select id="fonts">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</a>
<br>
<input type = "checkbox" name="1a" value="0">취소선
<input type = "checkbox" name="1a" value="1">크게
<input type = "checkbox" name="1a" value="2">작게
<input type = "checkbox" name="1a" value="3">두껍게
<input type = "checkbox" name="1a" value="4">기울임
<br>
<input type = "checkbox" name="1a" value="5">위첨자
<input type = "checkbox" name="1a" value="6">아래첨자
<input type = "checkbox" name="1a" value="7">소문자로
<input type = "checkbox" name="1a" value="8">대문자로
<br>
<a id="print"></a>
</body>
</html>
반응형
'자바과정 > 과제물' 카테고리의 다른 글
| 자바스크립트 현재 배열값 출력 (0) | 2021.03.02 |
|---|---|
| 세션과 쿠키 (0) | 2021.03.02 |
| HTML 과제 : 상대경로와 절대경로 (0) | 2021.02.25 |
| (Java) GUI 계산기 [연산은 한번] (0) | 2021.02.17 |
| (Java) 급여 관리 프로그램 [인터페이스 생성] (0) | 2021.02.15 |
댓글