VS code-html/css/javascript

최성현·2023년 7월 19일
Tablecheckboxenterform난수퀴즈빈칸만들기사진변경이미지띄우기전송
0

JavaScript

목록 보기
2/4

테이블 전송버튼 누르면 출력하기

배열길이

frm.hobby로 취미들을 가져와서 배열처럼 사용 가능

 for(var i=0;i<frm.hobby.length;i++)

checkbox 체크 표시

table에 나온 hobby가 체크된다면 출력이 되게 하기 위함

for(var i=0;i<frm.hobby.length;i++)
            {
                // 박스체크 되면 value값을 얻어서 hobbyStr에 추가
                // frm.hobby i번째가 체크(선택)된다면
                if(frm.hobby[i].checked)
                {
                    flag=true;
                    // ex)<input>게임 게임이 화면에 표시 되는데
                    // 화면에 표시된 값을 가져오는 것이 value이기 때문에 추가
                    hobbyStr+=frm.hobby[i].value+" ";
                }
            }

checkbox 체크가 안된다면

취미를 하나도 선택 안하면 초기값 그대로 false된다

			if(!flag)
            {
                hobbyStr="취미가 없습니다<br>";
            }else{
                hobbyStr+="입니다<br>"
            }

출력

'out.innerHTML+='은 hobbyStr 넣고 그 뒤에 추가해주기 위해 누적으로 표현

out.innerHTML=hobbyStr;
out.innerHTML+="거주지: "+homeStr;

value

value는 >옆 게임이라는 값을 가져오기 위한 것이기 때문에 value는 어떤 값이 들어와도 상관 없지만 나중에 name과 같아야함

<input type="checkbox" name="hobby" value="게임">게임&nbsp;

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #out{
            position: absolute;
            left: 10px;
            top: 150px;
            width: 400px;
            height: 150px;
            border: 1px solid gray;
            background-color: blanchedalmond;
            padding: 20px;
        }
    </style>
    <script>
        function writeInfo()
        {
            //취미
            var hobbyStr="나의 취미는 ";
            var flag=false;

            //name의 frm.hobby로 가져와서 배열처럼 사용 가능
            for(var i=0;i<frm.hobby.length;i++)
            {
                // 박스체크 되면 value값을 얻어서 hobbyStr에 추가
                // frm.hobby i번째가 체크(선택)된다면
                if(frm.hobby[i].checked)
                {
                    flag=true;
                    // ex)<input>게임 게임이 화면에 표시 되는데
                    // 화면에 표시된 값을 가져오는 것이 value이기 때문에 추가
                    hobbyStr+=frm.hobby[i].value+" ";
                }
            }

            // 취미를 하나도 선택 안하면 초기값 그대로 false된다
            if(!flag)
            {
                hobbyStr="취미가 없습니다<br>";
            }else{
                hobbyStr+="입니다<br>"
            }

            //출력
            out.innerHTML=hobbyStr;

            //radio
            var homeStr="나의 거주지는 ";
            for(var i=0;i<frm.home.length;i++)
            {
                if(frm.home[i].checked)
                    homeStr+=frm.home[i].value+"입니다<br>";
            }

            out.innerHTML+="거주지: "+homeStr;

            //select
            out.innerHTML+="나이 "+frm.age.value;
        }
    </script>
</head>
<body>
    <form action="#" name="frm">
        <table border="1" style="width: 400px;">
            <tr>
                <th width="100">취미</th>
                <td>
                <!--value는 >옆 게임이라는 값을 가져오기 위한 것이기 때문에 value는 어떤 값이 들어와도 상관 없지만 나중에 name과 같아야함-->
                    <input type="checkbox" name="hobby" value="게임">게임&nbsp;
                    <input type="checkbox" name="hobby" value="영화">영화&nbsp;
                    <input type="checkbox" name="hobby" value="여행">여행&nbsp;
                    <input type="checkbox" name="hobby" value="유튜브">유튜브&nbsp;
                </td>
            </tr>

            <tr>
                <th width="100">거주지</th>
                <td>
                    <input type="radio" name="home" value="서울" checked>서울&nbsp;
                    <input type="radio" name="home" value="경기">경기&nbsp;
                    <input type="radio" name="home" value="부산">부산&nbsp;
                    <input type="radio" name="home" value="제주">제주&nbsp;
                </td>
            </tr>

            <tr>
                <th width="100">연령대</th>
                <td>
                    <select name="age">
                        <!-- value값 맞춰줘야함 -->
                        <option value="20대">20대</option>
                        <option value="30대">30대</option>
                        <option value="40대">40대</option>
                        <option value="50대">50대</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="결과출력" onclick="writeInfo()">
                </td>
            </tr>
        </table>
    </form>

    <div id="out"></div>
</body>
</html>

테이블 전송버튼 누르면 출력하기 2

-서버에 전송 누르면 화면에 출력시키기

출력용 화면

<div id="out"></div>

style 변경

id이름.style.backgroud -> 뒷배경색 변경
id이름.style.color -> 글자색 변경

id이름.innerHTML -> 글을 넘겨주는것

colout.style.color=frm.col.value;
colout.style.background=frm.col.value;
id이름.innerHTML="글자";

숙제풀이

최종학력
프로그램 언어
우리반에서 가장친한 친구
뒷배경색 변경

화면에 출력하기

<script>
		function goDates(){
            var finalGrade="나의 최종 학력은 ";
            var flag=false;
            
            for(var i=0;i<frm.grade.length;i++)
            {
                if(frm.grade[i].checked)
                {
                    flag=true;
                    finalGrade+=frm.grade[i].value;
                }
            }
            if(!flag)
            finalGrade="학력이 없어요<br>";
            else
            finalGrade+="입니다<br>";

            out.innerHTML=finalGrade+"<br>";

            var langStr="내가 할 수 있는 언어는 ";
            var flag1;
            for(var i=0;i<frm.lang.length;i++)
            {
                if(frm.lang[i].checked)
                {
                    flag1=true;
                    langStr+=frm.lang[i].value;
                }
            }
            if(!flag1)
            langStr="저는 찌꺼기에요<br>";
            else
            langStr+="입니다<br>";

            out.innerHTML+=langStr+"<br>";

            var nameStr="선택한 친구는 ";

            for(var i=0;i<frm.name.length;i++)
            {
                if(frm.name[i].selected)
                {
                    flag=true;
                    nameStr+=frm.name[i].value;
                }
            }
            nameStr+="입니다<br>";

            out.innerHTML+=nameStr;

            out.style.background=frm.col.value;
        }
</style>

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border: 2px solid gray;
            width: 500px;
        }

        tr,th,td{
            border: 1px dotted gray;
            font-size: 10pt;
        }

        #out{
            position: absolute;
            left: 10px;
            top: 350px;
            width: 450px;
            height: 250px;
            border: 1px solid gray;
            padding: 20px;
        }
    </style>

    <script>
        function goWeight(num){

            document.getElementById("out1").innerHTML=num;
        }

        function goDate(){
            
            out2.innerHTML="날짜: "+frm.day.value;
        }

        function goColor(){
            // innerHTML은 글을 넘겨주는것
            // style.background로 뒷배경색 변경 가능/style.color는 글씨색 변경 가능
            colout.style.color=frm.col.value;
        }

        function goColor2(color){
            colout.style.color=color;
        }

        function goHeight(){
            hei.innerHTML=frm.height.value;
        }

        function goDates(){
            var finalGrade="나의 최종 학력은 ";
            var flag=false;
            
            for(var i=0;i<frm.grade.length;i++)
            {
                if(frm.grade[i].checked)
                {
                    flag=true;
                    finalGrade+=frm.grade[i].value;
                }
            }
            if(!flag)
            finalGrade="학력이 없어요<br>";
            else
            finalGrade+="입니다<br>";

            out.innerHTML=finalGrade+"<br>";

            var langStr="내가 할 수 있는 언어는 ";
            var flag1;
            for(var i=0;i<frm.lang.length;i++)
            {
                if(frm.lang[i].checked)
                {
                    flag1=true;
                    langStr+=frm.lang[i].value;
                }
            }
            if(!flag1)
            langStr="저는 찌꺼기에요<br>";
            else
            langStr+="입니다<br>";

            out.innerHTML+=langStr+"<br>";

            var nameStr="선택한 친구는 ";

            for(var i=0;i<frm.name.length;i++)
            {
                if(frm.name[i].selected)
                {
                    flag=true;
                    nameStr+=frm.name[i].value;
                }
            }
            nameStr+="입니다<br>";

            out.innerHTML+=nameStr;

            out.style.background=frm.col.value;
        }
    </script>
</head>
<body>
<!-- 혹시 출력문이 사라지면 form에 action을 #으로 막아줘야 안사라짐 -->
<form action="#" name="frm">
    <table>
        <caption><b>Radio&Check</b></caption>
        <tr height="30">
            <td>
                <b>최종학력을 선택하시오</b>
                <input type="radio" name="grade" value="고등학교" checked>고등학교&nbsp;
                <input type="radio" name="grade" value="전문대학">전문대학&nbsp;
                <input type="radio" name="grade" value="대학교">대학교&nbsp;
                <input type="radio" name="grade" value="대학원">대학원&nbsp;
            </td>
        </tr>

        <tr>
            <td>
                <b>본인이 가능한 프로그랜 언어</b>
                <input type="checkbox" name="lang" value="C언어">C언어&nbsp;
                <input type="checkbox" name="lang" value="JAVA">JAVA&nbsp;
                <input type="checkbox" name="lang" value="Python">Python&nbsp;
                <input type="checkbox" name="lang" value="ORACLE">ORACLE&nbsp;
            </td>
        </tr>
        
        <tr>
            <td>
                <b>이미지선택</b>
                <input type="file">
            </td>
        </tr>

        <tr>
            <td>
                <b>우리반에서 가장친한친구</b>
                <select name="name">
                    <option value="성현">성현</option>
                    <option value="호석">호석</option>
                    <option value="병주">병주</option>
                    <option value="형준형">형준형</option>
                    <option value="성신" selected>성신</option>
                    <option value="민규형">민규형</option>
                    <option value="희찬">희찬</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>
                <b id="colout">가장 좋아하는 색은</b>
                <input type="color" name="col" onchange="goColor()">
                <input type="color" value="#ccffcc" onchange="goColor2(this.value)">
            </td>
        </tr>

        <tr>
            <td>
                <b>당신의 키는 몇 cm</b>
                <input type="number" name="height" min="150" max="200"
                value="150" step="2" onchange="goHeight()">cm
                <span id="hei">0</span>cm
            </td>
        </tr>

        <tr>
            <td>
                <b>당신의 몸무게는 몇 kg</b>
                <input type="number" name="weight" min="40" max="100"
                value="50" step="2"    onchange="goWeight(this.value)">kg
                <!-- onchange 변활될때 바로바로 적용 -->

                <span id="out1">0</span>kg
            </td>
        </tr>

        <tr>
            <td>
                <b>당신의 생년월일?</b>
                <input type="date" name="day" onchange="goDate()">
                <!-- goDate(this.value) this.value가 없다면 name 필수 -->
                <span id="out2"></span>
            </td>
        </tr>

        <tr>
            <td align="center">
                <!-- 서버에 전송 누르면 1,2,4 <div>로 출력하기 -->
                <!-- <button type="button">서버에 전송</button> -->
                <button type="button" onclick="goDates()">서버에 전송</button>
            </td>
        </tr>
    </table>
</form>

<div id="out"></div>
</body>
</html>

속성값 변경

id로 해당 요소값 얻기

			var myimg1=document.getElementById("myimg1");
            var myimg2=document.getElementById("myimg2");
            var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var init=document.getElementById("btnInit");

읽어온 객체에 이벤트 부여

			btn1.onclick=function(){
                //alert("이벤트시작!!"); 버튼 작동 확인

                //속성값읽어오기
                //myimg1.getAttribute("src");

                //속성값 변경
                // xx.setAttribute("속성값","바꿀 속성값");
                myimg1.setAttribute("src","../Food/8.jpg");
                myimg2.setAttribute("src","../Food/9.jpg");
            }

속성값 변경

xx.setAttribute("속성값","바꿀 속성값");

myimg1.setAttribute("src","../Food/8.jpg");
myimg2.setAttribute("src","../Food/9.jpg");

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/buttonStyle.css">
    <title>Document</title>
    <style>
        img{
            width: 150px;
            height: 150px;
            border: 1px solid gray;
            border-radius: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            
            //id로 해당 요소값 읽기
            var myimg1=document.getElementById("myimg1");
            var myimg2=document.getElementById("myimg2");
            var btn1=document.getElementById("btn1");
            var btn2=document.getElementById("btn2");
            var init=document.getElementById("btnInit");


            //읽어온 객체에 이벤트 부여하기
            btn1.onclick=function(){
                //alert("이벤트시작!!"); 버튼 작동 확인

                //속성값읽어오기
                //myimg1.getAttribute("src");

                //속성값 변경
                // xx.setAttribute("속성값","바꿀 속성값");
                myimg1.setAttribute("src","../Food/8.jpg");
                myimg2.setAttribute("src","../Food/9.jpg");
            }

            btn2.onclick=function(){
                //alert("이벤트시작!!"); 버튼 작동 확인

                //속성값읽어오기
                //myimg2.getAttribute("src");

                //속성값 변경
                // xx.setAttribute("속성값","바꿀 속성값");
                myimg1.setAttribute("src","../Food/2.jpg");
                myimg2.setAttribute("src","../Food/3.jpg");

            }

            //원래대로 버튼
            btnInit.onclick=function(){
                //alert("dd");

                myimg1.setAttribute("src","../Food/1.jpg");
                myimg2.setAttribute("src","../Food/11.jpg");
            }
        }
    </script>
</head>
<body>
    <h4>이미지 2개</h4>
    <img src="../Food/1.jpg" id="myimg1">
    <img src="../Food/11.jpg" id="myimg2">

    <hr>
    <button type="button" id="btn1" class="btn btn-cadetblue">이미지변경#1</button>
    <button type="button" id="btn2" class="btn btn-purple">이미지변경#2</button>
    <button type="button" id="btnInit" class="btn btn-orange">원래대로</button>

</body>
</html>

사진 누르면 아래 큰 사진 그 사진으로 변경

사진 바꾸는 로직

<script>
		window.onload=function(){
            var img1=document.getElementById("img1");
            var img2=document.getElementById("img2");
            var img3=document.getElementById("img3");
            var img4=document.getElementById("img4");
            var img5=document.getElementById("img5");
            var result=document.getElementById("imgresult");
            
            img1.onclick=function(){
                result.setAttribute("src","../연예인사진/12.jpg")
                // 선생님 방법
                // result.setAttribute("src",img1.getAttribute("src"))
            }

            img2.onclick=function(){
                result.setAttribute("src","../연예인사진/11.jpg");
            }

            img3.onclick=function(){
                result.setAttribute("src","../연예인사진/10.jpg");
            }

            img4.onclick=function(){
                result.setAttribute("src","../연예인사진/9.jpg");
            }

            img5.onclick=function(){
                result.setAttribute("src","../연예인사진/8.jpg");
            }
        }
</script>

사진 바꾸는 로직 - 배열버전

<script>
window.onload=function(){
            var img=[document.getElementById("img1"),
                        document.getElementById("img2"),
                        document.getElementById("img3"),
                        document.getElementById("img4"),
                        document.getElementById("img5")];
            
            var result=document.getElementById("imgresult");
            
            
            for(var i=0;i<img.length;i++)
            {
                img[i].onclick=function(){
                    imgresult.setAttribute("src",this.getAttribute("src"));
                }
            }
        }
</script>

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .simg{
            width: 100px;
            height: 100px;
            border-radius: 20px;
            border: 2px solid gray;
        }

        .result{
            width: 300px;
            height: 350px;
            border: 2px solid gray;
        }

        #simg_div{
            position: absolute;
            left: 500px;
            top: 100px;
            cursor: pointer;
        }

        #result_div>img{
            position: absolute;
            left: 610px;
            top: 300px;
            width: 300px;
            height: 350px;
            border-radius: 20px;
        }
    </style>
    <script>
        /*
        window.onload=function(){
            var img1=document.getElementById("img1");
            var img2=document.getElementById("img2");
            var img3=document.getElementById("img3");
            var img4=document.getElementById("img4");
            var img5=document.getElementById("img5");
            var result=document.getElementById("imgresult");
            
            img1.onclick=function(){
                result.setAttribute("src","../연예인사진/12.jpg")
                // 선생님 방법
                // result.setAttribute("src",img1.getAttribute("src"))
            }

            img2.onclick=function(){
                result.setAttribute("src","../연예인사진/11.jpg");
            }

            img3.onclick=function(){
                result.setAttribute("src","../연예인사진/10.jpg");
            }

            img4.onclick=function(){
                result.setAttribute("src","../연예인사진/9.jpg");
            }

            img5.onclick=function(){
                result.setAttribute("src","../연예인사진/8.jpg");
            }
        }
        */
        
        //배열버전
        window.onload=function(){
            var img=[document.getElementById("img1"),
                        document.getElementById("img2"),
                        document.getElementById("img3"),
                        document.getElementById("img4"),
                        document.getElementById("img5")];
            
            var result=document.getElementById("imgresult");
            
            
            for(var i=0;i<img.length;i++)
            {
                img[i].onclick=function(){
                    imgresult.setAttribute("src",this.getAttribute("src"));
                }
            }
        }
    </script>
</head>
<body>
    <div id="simg_div">
        <img src="../연예인사진/1.jpg" id="img1" class="simg">
        <img src="../연예인사진/2.jpg" id="img2" class="simg">
        <img src="../연예인사진/3.jpg" id="img3" class="simg">
        <img src="../연예인사진/4.jpg" id="img4" class="simg">
        <img src="../연예인사진/5.jpg" id="img5" class="simg">
    </div>

    <div id="result_div">
        <img src="../연예인사진/1.jpg" class="result" id="imgresult">
    </div>
</body>
</html>

난수퀴즈

form

action="#"으로 해도 출력이 되자마자 사라질때으로 사라지지 말라고 해줌

<form action="#" name="frm" onsubmit="return false">

enter키 동작

enter의 keycode가 13임 키보드 엔터로 입력했을 때 결과 나오게 설정

<input type="text" name="num" size="5" onkeydown="if(event.keyCode==13) check(value)">

이미지 띄우기

img태그 안 src는 javascript에서 넣어줄거라 빈 값/없어도 됨

<div style="position: absolute; top: 80px; left: 305px;">
        <!-- src는 없는건데 상징적으로 준 것 -->
        <img src="" name="imge">
    </div>

숫자 입력하면 자동으로 빈칸 만들어주는 기본 로직

frm.num.value='';
frm.num.focus();

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #out{
            position: absolute;
            top: 50px;
            left: 10px;
            border: 1px solid gray;
            width: 250px;
            height: 200px;
            padding: 20px;
            background-color: burlywood;
            font-size: 11pt;
        }
    </style>

    <script>
        var rnd;
        var cnt=0;

        window.onload=function(){

            rnd=parseInt(Math.random()*100)+1; //1~100 난수 발생

        }

        function check(su){

            // su가 1~100 여기를 벗어나면 함수종료
            if(su<=0 || su>100)
            {
                alert('잘 못 입력했어요');
                // javascript에서의 함수 종료
                return false;
            }

            //난수 비교
            cnt++;
            if(su>rnd)
                out.innerHTML+=cnt+"회:"+su+"보다 작습니다<br>";
            else if(su<rnd)
                out.innerHTML+=cnt+"회:"+su+"보다 큽니다<br>";
            else
            {
                out.innerHTML="<h3>축하합니다 정답은"+rnd+"입니다</h3>";
                imge.src="../flower_ani/s6.JPG";
            }

            //실패 조건
            if(cnt>10)
            {
                out.innerHTML="<h3>다음 기회에.....</h3>";
                imge.src="../flower_ani/s10.JPG";
            }

            // 숫자 입력 안에 숫자+엔터 했을 때 자동으로 사라지게 해주는 기본
            frm.num.value='';
            frm.num.focus();
        }
    </script>
</head>
<body>
    <!-- action="#"으로 해도 출력이 되자마자 사라질때으로 사라지지 말라고 해줌 -->
    <form action="#" name="frm" onsubmit="return false">
        <b>숫자입력</b>
        <!-- enter의 keycode가 13임 키보드 엔터로 입력했을 때 결과 나오게 설정 -->
        <!-- check()은 사용자 정의 함수에 value값을 넣어준다 -->
        <input type="text" name="num" size="5" onkeydown="if(event.keyCode==13) check(value)">
    </form>
    <!-- 숫자 입력하는 곳 -->
    <div id="out"></div>

    <!-- 이미지 띄우기 편하게하기 위한 div -->
    <div style="position: absolute; top: 80px; left: 305px;">
        <!-- src는 없는건데 상징적으로 준 것 -->
        <img src="" name="imge">
    </div>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
다음 포스트

VS code-html/css/javascript

1개의 댓글

comment-user-thumbnail
이태균
2023년 7월 19일

유익한 정보를 제공해주셔서 감사합니다.

답글 달기