js-bacsic

제이쿼리

• 자바스크립트를 이용한 HTML 동적처리를 좀 더 쉽게 해주는 라이브러리 언어 제이쿼리 *<title></title> 태그 다음 위치에 CDN주소 연결 필수 https://cdnjs.com/libraries/jquery

  제이쿼리 기본 문법

• $() 제이쿼리 기본 선엉법 *$('.클래스명') *$('#아이디명') *$('태그명') *'' 따옴표 안 CSS선택자처럼 원하는 대상 작성 가능
• $('대상').show(); 대상 보이기
• $('대상').hide(); 대상 숨기기
• $('대상').css('속성','값'); CSS 적용하기
• $('대상').removeClass(); class 제거하기(괄호 비우면 모든 클래스제거)
• $('대상').addClass('추가클래스명'); class 적용하기

  자바스크립트 260306

  변수

• 프로그래밍의 첫 번째 작업은 반드시 필요한 데이터들을 변수(저장소)로 저장해야 한다

  변수 작성법

• 변수선언키워드 생성변수명; -> 빈 저장소 생성
  • var box;
• 변수선언키워드 생성변수명 대입연산자 대입감ㅎ;
  • var box = 1;
• 생성변수명 대입연산자 대입값;
  • box = 2;
• 변수선언키워드: var, let, const
• 생성변수명 - 영문, 숫자조합(숫자는 영문뒤로)

  변수 작성 시 주의사항

• 변수의 이름은 문자(a~z, A~Z), 숫자(0~9), 달러($), 밑줄(_)이 포함됩니다.
• 변수의 이름은 숫자로 시작할 수 없습니다.
• 병수의 이름은 대시-나 마침표(.) 기호를 사용할 수 없습니다.
• 키워드나 예약어는 사용할 수 없습니다.
  • 키워드, 예약어 종류 -> delete, this, false, true, if, default, var, new, class 등
• 모든 변수는 대/소문자를 구별합니다. score와 Score는 다른 변수입니다!
• 변수가 저장할 정보의 종류를 표현하는 의미있는 단어를 사용해야합니다.

  변수 표기법 종류

• 캐멀 표기법
  • newName
  • webSiteCode
• 파스칼 표기법
  • NweName
  • WebSiteCode
• 밑줄 표기법
  • new_name
  • web_site_code

    객체, 속성, 메서드 작성법

• 객체; -> 객체 읽음
• 객체.속성; -> 객체의 속성을 읽음
• 객체.메서드(); -> 객체를 메서드방법으로 실행함
• 객체.속성.메서드();
• 객체.속성.속성.메서드();
• 객체.메서드().속성;
• 객체.메서드().메서드();
• 객체.메서드(메서드());

  데이터타입 구분 함수 typeof()

• CSS의 배경색상으로 영역구분하는것처럼 데이터타입 구분목적 사용
  1. 특정 데이터타입을 담아둔 변수를 생성
  • let num = 1;
  • let str = '1';
    1. 해당 변수의 데이터타입을 구분하기 위해 typeof 함수 확인
  • console.log(typeof(num)); //Number(숫자)
  • console.log(typeof(str)); //String(문자)

    연산

    피연산자가 숫자인 경우 -> 산술연산자

• a + b -> 더하기
• a - b -> 빼기
• a * b -> 곱하시
• a % b -> 나머지(왼쪽의 피연산자를 오른쪽 피연산자로 나눈 나머지이다)
• a ** b -> 거듭제곱(왼쪽의 피연산자를 오른쪽 피연산자의 값만큼 곲한 값이다)
• 계산할 수 없는 경우는 NaN 처리 ex) ‘two’ * 2 = NaN

  빼기 곱하기 나누기 연산자의 특별한 기능

• 더하기와는 다르게 빼기, 곱하기, 나누기는 따옴표로 숫자를 감싸고있더라고 알아서 숫자로 인식해서 계산함

  함수 종류

• prompt('질문') : 질문답변 창 띄우는 함수
  • input 태그로 입력받는 사용자 입력값도 모두 문자로 처리
  • 쇼핑몰의 수량 input도 문자로 기본적으로 인식됨
• Number(숫자로 변환하고싶은 데이터 또는 함수)
• prompt(Number()) X prompt 질문입력위치에 다른 함수 작성
• Number(prompt()) O Number 괄호 안은 변환대상 prompt함수작성 가능

  복합대입연산자

• += : 기존 a 값에 b를 더하여 a에 대입한다 ex) a += b 이 식과 a = a + b 같은 뜻
• -= : 기존 a 값에 b를 빼서 a에 대입한다 ex) a -= b 이 식과 a = a - b 같은 뜻
• *= : 기존 a 값에 b를 곱해서 a에 대입한다 ex) a *= b 이 식과 a = a * b 같은 뜻
• /= : 기존 a 값에 b를 나눠서 a에 대입한다 ex) a /= b 이 식과 a = a / b 같은 뜻

• %= : 기존 a 값에 b를 나눈 나머지값을 a에 대입한다 ex) a %= b 이 식과 a = a % b 같은 뜻

• .toLocaleString(‘’) : 숫자를 특정 국가 기호에 맞게 문자로 바꿔주는 함수

  사용자정의함수

• function -> 함수 선언 시 함수라는 것을 나타내는 키워드
• 함수이름 -> 개발자가 만든 함수의 의미있는 이름을 작성한다
• 전달인자 -> 매개변수, 인수 등 여러가지 용어를 사용한다. 함수 내에 데이터를 전달하는 변수명이라 보면 되며 전달 데이터가 많을 땐 객체 타입으로 전달하기도 한다.
• 중괄호{} -> 함수 영역의 시작과 끝을 나타내며 함수의 반복적인 실행 내용을 작성한다.

  콜백함수

• 사용자정의함수 또는 내장함수를 특정 조건에 따라 실행하는 함수
  • 함수의 종류가 아닌 사용 방식(역할)에 가까운 목적.

    function 함수

• function 함수명(){재사용문법} 특정 기능을 하는 구문을 묶어 재사용하는 문법==함수

  함수

  1. 내장함수

• js 내에 정의된 명령어
• prompt(), log() 등
• window.print(); 인쇄창 실행, 윈도우 생략가능
• window.confirm(); 확인/취소 창 실행
• window.location.href(); 다른 경로 이동
• window.open('url', '_blank'); 새창(새탭) 열기
• window.alert(); 경고 메세지 띄우기

  2. 사용자정의함수

• 함수준비 : function 함수명(매개변수){반복 프로그래밍}
• 함수실행 : 함수명(매개변수);
  • 함수실행은 해당 함수 준비{}밖에서 해야한다!

    2-1. 매개변수

• 반복되는 함수프로그래밍 안 데이터가 반복될때마다 달라질 때
• 데이터의 반복 개수만 생각해서는 안되고 반복데이터가 같은지, 다른지를 판단해서 매개변수 수를 체크해야한다.
  • 5x4=(5*4) 5가 두번 반복되지만 값이 같으므로 매개변수는 1개
  • `function 함수명(매개변수생성){매개변수대입받는 위치}
  • 함수명(매개변수에 값을 대입하는 위치);

    3. 콜백함수(함수종류(x), 사용방법(o))

• 함수준비 : function A(매개변수){반복 프로그래밍}
• 함수준비 : function B(매개변수){반복 프로그래밍}
  • 함수B를 함수A가 실행되는 조건 기준 B를 실행하고 싶다.
  • function A(매개변수){B();}
  • A(); //A가 실행되면 A안에 B가 함께 실행된다.

    DOM 요소 선택하기

• DOM이란? HTML태그부터 태그 안 텍스트, 공백 노드 포함하는 요소
  1. get~
  • 실제 프로그래밍 사용 시 query~ 위주로 사용하나 레거시코드 등 코드 벤치마킹 등 사용 시 이해와 활용을 돕기 위해 간단히 알면 좋은 DOM 선택방식
  • getElementsByTagName
    • const 변수명 = document.getElementsByTagName('');
    • 변수명[index];
  • getElementsByClassName
    • const변수명 = document.getElementsByClassName('');
    • 변수명[index];
  • getElementById
    • const 변수명 = document.getElementById('');
    • 변수명; //아이디는 단 1개이므로 인덱스 표시 필요없음.
      1. query~
  • querySelector
    • const 변수명 = document.queySelector('태그명');
    • const 변수명 = document.queySelector('.클래스명');
    • const 변수명 = document.queySelector('#아이디명');
    • const 변수명 = document.queySelector('대상:nth-child(1)');
    • const 변수명 = document.queySelector('부모요소 > 자식요소');
    • css와 유사하게 ()안 선택자를 작성할 수 있는 ES6 이후 DOM선택함수
    • 태그, 클래스 대상은 실제 HTML에 2개 이상 존재하더라도 위->아래 읽는 순서 기준 가장 먼저 인식되는 대상이 변수에 저장됨.
  • querySelectorAll
    • const 변수명 = document.querySelectorAll('2개 이상 존재하는 태그명');
    • const 변수명 = document.querySelectorAll('2개 이상 존재하는 클래스명');
    • 아이디에는 사용하지 않고 태그 또는 클래스가 같은 부모 요소 안 2개 이상 존재시 해당 요소들을 필요에 따라 모두 선택해야할 때 ALL 키워드를 함께 사용한다.
    • 변수명[index]; //get~ 선택 방식과 동일하게 인덱스로 2개 이상의 대상 구분 필요.

      DOM + 이벤트연결

      1. <태그 on이벤트="실행함수()"></태그>
  • <button onclick="alert();">
  • 장점) 태그에 바로 이벤트를 작성할 수 있어서 간편함.
  • 단점) 태그에 내부스크립트로 작성된거라 반복 등 활용 불가능. 내부에서만 제한적 사용.
    1. DOM변수.addEventListener('이벤트', 시행함수());
  • btn.addEventListener('click', function(){ alert(); });
  • btn.addEventListener('click', func1);
  • function func1(){}
  • 장점) 반복 활용 가능, 내부, 외부 어디든 자유롭게 사용 가능
  • 단점) 위 1번에 비해 쓰기가 조금 복잡함.

    조건문

• 조건식에 들어온 데이터의 종류가 참, 거짓 무엇이냐에 따라 다른 결과를 실행하는 자바스크립트 함수

  거짓(falsy)으로 인식하는 데이터 종류

  1. '' 빈문자열
  2. false 거짓 키워드
  3. null 값 없음
  4. undefined 값 정의안됨
  5. 0 숫자 없음
  6. NaN 숫자처리안됨

     참(truthy)으로 인식하는 데이터 종류

• 위 거짓이 아닌 나머지 모든 데이터
• [], {} 빈배열, 빈객체는 참으로 인식함.(내장함수때문)

  논리 데이터 구분하는 내장함수

• Boolean(확인데이터)
• console.log(Boolean(null)); null 데이터의 논리종류를 콘솔에 실행

  비교연산자

• 데이터 2개 이상을 비교하여 논리결과(참, 거짓)로 출력하는 연산자
• ==, === : 일치연산, 피연산자가 같으면 참
• !=, !== : 부등연산, 피연산자가 다르면 참
• <, > : 작다, 크다, 피연산자가 작거나 크면 참
• >=, <= : 작거나 같다, 크거나 같다, 피연산자가 작거나 같으면 참

  조건식

• if(조건식){조건식이 참일 때 실행되는 위치}
• else {위 조건식이 거짓일 때 실행되는 위치}
• {} 안 실행명령이 1줄이면 중괄호 생략 가능, 2줄 이상이면 중괄호 필수
• if(){}, if(){}
  • if가 새로 써있다면 기존 조건식과는 별개의 조건식으로 구분함.

    반복문

• 단순 함수실행만 반복하는 사용자정의함수와 다르게 한 단계 업그레이드해서 DOM요소부터 이벤트까지 모든 자바스크립트 요소를 반복시켜 유지보수성을 향상시키는 반복문

  for(초기값; 조건식; 증감식){반복실행결과}

  1. 초기값(처음에 한 번만 실행)
  2. 조건식(조건이 참이면 반복실행, 거짓이면 반복종료)
  3. 반복실행결과(조건이 참일 때 실행)
  4. 증감식(결과 실행 후 1증가 또는 1감소)
  5. 2->3->4 반복(2번의 조건이 거짓이 되면 종료)

     for 반복문 예시

• 1~10 까지 반복
  • for(let i=1; i<11; i++){}
  • for(let i=1; i<=10; i++){}
  • for(let i=0; i<10; i++){}
• 5~15 까지 반복
  • for(let i=5; i<16; i++){}
  • for(let i=5; i<=15; i++){}
• 5~0 까지 반복
  • for(let i=5; i>=0; i--){}

    DOM 요소 생성, 삽입

    textContent 속성

• 문자열데이터를 삽입할 때 사용하는 속성(태그취급안함)
• 로그인, 회원가입, 장바구니, 구매결제 등 에러 메세지 전달용
  • p.textContent = '아이디를 입력하세요';
  • span.textContent = '잔액이 부족합니다.';

    innerHTML 속성

• 태그를 포함한 문자열데이터를 삽입할 때 사용하는 속성
• 태그도 단순 문자열로 변환해서 취급함.
  • p.innerHTML = '아이디를<br> 입력하세요';
  • span.innerHTML = '<em>잔액이</em> 부족합니다.';

    createElement 함수

• 태그를 객체로 인식해서 처리함.
• 부모-자식-자손 등의 복잡한 처리를 할 때 유용함.
• 위 함수로 생성된 객체는 appendChild() 함수로 대입해야함
  • const ul = document.createElement('ul');
  • const dd = document.createElement('dd');
  • const input = document.createElement('input');

    appendChild 함수

• 특정 요소의 마지막 자식 위치로 createElement로 생성한 객체를 삽입해주는 내장함수
  • main.appendChild(ul);
  • dl.appendChild(dd);
  • form.appendChild(input);

    cloneNode 함수