빅데이터 교육과정 (2021-01-25 ~ 2021-06-24)/WEB (02-22 ~)
HTML, JavaScript 글자 변환 (내장 객체) 과제
hwangpro
2021. 3. 2. 01:58
3조 황은화 글자 변환
<!DOCTYPE html> <!--대소문자 구분 X, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문 !-->
<html>
<head>
<meta charset = "utf-8"> <!--HTML 문서의 문자 인코딩 방식을 명시함. 한글이 깨지지 않게 하기 위해 사용 !-->
<script type="text/javascript">
function previewString() { // id를 불러와서 인식
var obResult = document.getElementById("result"); // 아이디 태그 name을 불러올 수 있다
var obText = document.getElementById("tbString"); // 입력값 저장
var obFontcolor = document.getElementById("fontcolor"); // 글씨 색 저장
var obFontSize = document.getElementById("fontsize"); // 글씨 크기 저장
var obOptions = document.getElementsByName("fontoptions"); // 배열로 받아옴
var tmp; // 출력을 위한 함수
tmp = obText.value; // 타입 tmp에 obText에서 불러온 value 값 입력
for(var i=0; i<3; i++) { // 0 빨강 1 파랑 2 노랑 for문 돌림
if(obFontcolor.options[i].selected == true) { // i번째 옵션이 선택(selected)되었을 때 색이 변하도록 true로 지정
tmp = tmp.fontcolor(obFontcolor.options[i].value); //selectedIndex 값 (선택 0,1,2) options() = 3가지가 있기에
break; // 한 가지가 나오면 멈추게 break 걸어줌 (중복 출력 방지)
}
}
for(var i=0; i<6; i++) { // 1부터 6까지 fontsize for문 돌림
if(obFontSize.options[i].selected == true) { // i번째 옵션이 선택(selected)되었을 때 글자 크기가 변하도록 true로 지정
tmp = tmp.fontsize(obFontSize.options[i].value); //selectedIndex 값 (선택 0 ~ 5) options() = 6가지가 있기에
break; // 한 가지가 나오면 멈추게 break 걸어줌
}
}
if(obOptions[0].checked)
tmp=tmp.strike(); // 내장 함수들 // 취소선
if(obOptions[1].checked)
tmp=tmp.big(); // 크게
if(obOptions[2].checked)
tmp=tmp.small(); // 작게
if(obOptions[3].checked)
tmp=tmp.bold(); // 두껍게
if(obOptions[4].checked)
tmp=tmp.italics(); // 기울임
if(obOptions[5].checked)
tmp=tmp.sup(); // 위첨자
if(obOptions[6].checked)
tmp=tmp.sub(); // 아래첨자
if(obOptions[7].checked)
tmp=tmp.toLowerCase(); // 소문자
if(obOptions[8].checked)
tmp=tmp.toUpperCase(); // 대문자
obResult.innerHTML = tmp; // innerHTML 값을 tmp로 넘겨준다.
}
</script>
</head> <!--head는 문서 정보 담아두는 것 / title은 문서 제목 !-->
<body>
<input type = "text" id="tbString">
<input type = "button" value= "미리 보기" onClick="previewString()"> <br> <!-- onclick="previewString()= 내가 입력 한 글자~!!! -->
색상 : <select id = "fontcolor"> <!--id: 변수값-->
<option value ="red"> 빨강 </option>
<option value ="blue"> 파랑 </option>
<option value ="yellow"> 노랑 </option>
<!--value: 값 지정-->
</select><br>
크기 : <select id = "fontsize">
<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>
</select><br>
<input type = "checkbox" name = "fontoptions" > 취소선 <!--체크박스는 중복체크 가능-->
<input type = "checkbox" name = "fontoptions" > 크게
<input type = "checkbox" name = "fontoptions" > 작게
<input type = "checkbox" name = "fontoptions" > 두껍게
<input type = "checkbox" name = "fontoptions" > 기울임
<!--name을 지정할 때 모두 같은 걸 지정하면 어떤게 체크 되어 있는지 알 수 있음-->
<br>
<input type = "checkbox" name = "fontoptions" > 위첨자
<input type = "checkbox" name = "fontoptions" > 아래첨자
<input type = "checkbox" name = "fontoptions" > 소문자로
<input type = "checkbox" name = "fontoptions" > 대문자로
<br>
<span id = "result"></span> <!--마지막 결과 불러옴-->
</body>
</html>
