국비 33일차_1

강지수·2024년 1월 30일
국비교육국비학원백엔드웹개발자바
0

국비교육

목록 보기
63/97

지난 시간 복습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var model,speed,color,brake,accel;
        function Car(model,speed,color){
            this.model=model;
            this.speed=speed;
            this.color=color;
            this.brake=function(){
                this.speed-=10;
            }
            this.accel=function(){
                this.speed+=10;
            }
        }
        myCar=new Car("520d",60,"red");
        document.write("모델:"+myCar.model+", 속도:"+myCar.speed+"<br>");
        myCar.accel();
        myCar.accel();
        document.write("모델:"+myCar.model+", 속도:"+myCar.speed+"<br>");
        myCar.brake();
        document.write("모델:"+myCar.model+", 속도:"+myCar.speed+"<br>");
    </script>
</body>
</html>

function 을 객체처럼 활용할 수 있음.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function checkId(){
            var s=document.getElementById("id").value;
            if(s.length<6){
                alert("6보다 작음");
            }
            var s1="문자1";
            var s2="문자2";
            var s3=s1.concat(s2);
            var str="자바스크립트에 오신걸 환영합니다.";
            var n=str.indexOf("오");
            alert(n);
        }
    </script>
    id : <input type="text" id="id" size="10"> <br>
    <button onclick="checkId()">검사</button>
</body>
</html>

concat 사용 가능, indexOf 는 0부터 시작홤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var i;
        var fruits=new Array(); //배열 선언
        fruits[0]="apple1";
        fruits[1]="apple2";
        fruits[2]="apple3";
        fruits[3]=3.14;
        fruits[4]=new Date();

        for(i=0;i<fruits.length;i++){
            document.write(fruits[i]+"<br>");
        }
    </script>
</body>
</html>

배열 사용 가능, 타입을 따로 정하지 않고 들어가는 값에 따라 정해짐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html 요소의 name 의 속성을 이용해서 접근 데이터 처리 -->
    <form action="#" name="myForm">
        필드1 : <input type="text" name="a1"> <br />
        필드2 : <input type="text" name="a2"> <br />
        필드3 : <input type="text" name="a3"> <br />
        <input type="button" value="reset" onclick="init();">
    </form>
    <script>
        function init(){
            for(i=1;i<4;i++){
                document.myForm["a"+i].value=i*1000;
            }
        }
    </script>
</body>
</html>

html 요소의 name 의 속성을 이용해서 접근 데이터 처리

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../img/pome.png" id="image1" width="120" height="100" alt="">
    <img src="../img/pome.png" id="image2" width="120" height="100" alt="">
    <img src="../img/pome.png" id="image3" width="120" height="100" alt="">
    <img src="../img/pome.png" id="image4" width="120" height="100" alt=""> <br />
    <input type="button" value="click1" onclick="changeImg(1);">
    <input type="button" value="click2" onclick="changeImg(2);">
    <input type="button" value="click3" onclick="changeImg(3);">
    <input type="button" value="click4" onclick="changeImg(4);">

    <script>
        var a=true;
        function changeImg(n){
            if(a){
                document.getElementById("image"+n).src="../img/poodle.png";
                a=false;
            } else{
                document.getElementById("image"+n).src="../img/pome.png";
                a=true;
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Clock</h1>
    <h1><div id="clock"></div></h1>
    <script>
        function setClock(){
            var now=new Date();
            var s=now.getHours()+" : "+now.getMinutes()+" : "+now.getSeconds();
            document.getElementById("clock").innerHTML=s;
            setTimeout('setClock()',1000);
        }
        setClock();
    </script>
</body>
</html>

실시간 시계

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function calc(type){
            x=Number(document.calculator.number1.value);
            if(type==1){
                y=Math.sin((x*Math.PI)/180);
            } else if (type==2){
                y=Math.log(x);
            } else if (type==3){
                y=Math.sqrt(x);
            } else if (type==4){
                y=Math.abs(x);
            }
            document.calculator.total.value=y;
        }
    </script>
    <form action="#" name="calculator">
        입력 : <input type="text" name="number1"> <br />
        결과 : <input type="text" name="total"> <br />
        <input type="button" value="SIN" onclick="calc(1)">
        <input type="button" value="LOG" onclick="calc(2)">
        <input type="button" value="SQRT" onclick="calc(3)">
        <input type="button" value="ABS" onclick="calc(4)">
    </form>
</body>
</html>

계산기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function test(){
            try{
                alert("a");
                var rval=cube();
            } catch (error) {
                msg="다음과 같은 오류:"+error.message;
                alert(msg);
            }
        }
    </script>
    <input type="button" value="try-catch" onclick="test();">
</body>
</html>

오류 try / catch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function addText(text){
            if(document.createTextNode){
                var node=document.createTextNode(text);
                document.getElementById("target").appendChild(node);
            }
        }
    </script>
    <div id="target" onclick="addText('동적메시지 추가');" style="font:20px bold;">여기를 클릭</div>
</body>
</html>

문구를 클릭하면 '동적 메시지 추가' 가 늘어남

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="p1">This color is</p>
    <input type="button" value="click1" onclick="changeStyle(1);">
    <input type="button" value="click2" onclick="changeStyle(2);">
    <script>
        function changeStyle(type){
            if(type==1){
                document.getElementById("p1").style.visibility="visible";
                document.getElementById("p1").style.color="red";
                document.getElementById("p1").style.fontFamily="impact";
                document.getElementById("p1").style.fontStyle="italic";
            } else if(type==2){
                document.getElementById("p1").style.visibility="hidden";
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="target">
        <p id="p1">첫 번째 단락</p>
        <p id="p2">두 번째 단락</p>
    </div>
    <button onclick="removeNode()">클릭</button>
    <script>
        function removeNode(){
            var parent=document.getElementById("target");
            var child=document.getElementById("p1");

            parent.removeChild(child);
        }
    </script>
</body>
</html>

부모 node 를 통해 자식 node 삭제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function replace(){
            location.replace("http://google.com");
        }
    </script>
    <a href="#" onclick="replace();">이동하기</a>
</body>
</html>

이동하기 버튼을 누르면 구글로 이동, link가 아닌 함수로 이동

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onmousedown="onButtonDown(this);">click</button>
    <script>
        function onButtonDown(button){
            button.style.color="#ff0000";
        }
    </script>
</body>
</html>

버튼을 클릭하면 색이 바뀜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="background-color: yellow; width:200px"
    onmouseover="onMouseIn(this)" onmouseout="onMouseOut(this)">마우스를 이 요소에 올리세요</div>
    <script>
        function onMouseIn(elem){
            elem.style.border="2px solid red";
        }
        function onMouseOut(elem){
            elem.style.border="";
        }
    </script>
</body>
</html>

마우스를 올리면 테두리가 바뀜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    영어단어: <input type="text" id="txt" onchange="changeUpper();">
    <!-- 소문자 영어단어를 입력하면 대문자로 변경되게끔 이벤트 사용 -->
    <script>
        function changeUpper(){
            var x=document.getElementById("txt");
            x.value=x.value.toUpperCase();
        }
    </script>
</body>
</html>

소문자를 입력하면 대문자로 변경되게끔 onchange 이벤트 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="onLoadDoc()">
    <script>
        function onLoadDoc(){
            document.body.style.backgroundColor="red";
        }
        function changeColor(color){
            document.body.style.backgroundColor=color;
        }
    </script>
    문서가 로드 되었습니다.
    <input type="radio" name="c1" value="v1" onclick="changeColor('lightblue')">
    <input type="radio" name="c1" value="v1" onclick="changeColor('lightgreen')">
    <input type="radio" name="c1" value="v1" onclick="changeColor('lightgray')">
</body>
</html>

문서를 켜자마자 배경색 입히고, 라디오 버튼 누를 때마다 색 바뀌기

profile
강지수
개발자 준비의 준비준비중..
이전 포스트

국비 32일차_2

다음 포스트

국비 33일차_2

0개의 댓글