본문으로 바로가기

[1일차] #7. 변수와 대입 연산자

category Develop/WEB2 - JavaScript 2018. 11. 29. 22:17





1일차



수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

비교 연산자와 Boolean 데이터 타입

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며





#7. 변수와 대입 연산자


▲ 연산자 활용례


연산자[Operator] [각주:1]


연산자는 쉽게 얘기하면 더하기 뺄셈 곱하기 나누기 사칙연산을 의미하는 식이다.

넓게 얘기하면 한개 또는 두개 많게는 세개의 식을 연산을 통해 새로운 결과를 도출해 내려 할 때 쓰이는 기호들을 말한다. 

생활에서 사칙연산은 기본이 되듯이 프로그래밍에서도 연산자는 모든 계산과 수식활용의 기초가 된다. 

예를들면 LED의 밝기를 추가하고 싶을때 현재 밝기에 +를 하면 더 발게 빛을 낼 수 있고, 서보모터를 더 움직이고 싶을때는 현재 각도에서 특정값을 더하거나 빼면 서브모터를 움직일 수 있다. 이외에도 컴퓨터는 0(거짓) 1(참)의 값을 가지고 연산을 하는데 이런 논리에 대해서도 연산을 통해 여러가지 값을 만들거나 조건을 만들 수 있다. 수학에서 사칙연산을 배우듯이 연산자를 공부해야 기초적인 프로그래밍을 알 수 있을것이다.



대입연산자와 산술연산자[각주:2]


01. 대입 연산자

대입연산자( = )는 오른쪽의 값을 왼쪽의 변수에 저장한다. 대입 연산자는 할당 연산자, 또는 배정 연산자라고도 한다. 대입 연산자의 왼쪽에는 값을 저장할 수 있는 변수가 위치하고 대입 연산자의 오른쪽에는 변수에 저장할 값이 위치한다.

int x = 100 ;    // 정수 100을 변수 x에 대입한다.


02. 산술 연산자

컴퓨터는 기본적으로 계산을 위한 기계이다. 따라서 프로그램 안에서 산술 연산을 수행하는 연산자들을 사용하여야만 한다. 특히 사칙 연산자들은 이항 연산자라고 불리는데 그 이유는 두 개의 피연산자를 가지기 때문이다.

int sum = x + y ;



나눗셈 연산자

나눗셈 연산자 /을 사용할 때는 주의하여야 한다. 피연산자가 모두 정수형이면 정수형 나눗셈 연산을 한다. 예를 들어서 12 / 5 는 2이다. 하지만 피연산 중에 하나라도 실수이면 계산이 실수형 나눗셈이 된다. 예를 들어서 12.0 / 5는 2.4가 된다.  또한 정수를 0으로 나누면 오류가 발생하여 프로그램의 실행이 중지된다. 실수를 0 으로 나누면 무한대값을 나타내는 NaN이 발생한다.

%연산자

나머지 연산자 %는 나머지 연산을 한다. 예를 들어서 12 % 5는 2가 된다. 12를 5로 나누면 나머지가 2기 되기 때문이다. 나머지 연산은 어디에 쓰일까? 수식 x % y의 값이 0이면 y는 x의 약수가 된다. 예를 들어서 x % 2가 0이면 x는 2의 배수가 된다. 즉 짝수가 된다. 그리고 x % 2가 1이면 x는 홀수가 되는 것이다. 이렇듯 나머지 연산자는 짝수 또는 홀수 등의 검사에 사용된다.




글자 바꾸기 


▲ Bremen('A')가 삽입된 글



① 예제 텍스트 복사 붙여넣기

② 큰 따옴표 앞뒤에 붙이기 ("문자化")

③ 경고이벤트 삽입




▲ Bremen('A') ⇒ Berlin('B') 바꾸기



① 변수입력하기 var name = '변수';

Shift + Enter 후, 위 글 복사+붙여넣기

③ 바꾸고 싶은 텍스트 ⇒ "+name+"

④ 텍스트 마지막에 ;입력 빼먹지 말기



※ 보고서 작성시, 보고서 내에 있는 수많은 '상호명' 손 쉽게 변경가능 (Hwp 유사)




  1. https://www.kocoafab.cc/tutorial/view/99 [본문으로]
  2. 출처: http://nullmaster.tistory.com/134 [NullMaster] [본문으로]