코딩응애의 개발블로그

생활코딩 WEB2-JavaScript (데이터타입 - 문자열과 숫자 ~ 조건문의 활용) 본문

JavaScript

생활코딩 WEB2-JavaScript (데이터타입 - 문자열과 숫자 ~ 조건문의 활용)

이너멜 2021. 12. 20. 16:39

※ 중간에 CSS 부분(9~11)은 들었지만 따로 CSS 요약한 포스트가 있어서 쓰지 않음 

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

이 부분은 너무 간단해서 그래도 요약하자면 일단 숫자는 아무 사이트에 콘솔 창에서 1+1 하고 엔터를 하면 2 가 나오는 이러한 식이다 사칙연산 다 가능하다. 그리고 문자열 같은 경우 큰따옴표, 작은따옴표 둘다 가능하다 예를들어 "hello" 하고 엔터치면 저 문자열이 그대로 나온다. 문자열에는 다양한 property와 메소드가 있는데 몇가지 살펴보면 "hello".length

하면 문자열의 길이를 나타내주고 "hello".toUpperCase() 해주면 다 대문자로 변한다 그리고 "hello".indexOf( 'l' ) 해주면 괄호안에 문자가 몇번째에 있는지 나타내주고 마지막으로 "             hello              ".trim() 해주면 문자열 좌우에 공백을 없애고 출력을 해준다

각종 메소드들을 적용한 모습

변수와 대입연산자

예를 들어 x=1000 이다 할때 여기서 x가 변수이고 =은 대입연산자이다 즉 x라는 변수에다가 1000을 대입한다는 의미

변수는 variable 이라고 한다 근데 1=2 이런식으로 하면 오류가 난다 왜냐면 1이라는 값은 변하지 않는값인 상수(constant) 이기 때문이다 변수를 사용할때는 변수이름 앞에 var을 붙여주어야 한다는데 이것에 대한 장단점을 알기 전까지는 항상 var 을 쓰라고 한다.. 

제어할 태그 선택하기

night day 버튼을 클릭 했을때 body 태그에 스타일 속성을 동적으로, 프로그래밍적으로, 상호 작용에 의해서 넣으려고 할려면 JS의 문법에 따라서 웹브라우저에게 body 태그를 선택하도록 해야 하는데 그냥 쉽게 말하면 문서내의 태그를 JS문법으로 선택을 할려면 

document.querySelector('selector');
<!-- 이런식으로 써주어야 한다 -->

이제 원하는 선택자를 선택을 해줬으니 선택한 선택자에 style 이라고 하는 속성을 어떻게 JS로 넣을수 있는지를 해주려면 

document.querySelector('selector').style;

여기서 배경색을 넣고 싶다면 CSS에서는 background-color : black; 이런식이 었는데 이거를 JS로 할려면

document.querySelector('body').style.backgroundColor = 'black';
<!-- backgroundColor 이렇게 달라진것을 볼 수 있음 -->

그리고 이런거는 그때그때 마다 인터넷 구글링 해서 찾아보면 됨

※ 참고로 document.querySelector(); 에 대해 좀더 자세히 말해보자면 html의 특정 class 나 id, 태그를 제한하지않고 css선택자를 사용하여 요소를 찾는다. 입력한 선택자와 일치하는 문서내 첫번째 element를 반환한다

<body>
    <input type="button" value="night" onclick="
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        ">
    <input type="button" value="day" onclick="
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
    ">
</body>

<!-- night 버튼을 누르면 배경색은 검정 글자는 하양 day 버튼을 누르면 배경색은 하양 글자색은 검정색이 
되는것을 볼 수 있다. -->

조건문

조건에 따라서 다른 순서의 기능들이 실행되도록 하는것이다. if 조건문을 통해서 night/day 왔다갔다 하는 toggle 버튼 만들기 가능하다

비교 연산자와 블리언

예를 들어서 1 === 2 이런식이 있으면 결과값으로 false가 나오는데 이러한 === 연산자를 비교 연산자라고 하고 비교 연산자로 나온 값들은 true 아님 false 둘중 하나의 값만 나옴 그리고 이러한 true false 두가지를 묶어서 boolean 이라고 부른다. 근데 === 이것과 == 이것의 차이점은 무엇일까? 궁금해서 구글링을 해보았는데 ==은 a==b 라고 예를 들면

값만을 비교해서 같으면 true 다르면 false 출력하는데 ===는 엄격하게 비교를 한다는 의미로 값 뿐만 아니라 값의 종류(데이터 타입)까지 같아야지만 true 하나라도 다르면 false 출력을 한다 

<h1>Comparison operators & Boolean</h1>
    <h2>===</h2>
    <h3>1===1</h3>
    <script>
    document.write(1===1);
    </script>

    <h3>1===2</h3>
    <script>
    document.write(1===2);
    </script>

    <h3>1&lt;2</h3>
    <script>
    document.write(1<2);
    </script>

    <h3>1&lt;1</h3>
    <script>
    document.write(1<1);
    </script>
    
    <!-- &lt;는 <를 의미한다 반대는 &gt; >를 의미 그리고 document.write(); 는 웹페이지에다가
    괄호안에 있는 정보를 출력을 해준다 -->

위에 코드 결과 창 화면

조건문 활용

if ~ else 조건문 하나의 코드로 예시를 들어보자면

<body>
  <input id="night_day" type="button" value="night" onclick="
      if(document.querySelector('#night_day').value === 'night') {
          document.querySelector('body').style.backgroundColor = 'black';
          document.querySelector('body').style.color = 'white';
          document.querySelector('#night_day').value = 'day';
      }
      else {
          document.querySelector('body').style.backgroundColor = 'white';
          document.querySelector('body').style.color = 'black';
          document.querySelector('#night_day').value = 'night';
      }
      ">
</body>
document.querySelector('#night_day').value  이 부분은 id 값이 night_day 인 element에 value 값을 알아내는 부분이다
비교연산자 === 을 사용해서 만약 value 값이 night라면 그에 맞는 내용을 수행하는 코드를 써놨고 여기서는 목표가 하나의 버튼으로 night 와 day 역할을 다 할수 있게 하는 거니까(toggle 버튼) 마지막에 value 값을 day로 해준다 그러면 다시 if 조건문으로 돌아갈때 value 값은 day가 되어있으므로 night 값이 아니어서 false가 되므로 else 문을 실행하고 다시 마지막에 value 값을 night 로 바꿔서 이 과정을 버튼을 클릭 할때마다 반복하는 것이다.

 

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

'JavaScript' 카테고리의 다른 글

노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#2.5 ~ #2.10)  (0) 2022.02.09
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#1 ~ #2.4)  (0) 2022.01.25
생활코딩 WEB2-JavaScript (객체 ~ 수업을 마치며) (for in문)  (0) 2021.12.24
생활코딩 WEB2-JavaScript ( 리팩토링(refactoring) ~ 함수의 활용)  (0) 2021.12.21
생활코딩 WEB2-JavaScript ( 처음부터~HTML과 JavaScript의 만남 3 (콘솔) )  (0) 2021.11.15
'JavaScript' Related Articles more
Comments