[JavaScript]함수실습,객체

배열실습

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        let cl = prompt('과목 수 입력');
        let list = [];
        let score = [];
        let sum = 0;
        
        for (let i = 0; i < cl; i++) {
            list.push(prompt('점수를 입력할 과목을 입력하세요.'));
        }
        
        console.log(list)
        
        for (let i = 0; i < list.length; i++) {
            score.push(prompt(list[i] + '의 점수를 입력'))
            sum += (parseInt)(score[i]);
        }
        
        let avg = sum/score.length;
        
        list.push('총합')
        list.push('평균')

        score.push(sum)
        score.push(avg)
        
        document.write('<table border = "1px solid black">')
            // 1 tr
            document.write('<tr>')
            //과목수 만큼 td 제작
            for (let i = 0; i < list.length; i++) {
                // document.write('<td>')
                // document.write(list[i])
                // document.write('</td>')
                // 템플릿 리터럴 `${}`
                document.write(`<td>${list[i]}</td>`)
            }
        document.write('</tr>')
        // 2 tr        
        document.write('<tr>')
            for (let i = 0; i < score.length; i++) {
                    // document.write('<td>')
                    // document.write(score[i])
                    // document.write('</td>')
                    document.write(`<td>${score[i]}</td>`)
                }
              
        document.write('</tr>')
        document.write('</table>')
                 
    </script>
</body>

</html>

HTML을 데이터와 결합해야할 때

1. 일반 문자열 결합
'안녕하세요 저는'+name+'이고, '+num+'살 입니다.'

2. 템플릿 리터럴 (ES6) ``백틱 ${}
`안녕하세요 저는 ${name}이고, ${num} 살 입니다.'

함수(Function)

:특정 기능을 수행하는 소스 코드를 하나로 묶어

필요할 때마다 호출하여 사용하기 위한 구조 **재사용성!

1.매개변수와 입력값의 데이터 타입이 동일한지 검사하지 않는다.

why? 내부적으로 arguments 객체가 호출되어 인자들을 배열 형태로 지정한다.

2. 입력값의 개수가 매개 변수의 개수보다 적다면 매개 변수의 값은 undefined로 설정된다.

함수의 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 함수
        //1. 실행코드를 묶어서 사용하기 위함 (재사용성★)
        //2. 중복되는 코드 최소화.

        //1) 함수 선언

        //매개변수가 없는 함수
        function helloworld(){
            console.log('hello')
        }
        //() : 어떤 값을 전달 받아 올건지? (파라미터)
        //{} : 실제로 함수 안에서 어떤 코드가 동작하는지?

        //(2) 함수 호출
        helloworld();

        //매개변수가 있는 함수
        function addNum(num1, num2){
            console.log(num1+num2);
        }
        addNum(2,3);

        //매개변수가 있는 리턴 함수
        function minusNum(num1,num2){
            return num1-num2;
        }

        let res = minusNum(5,3);
        console.log(res);
    </script>
</body>
</html>

함수 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        let num1 = Number(prompt('첫 번째 점수 입력'));
        let num2 = Number(prompt('두 번째 점수 입력'));

        function addNum(a,b){
            alert(a+b);
        }

        addNum(num1,num2);

    </script>
</body>
</html>

함수 실습 별찍기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
       //1. 기호
       let emoji = prompt('기호를입력하시오')
       //2. 줄 
       let row = prompt('몇 줄 출력할지 입력하시오')

        function payramid(i, j) {
            for (let i = 1; i <= row; i++) {
                for (let j = 0; j < i; j++) {
                    document.write(emoji);
                }document.write('<br>');
            }
            
        }
            payramid(emoji,row)

    </script>
</body>

</html>

function 신문법(화살표함수)

function 함수이름 () {}

// Arrow function
let 함수이름 = () => {}

객체(Object)

-여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입

-데이터(속성)과 데이터에 관련되는 동작(절차,방법,기능)을 모두 포함한 개념

**key & value로 접근!

1. 객체는 속성(property)과 기능(method)으로 구성되어있다.

2. 객체 내에는 기본데이터타입, Array,Object등 데이터를 담을 수 있다.

3. 객체 내 데이터를 접근하는 방법은 마침표(.)를 이용하는 것이다.

객체 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //객체 (Object) : 여러 개의 데이터를 속성 & 값으로 저장

        //Case 1
        // let won = {};
        // won.name = '김희원';
        // won.subject = 'web';
        // console.log(won)

        //Case 2
        let won = {
            name : '김희원',
            subject : 'web',
            intro : function(){alert('안녕하세용ㅎㅎ')}
        };

        console.log(won)
        won.intro()

    </script>
</body>
</html>

객체실습

티스토리툴바