안녕하세요 풀스택 개발자를 꿈꾸는 진쓰입니다.

자바스크립트 2장 - 자바스크립트 연산자 포스팅 시작하겠습니다.


목차입니다.

 (1).산술연산자

(2). 대입연산자

(3). 증감연산자

(4). 비교연산자

 

(5). 논리연산자

(6). 비트연산자

(7). 삼항연산자

(8). 문자연결연산자



(1). 산술연산자

기호

예제

결과(ans)

덧셈

+

ans = 10 +30

40

뺄셈

-

ans= 20 - 10

10

곱셈

*

ans = 30 * 10

300

나눗셈

/

ans= 20 / 10

2

나머지

%

ans = 20 % 10

0

 

 

자바스크립트 연산자 예제코드

결과화면

 

<html>

<head><title> </title>

<script language="javascript">

<!--

document.write("자바스크립트 예제"+"<br>");

ans = 20 + 10;

document.write(ans+"<br>");

ans = 20 - 10;

document.write(ans+"<br>");

ans = 20 * 10;

document.write(ans+"<br>");

ans = 20 / 10;

document.write(ans+"<br>");

ans = 20 % 10;

document.write(ans+"<br>");

//-->

</script>

</head>

<body>

</body>

</html>

 

 

 

 

(2). 대입연산자

기호

예제

대입연산자이용

덧셈대입

+=

ans = ans +10

ans+=10

뺄셈대입

-=

ans = ans – 7

ans-=7

곱셈대입

*=

ans = ans * 5

ans*=5

나눗셈대입

/=

ans = ans / 3

ans/=3

나머지대입

%=

ans = ans % 5

ans%=5

 

 

 

예제코드 

결과 

 

<html>

<head><title> </title>

<script language="javascript">

 

ans = 20;

document.write("자바스크립트 예제"+"<br>");

ans +=10;

document.write(ans+"<br>");

/*   주석처리하였습니다. 실습해보세요.

ans -=10;

document.write(ans+"<br>");

ans *=10;

document.write(ans+"<br>");

ans /=10;

document.write(ans+"<br>");

ans %=10;

document.write(ans+"<br>");

*/

</script>

</head>

<body>

</body>

</html>

 

 

 

 

(3). 증감연산자

-전위 연산자

   피연산자의 앞쪽에 위치한다.

 

-후위연산자

   피연산자의 뒤쪽에 위치한다.

 

•종류  :  ++  ,  --
•(예) ans++,ans--, ++ans,--ans

예제코드 

결과 

 document.write("증감연산자 예제"+"<br>");
   a = 10;
   document.write(++a +"<br>");
   document.write(a++ +"<br>");
   document.write(a +"<br>");
   
   //a == 12
   b = 10;
  
   document.write(++a + b++ + "<br>"); //13 + 10 =23
   
   //b=11
   document.write(b + "<br>");

 

 

 

(4). 비교연산자

 

 

기호

예제

A=30, B=10인경우

작다

<

A < B

false

크다

>

A > B

true

작거나같다

<=

A <= B

false

크거나 같다

>=

A >= B

true

같다

==

A == B

false

같지 않다

!=

A != B

true

 

 예제

결과 

 document.write("비교연산자 예제"+"<br>");
   a = 10;
   b = 5;
   
   c = a > b;
   document.write("1." + c + "<br>");
   
   c = a < b;
   document.write("2." + c + "<br>");
   
   c = a == b;
   document.write("3." + c + "<br>");
  
   c = a != b;
   document.write("4." + c + "<br>");
  

 

 

 

 

(5). 논리연산자

- and: &&   둘다 맞아야 true, 하나라도 false면 false 입니다.

- or:     ||     하나라도 true면 true 입니다.

 

 

A

B

A && B

A || B

False

False

False

False

False

True

False

True

True

False

False

True

True

True

True

True

예제 

결과 

 document.write("논리연산자 예제"+"<br>");
   //0 false
   //0이외의 수 true
   c =  (!2 || 3) && (!0);
   document.write(c+"<br>");
   
   document.write("비트연산 예제"+"<br>");
   c = 10;
   //   0000 1010
   c = c << 2;  //   0010 1000  = 32 +8 =40
   document.write(c+"<br>");
   //10*2*2
   
   c = 12;
   // 0000 1100  
   c = c >> 2;    // 0000 0011   => 3
   document.write(c+"<br>");

 

 

 


(6). 비트연산자

 

(6)-1. 쉬프트 연산자

 - 오른쪽으로 이동과 왼쪽으로 이동 시킬 수 있습니다.

 

연산자

뜻

예

의미

>>

오른쪽 이동

10 >> 2

10의 이진수표현에서 오른쪽으로 2칸 이동

<<

왼쪽 이동

10 << 2

10의 이진수표현에서 왼쪽으로 2칸 이동

 

 

 

예제 

결과 

 

 

 

   a=10;
   a = a>>2;
   document.write(a +"<br>");
   a=10;
   a <<= 2;   // a = (a<<2) 와 같다.
   document.write(a +"<br>");

 

 

 

 

 

 

 

 

 

 

(6)-2. 비트논리연산자

-  &(비트 AND), |(비트 OR), ^(비트 XOR), ~(비트 NOT) 등이 있다.


 

비트끼리의 and, or, xor, ~연산을 진행한다.

 

 


(7). 3항연산자


  조건   ?   수식1 : 수식2

 

조건이 참이면 수식1이 실행.

조건이 거짓이면 수식2가 실행 

 

예제 

결과 

 document.write("3항연산자 예제"+"<br>");
   c = 0;
   (10 < 50) ? c=5 : c=10;
   document.write(c+"<br>");
   
   (10 > 50) ? c=5 : c=10;
   document.write(c+"<br>");
   

 

 

 

 

.

(8). 문자연결연자

 

+ 기호 사용 합니다.

 

ex) A + "ans" (A에 30이 저장된 경우)

 

30ans가 출력됩니다.

 

 예제

결과 

   A = 30;
   B = "ans";
   document.write(A+B +"<br>");
   
   C = A + B;
   document.write(C +"<br>");

 

 

 

 

 

'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 개요(1장)  (0) 2017.06.08


안녕하세요 진쓰입니다.

자바스크립트 1장 - 자바스크립트 개요 포스팅 시작하겠습니다.



목차입니다.

 (1). 자바스크립트 특징

(2). 정의 방법

(3). 주석문

(4). 자료형

(5). 변수 만드는 규칙



(1). 자바스크립트 특징

•HTML 문서 내에 삽입되어 동적인 웹페이지를 구현할 수 있는 스크립트이다. => 유저의 이벤트를 실시간으로 처리할수있다.
•완벽한 문법적인 구조를 가지지 못합니다.  => 틀려도 동작할때가 많다.
•객체기반 언어입니다.     => 마치 C++, 자바처럼 객체를 선언하고 생성할수있다.
•Client-Side에서 프로그래밍입니다.    => 유저가 접하는 페이지를 프로그래밍할 수 있습니다.
•HTML 삽입될때 <script> ~</script> 안에 정의하면 됩니다.


(2). 정의 방법

<script> ~ </script>안에 정의 하면 됩니다.


<script> ~ </script>의 위치는

html문서 안의 

<head>~</head> or <body>~</body>모두 정의 가능합니다.


아래와 같이 자바스크립트를 사용하려면 아래와 같이 작성하면된다.


<script language="javascript">

…

</script>






(3). 주석문

주석문을 작성하는 이유? => 프로그래밍할때, 이코드를 작성한 이유, 설명, 배경등을 달아놓기 위해서 사용한다. 

주석문은 프로그래밍의 로직에 전혀 영향을 안끼친다. 

주석은 최대한 많이 작성해놓는게 유지보수 측면에서 좋다.(단 간단명료하게)


//                             한줄 주석


/*      */              여러줄 주석


주석은 실제 프로그램에 반영되지않는다.

아래와 같이 웹페이지에 아무런 텍스트도 반영되지않았다.

(4). 자료형

•자바스크립트의 자료형은 varient 타입(가변적)  => char일수도, int일수도 상황에 따라 변한다.
•세부적으로는 char, int, double, float, int, long, short, void 등 이 있습니다.

•자료형을 엄격히 따지지 않는 스크립트 언어이므로 a=5 와 같이 바로 사용가능합니다. => 자바스크립트의 매력입니다.

 

(5). 변수 만드는 규칙


•사용 가능한 문자는 영문자, 숫자, _(underbar)이다
•숫자로 시작할 수 없다.
•_(underbar)를 제외한 다른 특수문자는 올 수 없다.
•공백은 허용되지 않는다.

•예약어(키워드)는 변수로 사용할 수 없다.



Hello World 출력~!


자바스크립트 개요해봤으니 헬로월드정도는 출력해봅시다.



<html>

<head>

<title> 1장 예제 </title>

<script language="javascript">

/*

여기는 주석입니다.

주석1

주석2

*/

</script>

</head>


<body>

<script language="javascript">

//한줄 주석입니다.

document.write("hello world!"); //hello world 출력!

</script>

</body>

</html> 

 

 1장예제.html

 출력화면



2. 자바스크립트 연산자 이어서 포스팅합니다 :)






'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 함수의개요 및 내장함수(5장)  (0) 2017.06.11
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09

+ Recent posts

티스토리툴바