본문 바로가기
Learning/HTML&JavaScript

자바스크립트 함수 2

cozy coding 2020. 8. 3. 11:39

  • return 값이 있는 경우 함수

 

 

<!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>

        function addNum(a,b){

            var sum=a+b;

            return sum;

        }

        var num1=parseInt(prompt("첫번째 숫자?"));

        var num2=parseInt(prompt("두번째 숫자?"));

        var result=addNum(num1,num2);

        alert("두 수를 더한 값은 "+result+" 입니다.");

    </script>

</head>

<body>

    

</body>

</html>

 

 

  • return값이 없는 함수

 

<!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 myVal=100; //전역변수

        test();

        document.write("myVal is"+myVal);



        function test(){

            var myVal=50; //지역변수

        }

    </script>

</head>

<body>

    

</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>

    <script>

        var myVal=100; //전역변수

        test();

        document.write("myVal is"+myVal);



        function test(){

            // var myVal=50; //지역변수

            myVal=50;

        }

    </script>

</head>

<body>

    

</body>

</html>

 

 

  • 사진 위에 버튼을 누르면 설명 보기, 닫기 버튼 누르면 설명 닫기

 

  • fun_event.html

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>민들레</title>

    <link rel="stylesheet" href="css/event.css">

    <script src="js/event.js"></script>

</head>

<body>

    <div id="item">

        <img src="images/flower1.jpg" alt="민들레 꽃">

        <button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>

        <div id="desc" class="detail">

            <h4>민들레</h4>

            <p>어디서나 매우 흔하게 보이는 잡초로써 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다.톱니 모양의 입새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p>

            <button id="close" onclick="hideDetail()">상세 설명 닫기</button>

        </div>

    </div>

</body>

</html>

 

 

  • event.css

#item{

    position: relative;

    width: 500px;

    height: auto;

    padding: 15px 20px;

    margin: auto;

}

button{

    background-color: rgba(255, 255, 255, 0.7);

    padding: 5px;

    border: 1px solid #ccc;

    font-size: 0.8em;

}

.over{

    position: absolute;

    left: 30px;

    bottom: 30px;

}

.detail{

    width: 400px;

    text-align: left;

    line-height: 1.8em;

    display: none;

}

 

 

  • event.js

function showDetail(){

    document.querySelector('#desc').style.display="block";

    document.querySelector('#open').style.display="none";

}



function hideDetail(){

    document.querySelector('#desc').style.display="none";

    document.querySelector('#open').style.display="block";

}

 

 

 

 

 

  • 두 수를 입력받고 더 큰 수를 알림 창에 표시

 

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>연습문제 2</title>

    <script>

        function compare(a,b){

            if(a>b){

                alert(a+"(이)가 "+b+"보다 큽니다.")

            }else if(a==b){

                alert(a+"(이)가 "+b+"와 같습니다.")

            }else if(a<b){

                alert(b+"(이)가 "+a+"보다 큽니다.")

            }

        }

        var num1=parseInt(prompt("첫번째 수"));

        var num2=parseInt(prompt("두번째 수"));

        compare(num1, num2);

    </script>

</head>

<body>

    

</body>

</html>

 

  • date객체 활용하여 기념일 달력 만들기

 

<script> 표시할 내용

  • 오늘날짜 Date객체

  • 처음 만난 날 Date 객체

  • 오늘 날짜를 밀리초로 변경

  • 처음 만난 날 밀리초로 변경

  • 두 밀리 초 사이의 차이 계산

  • 결과 값을 날짜 수로 변경

  • 화면에 결과 표시

 

 

  • date_obj.html

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>기념일 달력</title>

    <link rel="stylesheet" href="css/d-day.css">

</head>

<body>

    <div class="container">

        <div class="day1">

            <h3>우리 만난 지</h3>

            <p id="accent" class="accent"><span style="font-size: 0.6em">며칠?</span></p>

        </div>

        <div class="bar">기념일 계산</div>

        <div class="day2">

            <ul>

                <li class="item-title">100일</li>

                <li class="item-date" id="date100"> </li>

            </ul>

            <ul>

                <li class="item-title">200일</li>

                <li class="item-date" id="date200"> </li>

            </ul>

            <ul>

                <li class="item-title">1년</li>

                <li class="item-date" id="date365"> </li>

            </ul>

            <ul>

                <li class="item-title">500일</li>

                <li class="item-date" id="date500"> </li>

            </ul>

        </div>

    </div>

    <script src="js/d-day.js"></script>

</body>

</html>

 

 

  • d-day.css

 

*{

    box-sizing: border-box;

}

.container{

    width: 450px;

    margin: 0 auto;

    border: 1px solid #ccc;

    border-radius: 2%;

    box-shadow: 2px 2px 5px #ccc;

}

.day1{

    padding-top: 20px;

    text-align: center;

}

.day1 h3{

    font-size: 1.2em;

    color: #666;

}

.accent{

    margin-left: 10px;

    margin: 10px;

    font-weight: bold;

    font-size: 3em;

    color: #666;

}

.bar{

    width: 100%;

    height: 40px;

    margin: 60px auto 0 auto;

    background: #666;

    padding-left: 15px;

    font-size: 1.2em;

    color: #fff;

    line-height: 40px;

}

.day2{

    width: 420px;

    margin: 20px auto 20px auto;

}

.day2 ul{

    list-style: none;

    border-bottom: 1px dashed #ccc;

    height: 60px;

}

.item-title{

    float: left;

    width: 160px;

    font-weight: bold;

    font-size: 1.5em;

    line-height: 60px;

}

.item-date{

    float: left;

    margin-left: 60px;

    font-size: 1.2em;

    color: #222;

    text-align: right;

    line-height: 60px;

}

  • d-day.js

 

var now=new Date(); //오늘 날짜 정보를 date객체의 인스턴스 now객체로 만듦

var firstDay=new Date("2020-05-22"); //처음 만난 날



var toNow=now.getTime(); //오늘 날짜를 밀리초로 변경

var toFirst=firstDay.getTime(); //처음 만난 날을 밀리초로 변경



var passedTime=toNow-toFirst; //처음 만난 날과 오늘 날짜의 차이 (밀리초)

var passedDay=Math.round(passedTime/(1000*60*60*24)); //밀리초를 일로 변환 후 반올림



document.querySelector('#accent').innerText=passedDay+"일";



calcDate(100);

calcDate(200);

calcDate(365);

calcDate(500);



function calcDate(days){

    var future=toFirst+days*(1000*60*60*24); //처음 만난 날에 밀리초를 날로 바꾸어서 더함

    var someday=new Date(future); //future값을 사용한 Date 객체의 인스턴스

    var year=someday.getFullYear(); //연도

    var month=someday.getMonth()+1; //월

    var date=someday.getDate(); //일

    document.querySelector("#date"+days).innerText=year+"년 "+month+"월 "+date+"일";

}

 

 

 

 

 

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

'Learning > HTML&JavaScript' 카테고리의 다른 글

반응형 웹 디자인  (0) 2020.08.04
DOM, BOM  (0) 2020.08.04
자바스크립트 함수 1  (0) 2020.07.31
자바스크립트 객체  (0) 2020.07.31
자바스크립트 제어문  (0) 2020.07.31

'Learning/HTML&JavaScript' Related Articles

티스토리툴바