S1U7 [간단한 웹앱 만들기]

Pair / 과제 - 계산기 구현하기

난이도 basement/advaneced 

script.js

0.00MB

message.txt

0.01MB

 

1.오퍼레이터에 따라 계산하는 함수를 만듬.

unction calculate(n1, operator, n2) {

let result = 0;

// ex) 입력값이 n1 : '1', operator : '+', n2 : '2' 인 경우, 3이 리턴됩니다.

// 연산자 넣어주는 코드 작성함, 문자열을 숫자로 바꿔줌

if(operator === '+'){

result = Number(n1) + Number(n2)

}if (operator === '-') {

result = Number(n1) - Number(n2)

}if (operator === '*'){

result = Number(n1) * Number(n2)

}if (operator === '/') {

result = Number(n1) / Number(n2)

}

return String(result);

}

 

 

2. 계산부분

if (action === 'calculate') {

calculatedResult.textContent = calculate(firstOperend.textContent, operator.textContent, secondOperend.textContent)

console.log('계산 버튼');

} // 위 calculate라는 함수를 사용, 계산버튼을 누르면 계산함

 

3. 버튼누를때 반응

f (action === 'number') {

// 그리고 버튼의 클레스가 number이면

// 아래 코드가 작동됩니다.

if(firstOperend.textContent === '0'){

firstOperend.textContent = buttonContent;

}

else if (firstOperend.textContent !== '0'){

secondOperend.textContent = buttonContent

}

 

4. 버튼/소수점

if (action === 'operator') {

operator.textContent = buttonContent

console.log('연산자 ' + buttonContent + ' 버튼');

}

if (action === 'decimal') {

console.log('소수점 버튼');

5. 초기화

if (action === 'clear') {

firstOperend.textContent = '0'

operator.textContent = '+'

secondOperend.textContent = '0'

calculatedResult.textContent = '0'

console.log('초기화 버튼');

}

// clear 버튼을 누르면 firstOperend.textContent 의 값을 0 이되어야하고

// operator.textContent 의 값또한 + 가 되어야함

// secondOperend.textContent 와

// calculatedResult.textContent 의 값또한 0 이 되어야함

 

 

솔직히 혼자하기 버거웠지만 페어나 구글검색으로 그리고 세션설명시간으로 이해함.

하지만 아직 부족함

 

* textcontent 와 innerHTML 차이 공부하기

출처 : https://letsgojieun.tistory.com/64

innerHTML

display:none으로 지정한 요소, 자식 요소의 element tags, 모든 스페이싱(띄어쓰기), 줄 바꿈이 그대로 출력된다.

세 가지 중에서 가장 추천하지 않는 속성이다

프로퍼티의 값은 text와 html로 파싱 한 결과이며 다른 속성에 비해 상대적으로 파싱이 느리다

하지만 파싱이 느리다는 점 보다 더 큰 문제는 보안 취약성 문제이며,

XSS의 취약 사례로 언급이 되기도 했었다.

 

innerText

text, plain으로 파싱한 결과이며 element tags 없이 딱 텍스트만 나온다.

만약 여러 번 중복되는 스페이싱이 존재한다면 딱 한 번만 나오며, 줄 바꿈은 따로 적용되지 않는다

innerText는 IE8이하에서 지원되지 않았던 TextContent와 달리 IE엔진에 적합한 속성이기 때문에

다른 브라우저가 아닌 IE를 중점적으로 고려하는 경우 TextContent를 대신하거나,

화면에 있는 텍스트 그대로 읽어오고 싶을 때 사용하기에 괜찮다

 

TextContent

위의 innerText처럼 프로퍼티가 text, plain으로 파싱 한 결과이며 element tags 없이 텍스트만 나온다

여기까지만 보면 innerText와 같아 보이지만, 여러 번 중복되는 스페이싱과 줄 바꿈 모두 그대로 적용이 된다.

또한 노드가 갖고 있는 모든 텍스트를 읽어오기 때문에 display:none; 의 속성을 준 텍스트도 읽어온다

세 가지 속성 중 가장 사용을 추천하는 속성이며, 성능이나 보안적인 측면에서 가장 뛰어나다

 

 

* Number와 parsint 차이

출처:http://megaton111.cafe24.com/2018/05/07/%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%84-%EC%88%AB%EC%9E%90%EB%A1%9C-%ED%98%95%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0-nuber-%EC%99%80-parseint%EC%9D%98-%EC%B0%A8%EC%9D%B4/

Number( string )

인자로 문자열을 받으면 인자를 숫자형으로 변환 시켜 줍니다

 

1 2 3

let str = Number('12345') ; console.log( str , typeof str ) ; // 12345 , 'number'

parseInt( string )

인자로 받은 문자열을 정수로 변환 시켜 줍니다.

 

1 2 3

let str = parseInt('12345') ; console.log( str , typeof str ) ; // 12345 , 'number'

여기 까지 보면 Number와 parseInt가 동일하다고 볼 수 있습니다.하지만 인자로 받은 값에 숫자가 아닌 문자가 들어갈 경우 결과는 달라집니다.

아래처럼 숫자+문자의 조합일 경우 Number() 함수는 NaN을 리턴합니다.

 

1 2 3

let str = Number('123가나다'); console.log( str ) ; // NaN

하지만 parseInt는 숫자로 시작해서 숫자가 끝날 때 까지만 형변환을 해서 리턴해줍니다.

 

1 2 3

let str = parseInt('123가나다') ; console.log( str ) ; // 123

이 점이 바로 둘의 차이점 입니다.  하지만 parseInt도 예외는 있습니다. 시작을 숫자로 하는 경우에는 parseInt도 NaN을 리턴해줍니다.

 

1 2 3

let str = parseInt('가나다123') ; console.log( str ) ; // NaN