220704.til

Universe·2022년 7월 4일

목록 보기

9/49

여러가지 복습 겸 정리

💡 선택자

기본적으로 자바스크립트는 웹에서 '동작'을 만들어주는 기능을 하기 때문에
특정 무언가를 '선택' 해주어야 한다.
자바스크립트에 정말 여러가지 선택자가 있는데
보통은

document.getElementsByClassName('클래스명')[순서]; // 순서는 위로부터 몇번째인지 표시
document.getElementsByTagName('태그명')[순서];
document.getElementById('ID명');

처럼 getElementBy$$ 함수를 쓰거나

document.querySelector('자유'); //.class, #id, tag
document.querySelectorAll('자유');

처럼 querySelector 함수를 쓴다.
querySelector 함수가 범용성이 좋아서 자주 쓴다는 듯.
여러가지 비교글을 봐도 서로의 차이는 크게 없고
(ElementBy 태그가 더 빠르고 지원이 잘 된다고 하긴 하지만)
대부분 취향차이라고 한다.
참고할 내용 querySelector 정리

💡 function()

쉽게 생각해서 특정 기능을 다음에도 쓰기 위해 저장해놓는 문법

function 함수이름(파라미터) { // 함수이름은 함수이름짓기 규칙을 따름
  	축약할 코드			   // 파라미터 이름은 자유롭게 지을 수 있고 2개 이상 사용가능
}

💡 가상 클래스 선택자

css 요소인데 선택자 뒤에 :가상 선택자를 붙히면 여러가지 효과를 줄 수 있다.

:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식

💡 addEventListener

선택한 요소의 event 를 감지.

document.querySelector('선택').addEventListener('이벤트', function(){}

이벤트리스너는 둘째 파라미터로 function() 함수가 들어가게 되는데
파라미터 자리에 들어가는 함수를 callback 함수 라고 한다.
어떤 이벤트가 발생한 후, 수행될 함수를 의미. 순차적으로 실행한다고 생각하면 되는 듯?
callback 함수에 대해서 좀 더 찾아봤는데 이해가 잘 가지 않았다.
나중에 지식이 좀 더 쌓이면 참고할 문서 callback

💡 기본 UI 만드는 법칙

html / css 로 미리 UI 디자인을 해놓고 숨김처리(display:none, visibility:hidden)
특정 이벤트(click,hover) 발생시 UI 를 표시(display:block, visibilty:visible)

⭐️ UI Animation 만드는 방법

첫번째 UI 디자인을 만든다
최종 UI 디자인을 만든다
특정 이벤트 발생시 첫번째 UI 디자인이 최종 UI 디자인으로 변경
첫번째 UI 에 transition 옵션을 추가한다

💡 form [input]

form 요소는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 설정한다.
쉽게 말해서 유저네임이나 패스워드를 전달받는 등의 사용자와 소통하는 대화창구 같은 역할.
그래서 input 태그를 주로 이용한다.

input type
text: 일반 문자
password: 비밀번호
button: 버튼
submit: 양식 제출용 버튼
reset: 양식 초기화용 버튼
radio: 한개만 선택할 수 있는 컴포넌트
checkbox: 다수를 선택할 수 있는 컴포넌트
file: 파일 업로드
hidden: 사용자에게 보이지 않는 숨은 요소

그밖에도 css6 까지 오면서 여러가지 업데이트가 됐다고 한다. Form 총정리

💡 조건문을 이용한 간단한 알고리즘 문제

369 게임을 만들어보자
조건1. 숫자의 끝에 3,6,9가 들어가면 '박수'를 출력
조건2. 그렇지 않다면 숫자를 그대로 출력

function threeSixnine(n){
	if(n % 10 === 3 || n % 10 === 6 || n % 10 === 9){
      console.log('clap');
    } else {
	  console.log(n);
    }
}

시험 점수 두 과목을 입력받아 합불을 판단한다.
조건1. 두 과목 합이 120점 이상이면 합격
조건2. 한 과목이라도 40점 미만이면 과락
조건3. 입력한 점수가 100 이하의 정수가 아니라면 경고창을 표시

function test(i, j){
	if((i > 0 && i < 101) && (j > 0 && j < 101)){
		if((i + j > 119) && (i > 39 && j > 39)){
			console.log('합격');
        } else {
          	console.log('불합격');
        }
    } else {
      alert('잘못된 숫자를 입력하셨습니다');
    }
}