javascript_html과 연동하기

javascript

• 자바와는 별개의 언어이다.
• HTML 구조에 상관없이 (한번에 하나씩)요소를 선택할수 있다.
• 모든 요소를 버튼화 시킬수 있다. - onclick
• css 적용시 인라인 방식으로 적용된다.
  끝날때마다 ;

use strict 모드 - 엄격 모드

• 자바스크립트가 버전 업그레이드 되면서 새로운 기능들이 추가가 되겠지만 이전 기능들도 살아 남았다.

• 기존 기능들이 계속 동작하도록 하려다보니 간단한 문법상 오류가 있어도 에러 없이 자바스크립트에서 처리를 해준다.

• 얄짤없이 문법적으로 오류가 나면 일단 에러나도록 해주는 지시자

• 금융권에서 주로 쓰이며, 그 외에는 잘 쓰이진 않는다.

• use strict 를 쓰면 현대적인 방법으로 동작하게 할 수 있다.
  "use strict";

• 스크립트 최상위에 명시해야함

  "use strict";
  
  // 아래 코드는 키워드(let) 없이 선언했음.
  // 옛날에는 괜찮았지만 let, var, const 로 나뉘면서 잘못된 문법으로 취급.
  num = 5;
  console.log(num + 10);
  
  // 매개변수의 이름이 같으면 엄격모드에서는 에러 표시 
  function tmp(num1,num1) {
      let num1 = 1;
      num1 = 2;
  }
  tmp(1,2);

• 010 사용이 안됨. 8진법 숫자이기 때문에 오류.
  let ttt = 010 + 1111 + 2222;

요소잡기

• javascript에서 제일 중요

• 스크립트 구문 하나당 요소 하나씩만 건드릴 수 있음.

• 클래스, 태그는 배열의 형태로 가져온다.

• css 적용시 인라인 방식으로 적용된다.

• id, class, tag 무엇으로 잡던지 우선순위 이제 없다.
  순서대로 적용돼서 결국 마지막에 적용한 것이 결국 적용된다.

  //현재 문서 안, 요소들 중에 ID가 box1인 요소 잡기
  //그 안의 style 속성 잡아서 그 background에 red라는 값 넣기.
  document.getElementById('box1').style.backgroundColor = "red";
  
  //현재 문서 안, 요소들 중에 class가 box인 요소들 중에 x번째꺼 하나 잡기
  //js는 한 라인에 하나만 건들일 수 있음! (여러개 건들일 수 있는 것은 jquery와 querySelector뿐.)
  document.getElementsByClassName('box')[1].style.background = "blue";
  document.getElementsByTagName('div')[1].style.background = "green";
  
  -> green
     스크립트는 싸우지 않는다. 그냥 덮어 쓴다. 

• 스크립트에서 두번째 단어부터 첫글자는 대문자로
  ex) backgroundColor, marginTop

• 사용 방법
  get ElementBy~시리즈가 더 빠르다.

  1. document.getElementById('아이디명')

  2. document.getElementsByClassName('클래스명')[방번호]

  3. document.getElementsByTagName('태그명')[방번호]

     ---

  4. document.querySelector('')

     • 특정 요소들 중에서 맨 첫번째꺼만 잡는다.
       getElementById 같은 것
     • 선택자 부분에 #(id)이나 .(class)을 써서 무엇인지 명시.
     • 한 번 잡으면 밑에 요소들 안쳐다보고 끝남.

  5. document.querySelectorAll('')[방번호]

     • 배열 형태로 요소들을 잡는다. 방번호 필수
       getElementByClass 같은 거
     • 선택자 부분에 #(id)이나 .(class)을 써서 무엇인지 명시.

document.getElementById('parent').style.border = "1px solid";
document.getElementById('parent').style.backgroundColor = "skyblue";
document.getElementById('parent').style.boxSWhadow = "0 0 5px 0 #000";

let parent = document.getElementById('parent');
parent.style.border = "1px solid";
parent.style.backgroundColor = "skyblue";
parent.style.boxSWhadow = "0 0 5px 0 #000";

• 위와같은 코드가 있을 때 첫번째보다 두번째로 코드가 더 효율적이다.
  1. document안에 parent라는 아이디를 가진 요소를 가져와서 테두리인 스타일을 적용해라
     위 내용 보단 변수에 parent 주소값 넣어놓고
  2. parent주소 가져와서 테두리인 스타일을 적용해라
     가 더 짧기 때문이다.
• style까지 잡지 않고 요소만 잡는다. 그것이 요소를 이리저리 건들이기 수월하다.
  특히 value까지 잡게 되면 해당 요소의 value값만 저장하기 때문에 해당 요소를 전혀 건드릴 수 없다.

본인 기준 이전, 다음 요소 잡기

• 요소
  • 우리 눈에 보이는 DOM구조 그대로 인식하면 됨.
  • 이전요소 : 요소.previousElementSibling
  • 다음요소 : 요소.nextElementSibling
• 노드

  • 빈칸들도 노드로 치기 때문에 사용하기 애매함.

  • 자식 노드들 다 찾기 : childNodes

  • 이전노드 : 노드.previousSibling

  • 다음노드 : 노드.nextSibling

    <div id = "parent">
    		<div id = "child00"></div>
    		<div id = "child01"></div>
    		<div id = "child02"></div>
    </div>
    
    child01.previousElementSibling; -> child00
    child01.previousSibling; -> 빈칸잡음
    child01.previousSibling.previousSibling; -> child00

부모 / 자식 요소 잡기

• 자식 요소 개수 : childElementCount
• 자식이 부모 잡기
  자식요소.parentElement
• 부모가 자식 잡기
  부모.firstElementChild
부모.lastElementChild

출력

• 요소 내부에 출력을 하는 방법
  1. innerHTML
     • 여닫는 태그가 있는 요소에서 사용 가능
     • 실제 html태그 코드처럼 인식해서 넣어줌. (일반 텍스트도 입력 가능.)
       document.getElementById('box1').innerHTML = "<h1>aa</h1>";
  2. innerText
     • 여닫는 태그가 있는 요소에서 사용 가능
     • 일반 텍스트처럼 인식해서 넣어줌.
       document.getElementById('box1').innerText = "aa";
  3. value
     • input에서 사용 가능
       document.getElementById('txt1').value = "aa";