[생활코딩][JavaScript] 자바스크립트 기초1

console: 웹 브라우저에서 제공하는 console을 이용하면 JS파일을 만들지 않더라도 JS코드를 즉석에서 실행할 수 있습니다. 

TIP: console은 내가 보고있는 해당 웹페이지에서 JS가 실행되는 모습을 보여줍니다. 만약 내부의 글자수가 몇인지 궁금하거나 할 경우,해당 문자를 카피해서 console창에서 확인해볼 수도 있겠죠

•  위에는 HTML element창을 띄우고 아래에 console창이 보이게 하고싶다면 element창에서 esc키를 눌러주면 됩니다. 

🙂콘솔창에서 JS코드 실행해보기 

.length: 문자열의 개수를 알려주는 프로퍼티 // 문자열을 기준으로 하니까 따옴표(큰따옴표, 작은 따옴표 둘 다 가능)로 묶어둬야 겠죠

.trim() : 공백을 잘라주는 메소드

.upperCase(): 문자열을 대문자로 바꿔주는 메소드

등등 문자열에 관련된 여러 기능이 있습니다.

🙂JS 데이터 타입 (총 6개)

-2가지만 설명(숫자, 문자)

숫자 데이터타입에서 중요한 것은 산술연산자

• + - * / (왼쪽부터 더하기 빼기 곱하기 나누기)

문자 데이터타입에서는 관련된 properties 많이 제공하기 때문에 JavaScript String(문자열)이라고 검색하면 많은 기능을 알 수 있습니다. // 위에 배운 string.length가 그 중에 하나입니다. 

• *properties란? .length와 같은 것들을 properties 라고 부릅니다. 
• JS string 관련 문서를 찾아보면 properties 와 method가 구분되어 있습니다. // 메서드는 뒤에 ()를 붙여주는 것으로 차이가 있는 것인가 싶기도 하네요.
•  

  

  MDN 왼쪽 카테고리에 나와있는 프로퍼티와 메서드

• 여담) 프로퍼티가 메소드가 아닌가 라고 생각이 들어서 찾아보니 정의와 프로퍼티와 메서드의 관계에 대해 서술해놓은 글이 있기에 링크 걸어둡니다. 우선은 대충 .length가 프로퍼티구나 하고 넘어가시면 될듯 
• https://m.blog.naver.com/magnking/220966405605

[JavaScript] property란 무엇인가?

 

🙂변수와 대입연산자 

변수(variable): 바뀔 수 있는 어떤 값 (<-> 상수(Constant) )

=(대입연산자) : 오른쪽 항의 값을 왼쪽의 변수에 대입한다 or 좌항과 우항의 값을 결합해서 우항을 만들어낸다(?)

 

HTML은 한번 화면에 표시되면 자기를 바꿀 능력이 없는 정적인 언어 -> 그렇기 때문에 동적인 언어인 JS를 사용

🙂HTML에서 JS사용하기 

->이 코드는 HTML 코드이다. onclick =""에서 onclick 은 이벤트이고 ""따옴표안에 들어갈 내용은 JS코드이다. 

이전에 이벤트리스너를 사용해서 따로 js파일에서 구현한 적은 있었는데 이 방법은 따로 js파일을 빼지 않고 HTML페이지에서 구현하는 방식이라서 처음 알았다(?) 마치 style태그에 CSS문법을 작성하는 것처럼 말이다.

• ※주의: onclick= "// JS코드  " 이기때문에 우선 큰 틀이 ""큰따옴표로 묶여있으므로 내부에 있는 JS코드의 메소드는 ''작은 따옴표를 써야 오류가 나지 않습니다. 

JS에서 style태그의 background-color변경하는 법을 모르겠으면 검색창에 "javascript element background color"를 쳐보면 아래와 같은 결과물을 얻을 수 있습니다. 

->CSS에서는 background-color 였다면 JS에서 백그라운드를 설정할 때는 backgroundColor 로 돼있네요.

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

이런식으로 응용하여 기입해주면 됩니다. 나이트 버튼을 누르면 바디태그의 스타일값을 백그라운드는 검정, 폰트컬러는 화이트로 바꿔준다는 내용입니다.

<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';
    }
    "
    />

 

이 코드는 night_day버튼을 만들고 있는데 만약에 이러한 버튼이 화면내에 

여러개 있다고 친다면 코드를 복사해서 그곳에 붙여주기만 하면 되지 않나? 라고 생각할 수 있습니다.

하지만 그렇게 되면 코드가 정상적으로 작동하지 않게 되죠-> 이를 해결하기 위해서는 #(아이디명)을 night_day2이런식으로 구분하여 일일이 변경해줘야 합니다. 아주 비효율적으로 되는 것이지요

그렇다면 아이디명을 변경하지 않고 어떻게 이 문제를 해결 할 수 있을까요?

• onclick이벤트 내에 있는 JS코드들은 해당 구간에서는 코드가 속해있는 태그(여기서는 input태그), 이 태그를 가리키도록 약속되어있습니다. 약속된 특수한 키워드는 바로 this 입니다. 
• 풀어서 말하자면 코드 내에 조건문 중에  document.querySelector('#night_day') 이 부분이 바로 내가 속해있는 태그 즉 input태그를 말하는 것이기 때문에 해당 부분을 this 로 변경해주면 됩니다. 그렇게 되면 id ="" 이 부분 또한 필요가 없어지게 되는 것이죠.

🙂this를 활용한 리팩토링

<input
      type="button"
      value="night"
      onclick=" 
      //아래는 JS코드
	const target =document.querySelector('body');
    if(this.value ==='night'){
        target.style.backgroundColor='black';
    target.style.color='white';
    this.value ='day';
    } else {
        target.style.backgroundColor='white';
    target.style.color='black';
    this.value ='night';
    }
    "/>

• this = document.querySelector('#night_day')
• document.querySelector('body') 중복되어 변수로 따로 빼고 해당부분을 변수명인 target으로 대체했습니다.
• 참고로 var말고 const상수로 선언하여 값을 변경하지 못하도록 해놨습니다.  

🙂JS Array(배열)

기본적인 문법

• 배열은 []대괄호 안에 element를 작성하고 요소의 구분은 ,(콤마)로 합니다.
• 배열은 0부터 시작합니다. 1번째 요소는 [0]인 것과 같죠.

let fruits = ['Apple', 'Banana']

console.log(fruits.length)
// 2

• 배열에 관련된 기능들은 전부 암기할 필요없이 보면서 따라하시면 됩니다.
• 대표적인 예로, push()의 경우는 새로운 요소를 집어넣어주는 기능인데 배열의 맨 마지막에 새로운 요소를 추가해주는 것입니다. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

🙂JS Loop(반복문)

• 반복문에서 중요한 것은 반복문이 언제 종료될 것인지 지정하는 일입니다. 그렇지 않다면 무한반복루프에 빠지게 되겠죠. 해당 웹브라우저의 컴퓨터 자원을 다 가져가 버리는 사태가 벌어집니다. -> 이를 위해 변수 i 를 활용하는 것이지요
• 기본적인 모양은 if 문과 비슷하게 생겼습니다. 차이점이 있다면 소괄호 안의 조건문이 true일 경우, 무한 반복을 하는 것이고 false일 경우는 중괄호 이후에 존재하는 코드가 실행됩니다.

<script>
        document.write("<li>1</li>");
        let i = 0;
        while (i < 3) {
          document.write("<li>2</li>");
          document.write("<li>3</li>");
          i = i + 1;
        }  // 반복문의 조건이 false가 됐을 때, 즉 종료시 발생할 코드
        document.write("<li>4</li>");
      </script>