[JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제)

JavaScript

[JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제)

SangRok Jung 2022. 4. 27. 21:37

문제

원의 둘레와 넓이를 출력하시오.

조건

반지름과 원주율에 문자와 음수는 입력되지 않습니다.
원주율을 사용자가 선택할 수 있습니다.
- '𝝿', '3.14', '사용자 입력(단 3.14보다 크고 3.15보다 작음)'
  - '𝝿'를 이용하여 계산할 시 결과 값이 ~𝝿로 끝나야 함. (공식 참고)
class를 이용하십시오.
private를 적용하십시오.
둘레와 원주율의 getter, setter가 클래스 안에 존재해야 합니다.
입력한 원주율의 값이 출력되어야 합니다.
반지름과 원주율이 입력되지 않을 경우 각각 1과 3.14의 값을 가집니다.

해법

1. class를 생성합니다.

private를 적용합니다.
constructor를 생성합니다.
- radius와 pi를 생성합니다.
- Protection method를 생성하여 예외 처리합니다.
radius와 pi에 기본값을 적용합니다.

class circle {
    //private
    #pi
    #radiusC

    //constructor
    constructor(_radiusC = 1, _pi = 3.14){
        //Radius 입력
        if (_radiusC < 0){
            throw 'Enter a natural number greater than zero.'
        }   
        else{
            this.#radiusC = _radiusC;
        }

        //Pi입력
        if ((_pi >= 3.14 && _pi < 3.15 ) || _pi === '𝝿'){
            this.#pi = _pi
        }
        else {
            throw 'It is not 𝝿 value.'
        }

    }
}

https://cruella-de-vil.tistory.com/58

[JavaScript] Class(클래스), private(접근제어)

Class (클래스) 개념 ES5에서는 클래스가 없으며 객체형, 클로저, 생성자, 프로토타입 등을 이용해 클래스와 유사한 구조를 만들어 사용한다. ES5와 다르게 ES6에서는 클래스 문법을 직접적으로 지원

cruella-de-vil.tistory.com

2. setter와 getter를 생성합니다.

    //setter
    set setPi(_pi){
        return this._setPi(_pi)
    }
    setPi(_setPi){
        this.#pi = _setPi
    }
    set setRadius (_radius){
        this.#radiusC = _radius
    }
    setRadius (_radius){
        this.#radiusC = _radius
    }

    //getter
    get Pi (){
        return this.getPi()
    }
    getPi (){
        return this.#pi
    }

3. 둘레와 넓이를 구하는 함수를 생성합니다.

𝝿 와 사용자의 입력값이 계산되도록 합니다.
각각의 protection method를 생성합니다.

    //get function
    //넓이 구하는 함수
    getWidth () {
        if(typeof(this.#radiusC) !== 'number' || this.#radiusC < 0){
            return 'Enter a natural number greater than zero.'
        }
        else{
            if (this.#pi === '𝝿') {

                if(isNaN(this.#radiusC * this.#radiusC)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return `${this.#radiusC * this.#radiusC}${this.#pi}`
                }
            }
            else {
                if(isNaN(this.#radiusC * this.#radiusC * this.#pi)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return this.#radiusC * this.#radiusC * this.#pi
                }
            }
        }       
    }
    //둘레 구하는 함수
    getCircum() {
        if(typeof(this.#radiusC) !== 'number' || this.#radiusC < 0){
            return 'Enter a natural number greater than zero.'
        }
        else{
            if (this.#pi === '𝝿'){
                if(isNaN(this.#radiusC * 2)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return `${this.#radiusC * 2}${this.#pi}`
                }
            }
            else{
                if (isNaN(this.#radiusC * 2 * this.#pi)){
                    return 'Enter a natural number greater than zero.'
                }
                else{   
                    return (this.#radiusC * 2 * this.#pi)
                }
            }
        }
    }

4. 출력할 body를 설정합니다.

radius를 입력해야 합니다.
pi를 사용자가 선택하거나 입력해야 합니다.
radius, circumference, pi를 출력해야 합니다.

<body>
    <h1>Calculate the circle</h1>
    <input type="text" id="radius"> radius <br>
    <input type="text" id="id_pi_input" value="User Input">

    <select name="sel_pi" id="id_sel_pi">
        <option value="" disabled selected>* select PI              </option>
        <option value="Direct input"   id="opid_di" > Diriect input</option>
        <option value="3.14"            id="opid_3.14">        3.14</option>
        <option value="𝝿"               id="opid_pi">             𝝿</option>
    </select> pi (𝝿) <br>

    <button>Calculate</button>
    <h3 id="id_width">The width of Circle  </h3>
    <h3 id="id_circum">The circum of Circle</h3>
    <h3 id="id_pi">   Pi                   </h3>
</body>

https://cruella-de-vil.tistory.com/63?category=1017829

[JavaScript] Event +예제

Event * window시스템과 javascript의 event system은 동일하다. 메시지가 라우팅 된다. Event : 어떤 조건이 만족될 때 발생되는 신호 // 마우스 왼쪽 버튼 클릭 더보기 1개의 이벤트는 1개의 메시지와 2개의.

cruella-de-vil.tistory.com

5. body를 class와 연결하여 출력합니다.

change로 pi값을 사용자가 선택하거나 입력합니다.
clikc으로 결괏값을 출력합니다.

document.addEventListener('DOMContentLoaded', () => {
    const btnClick = document.querySelector('button')
    const inputRadius = document.querySelector('#radius')
    const inputPi = document.querySelector('#id_pi_input')
    const width = document.querySelector('#id_width')
    const circum = document.querySelector('#id_circum')
    const pi = document.querySelector('#id_pi')
    const selector = document.querySelector('#id_sel_pi')

    //PI 선택
    selector.addEventListener('change', () =>{
        if (selector.value === 'Direct input'){
            inputPi.value = `Enter the circumference.`
        }
        else{
            inputPi.value = selector.value; 
        }
    })

    //버튼 계산
    btnClick.addEventListener('click', (event) => {

        const c2 = new circle(Number(inputRadius.value), inputPi.value)

        width.textContent = `width : ${c2.getWidth()}`
        circum.textContent = `circum : ${c2.getCircum()}`
        pi.textContent = `pi : ${c2.Pi}`

    })
})

https://cruella-de-vil.tistory.com/62?category=1017829

[JavaScript] DOM (문서 객체)

Event문서 객체 (DOM/ Document Object Model) 웹 브라우저는 HTML 페이지에 있는 Element 들을 트리 형식으로 메모리에 로딩한다. 이때 각 노드를 "document object"라 한다. 웹 브라우저는 이러한 문서 객체를..

cruella-de-vil.tistory.com

해답

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./circle.js"></script>
</head>

<body>
    <h1>Calculate the 'area' and 'circumference' of a circle</h1>
    <input type="text" id="radius"> radius <br>
    <input type="text" id="id_pi_input" value="User Input">

    <select name="sel_pi" id="id_sel_pi">
        <option value="" disabled selected>* select PI              </option>
        <option value="Direct input"   id="opid_di" > Diriect input</option>
        <option value="3.14"            id="opid_3.14">        3.14</option>
        <option value="𝝿"               id="opid_pi">             𝝿</option>
    </select> pi (𝝿)  <br>

    <button>Calculate</button>
    <h3 id="id_width">The area of the circle  </h3>
    <h3 id="id_circum">The circumference of circle</h3>
    <h3 id="id_pi">   Pi                   </h3>
</body>
</html>

JS

class circle {
    //private
    #pi
    #radiusC

    //constructor
    constructor(_radiusC = 1, _pi = 3.14){
        //Radius 입력
        if (_radiusC < 0){
            throw 'Enter a natural number greater than zero.'
        }   
        else{
            this.#radiusC = _radiusC;
        }

        //Pi입력
        if ((_pi >= 3.14 && _pi < 3.15 ) || _pi === '𝝿'){
            this.#pi = _pi
        }
        else {
            throw 'It is not 𝝿 value.'
        }

    }

    //setter
    set setPi(_pi){
        return this._setPi(_pi)
    }
    setPi(_setPi){
        this.#pi = _setPi
    }
    set setRadius (_radius){
        this.#radiusC = _radius
    }
    setRadius (_radius){
        this.#radiusC = _radius
    }

    //getter
    get Pi (){
        return this.getPi()
    }
    getPi (){
        return this.#pi
    }

    //get function
    //넓이 구하는 함수
    getWidth () {
        if(typeof(this.#radiusC) !== 'number' || this.#radiusC < 0){
            return 'Enter a natural number greater than zero.'
        }
        else{
            if (this.#pi === '𝝿') {

                if(isNaN(this.#radiusC * this.#radiusC)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return `${this.#radiusC * this.#radiusC}${this.#pi}`
                }
            }
            else {
                if(isNaN(this.#radiusC * this.#radiusC * this.#pi)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return this.#radiusC * this.#radiusC * this.#pi
                }
            }
        }       
    }
    //둘레 구하는 함수
    getCircum() {
        if(typeof(this.#radiusC) !== 'number' || this.#radiusC < 0){
            return 'Enter a natural number greater than zero.'
        }
        else{
            if (this.#pi === '𝝿'){
                if(isNaN(this.#radiusC * 2)){
                    return 'Enter a natural number greater than zero.'
                }
                else{
                    return `${this.#radiusC * 2}${this.#pi}`
                }
            }
            else{
                if (isNaN(this.#radiusC * 2 * this.#pi)){
                    return 'Enter a natural number greater than zero.'
                }
                else{   
                    return (this.#radiusC * 2 * this.#pi)
                }
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const btnClick = document.querySelector('button')
    const inputRadius = document.querySelector('#radius')
    const inputPi = document.querySelector('#id_pi_input')
    const width = document.querySelector('#id_width')
    const circum = document.querySelector('#id_circum')
    const pi = document.querySelector('#id_pi')
    const selector = document.querySelector('#id_sel_pi')

    //PI 선택
    selector.addEventListener('change', () =>{
        if (selector.value === 'Direct input'){
            inputPi.value = `3.14 <= value > 3.15`
        }
        else{
            inputPi.value = selector.value; 
        }
    })

    //버튼 계산
    btnClick.addEventListener('click', (event) => {

        const c2 = new circle(Number(inputRadius.value), inputPi.value)

        width.textContent = `area : ${c2.getWidth()}`
        circum.textContent = `circum : ${c2.getCircum()}`
        pi.textContent = `pi : ${c2.Pi}`

    })
})

'JavaScript' 카테고리의 다른 글

[JavaScript] 과일 상자 추가하기 (table 추가 예제) (0)	2022.05.02
[JavaScript] 주사위의 값 구하기 (0)	2022.05.01
[JavaScript] Event +예제 (0)	2022.04.26
[JavaScript] DOM (문서 객체) (0)	2022.04.25
[JavaScript] Static (0)	2022.04.21

현재글[JavaScript] 원주율에 따른 원의 넓이, 둘레 구하기 (예제)

꾸준함이 말미암아