Front-End/HTML, CSS, JS
[JS] 자바스크립트 글자 미리보기 (String 메서드, getElementBy)
현기
2022. 9. 8. 16:54
자바스크립트를 이용해서 설정에 따라
적용된 글자를 미리 보는 간단한 프로그램이다.
주로 getElementByID와 String 메서드를 사용한다.
HTML
<body>
<div>
<input type="text" id="onText">
<button onclick="previewStr()">미리 보기</button>
<br>
색상:
<select id="color">
<option value = "red">빨강</option>
<option value = "blue">파랑</option>
<option value = "green">녹색</option>
</select>
<br>
크기:
<select id="size">
<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>
</select>
<br>
<table>
<tr>
<td><input name="fontOption" type="checkbox" value="strike">취소선</td>
<td><input name="fontOption" type="checkbox" value="big">크게</td>
<td><input name="fontOption" type="checkbox" value="small">작게</td>
<td><input name="fontOption" type="checkbox" value="bold">두껍게</td>
<td><input name="fontOption" type="checkbox" value="italics">기울임</td>
</tr>
<tr>
<td><input name="fontOption" type="checkbox" value="sub">위첨자</td>
<td><input name="fontOption" type="checkbox" value="sup">아래첨자</td>
<td><input name="fontOption" type="checkbox" value="upper">소문자로</td>
<td><input name="fontOption" type="checkbox" value="lower">대문자로</td>
</tr>
</table>
<span id="resultStr"></span>
</div>
</body>
document 객체의 getElementByID(), getElementsByName(), getElementsByTagName()
메서드를 사용할 것이기 때문에 최대한 필터링하기 편하도록 HTML에서 태그들의 Id와 Name을 지정한다.
JavaScript 코드
<script language="javascript">
function previewStr(){
//입력된 문자 가져옴
var result = document.getElementById("onText").value;
//글자색 넣기
var selectedColor = document.getElementById("color").value;
result = result.fontcolor(selectedColor);
//글자옵션
var fontOptions = document.getElementsByName("fontOption");
var checkedFontOptions = [];
//체크된 것만 array에 추가
for(var i=0; i<fontOptions.length; i++){
if(fontOptions[i].checked){
checkedFontOptions.push(fontOptions[i].value);
}
}
//폰트옵션 적용
for(var i=0; i<checkedFontOptions.length; i++){
if(checkedFontOptions[i] == "strike"){
result = result.strike();
}
else if(checkedFontOptions[i] == "big"){
result = result.big();
}
else if(checkedFontOptions[i] == "small"){
result = result.small();
}
else if(checkedFontOptions[i] == "bold"){
result = result.bold();
}
else if(checkedFontOptions[i] == "italics"){
result = result.italics();
}
else if(checkedFontOptions[i] == "sub"){
result = result.sub();
}
else if(checkedFontOptions[i] == "sup"){
result = result.sup();
}
else if(checkedFontOptions[i] == "upper"){
result = result.toLowerCase();
}
else if(checkedFontOptions[i] == "lower"){
result = result.toUpperCase();
}
}
//글자크기
var selectedSize = document.getElementById("size").value;
result = result.fontsize(selectedSize);
document.getElementById("resultStr").innerHTML = result;
}
</script>
* 전체코드 더보기
더보기
<html>
<head>
<title>글자 미리보기</title>
<script language="javascript">
function previewStr(){
//입력된 문자 가져옴
var result = document.getElementById("onText").value;
//글자색 넣기
var selectedColor = document.getElementById("color").value;
result = result.fontcolor(selectedColor);
//글자옵션
var fontOptions = document.getElementsByName("fontOption");
var checkedFontOptions = [];
//체크된 것만 array에 추가
for(var i=0; i<fontOptions.length; i++){
if(fontOptions[i].checked){
checkedFontOptions.push(fontOptions[i].value);
}
}
//폰트옵션 적용
for(var i=0; i<checkedFontOptions.length; i++){
if(checkedFontOptions[i] == "strike"){
result = result.strike();
}
else if(checkedFontOptions[i] == "big"){
result = result.big();
}
else if(checkedFontOptions[i] == "small"){
result = result.small();
}
else if(checkedFontOptions[i] == "bold"){
result = result.bold();
}
else if(checkedFontOptions[i] == "italics"){
result = result.italics();
}
else if(checkedFontOptions[i] == "sub"){
result = result.sub();
}
else if(checkedFontOptions[i] == "sup"){
result = result.sup();
}
else if(checkedFontOptions[i] == "upper"){
result = result.toLowerCase();
}
else if(checkedFontOptions[i] == "lower"){
result = result.toUpperCase();
}
}
//글자크기
var selectedSize = document.getElementById("size").value;
result = result.fontsize(selectedSize);
document.getElementById("resultStr").innerHTML = result;
}
</script>
</head>
<body>
<div>
<input type="text" id="onText">
<button onclick="previewStr()">미리 보기</button>
<br>
색상:
<select id="color">
<option value = "red">빨강</option>
<option value = "blue">파랑</option>
<option value = "green">녹색</option>
</select>
<br>
크기:
<select id="size">
<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>
</select>
<br>
<table>
<tr>
<td><input name="fontOption" type="checkbox" value="strike">취소선</td>
<td><input name="fontOption" type="checkbox" value="big">크게</td>
<td><input name="fontOption" type="checkbox" value="small">작게</td>
<td><input name="fontOption" type="checkbox" value="bold">두껍게</td>
<td><input name="fontOption" type="checkbox" value="italics">기울임</td>
</tr>
<tr>
<td><input name="fontOption" type="checkbox" value="sub">위첨자</td>
<td><input name="fontOption" type="checkbox" value="sup">아래첨자</td>
<td><input name="fontOption" type="checkbox" value="upper">소문자로</td>
<td><input name="fontOption" type="checkbox" value="lower">대문자로</td>
</tr>
</table>
<span id="resultStr"></span>
</div>
</body>
</html>String 메서드
https://www.w3schools.com/jsref/jsref_obj_string.asp
JavaScript String Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
참고 문헌 : w3schools.com