2023.05.25 JS 기본개념

[]자료형 array

array를 쓰면 여러 자료를 변수 하나에 저장 가능

→ [자료1, 자료2, 자료3, …]

array 자료 추출

<script>
      let car = ['자료형', 50000, 'white'];
      console.log(car[1]);
    </script>

array 자료 추가/수정

<script>
      let car = ['자료형', 50000, 'white'];
      car[0] = '아반떼';
      console.log(car[0]);
    </script>

object 자료형

{이름1: 자료1, 이름2: 자료2…}

→ 이름 붙여서 저장 가능하는 게 장점

→ key:value 형태로 저장가능

<script>

      let car2 = {name(key) : '소나타'(value), price(key): 50000(value)}
				console.log(car2['name'])
				console.log(car2.name);

    </script>

object 자료 수정/추가

<script>

      let car2 = {name(key) : '소나타'(value), price(key): 50000(value)}
			car2.price = 60000;

    </script>

array / object 차이점

array 자료 간 순서가 존재함

object는 순서개념이 없음

sort → 정렬 기능

car.sort()

car.slice(1, 3) → 중간에 자르기 1번부터 3번전까지 잘라주세요.

car.push(x) → x를 맨 뒤에 추가

{중괄호}로 시작하면 object

[대괄호]로 시작하면 array

car2.price → 변수 입력 불가능

car2[price] → 변수 입력 가능

html 변경할 때

<span class="car-title">상품명</span>
      <span class="car-price">가격</span>
    </div>
  </div>

    <script>

      var car2 = { name : '소나타', price : [50000, 3000, 4000] }
      
      document.querySelector('.car-price').innerHTML = car2.price[0];
      

    </script>

개발방식

1. server-side rendering→ 서버가 html 다 만들어야 함(서버가 힘듦)
2. → 완성된 html 파일
3. client-side rendering→ 서버가 변함→ html에 데이터 넣기
4. → 데이터바인딩 쉽게 해주는 제이쿼리, react, Vue..등
5. 데이터바인딩
6. → 빈 html파일 + 데이터

문자 중간에 변수 쉽게 넣기

let a = ‘안녕’;

문자${a}문자

백틱(``)을 쓰면 변수를 넣을 수 있다.

자바스크립트로 html 생성법

<script>
  let a = document.createElement('p')
</script>

document.querySelector('#test').appendChild(a);

→ #test 안에 넣어줌

자바스크립트로 html 생성법 2

<div id ="test">

</div>

<script>
  var 템플릿 = '<p>안녕</p>';
  document.querySelector('#test').insertAdjacentHTML('beforeend', 템플릿);
</script>

insertAdjacentHTML → 문자형 html 넣어주는 함수(추가해주는 문법)

(넣어줄 위치, 어떤 함수를)

forEach문

→ array에 붙일 수 있는 forEach 반복문

→ forEach 안에 파라미터 2개 생성 가능

→ 첫 째는 array안의 데이터

→ 두번 째는 0부터 1씩 증가하는 정수

let pants = [28, 29, 32, 34];

pants.forEach(function(a 파라미터){
    console.log(a 파라미터);
    // $('.form-select').eq(1).append('<option>28</option>');
    document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', '<option>a</option>')
  })
}

a(파라미터) → array안에 있는 데이터들

a(파라미터) 입력 시 array에 있는 데이터에 맞게 반복해줌

object 자료 갯수만큼 반복문 돌리려면

let obj = {name: 'kim', age: 20}

for (let key in obj) {
  
}

반복문 용도

1. 코드 반복
2. array, object 데이터 전부 꺼낼 때

arrow function 사용가능

(주의) arrow function 쓰면 함수 안의 this 뜻이 달라질 수 있음

arrow function 안에서 쓰면 바깥에 있던 this를 그대로 가져다씀.

pants.forEach((a) => {
    console.log(a);
    $('.form-select').eq(1).append('<option>28</option>');
    document.querySelectorAll('.form-select')[1].insertAdjacentHTML('beforeend', `<option>${a}</option>`)
  })