오늘 내가 얻은것이 무엇일까??

오늘은 일요일. 공부하는 시간이 즐거운 시간.

const element = document.getElementById('one');

element.className = 'blue';

이거 자체로 신난다!! id를 주었던 element를 class로 바꿔 넣어줄 수 있다니! 좋다. 알아두고 넘어가자.

자바스크립트의 함수는 객체다. 객체는 프로퍼티를 가질수있다.

function 주체(name, home, age){
  this.name = name;
  this.home = home;
  this.age = age;
}

주체.prototype.sum = function(){}

let kim = new 주체('kim', true, 20)
let lee = new 주체('lee', false, 10)
console.log(kim.name)

내가 만약 주체라는 객체를 생성했다고 치자 그러면 주체s prototype이라는 객체가 생성되고 서로 연관되고 관련되어있다(즉, 연결되어 있다). 연결되어지는 방법은 생성한 객체(주체 함수)에 프로토타입이라는 프로퍼티(속성)가 생기고 그 프로퍼티의 안에는 주체s prototype이라는 생긴것이 같은 함수가 참조되어있다. 대신 그 주체s prototype 함수안에는 constructor(생성자)라는 프로퍼티가 만들어지고 그 프로터티의 값으로는 처음에 만든 함수(객체)와 연결되어 지는 주소가 참조되어있다.

내가 적으면서 이해가 되는데 디게 복잡하다 내가 적은글을 다음에 봐서 이해를 하면 성공이다.

공부하다가 흐름에는 맞지 않지만 이런것이 있다는것을 알게 되었고, 이건 이해만 하고 넘어가는게 맞는것같다.

다시 기초적인 DOM 조작을 공부해보자.

addEventListener

window.onload = function() {
  let title = documnet.getElementById('main-ttile');
  console.log(title);
}
/*이런 방법보다는 최신의 방법으로 적으면 (DOMContentLoaded 를 onload로 해도된다.
로드는 전부다 로드가 될때까지 기다리고 있다가 로드가 다 되면 함수를 실행한다. 
하지만 DOMContentLoaded는 DOM의 컨텐트가 로드가 다 될때까지만 기다린다. 
element 안의 이미지나 데이터를 다 불러오기 전에 함수를 실행.*/

window.addEventListener('DOMContentLoaded', function() {
  let title = document.getElementById('main-title');
  console.log(title);
}/*, false 기본값이 false이기때문에 안 넣어도 됨*/);
//아 그리고.. script 링크가 가 body의 아래에 있다면 저런거 다 안 적어도 된다.
//그냥 아래처럼 적으면 끝난다. 왜냐면 위에서 이미 load가 다 끝났을테니까.
let title = document.getElementById('main-title');
console.log(title);

그러니 title에 script를 추가하지말고 body 맨 아래에 붙이도록 하자~!
알고 있던거지만 다시 한번 확인.

자바스크립트로 만든 SPA*는 해당하지 않는다. 그 자체로 script니까.
SPA = single page application

음 또 먼가 해보자.

let title = document.getElementById('main-title');
let titleSpan = title.getElementsByTagName('span')
console.log(titleSpan[0]);
/* titleSpan에서 method를 보면 get elements by tag name 여기서 elements라고
되어있다. 이 이유는 id처럼 하나만 지정하는게 아니기 때문에 tag가 여러개일수도 있기때문.
그리고 이렇게 불러오면 titleSpan은 유사배열이라고하는 배열형태의 값이 나온다.
유사배열이기 때문에 배열안의 값을 index 값으로 불러오는것처럼 [index number]로
불러올 수 있다.*/

순수 자바스크립트 바닐라 자바스크립트.

jquery의 의존도가 낮아지는 추세.

querySelector

let mainTitle = document.querySelctor('#main-title');
console.log(mailTitle);
// querySelctor는 id 는 # class는 . 으로 CSS처럼 불러올 수 있기때문에 더 강력하다.
// jquery 같은 느낌이지만 순수 Js라 좀 더 길다. 하지만 조건에 맞는 값 하나만 리턴.
let subTitle = document.querySelctorAll('.subTitle');//All이 붙었다
console.log(subTitle); //return 유사배열. 조건에 맞는 값 모두 리턴.
for (let i = 0; i < subTitle.length; i++) {
  subTitle[i].style.border = '1px solid red';
} // jquery 보다 번거롭지만(jquery는 for문 안써도 됨) 이렇게 가능하다.

//a tag안에 링크 가져오기
let link = document.querySelector('subTitle a');
console.log(link.getAttribute('href'));
//만약에 클래스 이름도 불러오려면 
console.log(link.getAttribute('class'));
//가져와봤으니 setting도 해보자.
link.setAttribute('href', 'https://velog.io/@ckddhks59');
console.log(link.getAttribute('href'));
//내 velog주소가 담겨있는것을 확인.

class 나 id도 재설정이 가능하겠지 그럼? ok!
getAttribute는 return값이 있는 함수일까나? yes! 그래야 콘솔창에 찍히지.
get이 들어간 메소드는 return값이 대부분 있지 않을까나.
set은 setting하잖아. 그것을 setting하는 행위 자체가 return값이지.. pass~

자 이제 class를 넣어보자.

link.className = 'special';
//기존에 class가 있다면 사라진다. className 속성의 값을 바꾼것이기때문.
//만약 원래 있던 클래스는 내버려두고 special이라는 클래스만 추가하고싶으면?
link.classList.add('special'); // 요래하면 된다. 긋~!

// 삭제도 해보자
setTimeout(function(){
  link.classList.remove('other-class');
}, 2000); // 그냥 삭제하면 심심하니 타이머 함수를 사용해봤다. 2초 뒤에 작동함.