JavaScript : 문자열, 비교 연산자 (홀수/짝수/배수 구분), input 태그, Alert, Popup 창 만들기

2022.11.25.

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 51

---

Review

 

 

---

 

• UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 51

 

<문자열 예제>

 

 

- JavaScript

 

    <script>
     let x = 123;
     let y = "123";
     let c = 10.554;
     let d = "34 45 50";
     let e = parseFloat(c);

     document.write(typeof x + "<br>" + typeof y + "<br>");
     document.write(x + "<br>" + y + "<br>");
     document.write(Number("123")+ "<br>" + String(123) + "<br>");
     document.write(Number("javascript")+ "<br>" + String(123) + "<br>");
     document.write(x + y, "<br>");
     document.write(x + Number(y), "<br>");
     document.write(parseFloat(x), "<br>");
     document.write(parseFloat(c), "<br>");
     document.write(parseFloat(d), "<br>");
     document.write(parseInt(c), "<br>");
     document.write(typeof e, "<br>");
     document.write(parseInt(c) + parseInt(c), "<br>");
     document.write(String(10+10) + String(10), "<br>");
     document.write(Number("10") + Number("10"), "<br>");
     document.write((123).toString() + (123+10).toString() + "<br>");

     let a = 1230000000;
     let aa = 0.000000123;
     let b = aa.toExponential();
     
     document.write(typeof b + "<br>" + b + "<br>");
    </script>

 

 

 

---

 

 

<점수 총점과 평균 구하기, 합격 / 불합격 구분하기>

 

 

- JavaScript

 

    <script>
        let kor = Number(prompt("국어 점수는?", ""));
        let eng = Number(prompt("영어 점수는?", ""));
        let math = Number(prompt("수학 점수는?", ""));
        let avg = (kor + eng + math) / 3;
        let result = kor >= 40 && eng >= 40 && math >= 40 && avg >= 60;

        document.write(typeof kor + "<br>");
        document.write(kor + eng + math + "<br>");

        document.write("당신이 입력한 국어 점수는 " + kor,  "점이고, 영어 점수는 " + eng ,"점이고, 수학 점수는 " + math, "점입니다.", "<br>");
        
        document.write("당신의 총점은 ", kor + eng + math, "점입니다.", "<br>")

        document.write("당신의 평균은 ", (kor + eng + math) / 3, "점입니다.", "<br>");

        document.write(avg >= 60 ? "당신은 합격입니다." : "당신은 불합격입니다.", "<br>");

        document.write(Number(result), "<br>");
        // true는 1, false는 0

        document.write(result ? "당신은 합격입니다." : "당신은 불합격입니다.", "<br>");
    </script>

 

0

0

 

 

---

 

<replace 메소드 알아보기>

 

- HTML

 

    <button onclick="myFunction()">Try it</button>
    <p id="demo">Please visit Microsoft!</p>

 

 

- JavaScript

 

    <script>
        function myFunction() { 
            let text = document.getElementById("demo").innerHTML; 
            console.log(text);
            document.getElementById("demo").innerHTML = text.replace("Microsoft","W3Schools");
        }    
    </script>

 

 

0

 

---

 

 

<Date 메소드 알아보기>

 

- JavaScript

 

    <script>  
        // let x = Date();
        let x = new Date();
        
        document.write(x + "<br>");

        document.write("년도 : " + x.getFullYear() + "<br>");

        document.write("월 : ", x.getMonth() + 1, "<br>");

        document.write("일 : ", x.getDate(), "<br>");

        document.write("요일 : ", x.getDay(), "<br>");

        document.write("오늘 날짜 : ", x.getFullYear(), "년 ", x.getMonth() + 1, "월 ", x.getDate(), "일", "<br>");

        document.write("Hour : ", x.getHours() + "<br>");

        document.write("Minutes : ", x.getMinutes() + "<br>");

        document.write("Seconds : ", x.getSeconds() + "<br>");

        document.write("Seconds : ", x.getMilliseconds() + "<br>");

        document.write("시간 : " + x.getTime(), "<br>");

        document.write("시간 : " + x.getHours() + ":", x.getMinutes() + ":", x.getSeconds() + ":", x.getMilliseconds() + "<br>");

        let s = x.getSeconds() < 10 ? "0" + x.getSeconds() : x.getSeconds();
        document.write("시간 : " + x.getHours() + ":" + x.getMinutes() + ":" + s + "<br>");
        
        location.reload();
    </script>

 

 

0

location.reload(); 적용했을 때

 

location.reload(); 적용했을 때는 기본 font 말고 내가 저장해놓은 font를 적용하면 에러가 난다.

그래서 그냥 Arial font를 사용했다.

 

 

 

이건 location.reload();를 제거하고 Roboto font를 이용한 것이다.

 

 

---

 

 

<홀수와 짝수 구분하기>

 

- JavaScript

 

    <script>  
        let num = prompt("홀수, 짝수 구분하기 !", "숫자를 입력하세요");
        let result = num % 2 == 0 ? "짝수입니다" : "홀수입니다";

        confirm(result);
        document.write(result);
    </script>

 

 

0

짝수일 때

 

0

홀수일 때

 

 

---

 

<배수 구분하기>

 

 

- JavaScript

 

    <script>  
        let num = prompt("7의 배수 구분하기 !", "숫자를 입력하세요");
        let result = num % 7 == 0 ? "입력한 숫자는 7의 배수입니다." : "입력한 숫자는 7의 배수가 아닙니다.";

        confirm(result);
        document.write(result);
    </script>

 

오랫동안 손 놓고 있던 수학을 다시 해서 기분이 알딸딸하지만...

익숙해져야지... 흡

 

n의 배수를 구하는 공식은 간단하다. 

n의 배수인지 확인하려면 입력한 숫자를 n으로 나누었을 때 나머지가 0이면 n의 배수이다.

그러니 7의 배수는 num % 7 == 0 이라 입력하면 된다.

 

 

0

7의 배수일 때

 

0

 

 

---

 

 

<홀수 / 짝수 / 7의 배수 구분하기>

 

: 이건 위의 예제 2개를 합친 것이다.

 

 

- JavaScript

 

    <script>  
        let num = prompt("홀수 / 짝수 / 7의 배수 구분하기 !", "숫자를 입력하세요");
        let result = num % 2 == 0 ? "짝수입니다." : "홀수입니다.";
        let result2 = num % 7 == 0 ? "입력한 숫자는 7의 배수입니다." : "입력한 숫자는 7의 배수가 아닙니다.";

        confirm(result);
        confirm(result2);

        document.write(result + "<br>");
        document.write(result2);
    </script>

 

0

 

---

 

<input 태그, button 태그 이용해서 console로 출력하기>

 

 

- HTML

 

    <input type="text" value="Hello" id="my">
    <button onclick="myfnc()">Copy text</button>

 

 

- JavaScript

 

    <script>  
        function myfnc() {
            let a = document.getElementById("my");
            console.log(a.value);
        }
    </script>

 

 

기본으로 Hello 라고 쓰여 있는 input 상자를 만들고, 그 안에 text를 입력하고 

'Copy text' 버튼을 누르면 console 창에 값이 입력되도록 한다. 

 

 

Hello 라고 하니 샤이니 노래가 생각나서... console 창에 맘대로 노래를 불러버렸당 데헷-

 

 

---

 

 

<input 태그, button 태그 이용해서 alert 창, console로 출력하기>

 

 

- JavaScript

 

    <script>  
        function myfnc() {
            let a = document.getElementById("my");
            console.log(a.value);
            alert("Copied the text : " + a.value);
        }
    </script>

 

 

0

 

자바스크립트로 노래부르기... 대성공 -

 

위의 예제에서 JavaScript 문법만 추가해주면 된다.

Console 밑에 alert 문법만 추가했다 !

 

 

 

---

 

 

<toggle popup 창 만들기>

 

 

- HTML

 

    <h1>Popup</h1>
    <div class="container" onclick="myfnc()">
        click me to toggle the popup !
        <div class="popup">A Simple Popup</div>
    </div>

 

 

 

- CSS

 

        @font-face {
            font-family: montserrat;
            src: url(../fontawesome-free-6.2.0-web/webfonts/Montserrat-Regular.woff) format("woff");
        }

        body {
            max-width: 1200px;
            margin: 150px auto;

            background: #eee;

            text-align: center;

            font: 1em montserrat;
        }

        .container {
            cursor: pointer;
        }

        .container > div {
            position: relative;

            width: 200px;
            margin: 30px auto;

            background: #333;
            color: #fff;
            border-radius: 10px;

            font-size: 20px;
            white-space: nowrap;
            text-indent: 0;

            padding: 20px 10px;

            opacity: 0;
        }

        .container > div::after {
            content: "";

            position: absolute;
            left: 100px;
            top: -18px;

            width: 0;
            height: 0;

            border-top: 10px solid transparent;
            border-bottom: 10px solid #333;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

        .active .popup {
            opacity: 1;
        }

 

 

 

- JavaScript

 

    <script>  
        function myfnc() {
            document.getElementsByClassName("container")[0]
            .classList.toggle("active");
        }
    </script>

 

 

0

 

클릭하면 popup 창이 뜨고, 다시 한번 클릭하면 popup 창이 없어지도록 했다.

 

아주 귀여운 예제당 토글토글 -

 

 

 

 

 

 

* 내용 출처 

: JavaScript / 연산자 / 비교 연산자 – CODING FACTORY