2023-06-29 TIL (JavaScript 입문 시작)

JavaScript 입문 과정을 시작했다. 자바스크립부터 시작!

• 프로그래밍 = 컴퓨터에게 일을 시킨다.

document -> 문서인데 여기선 html 웹문서
마침표(.) -> ~의 
getElementById('어쩌구') -> 아이디가 '어쩌구'인 html 요소 (일명 element) 를 찾으셈 
innerHTML -> 딱봐도 그냥 내부 HTML이라는 뜻
= -> 등호는 프로그래밍에서 오른쪽에 있는걸 왼쪽에 대입하라는 뜻
'바보' -> 바보라는 문자 (큰따옴표, 작은따옴표안에 담겨있으면 항상 문자입니다.)

ex) document.getElementById('???').??? = '???'; 

• .getElementById()는 셀렉터라고 부릅니다. html 요소를 찾기 위해 사용합니다.

• .innerHTML / .style / .color 이렇게 점찍는데 괄호없는건 메소드(또는 함수) 라고 부릅니다.

기본적인 UI 만드는 법칙

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김
2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짬

• css 중 display : none은 숨김 / display: block은 보임

• 함수명 영어작명시엔

  1. 소문자 시작
  2. camelCase

• JavaScript 적용 시
  1. 조작할 html의 하단에 코드 짜야 잘 됨
  2. 셀럭터 오타 주의

• 함수는 길고 더러운 코드 한 단어로 축약하고 싶을 때 쓰는 문법.

특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법

    function alertOpen(구멍) { 
      document.getElementById('alert').style.display= 구멍;
    }
// 여기에서 얘기하는 구멍은 파라미터 이다. 

• 클릭
  키입력
  스크롤
  드래그
  -> event임

파라미터 자리에 들어가는 함수가 콜백함수이다.

: 코드를 순차적으로 실행할 때 쓰인다.

document.getElementById('close').addEventListener('click', function () {});

• class 부착식으로 개발하면
  1. 애니메이션 추가 쉬움 2. 나중에 재사용 편리

• 셀렉터들
  getElementById()
  getElementsByClassName()
  querySelector()
  querySelectorAll()

document.querySelector() 
ㄴ 위에 꺼 하나만 찾아줌. class는 '.list-group' id는 '#test1' 이다. 
document.querySelectorAll()
ㄴ 해당하는 요소를 전부 찾아줌. [0]과 같은 인덱싱으로 정함. 

• 거의 모든 자바스크립트 라이브러리는 끝나기 전 넣는거 권장
  ㄴ jquery는 헤드 아래에 넣어서 적용. Script에 적용이 되어야 함

jQuery 관련 내용 다수

$ 이건 querySelector와 동일하게 사용.
$('어쩌구').innerHTML 이건 안된다는 소리.

addEventListener 대신 on 쓰면 같다.
on은 $() 이걸로 찾은 것들에만 붙일 수 있다.

$('#close').click(function () {
          $('.black-bg').hide() // display : none; 과 같은 효과 
        })
$('.login-open').click( function (){
          $('.black-bg').show() // display : block; 과 같은 효과 
        })