24.08.13 Day27

최지원·2024년 8월 13일

삼성중공업 DT 제조 혁신 과정

목록 보기

27/62

함수의 중급기법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>함수의 중급기법</title>
    <script>
        // 객체지향(Object Oriented) : 재사용성(중복제거, 설계형)
        // 객체 - 사물/물건/things - 클래스(함수 + 변수)
        // 함수형 - 코드블럭 - 매개변수로 전달 : 비동기적 처리(UI,통신) 용이

        // 일반함수
        function myFunc(num){
            console.log("myFunc 호출됨.");
            console.log(num);
        }
        myFunc(10);
        // 함수의 매개변수로 코드뭉치(함수-익명함수)를 전달하자.
        // 전달된 코드를 실행할 수 있고, 또 전달할 수 있다.
        // 비동기적 처리(코드를 선언하는 시점과 실행되는 시점이 다른 것)에 용이

        // 함수형 변수 선언 - 코드블럭을 변수처럼 선언한 것
        let funcVar = function(){
            console.log("funcVar 호출됨.");
        };
        funcVar();
        // 매개변수와 변환형이 있는 함수형 변수
        let funcVar2 = function(param){
            console.log("funcVar2 호출됨.");
            return param + "!!";
        };
        let result = funcVar2("자바스크립트");
        console.log(result);

        // ES6부터는 화살표먼저 함수를 지원
        let funcVar3 = (param) => {
            console.log("funVar3 호출됨.");
            return param + "##";
        };
        let result2 = funcVar3("ECMA Script");
        console.log(result);

        // 일반함수에 함수형 변수(익명함수)를 전달해보자.
        function sum(param1, param2, method){
            return method(param1, param2);
        }
        let sumFunc = (a,b) => {
            return a + b;
        };
        console.log(sum(10,20,sumFunc));

        // 연습문제 ------------------------------------------------------
        let funcMax = (p1, p2) => {
            if(p1 > p2)
                return p1;
            else
                return p2;
            // return p1 > p2 ? p1 : p2;
        };
        function max(p1,p2,method){
           return method(p1,p2);
        }
        console.log(max(10,20,funcMax));
    </script>

</head>
<body>
</body>
</html>

타이머 관련 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <title>타이머 관련 함수</title>
    <script>
        // setTimeout : 일정시간 한번 호출
        // setInterval : 일정시간마다 주기적으로 호출

        // param1 : 익명함수
        // param2 : 정수(밀리초)
        let timer = setTimeout(() => {
            console.log("setTimer호출됨.");
        }, 3000); //3000ms = 3sec

        // 타이머를 지울 때
        clearTimeout(timer);

        // 1초 간격으로 수행되는 코드
        let interval = setInterval(() => {
            // HH:MM:SS
            console.log(new Date().toTimeString().split(' ')[0]);
            // YYYY-MM-DD
            console.log(new Date().toISOString().split('T')[0]);
        }, 1000);

        // 인터벌을 지울 때
        clearInterval(interval);
    </script>
</head>
<body>
</body>
</html>

Key-Value 객체

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

<head>
    <title>key-value객체</title>
    <script>
        // Key-Value Object = 객체
        // key는 반드시 문자열, value는 다양한 타입(number, string, object, func)
        // map, dictionary(key:value), JSON/XML
        // 프론트엔드(html/css/js, react.js) <=> HTTP(JSON)백엔드(node.js)
        let keyValue = {
            apple: 1000,
            banana: 2000,
            pear: 3000
        };
        console.log(keyValue['apple']);
        console.log(keyValue.apple);

        let person = {
            name: '홍길동',
            action: () => { console.log("야호~"); }
        }
        console.log(person.name);
        person.action();

        // 연습문제---------------------------------------------------------------------------------
        // studnet key-value선언
        // 합산과 평균을 내는 익명함수 sum, avr 설정
        // 익명함수를 통해 출력

        let student = {
            kor: 70,
            eng: 80,
            math: 90,
            sum : (a, b, c) => {return a + b + c},
            avr : (a, b, c) => {return (a+b+c)/3}
        };
        console.log("국어 : " + student.kor + " 영어 : " + student.eng + " 수학 : " + student.math);
        console.log("합계 : " + student.sum(student.kor,  student.eng, student.math));
        console.log("평균 : " + student.avr(student.kor,  student.eng, student.math));
    </script>
</head>
<body>
</body>
</html>

구조분해할당과 전개연산자

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ES6 최신문법 - 구조분해할당과 전개연산자</title>
    <script>
        // 구조분해할당(비구조화 할당)과 전개연산자
        // 1. 배열의 구조분해
        let array1 = [10, 20, 30];
        console.log(array1);
        console.log(array1[0]);

        let [a,b,c] = [10,20,30];
        console.log(a);
        console.log(b);
        console.log(c);

        // 전개(spread) 연산자 ...
        let [x, y, ...rest] = [10,20,30,40,50];
        console.log(x);
        console.log(y);
        console.log(rest);

        // 값 교환(swap)
        let [i,j] = [10,20];
        console.log(i);
        console.log(j);

        let temp = 0;
        temp = i; // 1단계
        i = j; // 2단계
        j = temp; // 3단계

        [i,j] = [j,i];
        console.log(i);
        console.log(j);

        // key-value 객체의 구조분해
        let obj = {
            apple : 1000,
            banana : 2000
        };
        let { apple, banana } = obj;
        console.log(apple);
        console.log(banana);

        // 새로운 이름으로 할당
        let {apple:f1, banana:f2} = obj;
        console.log(f1);
        console.log(f2);

        // 하나만 가져오기
        let {apple:newFruit} = obj;
        console.log(newFruit);

        // 전개연산자를 이용한 객체 생성
        let pet = {
            cat : 1000,
            dog : 2000,
            pig : 3000
        }
        let ball = {
            baseball : 1000,
            soccer : 2000,
            basketball : 3000
        }
        let favorite = {
            ...pet,
            ...ball
        }
        console.log(favorite);

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

map 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <title>map함수</title>
    <script>
        let arr = [10,20,30,40,50];
        // 전체 요소 순환
        for(let i=0; i < arr.length; i++){
            console.log(arr[i]);
        }
        for(let item of arr){
            console.log(item);
        }
        arr.forEach((value,index,array) => {
            console.log(value);
            console.log(index);
            console.log(array);
        });

        // map(지도) : 데이터 새로 생성하는 용도
        arr.map((item,index,array) =>{
            console.log(item);
            console.log(index);
            console.log(array);
        });
        let sqrt = arr.map(Math.sqrt); //배열을 제곱근으로 변환
        console.log(sqrt);

        let strings = arr.map(String);
        console.log(strings);

        let nums = strings.map(Number);
        console.log(nums);

        let doubles = nums.map((item)=>{return item * 2;});
        console.log(doubles);

        let doubles2 = nums.map((item)=>{number => number * 2;});
        console.log(doubles2);

        // 객체배열(리스트)
        let students = [
            {id : 1, name : "hong"},
            {id : 2, name : "lee"},
            {id : 3, name : "jung"},
            {id : 4, name : "kim"},
        ];
        // 객체배열에서 이름만 가져와서 문자열 1차배열로 만들기
        let names = students.map(student => student.name);
        console.log(names);

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

reduce 함수

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

<head>
    <title>reduce 함수</title>
    <script>
        // reduce함수 - 줄이다. 하나의 결과값을 반환
        let nums = [10, 20, 30, 40, 50];
        // acc : accumulator 누산기, 누적되는 값, 최종반환값
        // cur : current 현재 요소 값
        let sum = nums.reduce((acc, cur) => {
            console.log(acc, cur);
            return acc + cur;
        });
        console.log(sum);

        // 함수형변수(콜백함수), acc 초기값
        sum = nums.reduce((acc, cur, index, arr) => {
            console.log(acc, cur, index, arr);
            return acc + cur;
        }, 0);

        let max = nums.reduce((acc, cur) => {
            return acc > cur ? acc : cur;
        });
        console.log(max);

        // 알파벳 갯수 구하기
        const alphabets = ['a', 'a', 'c', 'c', 'c'];
        let count = alphabets.reduce(
            (acc, cur) => {
                if (acc[cur]) { // {}에 acc['a']에 값이 있는가?
                    acc[cur] += 1; // {a:2}
                } else {
                    acc[cur] = 1; // acc['a'] = 1 => {a:1}
                }
                return acc;
            },
            {} // 빈 객체
        )
        console.log(count);

        // 연습문제-------------------------------------------------------------------------------------
        // 1) reduce 함수를 이용하여, 35보다 큰 숫자의 갯수
        let nums_list = [10, 20, 30, 40, 50];
        let num_count = nums_list.reduce((acc, cur) => {
            if (cur > 35) { // 현재값
                acc += 1; // 누적값을 증가시킴
            }
            return acc; // 누적값을 반환하여 다음 반복으로 넘김
        }, 0); // 초기값을 0으로 설정
        console.log(num_count); // 결과 출력

        // 2) reduce 함수를 이용하여, 배열의 문자열 길이------------------------------------------------
        let string_list = ['hong', 'kim', 'choi'];
        let arrlength = string_list.reduce((acc, cur) => {
            acc.push(cur.length); // 현재 문자열의 길이를 acc 배열에 추가
            return acc; // 누적값을 배열로 반환하여 다음 반복으로 넘김
        },[ ]); // 초기값을 빈 배열로 설정
        console.log(arrlength); // 결과 출력
    </script>
</head>
<body>
</body>
</html>

find / filter함수

<!DOCTYPE html>
<html lang="en">
<head>
    <title>find, filter함수</title>
    <script>
        // filter : 필터, 특정요소를 걸러낸다. 반환값 : 배열(빈배열)
        //  find  : 특정 값을 찾아낸다. 반환값 : 특정값이나 undefined
        let nums = [10,20,30,40,50];
        let arrFilter = nums.filter((item,index,array) =>{
            console.log(item);
            console.log(index);
            console.log(array);
            return item < 35;
        });
        console.log(arrFilter); //[10,20,30]

        let foundVal = nums.find((item,index,array) => {
            console.log(item);
            console.log(index);
            console.log(array);
            return item < 35;
        });
        console.log(foundVal); //10 - 변환하는 첫번째 값만 가져온다.
        // 값을 못찾으면 undefined
   
    </script>
</head>
<body>
</body>
</html>

JGS로 HTML문서 조작하기

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JGS로 HTML문서 조작하기</title>
    <script>
        // JS내장객체
        // wimdow, document, location, history

        // 1. 비어있는 새창 열기
        window.open();

        // 2. 특정사이트 열기
        window.open("http://www.naver.com");

        // 3. 단독 팝업창
        window.open("http://www.google.com", "자식창","width=600","height=300");
    </script>
</head>
<body>
</body>
</html>

페이지 이동 - 리다이렉션

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

<head>
    <title>페이지 이동 - 리다이렉션</title>
    <script>
        // 페이지 이동
        // 1. 리다이렉트 - 사이트간의 이동, 내부데이터를 버리고 이동.
        // 2. 포워드 - 내부 페이지간의 이동, 내부데이터를 가지고 이동.

        // 리다이렉트 2가지
        // 1. JS location 객체로 이동
        // 2. a태그로 이동
        // setTimeout(() => {
        //     location.href = "http://www.daum.net";
        // },3000);
    </script>
</head>

<body>
    <a href="http://www.github.com">깃허브</a>
    <!-- 버튼의 기본타입은 submit -->
    <form action="">
        <button>유튜브</button>
        <button type = "submit">유튜브 서브밋</button>
        <button type = "button" onclick = "location.href='http://www.youtube.com';">유튜브 버튼</button>
    </form>

</body>
</html>

inner-HTML과 innerText

<!DOCTYPE html>
<html lang="en">
<head>
    <title>innerHTML과 innerText</title>
    <script>
        // 공통점 : HTML태그의 내용을 문자열로 보관하고 있음.
        // innerHTML : 문자열이 HTML 태그로 인식
        // innerText : 문자열이 단순 Text로 인식
    </script>
</head>
<body>
    <h1 id="id1">innerHTML의 내용</h1>
    <h1 id="id2">innerText의 내용</h1>

    <script>
        // 문서객체를 id로 찾아서 가져온다.
        let e1 = document.getElementById("id1");
        e1.innerHTML = "<ins>변경된 내용</ins>";

        let e2 = document.getElementById("id2");
        e2.innerText = "<ins>변경된 내용</ins>"
    </script>
</body>
</html>

문서객체 선택하는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <title>문서객체 선택하는 방법</title>
    <script>
        // 문서 객체 모델(Document Object Model)
        // 웹브라우저가 html문서를 로딩(분석)한 후에
        // 트리모양으로 관리하는 데이터 구조 또는 객체

        // 문서객체를 선택하는 방법
        // 1. 아이디로 선택 : getElementById()
        // 2. 클래스로 선택 : getElementsClassName()
        // 3. 태그로 선택   : getElementsByTabName()
        // 4. css선택자로 선택 : querySelector(css선택자)
        //                       querySelectorAll(css선택자)
        // 웹브라우저가 html문서를 로딩(분석)한 후에 호출
        window.onload = () => {
            let h1 = document.getElementById("header1");
            h1.innerHTML = "찾음!";
            let arrayH2 = document.getElementsByClassName('header-h2');
            console.log(arrayH2);

            for(let h2 of arrayH2){
                h2.innerHTML = "찾음!";
            }

            let arrayP = document.getElementsByTagName('p');
            console.log(arrayP);

            for(let p of arrayP){
                p.innerText = "찾음!";
            }

            let h1_2 = document.querySelector('#header2');
            h1_2.innerHTML = "찾음!";

            let arrayH2_2 = document.querySelectorAll('.header-h2');
            console.log(arrayH2_2);
        };
    </script>
</head>
<body>
    <h1 id = "header1">제목태그 1</h1>
    <h1 id = "header2">제목태그 2</h1>
    <h2 class = "header-h2">제목태그 3</h2>
    <h2 class = "header-h2">제목태그 4</h2>
    <h2 class = "header-h2">제목태그 5</h2>
    <p>문단태그 p</p>
    <p>문단태그 p</p>
    <p>문단태그 p</p>

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

연습문제 - 객체선택

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

<head>
    <title>연습문제 : 객체선택 연습</title>
    <script>
        //1번 a태그의 html내용을 "앵커태그 선택됨"으로 바꾸시오.
        //2번 p태그의 html내용을 각각 "문단태그-1" "문단태그-2"로 바꾸시오.
        //3번 h3태그의 html내용을 "헤더태그 h3선택됨."으로 바꾸시오.
        window.onload = () => {
            let arrayP = document.getElementsByTagName("anchor");
            anchor.innerHTML = "앵커태그 선택됨";
            let p = document.getElementsByClassName("para");
            p[0].innerHTML = "문단태그-1";
            p[1].innerHTML = "문단태그-2";
            let h3 = document.getElementByName("h3");
            h3[0].innerHTML = "헤더태그 h3선택됨.";
        };
    </script>
</head>

<body>
    <div>
        <a id="anchor" href="#" onclick="">앵커태그</a>
        <p class="para">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
            Porro ducimus obcaecati saepe aspernatur sint tempora sequi facere neque totam,
            exercitationem ratione itaque. Cum, sapiente ipsa aliquid dicta necessitatibus voluptatibus fugit?
        </p>
        <p class="para">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
            Porro ducimus obcaecati saepe aspernatur sint tempora sequi facere neque totam,
            exercitationem ratione itaque. Cum, sapiente ipsa aliquid dicta necessitatibus voluptatibus fugit?
        </p>
        <h3>header h3</h3>
    </div>
</body>
</html>

연습문제 - CSS 선택자로 문서요소 선택하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>CSS 선택자로 문서요소 선택하기</title>
    <script>
        //연습문제
            //1. id가 wrap인 div밑의 h1의 텍스트색상을 green로 바꾸시오.
            //2. 내용인 "제목태그3"인 객체의 color를 blue으로 변경하시오.
            //3. 내용인 "제목태그4"인 객체의 color를 orange으로 변경하시오.
            //4. id가 'wrap'인 div의 border를 1px solid red로 바꾸시오.
        window.onload = () => {
            let wrapper = document.querySelector('#wrap > div > h1');
            wrapper.style.color = 'green';

            let headers = document.querySelectorAll('.headers');
            headers[0].style.color = 'blue';

            headers[1].style.color = 'orange';

            let wrap = document.querySelector('#wrap');
            wrap.style.border = '1px solid red';
        }
    </script>
</head>

<body>
    <h1 id="header-1",h1.style.color = "green";>제목태그1</h1>
    <h1 id="header-2">제목태그2</h1>
    <h1 class="headers">제목태그3</h1>
    <h1 class="headers">제목태그4</h1>
    <h1 class="headers">제목태그5</h1>
    <div id="wrap">
        <div>
            <h1>Wrapper</h1>
        </div>
    </div>
</body>
</html>

마우스 클릭 이벤트

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>마우스클릭 이벤트</title>
  <script>
    //버튼A가 클릭될때, count-a에 현재 카운트를 +1를 올리시오.
    //버튼B가 클릭될때, count-b에 현재 카운트를 +1를 올리시오.
    window.onload = function() {
      var buttonA = document.getElementById('button-a');
      var buttonB = document.getElementById('button-b');
      var counterA = document.getElementById('counter-a');
      var counterB = document.getElementById('counter-b');

      buttonA.onclick = () => {
        //alert("버튼 A 클릭됨!");
        counterA.innerHTML = Number(counterA.innerHTML) + 1;
      };
      buttonB.onclick = () => {
        counterB.innerHTML = Number(counterA.innerHTML) + 1;
      };

    };
  </script>
</head>
<body>
  <button id="button-a">ButtonA</button>
  <button id="button-b">ButtonB</button>
  <h1>Button A - <span id="counter-a">7</span></h1>
  <h1>Button B - <span id="counter-b">3</span></h1>
</body>
</html>

연습문제 - 계산기

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>연습문제 - 계산기 프로그램 </title>
    <!-- Input 객체의 값을 가져오기 : input.value -->
    <style>
        #wrap {
            border: 1px solid black;
            padding: 0;
            /* 가로중앙 정렬 */
            margin: 0 auto;
            width: 300px;
            height: 500px;
            /* flexbox : Flexable Grid 사용 - 컨테이너에 적용 */
            display: flex;
            /* 콘텐츠가 넘치면 줄바꿈한다. */
            flex-wrap: wrap;
            /* 주축방향 세로로 */
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        #res {
            display: flex;
        }

        #num1,
        #num2 {
            background-color: rgb(216, 213, 213);
            margin-bottom: 18px;
            margin-left: 20px;
            width: 150px;
            height: 25px;
            text-align: center;
            border: 1px solid rgb(112, 112, 112);
        }

        #result {
            background-color: rgb(112, 112, 112);
            color: white;
            margin-bottom: 18px;
            margin-left: 5px;
            width: 150px;
            height: 25px;
            text-align: center;
            border: 1px solid rgb(112, 112, 112);
        }

        #add,
        #mul,
        #sub,
        #divide {
            width: 220px;
            height: 30px;
            background-color: rgb(40, 108, 209);
            /* 검은색 테두리 제거 */
            border: 0px;
            color: white;
            margin-bottom: 5px;
        }

        #del {
            width: 220px;
            height: 30px;
            background-color: rgb(241, 50, 50);
            border: 0px;
            color: white;
        }

        #btn-group {
            display: flex;
            flex-flow: column wrap;
            justify-items: center;
        }
    </style>
    <script>
        window.onload = function () {
            var num1 = document.getElementById('num1');
            var num2 = document.getElementById('num2');
            var result = document.getElementById('result');

            var button_add = document.getElementById('add');
            var button_sub = document.getElementById('sub');
            var button_mul = document.getElementById('mul');
            var button_divide = document.getElementById('divide');
            var button_del = document.getElementById('del');

            // 덧셈
            button_add.onclick = () => {
                result.value = Number(num1.value) + Number(num2.value);
            };

            // 뺄셈
            button_sub.onclick = () => {
                result.value = Number(num1.value) - Number(num2.value);
            };

            // 곱셈
            button_mul.onclick = () => {
                result.value = Number(num1.value) * Number(num2.value);
            };

            // 나눗셈
            button_divide.onclick = () => {
                result.value = Number(num1.value) / Number(num2.value);
            };

            // 지우기
            button_del.onclick = () => {
                num1.value = null;
                num2.value = null;
                result.value = null;
            };

        };
    </script>
</head>
<body>
    <div id="wrap">
        <div>
            <p>JavaScript</p>
            <p>계산기 프로그램을 작성해보자</p>
        </div>
        <div>
            <label>숫자 1</label><input type="text" id="num1"></input><br />
        </div>
        <div>
            <label>숫자 2</label><input type="text" id="num2"></input><br />
        </div>
        <div id="res">
            <label>연산 결과</label><input type="text" disabled="disbled" id="result"></input>
        </div>
        <div id="btn-group">
            <button id="add">덧셈</button>
            <button id="sub">뺄셈</button>
            <button id="mul">곱셈</button>
            <button id="divide">나눗셈</button>
            <button id="del">지우기</button>
        </div>
    </div>
</body>
</html>

연습문제 - 약관동의 체크박스

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>약관동의 체크박스 확인하기</title>
    <script>
        //연습문제
        //1. 모두 동의 체크하기 클릭시  checkAll()
        //   : 모든 체크박스를 checked 되게 한다.
        //2. 모두 동의 확인 클릭시 : agree()
        //  모두 체크되어 있습니다 or 모두 체크되어 있지 않습니다. alert창으로 출력
        //  checkbox.checked = true; //설정한다.
        //  if( checkbox.checked == false ) //확인한다.
        //3. 모두 동의 취소 클릭시 : back()
        //   모든 체크박스를 unchecked되게 한다.


        function checkAll() {
            //모든 체크박스를 checked 되게 한다.
            let arrCheckbox = document.getElementsByTagName('input');
            for (let chk of arrCheckbox) {
                chk.checked = true;
            }
        }

        function agree() {
            //모두 체크되어 있습니다 or 모두 체크되어 있지 않습니다. alert창으로 출력
            let arrCheckbox = document.getElementsByName('agree');
            let isAllChecked = true;
            for (let chk of arrCheckbox) {
                console.log(chk.checked);
                if (chk.checked == false) {
                    isAllChecked = false;
                    break;
                }
            }
        }

        function back() {
            //모든 체크박스를 unchecked되게 한다.
            let arrCheckbox = document.getElementsByTagName('input');
            for (let chk of arrCheckbox) {
                chk.checked = false;
            }
        }
    </script>
</head>
<body>
    <form action="">
        <textarea cols="30" rows="3">약관1에 대해서...</textarea> <br>
        <input type="checkbox" name="agree" id="chk1"> 약관동의1 <br>
        <textarea cols="30" rows="3">약관2에 대해서...</textarea> <br>
        <input type="checkbox" name="agree" id="chk2"> 약관동의2 <br>
        <textarea cols="30" rows="3">약관3에 대해서...</textarea> <br>
        <input type="checkbox" name="agree" id="chk3"> 약관동의3 <br>
    </form>
    <br>
    <!-- 앵커태그에서 JS함수 호출하기 -->
    <a href="javascript:checkAll();">모두 동의 체크하기</a> <br>
    <a href="javascript:agree();">모두 동의 확인</a> <br>
    <a href="javascript:back();">동의 취소</a> <br>
</body>
</html>