20220325 Javascript

학습한 내용

function

함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인 것이다.

  • 코드가 간결해진다.
  • 가독성이 좋아진다.
  • 유지보수가 편해진다.
function name(parameter){
	statement;
}

예시 1)

<html>
    <body>
        <h1>function</h1>
        <script>
            function abc(){
                console.log('a');
                console.log('b');
                console.log('c');
            }
            
            console.log(1);
            console.log(2);
            abc();
            console.log(3);
            
        </script>
    </body>
</html>
  • 실행결과

예시 2) VAT 함수

<html>
    <body>
        <h1>VAT</h1>
        <script>
        function 부가세계산(가격, 부가세율){  //매개변수, parameter
                let 부가세 = 가격 * 부가세율;
                return 부가세;
                }
            
                부가세계산(2000, 0.1);   // 인자, argument, 입력값
        </script>
    </body>
</html>
  • 실행결과

예시 3) SUM 함수

<html>
	<body>
        <h1>SUM</h1>>
        <script>
            function sum(val1, val2){
                return val1 + val2;
                alert(1);
                alert(2);
            }
            alert(sum(100,200)*10)
        </script>
    </body>
</html>
  • 실행결과

WEB 코드

<body>
        <script>
            function night(){
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
                let as = document.querySelectorAll('a');
                for(let i=0;i<as.length;i=i+1){
                    as[i].style.color='white';
                }
            }
        </script>

        <script>
            function day(){
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                let as = document.querySelectorAll('a');
                for(let i=0;i<as.length;i++){
                    as[i].style.color='black';
                }
            }
        </script>
 <body>

Object

서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것

예시

<html>
    <body>
        <h1>Object</h1>
        <script>
           
            let member = {developer:'I', designer:'Me'};
            console.log(member.developer, member.designer);

            let person = {name:'I', city:'seoul', job:'developer'};
            console.log(person.name, person.city,person.job);

            let MyMath = {}
            MyMath.PI = 3.14;
            MyMath.sum = function(val1, val2){
                return val1 + val2;
            }
            console.log(MyMath.PI);
            console.log(MyMath.sum(10,20));
        </script>
    </body>
</html>
  • 실행결과

WEB에 적용하기

https://ujamong.github.io/daegu-ai-school-web/

학습한 내용 중 어려웠던 점 또는 해결못한 것들

object의 개념이 이해되면서도 어려웠다.

해결방법 작성

객체의 기본 구성
object = {key : value};

학습 소감

html, css, javascript를 통해 기본적인 웹페이지의 구성요소를 공부할 수 있었고 문법과 함께 조금 더 간결한 구조로 구성할 수 있게 되었다.
object 부분은 조금 더 공부를 해야 할 것 같다.

event.stopPropagation() 의 쓸모 (ft. 이벤트 버블링)
코드린터 & 코드 포매터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage