국비 32일차_1

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

국비교육

목록 보기
61/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>
    <style>
        div{
            width: 200px;
            height: 50px;
            background: yellow;
            border: 1px solid red;
            -webkit-transition: width 5s, height 5s, border 5s, -webkit-transform 5s;
        }
        div:hover{
            width: 300px;
            height: 100px;
            border: 1px solid green;
            transform: rotate(180deg);
        }
    </style>
    <div>마우스를 올려놔 보세용...</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>
    <style>
        div{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
        }
        div#box2{
            transform: translate(100px, 0px);
        }
        div#box3{
            transform: scale(1.2,1.2);
            background-color: red;
        }
        div#box4{
            transform: rotate(30deg);
            background-color: green;
        }
        div#box5{
            transform: skew(40deg,0deg);
            background-color: aqua;
        }
    </style>
    <div id="box1">Box1</div>
    <div id="box2">Box2</div>
    <div id="box3">Box3</div>
    <div id="box4">Box4</div>
    <div id="box5">Box5</div>
</body>
</html>

CSS 끝
JavaScript 시작

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var x;
        x="Hello Buddy js !!!!"
        alert(x);
    </script>
</head>
<body>
    
</body>
</html>

javascript 에서는 변수 선언처럼 var 타입으로 선언할 수 있음.
var 는 생략 가능
문자열은 "" 과 '' 둘 다 사용 가능

<!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 s;
        alert(typeof(s));
        </script>
    </body>
</html>

s 의 타입 확인 가능
undefined : 아직 결정되지 않음.

<!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 onclick="alert('인라인')">button</button>
</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>
        //한줄주석
        /*
        여러줄 주석
        */
       document.write("Hello javascript!!!!!");
    </script>
</body>
</html>

내부 JS 쓰기

<!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 src="myscript.js">
        
    </script>
</body>
</html>

외부 JS파일 쓰기

<!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 id="test">This is a Heading</h1>
    <script>
        function func(){
            alert("호출했슈!!!")
            var e=document.getElementById("test");
            alert(typeof(e));
            e.style.color="red";
            e.innerHTML="Change String!!!"
        }
    </script>
    <button onclick="func();">click</button>
</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>
        var now=new Date();
        alert(typeof(now));
        alert(now);
    </script>
</body>
</html>

        var age=prompt("나이입력:","만나이로 입력하세요");
        alert(age);

<!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 time=new Date().getHours(); // 시간 가져오기
        alert(time);
        var msg="";
        if(time<12){
            msg="Good Morning";
        }else if(time<18){
            msg="Good Afternoon";
        }else{
            msg="Good Evening";
        }
        alert(msg);
    </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>
        var grade=prompt("평점입력","A,B,C,D,F 사이값")
        grade=grade.toUpperCase(); // 대문자로
        switch(grade){
            case 'A':alert("Good:A");break;
            case 'B':alert("Good:B");break;
            case 'C':alert("Good:C");break;
            case 'D':alert("Good:D");break;
            case 'F':alert("bad:F");break;
            default:alert("잘못입력");
        }
        alert(grade);
    </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>
    <h3>덧셈계산기</h3>
    <form action="">
        first num : <input type="text" id="x"> <br>
        second num : <input type="text" id="y"> <br>
        sum num : <input type="text" id="sum"> <br>
        <input type="button" onclick="calc()" value="계산">
    </form>
    <script>
        function calc(){
            alert("계산");
            var x=document.getElementById('x').value;
            var y=document.getElementById('y').value;
            var sum;
            sum=parseInt(x)+parseInt(y);
            alert(sum);
            document.getElementById("sum").value=sum;
        }
    </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>
        var computerNumber=parseInt(Math.random()*100); // random 값 생성
        alert(computerNumber);
        var cnt=0;
        function guess(){
            var x=document.getElementById('user').value;
            var result="";
            if(computerNumber==x){
                result="정답";
            }else {
                result="오답";
            }
            alert(result);
            cnt=cnt+1;
            document.getElementById("guesses").value=cnt;
        }
    </script>

    <h2>숫자맞추기 게임</h2>
    이게임은 생성한 숫자를 맞추는 게임, 숫자는 1-100 사이의 값

    <form action="">
        숫자 : <input type="text" id="user" size="5">
        <input type="button" value="확인" onclick="guess()">
        추측횟수 : <input type="text" id="guesses" size="5"> <br>
        힌트 : <input type="text" id="result" size="16">
    </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>
        var computerNumber=parseInt(Math.random()*100); // random 값 생성
        alert(computerNumber);
        var nGuesses=0;
        function guess(){
            var number=parseInt(document.getElementById("user").value);
            var result="";
            nGuesses++;
            if(number==computerNumber){
                result="성공입니다."
            }else if(number<computerNumber){
                result="낮습니다."
            }else {
                result="높습니다."
            }
            document.getElementById("result").value=result;
            document.getElementById("guesses").value=nGuesses;
        }
    </script>

    <h2>숫자맞추기 게임</h2>
    이게임은 생성한 숫자를 맞추는 게임, 숫자는 1-100 사이의 값

    <form action="">
        숫자 : <input type="text" id="user" size="5">
        <input type="button" value="확인" onclick="guess()">
        추측횟수 : <input type="text" id="guesses" size="5"> <br>
        힌트 : <input type="text" id="result" size="16">
    </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>
        var i=0;
        while(i<10){
            document.write("while 카운트:"+i+"<br>");
            i++;
        }
    </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>
    <h4>while</h4>
    <script>
        function whileclick(){
            var i=0;
            while(i<10){
                document.write("while 카운트:"+i+"<br>");
                i++;
            }
        }  
    </script>
    <button onclick="whileclick();">buttonwhile</button>
</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>
        var i=0;
        do{
            document.write("while 카운트:"+i+"<br>")
            i++;
        } while(i<10);
    </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>
        for(var i=1;i<=6;i++){
            document.write("<h"+i+">Header "+i+"</h"+i+">");
        }
    </script>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
</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>
    <table border="1">
        <tr>
            <td>섭씨온도</td>
            <td>화씨온도</td>
        </tr>
        <script>
            for(celsius=0;celsius<100;celsius++){
                document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32))+"</td></tr>";
            }
        </script>
    </table>
</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>구구단을 script를 사용해서 출력해보세요.</h1>
    <table border="1">
        <script>
            for(i=1;i<10;i++){
                document.write("<tr height=50>")
                for(j=1;j<10;j++){
                    document.write("<td width=100 align='center'>");
                    document.write(i+' x '+j+' = '+i*j+"<br>");
                    document.write("</td>")
                }
                document.write("</tr>")
                document.write("<br>")
            }
        </script>
    </table>
</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>구구단</h1>
    <table border="1" width="300px">
        <script>
            for(i=1;i<=9;i++){
                document.write("<tr>")
                    for(j=2;j<=9;j++){
                        document.write("<td>"+i*j+"</td>")
                    }
                document.write("</tr>")
            }
        </script>
    </table>
    <hr>
        <script>
            document.write("<h1>구구단</h1>")
            document.write('<table border="1" width="300px">')
            for(i=1;i<=9;i++){
                document.write("<tr>")
                    for(j=2;j<=9;j++){
                        document.write("<td>"+i*j+"</td>")
                    }
                document.write("</tr>")
            }
            document.write("</table>")
        </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>
        var msg="";
        for(i=0;i<10;i++){
            if(i==3){
                break;
            }
            msg+=i+"<br>";
        }
        document.write(msg);
    </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>
        var msg="";
        for(i=0;i<10;i++){
            if(i==3){
                continue;
            }
            msg+=i+"<br>";
        }
        document.write(msg);
    </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 greeting(name,pos){
            alert(name+" hihi pos : "+pos);
        }
    </script>
    <button onclick="greeting('홍길동','부장');">click</button>
</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 getRectArea(width,height){
            if(width>0 && height>0){
                return width*height;
            }
        }
        var area=getRectArea(100,50);
        alert(area);
        document.write("면적은 : "+area)
        console.log(getArea(30,30))
    </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>
    <button onclick="func();">click</button>
    <script>
        function func(){
            document.write("새로운 내용이 다시 쓰여 집니다.");
        }
    </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="date" id="pdate">
    <button onclick="checkDate();">검사</button>
    <script>
        function checkDate(){
            alert("검사")
            var s=document.getElementById("pdate").value;
            alert(s)
            var pdate=new Date(s); // 구매날짜
            var today=new Date(); // 현재날짜
            // 경과일수
            var dif=today.getTime()-pdate.getTime(); // 경과시간
            alert(dif)
            // dif : ms, ms 를 날짜로 변환
            var day=Math.floor(dif/(1000*60*60*24))
            alert(day)
            document.write('구매날짜 : '+pdate+'<br>현재날짜 : '+today+'<br> 경과시간 (ms) : '+dif+'<br> 경과일 : '+day)
        }
    </script>
</body>
</html>

오전 수업 끝

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

국비 31일차

다음 포스트

국비 32일차_2

0개의 댓글