[JS] 자바스크립트

📍 Symbol()함수

: 객체의 자료 중 유일한 키값을 부여하고 싶을 때 사용하는 함수
: 키 값을 새로 지정해줘도 바뀌지 않고 추가

• 심벌 값은 외부로 노출되지 않아 확인 할 수 없음
  

• 심벌 값에 대한 설명이 같더라도 유일한 심벌 값을 생성함
  

• 심벌 값은 문자열이나 숫자 타입으로 변환되지 않는다.

📍toFixed() : 소수점 반올림

예시)

let f = prompt("화씨온도");
let c = ((parseInt(f) - 32) / 1.8).toFixed(1);

document.write(`화씨 ${f}도는 섭씨 ${c}도 입니다`);

📍제어문-반복문for

for in / forEach / for of

• for in : 일반 객체에서 객체 안에 있는 프로퍼티(key : value)을 가져와서 반복 시킬 때

const bookInfo = {
  title: "자바스크립트",
  pubdate: "2023-04-11",
  pages: 272,
  finished: true,
};

for (let i in bookInfo) {
  document.write(`${i} : ${bookInfo[i]} <br/> `);
}

• forEach : 배열 객체에서 각각의 요소들을 꺼내서 반복시킬 때

const fruits = ["apple", "grape", "peach", "lemon"];

fruits.forEach(function (e) {
  document.write(`${e}, `);
});

• for of : 문자열 혹은 (주로) 배열 객체에서 반복시킬 때

const students = ["park", "kim", "lee", "kang"];
for(let el of students){
    document.write(`${el}, `);}

📍 함수

• 즉시실행함수 : 함수를 정의하면서 동시에 실행
  (function(매개변수){}(인자값));

function(a,b){
	let sum = a+b;
    console.log(`함수 실행 결과 : ${sum}`)
    }(100,200)); //함수 실행 결과 : 300

• 화살표 함수

1. 매개변수 없을 때

let hi = function(){return `안녕`};

-> let hi = ()=>{return `안녕`};

-> let hi = ()=>`안녕`;

2. 매개변수 존재할 때

   • 매개변수 하나

   let hi = function (user) {
   console.log(`${user}님 안녕하세요`);
   };
   hi("김철수");
   
   -> let hi = user => console.log(`${user}님 안녕하세요`);
   hi("김철수");
   

   • 매개변수 두개 이상

   let hi = function (user) {
   console.log(`${user}님 안녕하세요`);
   };
   hi("김철수");
   
   -> let hi = user => console.log(`${user}님 안녕하세요`);
   hi("김철수");
   

• 콜백함수

const btn = document.querySelector("button");

	function display() {
  	alert("클릭함");
	}

	btn.addEventListener("click", display);

• 시간함수 (1000ms = 1s)
  setInterval(콜백함수, 시간) : 일정시간마다 함수 반복해서 실행하는 함수
  clearInterval(콜백함수)
  setTimeout(콜백함수, 시간) : 일정시간 지난 후 실행
  clearTimeout(콜백함수)

📍isNaN() : 매개변수가 숫자인지 아닌지 검사하는 함수

숫자가 아니면 true 숫자이면 false

예시)사용자에게 숫자를 받아서 해당 숫자를 함수로 넘겨주고 해당 함수에서는 숫자가 양수인지 음수 인지 또는 0인지 판단해서 알림창으로 표시
1.사용자로부터 숫자 받기
2.숫자일 경우에만 함수 실행
3. 양수,음수,0 조건에 따라 메시지 다르게 출력

let num = parseInt(prompt("숫자"));

if (!isNaN(num)) {
  isPositive(num);
}

function isPositive(num) {
  if (num > 0) {
    alert(`${num}는 양수`);
  } else if (num == 0) {
    alert(`${num}는 0`);
  } else {
    alert(`${num}는 음수`);
  }
}

---

📍DOM : 문서 객체 모델

• 요소에 접근할 수 있는 함수

1)querySelector() : 단일 요소 접근 (해당 선택자안에 다수 존재하는 경우, 가장 첫번째 요소에 접근) / querySelectorAll() : 모든 요소 접근

=> 속성 노드 및 텍스트 노드까지 접근 가능

2)getElementById ( ) / getElementByClassName ( ) / getElementByTagName ( )

=> 태그 노드까지만 접근 가능

💡 getElement와 querySelect의 차이점

• HTMLCollection는 실시간으로 노드 객체의 상태 변경을 반영
• NodeList는 실시간으로 노드 객체의 상태변경을 반영하지 않음
  
  css 선택자 문법을 사용하는 querySelector 메서드는 좀 더 구체적인 조건으로 요소 노드를 취득할 수 있고 일관된 방식으로 요소 노드를 취득할 수 있음
  ➡ id가 있는 요소 노드를 취드하는 경우 getElement메서드 사용하고 그 외는 querySelect를 사용하는 것을 권장

3) .innerText / .innerHTML /.textContent

• 웹 요소.innerText : 웹 브라우저 화면에 출력되고 있는 내용을 속성값으로 가지고 옴(안보이는건 안가져옴)
• 웹 요소.innerHTML : 소스 코드 안에 들어 있는 내용을 가지고 옴 → 태그까지 불러옴
• 웹 요소.textContent : 안에 들어가는 요소들을 보여주지만 .innerHTML보다는 덜 자세하게 보여줌 → 태그 불러오지 않음

+)요소 데이터 수정시

• 웹 요소.innerText = 바꾸고 싶은 내용
• 웹 요소.innerHTML = 바꾸고 싶은 내용
• 웹 요소.textContent = 바꾸고 싶은 내용

4) css 속성 접근 & 수정

수정하고 싶은 요소.style.속성명 = 바꾸고 싶은 스타일 값

5).classList

• 선택한 선택 요소에 클래스명을 추가 : 선택한 선택요소.classList.add(”클래스명”)

• 선택한 선택 요소에 클래스명을 삭제 : 선택한 선택요소.classList.remove(”클래스명”)

• 선택한 선택 요소에 클래스명이 있는지 여부를 확인 : 선택한 선택요소.classList.contains(”클래스명”)

• 선택한 선택요소에 클래스명이 있는지 여부를 확인하여 추가 및 삭제를 반복하는 함수: 선택한 선택요소.classList.toggle(”클래스명”);

*add+remove

const title = document.querySelector("#title");

title.onclick = () => {
  if (!title.classList.contains("clicked")) {
    title.classList.add("clicked");
  } else {
    title.classList.remove("clicked");
  }
};

*toggle

const title = document.querySelector("#title");

title.onclick = () => {
  title.classList.toggle("clicked");
};

6)input필드에 입력한 값 가져오기

선택요소.value
만약 id값과 class값이 없다면 name을 활용해 가져올 수 있음

<form name="submit">
     <legend>신청인</legend>
     <label for="name" class="field">이름</label><input type="text" class="input-box" id="name" name="name" />
</form>

7) option 값 가져오기

<label for="opt">학과</label>
     <select name="option" id="option">
         <option>====학과선택====</option>
         <option value="opta">건축공학과</option>
         <option value="optb">기계공학과</option>
         <option value="optc">산업공학과</option>
         <option value="optd">전기전자공학과</option>
         <option value="opte">컴퓨터공학과</option>
         <option value="optf">화학공학과</option>
     </select>

8) 기존에 없던 새로운 노드 추가

• document.createElement(생성하고 싶은 요소) : 요소 노드 만들기

• document.createTextNode(생성하고 싶은 텍스트) : 텍스트 노드 만들기

• 부모노드.appendChild(자식노드) : 해당 자식노드를 부모노드에 자식으로 넣는다

  *주문하기 버튼 클릭 시 .orderInfo에 상품명 출력

  <div id="container">
        <h1>상품설명</h1>
        <h2>2023신상 에어맥스 풀파워</h2>
        <p>최신 에어폼 탑재</p>
        <p>트렌디한 컬러 및 디자인</p>
        <button id="order">주문하기</button>
   </div>
   <div id="orderInfo"></div>

  const product = document.querySelector("h2");
  const order = document.querySelector("#order");
  const orderInfo = document.querySelector("#orderInfo");
  
  order.addEventListener("click", () => {
    let newp = document.createElement("p");
    let textNode = document.createTextNode(product);
    newp.appendChild(textNode);
    orderInfo.appendChild(newp); //[object HTMLHeadingElement]
  });

  1. p태그 생성(newp) + 상품명 텍스트 노드 생성(textNode)
  2. textNode는 newp의 자식으로 추가
  3. newp는 orderInfo의 자식으로 추가

  But!
  
  ⇒[object HTMLHeadingElement]만 출력 -> html 태그 요소만 불러옴
  태그 속 텍스트 요소까지 불러오려면 .innerText 사용

  const product = document.querySelector("h2");
  const order = document.querySelector("#order");
  const orderInfo = document.querySelector("#orderInfo");
  
  order.addEventListener("click", () => {
    let newp = document.createElement("p");
    let textNode = document.createTextNode(product.innerText);
    newp.appendChild(textNode);
    orderInfo.appendChild(newp); //[object HTMLHeadingElement]
  });

  

• createAttribute() : 속성 노드 만들기

• setAttributeNode() : 속성 노드 연결하기

• insertBefore(앞에 추가하고자 하는 요소, 기준점이 되는 요소 ) :기존 노드의 앞에 새 요소로 추가하고자 할 때 사용하는 메서드 함수
  ※ appendchild는 무조건! 부모요소의 마지막위치로 자녀를 추가함
  *insertBefore는 원하는 위치에 추가 가능!
  

9)노드 삭제

• 삭제하고자하는 요소.remove( ) : 선택된 요소 및 노드 자체를 삭제

• removeChild( ) : 선택된 요소 및 노드의 자녀노드를 삭제

  +)자식노드.parentNode ⇒ 해당 자녀노드의 부모노드를 찾음
  +) this 사용시 화살표 함수 사용하면 안됨
  ⇒화살표 함수 안에 들어가게 되면 선택한 요소를 지칭하지 않음(window 객체를 가르킴)

    const items = document.querySelectorAll("li"); //노드 리스트 배열로 출력
  
  for (let item of items) {
    item.addEventListener("click", function () { //화살표 함수로 썼을 땐 작동 안됨
      this.parentNode.removeChild(this);
    });
  }
  

📍이벤트

1. <태그 이벤트핸들러 = "함수">
   <button></button>
   ⇒ 복수의 이벤트 적용 불가능
2. 선택요소.이벤트핸들러 = 함수
   btn.onclick = function(){}
3. addEventListener
   ⇒ 복수의 이벤트 적용 가능!!

이벤트 전파

◾ 이벤트 버블링
: 이벤트가 상위 요소로 전파 / 한 요소에 이벤트가 발생하면, 핸들러 동작하고 이어서 부모 요소의 핸들러 동작-> 최상단 조상 요소를 만날 때까지 과정 반복
◾ 이벤트 캡처링
: 이벤트가 하위 요소로 전파

📍내장객체

• window.close()
• window.open()
• location.reload()

*내장 객체 활용한 popup창

Date객체

let today=new Date()

let today = new Date();
let nowMonth = today.getMonth() + 1;
let nowDate = today.getDate();
let nowDay = today.getDay();

document.write(`현재 월 : ${nowMonth} /`);
document.write(`현재 일 : ${nowDate}`);

⇒ '월'은 인텍스값이 0부터 시작하기 때문에 +1을 해줘야함!

• toDateString() : date에서 날짜 부분만 표시할 때
• toTimeString() : date에서 시간 부분만 표시할 때

수학객체

let num = 2.1234;

let maxNum = Math.max(10, 5, 8, 30); //최대
document.write(maxNum, "<br/>");


let minNum = Math.min(10, 5, 8, 30); //최소
document.write(minNum, "<br/>");


let roundNum = Math.round(num); //반올림
document.write(roundNum, "<br/>");


let floorNum = Math.floor(num); //내림
document.write(floorNum, "<br/>");


let ceilNum = Math.ceil(num); //올림
document.write(ceilNum, "<br/>");


let randomNum = Math.random();
document.write(randomNum, "<br/>"); //랜덤


let piNum = Math.PI; //원주율
document.write(piNum, "<br/>");

사용자 정의 객체

- 객체명{
    key : value,
    key : value,
    }

• 객체 값 불러오기
  
• 객체에 키:값 추가하기
  
• 삭제하기 delete ⇒ key:value 모두 삭제
  
• 삭제하기 ⇒ value 값만 삭제
  
• 중첩 객체

let student = {
  name: "yoo",
  score: { //객체 중첩
    history : 85,
    science : 94,
    average : function(){
      return (this.history + this.science) /2
    }
  }
};

let book4 = {
  title: "js",
  pages: "500",
  author: "장",
  done: true,
  finish: function () {
    this.done == false ? console.log("읽는 중") : console.log("완독"); //this = book4
  },
};