잡동사니에도 사랑을

[21.09.14] exam20 본문

카테고리 없음

[21.09.14] exam20

luvforjunk 2021. 9. 14. 17:51
728x90
반응형

////////exam20

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="calc.js"></script>

src를 쓸 때는 src="calc.js" /> 이런 식으로 막으면 안된다. 내용이 추가가 되지 않는다

<script type="text/javascript">

        document.write("<h3>calc</h3>");

        calc.setValue(25, 36);

        calc.result();

       

        calc.setValue(10, 30);

        document.write("덧셈 = " + calc.plus() + "<br>");

        document.write("뺄셈 = " + calc.minus() + "<br>");

        // 객체안에있는것이아니기때문에 calc.plus() / calc.minus() 이런 식으로 써주어야 한다.

</script>

</head>

<body>

 

</body>

</html>

 

<!--

객체(Class)

- 변수와 함수의 집합

- Javascript는 Prototype 기반의 객체지향언어이다.

 => 객체를 원형(prototype) 형태로 생성하고, 그 안에 기능을 위한 함수나 변수를 추가하는 방법으로 그룹화 하는 개념

 => 객체는 자주 사용하게 될 기능들을 묶어서 외부의 스크립트 파일로 분리해내는 용도로 주로 사용한다.

      이렇게 만든 스크립트 파일은 여러 개의 HTML파일에 의해서 참조하여 재사용할 수 있다.

 -->

 

////////calc.js

 

// 빈 객체 선언 - Test t = new Test();의 t

var calc = {} // null 선언하듯이

 

// 멤버변수 추가

calc.x=0; // private int x = 0; 과 같은 개념

calc.y=0;

 

// 멤버함수

calc.setValue = function(x, y){ 자바 스크립트에선 지정어 function만 써주면 됨. class, void 이런 거 없음

        this.x = x;

        this.y = y;

}

 

calc.plus = function() {

        return this.x + this.y;

}

 

calc.minus = function() {

        return this.x - this.y;

}

 

calc.result = function() {

        var value1 = this.plus();

        var value2 = this.minus();

       

        document.write("<p>덧셈= " + value1 + "</p>"); <p>태그는 단순히 굵게 나오게 하기 위함

        document.write("<p>뺄셈= " + value2 + "</p>");

}

 

// this를 생략하면 안된다. 지역변수로 생각하기 때문

 

결과창

728x90
반응형