티스토리 뷰

LANGUAGE/JAVA SCRIPT

[JAVA SCRIPT] String 내장객체

진심스테이크 2018. 4. 4. 15:22

 

<!DOCTYPE html>
<html>
<head>
    <title>String</title>
    <script language="javascript">
        function previewString(){
            //id를 불러와서 인식
            var objResult = document.getElementById("result");
            var objText = document.getElementById("tbString");
            var objFontColor = document.getElementById("fontColor");
            var objFontSize = document.getElementById("fontSize");
            var objOptions = document.getElementsByName("fontOption"); //배열로 받아옴

            var targetString = objText.value;

            //fontColor에 대한 배열을 잡아줌
            targetString = targetString.fontcolor( 
                objFontColor.options[objFontColor.selectedIndex].value);

            //fontSize에 대한 배열을 잡아줌
            targetString = targetString.fontsize(
                objFontSize.options[objFontSize.selectedIndex].value);

            //size값을 뽑아와서 다시 넣어줌
            //내장 객체를 사용
            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;
        }
    </script>
</head>
<body>
    <p>
        <input type="text" id="tbString">
        <input type="button" value="미리 보기" onclick="previewString()"> <br>
        색상 : <select id="fontColor"> <!--id:변수값-->
            <option value="red">빨강</option>
            <option value="green">초록</option>
            <option value="blue">파랑</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>
        </select> <br>
        <input type="checkbox" name="fontOption">취소선
        <input type="checkbox" name="fontOption">크게
        <input type="checkbox" name="fontOption">작게
        <input type="checkbox" name="fontOption">두껍게
        <input type="checkbox" name="fontOption">기울임
        <!--name을 지정할 때 모두 같은 걸 지정하면 어떤게 체크 되어 있는지 알 수 있음-->
        <br>
        <input type="checkbox" name="fontOption">위첨자
        <input type="checkbox" name="fontOption">아래첨자
        <input type="checkbox" name="fontOption">소문자로
        <input type="checkbox" name="fontOption">대문자로
        <br>
        <span id="result"></span>
        </p>
</body>
</html>

 

 

 

위의 파일을 JAVA SCRIPT 파일과 HTML 파일 2개로 나누어 보기~

2개의 파일이 같은 경로에 있어야함

 

HTML 파일

<!DOCTYPE html>
<html>
<head>
    <title>html</title>
    <script src="string.js"></script> //파일 불러오기
</head>
<body>
    <p>
        <input type="text" id="tbString">
        <input type="button" value="미리 보기" onclick="previewString()"> <br>
        색상 : <select id="fontColor"> <!--id:변수값-->
            <option value="red">빨강</option>
            <option value="green">초록</option>
            <option value="blue">파랑</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>
        </select> <br>
        <input type="checkbox" name="fontOption">취소선
        <input type="checkbox" name="fontOption">크게
        <input type="checkbox" name="fontOption">작게
        <input type="checkbox" name="fontOption">두껍게
        <input type="checkbox" name="fontOption">기울임
        <!--name을 지정할 때 모두 같은 걸 지정하면 어떤게 체크 되어 있는지 알 수 있음-->
        <br>
        <input type="checkbox" name="fontOption">위첨자
        <input type="checkbox" name="fontOption">아래첨자
        <input type="checkbox" name="fontOption">소문자로
        <input type="checkbox" name="fontOption">대문자로
        <br>
        <span id="result"></span>
        </p>
</body>
</html>

 

 

JAVA SCRIPT 파일

function previewString(){
            //id를 불러와서 인식
            var objResult = document.getElementById("result");
            var objText = document.getElementById("tbString");
            var objFontColor = document.getElementById("fontColor");
            var objFontSize = document.getElementById("fontSize");
            var objOptions = document.getElementsByName("fontOption"); //배열로 받아옴

            var targetString = objText.value;

            //fontColor에 대한 배열을 잡아줌
            targetString = targetString.fontcolor( 
                objFontColor.options[objFontColor.selectedIndex].value);

            //fontSize에 대한 배열을 잡아줌
            targetString = targetString.fontsize(
                objFontSize.options[objFontSize.selectedIndex].value);

            //size값을 뽑아와서 다시 넣어줌
            //내장 객체를 사용
            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;
        }

 

 

 

저작자표시 비영리 변경금지

'LANGUAGE > JAVA SCRIPT' 카테고리의 다른 글

[JAVA SCRIPT] 계산기  (0) 2018.04.05
[JAVA SCRIPT] 배열 관련 객체  (0) 2018.04.05
[JAVA SCRIPT] ALERT( )  (0) 2018.04.05
[JAVA SCRIPT] 배경 색깔 바꾸기  (0) 2018.04.05
[JAVA SCRIPT] 비교 연산자  (0) 2018.04.04
댓글