모도리는 공부중

21.01.19. JavaScript - 자료형, 연산자, 내부·외부·인라인스크립트 본문

K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVASCRIPT

21.01.19. JavaScript - 자료형, 연산자, 내부·외부·인라인스크립트

공부하는 모도리 2021. 1. 19. 17:28
728x90
반응형

저번 시간 복습

 

자바스크립트는 기능을 담당하는 친구이다. 정적이었던 웹페이지를 동적으로 혹은 프로그래밍적으로 제어하기 위해서 나온 언어!

 

노드 jsp는 지금 우리가 사용하는 것과 흡사하다. 자바스크립트 기반의 서버 언어이기 때문에 자바 없이도 사용이 가능하다는 장점을 지닌다. 우리는 JQuery를 사용할 것. 다음 주쯤에 배울 예정입니다.

 

색깔을 바꿀때 스크립트 언어 중 가장 중요한 것이 무엇이었을까요?

style태그를 불러온 다음 body태그를 가져온다. document.querySelector('body').style.color="yellow";

 

자바스크립트를 사용하기 위해서는 항상 <script> 태그를 작성함으로써 스크립트를 열어줘야 한다. 이 영역에서는 다른 언어를 사용할 수 없으므로 오로지 script언어만 사용이 가능하다.

 

출력하는 방법 3가지.

  1. document.write(); - HTML 문서 내에 출력. 내가 보고 있는 문서에 작성하겠다는 의미.
  2. console.log(); - console창에 출력. 화면에 나오는 것이 아닌 개발자 도구(F12) 창에 있는 콘솔 로그에서 확인.
  3. alert(); - 알림 팝업창으로 출력. 출력문 중에 가장 출력 순위가 높다.

출력이 있다는 것은 입력문도 있다는 것이겠죠?

 

입력문

  1. prompt("출력내용", "입력 내용") - 입력창을 통한 입력문. 입력 내용은 placeholder와 같은 역할을 한다.
    리턴 타입은 문자형. String.
  2. cofirm("출력문 작성") - 확인 및 취소를 통한 입력문.
    리턴 타입은 논리형. Boolean.

사용자가 입력을 했다면 저장해서 활용을 해야겠죠? - 변수

  • 선언법 : var num = 3; ← 변수 선언 키워드 / 변수명 / 대입 / 값
  • 자바에서는 선언한 자료형마다 입력 가능한 값이 달라졌다면,
  • 스크립트는 var라는 자료형 하나로 숫자, 문자, 소수점 등의 구분 없이 모두 사용이 가능하다.
  • 편리하다는 가장 큰 장점을 가진 스크립트 변수. 대신 그만큼 따라오는 단점이 있다.

 

 

오늘 수업 시작.

 

'var' 하나로 모든 것을 대신할 수 있는 장점. 아주 편안한 var에게 단점이 왜 있을까? 무엇일까?

- 구분이 어렵다? 헷갈리다? 숫자형 자료를 입력해야 하는데 문자형으로 인식할 수 있다?

 

누군가 상수 20이 입력 들어와야 하는 자리에 "20"을 넣었다고 합시다. 그럼 이건 문자로 변경된 상태. 하지만 이걸 함부로 바꿔도 되는지 알 수 없으니 우리는 오류 수정도 힘이 들 것이다. 이것을 해결하기 위해 표준안에서 새로운 변수 키워드를 등장시켰으니 바로 let(변수)과 const(상수). 차이가 대체 뭘까요?

 

var키워드로는 재선언이 가능하고 재할당이 가능하므로 2가 출력된다. 인터프리터언어의 특징을 가진다.

  • 단점 : 사용자가 간섭해서 똑같은 변수명을 선언해서 사용해버릴 수 있다.
  • 실제 사용은 let보다 var가 더 많다.  편하다는 이유가 가장 크며 크게 상관이 없기도 하기 때문.

let을 사용하면 똑같은 변수명을 사용할 수 없다. 대신 재할당은 가능. 중복이 불가능.

  • 같은 이름을 또 사용할 수 없다는 것이 이 let 함수의 핵심.
  • 코딩적으로 var보다 let을 사용하는 것이 성능적인 면에서 좋다.

const는 사용하면 재선언 및 재할당이 불가능하다. '상수'라는 개념.

  • 한 번 설정하면 값을 바꿀 수 없으므로 이런 상황을 필요로 할 때 const를 사용해주면 좋다.

 

ex04.입출력.html 생성.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let name = prompt("이름을 입력해주세요.");
        console.log("어서오세요");
        console.log(name+"님 안녕하세요?");
       </script>
</body>
</html>

결과 :

 

JavaScript 자료형
자료형 설명
number 정수, 실수 등 산술 연산이 가능한 자료형
string 문자열로 이루어진 자료형
boolean 참/거짓으로 표현되는 논리 형태의 자료형
undefined 값이 할당된 적이 없거나 존재하지 않는 속성일 때의 유형
null 아무런 값을 나타내지 않을 때의 자료형

여기서 우리가 처음 보는 자료형, undefined. 이것은 지금도 뜨거운 감자인데 일단 이해하기 좋게 사진을 가져와서 예를 들자면,

아무것도 없다...

이처럼 undefined와 null은 서로 다른 개념이므로 헷갈리지 말자.

 

number형)
  var num1 = 65;
  var num2 = 99.9;		 boolean형)
  var isChecked = true;
  var isPlaying = false;
string형)
  var name = ‘홍O동’;
  var fruit = “사과”;		 undefined&null형)
      var data; //undefined
      var value = null;

 var data는 값이 없고 var value는 null이라는 값을 가진 상태.

 

 

JavaScript 연산자
연산자 종류
산술 연산자 +, -, *, /(나누기), %
증감 연산자 ++, --
대입 연산자 =, +=, -=, *=, /=, %=
연결 연산자 +(문자열 결합)
비교 연산자 ==, !=, ===(타입과 값을 같이 비교), !==, >, >=, <, <=
논리 연산자 &&, ||, !
조건 연산자 조건 ? 실행문1 : 실행문2;

 

대부분 우리가 이미 알고 있는 연산자와 같다. 근데 다른 것이 몇 가지가 있다. 바로 /와 ===.

/의 경우 자바에서는 '몫'을 담당하고 있다. 하지만 int와 double이 따로 있지 않은 JavaScript에서 /는 '나누어서 나오는 값' 그 자체를 표현한다. 예를 들어 1/2를 자바에서는 0이라고 출력했다면 자바스크립트에서는 0.5라고 출력한다.

/가 다르다 보니 %도 다르지 않을까?라는 궁금증이 일 것이다. 다행히도 %는 '나머지'가 맞으니 그대로 사용하면 된다.

 

===는 그럼 대체 뭘까? 처음 보는 이 녀석을 설명하자면,

 

자바스크립트에서는 10 == '10'을 서로 같은 것으로 인식한다. 자동으로 형 변환이 일어났기 때문. 그런 이유로 자바에서처럼 형변환이 먹히지 않고 값을 비교하게 만들게끔 나온 것이 ===라고 보면 될 것 같다.

Number(str)을 하게 되면 '형 변환'이 일어났기 때문에 이 경우는 또 true가 된다.

그럼 형 변환을 또 알아보자.

 

JavaScript 형변환
연산자 종류
parseInt() 문자열 변수를 숫자(정수)로 변경
parseFloat() 문자열 변수를 숫자(실수)로 변경
Number() 다른 자료형을 숫자형(정수&실수)으로 변환
toString() 숫자를 문자열로 변경

 

Q. 변수 num 값 중에서 백의 자리 이하를 버리는 코드를 만들어봅시다. 만일 입력한 값이 312이라면 300이 되고, 111이라면 100이 되게 작성해주세요.

 

ex05.백의자리버리기.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var input = prompt("숫자를 입력하세요.");
        console.log("백의 자리를 버린 결과는? >> " + parseInt(input)-parseInt(input)%100); // 나머지를 이용한 방법
        console.log("백의 자리를 버린 결과는? >> " + parseInt(input/100)*100); // 나누기를 이용해서 형변환한 방법
        // 아니 근데 input은 string형태인데 어떻게 이게 계산이 됐죠?
    </script>
</body>
</html>

input이 String형태라고요? 어떻게 아냐고요? var input에 마우스를 올려보면 친절하게 string형태라고 적혀 있다. 대체 무슨 일일까?

 

ex06.형변환.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 10;
        var num2 = "100";

        console.log("더하기 연산 >> "+(num+num2));
        console.log("빼기 연산 >> "+(num-num2));
        console.log("곱하기 연산 >> "+(num*num2));
        console.log("나누기 연산 >> "+(num/num2));
    </script>
</body>
</html>

더하기 연산은 문자가 된 것과 다르게 다른 연산자는 계산이 됐다.

대체 왜?????

스크립트 언어는 상당히 관대하다. 형 변환을 하지 않아도 더하기 제외 모든 연산자는 연산이 된다. 하지만 형 변환은 꼭 해주고 넘어가기를 권한다. 실제 코드를 실행할 때는 압축해서 실행하기 때문에, 세미콜론(;) 없이도 문장 작성에 오류는 없지만 찍는 걸 추천하는 것처럼 오류를 막으려면 하는 게 좋다.

 

 

지금까지 우리가 배운 것은 내부 스크립트 방식이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alt()">외부에서 데이터 가지고 오기</button>
    <!--버튼을 클릭했을때 alt라는 함수가 발휘되도록 메소드 입력-->
    <script>
        function alt(){
            alert("연결성공");
        }
    </script>
</body>
</html>

지금은 코드가 짧으니까 상관없지만 만약 몇백 개 몇천 개가 필요하다면 그때마다 복붙을 해주고 있을 것인가? 그러긴 어렵겠지? 스크립트를 외부에서 작성해줄 수 있다. 자바스크립트의 확장자는 .js이므로 아까 우리가 만든 스크립트 코드를 복사해서 붙여 넣기 해봅시다.

<script>
	function alt(){
    	alert("연결성공");
	}
</script>

오류가 발생할 것이다. 왜? <script>는 태그. 태그는 html언어를 위한 태그이다. 이것을 지워주면,

function alt(){
    alert("연결성공");
}

빨간 줄이 사라진다. 그럼 이렇게 외부로 내보낸 스크립트 코드는 어떻게 사용할 수 있을까?

<script src="외부.js"></script>

이 코드를 <head>에 작성해주면 된다. 그럼 외부에서 스크립트를 읽어와 사용이 가능하다.

 

스크립트를 외부에 사용할 때의 장점

  1. 관리가 편리하다.
  2. 소스를 숨길 수 있다.
  3. 재사용할 수 있다.

인라인 방식은 상황이 급박할 때 주로 사용하며, 이것은 자주 사용하지 않는 것이 좋다. 실제 현업에서도 급한 상황에 일단 인라인 방식을 채택해서 코드를 작성한 다음 상황이 마무리되면 다시 그 코드를 열어서 수정하는 경우가 많다고 한다.

 

 

Q. 빨강, 초록, 파랑 중에 원하는 색을 입력했을 때, 웹 브라우저 배경색이 바뀌도록 작성하세요.

 

내가 한 코드 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var color = prompt("색깔을 적어주세요. (빨강,초록,파랑)");
        switch(color){
            case "빨강":
                document.bgColor="red";
                break;
            case "파랑":
                document.bgColor="blue";
                break;
            case "초록":
                document.bgColor="green";
                break;
        }
    </script>
</body>
</html>

선생님이 한 코드 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var color = prompt("색깔을 적어주세요. (빨강,초록,파랑)");
        switch(color){
            case "빨강":
                document.querySelector('body').style.backgroundColor="red";
                break;
            case "파랑":
                document.querySelector('body').style.backgroundColor="blue";
                break;
            case "초록":
                document.querySelector('body').style.backgroundColor="green";
                break;
        }
    </script>
</body>
</html>

지금 의아한 게, 수업에서 배운건 선생님 코드인데 나는 실습할 때 이게 기억나지 않아서 그냥 입력해본 document.bgcolor가 문제없이 배경에 적용이 되었다. 뭘까? 선생님이 찾아보겠다고 했지만 나도 찾아봐야 할 듯. 오랜만에 흥미가 마구마구 샘솟는다!!

 

- 이제서야 추가하는 내용 (21.07.02)

Document.bgColor는 지금은 사용되지 않는다. 구 버전이므로 지양할 것.

사진 클릭시 해당 문서로 링크됩니다. 아래는 번역본.

더 이상 사용되지 않음
이 기능은 더 이상 사용하지 않는 것이 좋습니다. 일부 브라우저는 여전히 지원하지만 관련 웹 표준에서 이미 제거되었거나 삭제 중이거나 호환성을 위해 보관 중일 수 있습니다. 이 코드를 사용하지 말고 가능하면 기존 코드를 업데이트하십시오. 이 페이지 하단의 호환성 표를 참조하여 결정을 내리십시오. 이 기능은 언제든지 작동을 중지할 수 있습니다.

 

 

내일은 반복문과 인덱스번호를 활용한 1차원 배열, 객체까지 배우도록 하겠습니다. 오늘도 수고하셨습니다!

728x90
반응형
저작자표시

'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12 > JAVASCRIPT' 카테고리의 다른 글

21.01.26. JavaScript -  (0) 2021.01.26
21.01.25. JavaScript - J Query  (0) 2021.01.25
'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVASCRIPT' Related Articles more
Comments