티스토리 뷰

[JQUERY]자바스크립트

jQuery 006. 연산자 +-*/%

가산동 2018. 7. 26. 00:06

jquery 연산자에대해 알아보자


아래는 예제이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //연산자
            
            // + 연산
            var a = 10;
            var add = a+10;
            document.write('add = ',add,'<br/>');
            
            // - 연산
            var a = 20;
            var sub = a-10;
            document.write('sub = ',sub,'<br/>');
            
            // * 연산
            var a = 5;
            var result = 5*a;
            document.write('result = ',result,'<br/>');
            
            // / 연산
            var a = 10;
            var result = 100/a;
            document.write('result = ',result,'<br/>');
            
            // % 연산
            var a = 2;
            var result = 5%a;
            document.write('result = ',result,'<br/>');
            
            //문자연산
            var str = '안녕'
            var str2 = '하세요'
            var result = str+str2;
            document.write('result = ',result,'<br/>')
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


먼저, 숫자 연산에 대해 알아보자. 

연산자는

+ 더하기, - 빼기, * 곱하기, / 나누기, % 모듈러 가있다. 이번에 변수 편에서 변수와 연산자에 대해서 짧게 본적이있다. 아래는 이전 글 링크

>> [[JQUERY]자바스크립트] - jQuery 001. 변수사용 var

위 예제를 하나씩 살펴보면, 


// + 연산

var a = 10;

var add = a+10;

document.write('add = ',add,'<br/>');


10의 값을 가진 a에 10을 더한 값을 add라는 변수에 대입한다. 결과는 20을 예상할 수 있다.


// - 연산

var a = 20;

var sub = a-10;

document.write('sub = ',sub,'<br/>');


a에 20을 대입하고 a에서 10을 -연산하고, 그값을 sub에 대입한다. 결과는 10을 예상할 수 있다.


// * 연산

var a = 5;

var result = 5*a;

document.write('result = ',result,'<br/>');


a에 5를 대입하고 5에 a를 곱한다. 결과는 25를 예상할 수 있다.


// / 연산

var a = 10;

var result = 100/a;

document.write('result = ',result,'<br/>');


a에 10을 대입하고, 100을 a로 나눈다. 결과는 10을 예상할 수 있다. 


// % 연산

var a = 2;

var result = 5%a;

document.write('result = ',result,'<br/>');


%연산이 좀 생소 할 수 있다. %는 좌변의 값을 우변의 값으로 나눈 나머지 인데, 

a % b 의 경우 a를 b로나눈 나머지 값을 반환한다.

예제로 설명하면,

a에 2를 대입하고, 5%a를 했으니 결과적으로 5%2가된다 5를 2로나누면 몫은 2 이고 나머지는 1이다. 

%는 나머지인 1를 반환한다. 결과는 1을 예상할 수 있다.


//문자연산

var str = '안녕'

var str2 = '하세요'

var result = str+str2;

document.write('result = ',result,'<br/>');


문자는 +연산자로 붙일 수 있다. 

안녕 + 하세요는 '안녕하세요' 가된다. 


document.write()에 대한 설명은 아래링크를 참고하자.

>> [[JQUERY]자바스크립트] - jQuery 003. 출력기능 document.write()


아래는 결과 화면이다.


결과화면에서 사용된 문서편집기는 아래링크에서 설치 및 설정 할 수 있다.

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기


저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 008. 증감연산자 ++,--  (0) 2018.08.04
jQuery 007. 복합연산자 += , -= , *= , /= , %=  (0) 2018.07.26
jQuery 005. 배열 list  (0) 2018.07.24
jQuery 004. 콘솔에서 데이터 확인 console.log()  (0) 2018.07.21
jQuery 003. 출력기능 document.write()  (0) 2018.07.21
댓글