2022.01.29 - javascript (1)

패스트캠퍼스 초격차 

javascript 특이사항만 정리하기!! 

 

* 대부분 const 사용, 재할당이 필요하면 let 사용 

 

- 예약어 :  특별한 의미를 가지고있어서 변수나, 함수의이름으로 사용 불가능한 것 

 1) this

 2) if

 3) break 

 

- 함수 :  특정 동작(기능을 수행하는 일부 코드의 집합(부분) function 

function helloFunc(){

  ==> (명령) console.log(1234);  

 }

 

 

let a = 2;
let b = 5;
console.log(a+b);

/* const 재할당 불가 */

function hello(){
    console.log(1234);
}
hello();

function returnFunc(){
    return 123; 
    /* 123을 밖으로 꺼내 반환해준다. */
}
let ab= returnFunc();
console.log(ab);

// 함수 선언 
function sum (a01, b01){ // a01 과 b01 은 매개변수(parameter)
    return a01+b01;
}
let aa = sum(1,2); 
let bb = sum(7,13);
let cc = sum(2,4);

console.log(aa,bb,cc);

// 기명함수 (이름이 있는 함수) 
// 함수 선언 
function hello1(){
    console.log('hello~~');
}

// 익명함수 (이름이 없는 함수 )
// 함수 표현 (변수에 할당해서 사용 )
let world = function(){
    console.log('World~~');
}
// 함수 호출 
hello1();
world();

//객체 데이터 
const info = {
    name: 'hyohyo',
    age: 29,
    // 메소드(method): 객체데이터 내부에 함수라는 데이터 하나가 들어있는것을 메소드라고 부른다. 
    getName: function(){
        return this.name;
    }
 
};
// 호출방식(1)
const herName = info.getName();
console.log(herName);
// 호출방식(2)
console.log(info.getName());

// DOM API

// DOM API

//let boxEl = document.querySelector('.box');
//console.log(boxEl);

//html 요소(element) 1개 검색/찾기 
const boxEl = document.querySelector('.box');

//HTML 요소에 적용할 수 있는 메소드 
boxEl.addEventListener();

//인수(arguments)를 추가 가능 
boxEl.addEventListener(1,2);

//1. event (event, 상황)
boxEl.addEventListener('click',2);

// 2. handler(handler, 실행할 함수)
boxEl.addEventListener('click',function(){
    console.log('click~!');
});

 

// DOM API

let boxEl = document.querySelector('.box');
console.log(boxEl);

boxEl.addEventListener('click',function(){
    // 클릭 누르면 숫자 올라감 
    console.log('click!!!');
  boxEl.classList.add('active');
  console.log(
      boxEl.classList.contains('active')
      );
      boxEl.classList.remove('active');
      console.log(
          boxEl.classList.contains('active')
      );
});

const boxEls = document.querySelectorAll('.box');
//(1)box라는 요소를 전부 (All) 찾아서 boxEls 변수로 할당했고 
console.log(boxEls);

//찾은 요소들 반복해서 함수 실행 
// 익명 함수를 인수로 추가 
boxEls.forEach(function(boxEl, index){
    //(2)foreach를 통해서 해당 내용을 반복적으로 수행한다. 
    // 익명의 함수는 한번 실행할때마다 매개변수로 로직을 추가할 수 있고 반복적인 요소가 들어있고 클래스를 추가해 사용한다ㅣ )
    // 첫번째 매개변수(boxEl) : 반복중인 요소. 
    // 두번째 매개변수(index) : 반복중인 번호.
    boxEl.classList.add(`order-${index+1}`)
   console.log(boxEl,index);
});

 

/ 메소드 체이닝 (체인처럼 연결되어있다 )
// split : 문자를 인수 기준으로 쪼개서 배열로 반환 
// reverse : 배열을 뒤집기 
// join : 배열을 인수 기준으로 문자로 병합해 반환. 

// Getter , 값을 얻는 용도 
//console.log(boxEl.textContent);

// Setter, 값을 지정하는 용도 
//boxEl.textContent = 'hyoeun';
//console.log(boxEl.textContent);

// //html 요소(element) 1개 검색/찾기 
// const boxEl = document.querySelector('.box');

// //HTML 요소에 적용할 수 있는 메소드 
// boxEl.addEventListener();

// //인수(arguments)를 추가 가능 
// boxEl.addEventListener(1,2);

// //1. event (event, 상황)
// boxEl.addEventListener('click',2);

// // 2. handler(handler, 실행할 함수)
// boxEl.addEventListener('click',function(){
//     console.log('click~!');
// });