728x90
반응형
자바스크립트를 사용해 글자를 바꾸는 코드입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <html> <head> <title>String</title> <script language="javascript"> function previewString(){ var objResult = document.getElementById("result"); var objText = document.getElementById("tbString"); var objFontColor = document.getElementById("fontColor"); var objFontSize = document.getElementById("fontSize"); var objOptions = document.getElementsByName("fontOptions"); // id를 이용해 html 과 연결 // id, name, tag이름 세개를 사용해 연결 가능 // 하나는 id, 여러개는 name var targetString = objText.value; targetString = targetString.fontcolor( objFontColor.options[objFontColor.selectedIndex].value); targetString = targetString.fontsize( objFontSize.options[objFontSize.selectedIndex].value); if (objOptions[0].checked){ targetString = targetString.strike(); } if (objOptions[1].checked){ targetString = targetString.big(); } if (objOptions[2].checked){ targetString = targetString.small(); } if (objOptions[3].checked){ targetString = targetString.bold(); } if (objOptions[4].checked){ targetString = targetString.italics(); } if (objOptions[5].checked){ targetString = targetString.sup(); } if (objOptions[6].checked){ targetString = targetString.sub(); } if (objOptions[7].checked){ targetString = targetString.toLowerCase(); } if (objOptions[8].checked){ targetString = targetString.toUpperCase(); } objResult.innerHTML = targetString; // getElementsByName 이름 받아오는 것(전부) s 붙음 (배열로 넘어옴) } </script> </head> <body> <input type="text" id="tbString"> <input type="button" value="미리 보기" onclick = "previewString();"> <!-- id = 변수 --> <br> 색상: <select id = "fontColor" style="width: 150; height: 20"> <option value="red">빨강</option> <option value="green">초록</option> <option value="blue">파랑</option> </select><br> 크기: <select id ="fontSize" style="width: 150; height: 20"> <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">기울임 <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> | cs |
html 쪽에서 설정을 다 한 후, javascript로 id, name값을 넘겨주어 html과 javascript를 연결해줍니다.
그 후 if문을 통해 글자들을 변경해 줍니다.
반응형
'Programming > HTML&JAVASCRIPT&JQuery' 카테고리의 다른 글
| <JSP>아... 장바구니 페이지가 필요한데.. 어떻게 만들더라..? (0) | 2018.04.13 |
|---|---|
| <JAVASCRIPT>회원가입양식을 JQUERY로! (0) | 2018.04.08 |
| <JAVASCRIPT> 회원가입 양식 만들기! (1) | 2018.04.06 |
| <JAVASCRIPT>만년달력 만들기 (5) | 2018.04.06 |
| <HTML>의 시작 (HEAD, TITLE, META) (1) | 2018.04.03 |
