DOM요소 접근과 사용

1. DOM요소 접근

• document.getElementsBY/ClassName,Id,TagName/("");

2. DOM요소 접근의 사용

• 자바스크립트로 css를 줄 수 있다.

  1. 클래스에 줄때

     document.getElementsByClassName("")[몇번째].style.원하는 속성="속성값"

  2. 아이디에 줄때

     document.getElementsById("").style.원하는 속성="속성값"

• 자바스크립트로 이벤트를 붙여 줄 수 있다.

  1.일어날 일 만들어주기 _ 함수 (이벤트 실행시)

  function upalert(even){
  		alert("버튼을 눌렀군요")
  } //버튼을 눌렀을 때 alert창이 뜬다

  2.실행할 이벤트 명령해주기_보통 for 문과 같이 사용된다.

  button.addEventListener("click"<-이벤트 기재 , upalert <-일어날 일 함수)

  -> 버튼을 클릭하면 alert창이 뜬다

• 자바스크립트로 DOM요소를 추가 할 수 있다.

  1.DOM요소 추가

  const appendDOM = document.createElement(태그)
  // DOM은 브라우저에 보이는 요소가 아니기때문에 JQuery에서 html 컨텐츠를 한번에 붙여 넣는 것 과는 다르다.-> .createTextNode(컨텐츠를 담는 메소드)

  2.추가한 DOM요소 붙여줄 위치 지정

  document.body(부모DOM).appendChlid(appendDOM)
  //바디에 요소를 추가한다.

• 인강 듣고 났을땐 JQuery append html과 비슷한건 줄 알았는데 복습하면서 보니까 약간 다르다.JQuery는 컨텐츠를 한번에 붙여버리는 반면 자바스크립트는 요소를 추가하고, 거기에 컨텐츠를 넣는 방식으로 굉장히 차근차근이다.

ES6 문법

• 리액트는 자바스크립트의 라이브러리이다. 따라서 자바스크립트 문법을 잘 다룰 줄 알아야 한다.
• ES6 문법 = 자바스크립트의 표준 문법 중 하나.가장 보편화된 친구이다

1. 변수

• 변수는 크게 두 부분으로 나뉜다.
  1.선언부

  let a ;
  //a라는 변수를 선언함

  2.할당부

  a = "문자열" ; 
  // "문자열" 이라는 할당값을 줌

  • 선언부와 할당부를 한번에 해결하는게 보편적

    let a = "문자열"

• 변수에는 3가지 종류의 변수가 있다.
  이 변수들은 각자의 특징이 다르다.
  1.var : 함수레벨 스코프 , 재선언/재할당 가능
  2.let : 블록({})레벨 스코프 , 재할당만 가능
  3.const : 블록({})레벨 스코프
  • 사실 const는 변수가 아닌 변하지 않는값인 상수이다.

function anything (event){
        var a = "아무거나";
        let b = "쓰지" ;
        const c= "마세요" ;
    --
        if(event===1){
             let b = "적어도" ; 
            const c = "되나" ; 
        console.log(a,b,c);
    }
    //let과 const는 블록레벨 변수라 if문에서 다시 선언해도 문제없이 출력된다.
    --
    console.log(a,b,c)
}

-> event에 1이 아닌 다른게 들어가면 [아무거나 쓰지 마세요]가 출력되겠지만, 1이 들어가게 되면 [아무거나 적어도 되나 , 아무거나 쓰지마세요] 두개가 출력된다. 하나의 함수안에서 변수의 이름을 같게 했음에도 문제 없이 출력되는 이유는 조건문의 블록 안의 변수는 조건문의 블록 안에서만 일을 하기때문이다.
또한 a는 함수의 모든곳에서 관여하기때문에 조건문안에 a를 선언하지 않아도 콘솔에 띄울 수 있는것이다.

2. 함수

1.함수 선언식

function func1(){ ... }

2.함수 표현식

let func2 = function func(){ ... }
//func = 함수이름 _ 생략 가능하다.

3.화살표 함수(함수 표현식 축약형)

let func3 = () => { ... }

• 모든 ()안에는 당연히 매개변수가 들어감

3. 클래스

• 객체단위로 코드를 그룹화, 쉽게 재사용하기 위해 사용

  1. class의 구성
     • 객체를 정의하기 위한 상태 + 실행할 함수

       class Cat{ constructor(){ 객체를 정의하기 위한 상태}  //생성자 함수 
       			   func(){ ... } //실행할 함수 
       		}

• 실제로 어떻게 사용되는지 예를 통해 알아보자

  --- 클래스를 생성한다.
  class myFamily {
          constructor(name){ this.name = name(상태); } // this는 myFamily를 가르킨다. 
          showName(){
                      console.log(this.name)
                          }    
  		}
   --- 클래스에 값을 넣는다.
   let myFmly = new myFamily("정혜원")  
   // 넣을 값 = 우리가족 이름, 
     new는 클래스를 생성해서 새로운 객체를 만들때 사용(새로운 값을 넣을때)  
   ---클래스 안의 값 불러오기
   myFmly
  ->{name : 정혜원}
  //클래스에 저장된 객체들은 딕셔너리 형태로 보여진다.
    클래스는 직접 불러 오지 못하므로 변수로 선언해서 변수를 불러와야 한다.

• class에 여러가지 정보를 저장하고싶을땐 어떻게 하지?

  class myFamily {
          constructor(name , age){ this.name = name(상태1); 
          		   	 this.age = age(상태2);
                              	} 
          // 매개변수를 다중 매개변수로 넣어주고 상태()를 추가해주면 됨                       
          showName(){
                      console.log(this.name,this.age);
                      //실행할 함수에도 상태2에 대한걸 끌어오면 됨
                          }    
  		}
   --- 클래스에 객체 저장하고 불러오기
   let Fmly = new myFamily("정혜원",25)
   Fmly
   ->{name : 정혜원 , age : 25}

• 정보들을 많이 저장하는 api에 사용해도 좋을 것 같다는 생각이 드나 아직 코린이기에 확실히 적지 않겠다.

4.등호의 사용

• = 는 할당을 할때 사용한다.
• == 비교할때 사용한다.
• === 비교할때 사용한다.
  • ==보다 엄격한 비교를 할때 사용한다.(묵시적 형변환 인정x)
    즉 자료형까지 맞춰서 깐깐하게 살핀다는 뜻

5. spread 문법

• 딕셔너리나 배열같은 껍데기가 있는 것들의 껍데기를 벗겨주는 역할을 한다.

  • ... 을 사용하여 벗김

    let arr = [1,2,3,4,5]
    let arr2 = ["일","이"]
    let arr3 = [...arr,...arr2]
    arr3 : [1,2,3,4,5,"일","이"]

6. 조건부 삼항 연산자

• return 안에는 if문을 사용하지 못한다.
• return 안에 조건문을 삽입하고 싶을때 조건부 삼항 연산자를 사용한다.

  • let a = 조건식 ? 참 반환값 : 거짓 반환값

    let cds = is===5 ? 3:4;
    // is===5 -> 조건부
    참일경우 3
    거짓일경우 4 
    // ' ? '를 기준으로 앞쪽은 조건부 뒤쪽은 반환되는 값.
      ' : '을 기준으로 앞쪽은 참일때 뒤쪽은 거짓일때 반환되는 값.

배열의 내장함수

• 자바 스크립트에는 두가지 타입의 객체가 있다.
  • 배열 : 대표적으로는 배열과 딕셔너리같은게 있다.
  • 유사배열 : 대표적으로 HTML의DOM 같은게 있다.
• 내장함수는 배열에서만 사용할 수 있다.
  따라서 우선 배열이 선언되어있어야 한다.

1. map

• 배열의 요소를 가공할때 사용한다.

  • let b = a.map((a 배열의 요소) => { ... })
    map 괄호 안에는 화살표 함수가 쓰임

    let arr = ["고양이","강아지","고릴라"]
    ---> 배열의 요소에 "검은"을 추가 가공하고싶다.
    let newArr = arr.map((arr_item) => {  
    			return "검은 "+arr_item    
               		//arr_item 은 arr의 요소를 가리킴
    			})
    --->배열을 반환해보자
    newArr
    ["검은 고양이","검은 강아지","검은 고릴라"]
    arr
    ["고양이","강아지","고릴라"]
    // 원본배열을 유지하고 새로운 배열을 생성시킴

    이런식으로 배열안의 요소에 무언갈 가공하고싶을때 사용

2. filter

• 특정 조건을 만족하는 배열의 요소를 뽑아오고 싶을 때 사용

  • let b = a.filter((a배열의 요소) => { ... })

    let arr = ["검은 고양이","강아지","고릴라","하얀 고양이", "조랑말","치즈 고양이"]
    ---> "고양이" 단어를 포함한 요소들만 따로 뽑아 모아두고싶어 
    let newArr = arr.filter((arr_item) => {  
    			let Cat = arr_item.indexOf("고양이");
    			if(Cat != -1){
               			return Cat}
               		//arr_item 은 arr의 요소를 가리킴
    			})
    --->배열을 반환해보자
    newArr
    ["검은 고양이","하얀 고양이","치즈 고양이"]
    arr
    ["검은 고양이","강아지","고릴라","하얀 고양이", "조랑말","치즈 고양이"]
    // 원본배열을 유지하고 새로운 배열을 생성시킴

• 사실 삼항 연산자 써보려고 했는데 실패 ...ㅋ 어차피 return값 안에서 조건문을 사용하는게 아니라 괜찮긴 하다.
• 나온김에 끼워가는 메소드 하나
  • 특정 문자열이 포함되어있는지 검사하는 메소드
  1. .contain("") : true/false 반환
  2. .indexOf("") : 포함위치 반환(없으면 -1 반환)
  3. .matches("") : true/flase 반환

3. concat

• 두 배열을 합치고 싶을 때 사용한다.

  • let concatArr = arr.concat(arr2)
    1. conacatArr은 두 배열을 합친 배열
    2. arr은 합칠때 기준이 되는 배열
    3. arr2는 arr과 합쳐질 배열
    4. concat은 중복요소 제거하는 기능은 없음

4. from