<title></title> 태그 다음 위치에 CDN주소 연결 필수 https://cdnjs.com/libraries/jquery
$() 제이쿼리 기본 선엉법
*$('.클래스명')
*$('#아이디명')
*$('태그명')
*'' 따옴표 안 CSS선택자처럼 원하는 대상 작성 가능$('대상').show(); 대상 보이기$('대상').hide(); 대상 숨기기$('대상').css('속성','값'); CSS 적용하기$('대상').removeClass(); class 제거하기(괄호 비우면 모든 클래스제거)$('대상').addClass('추가클래스명'); class 적용하기
변수선언키워드 생성변수명; -> 빈 저장소 생성
var box;변수선언키워드 생성변수명 대입연산자 대입감ㅎ;
var box = 1;생성변수명 대입연산자 대입값;
box = 2;객체; -> 객체 읽음객체.속성; -> 객체의 속성을 읽음객체.메서드(); -> 객체를 메서드방법으로 실행함객체.속성.메서드();객체.속성.속성.메서드();객체.메서드().속성;객체.메서드().메서드();객체.메서드(메서드());
typeof()let num = 1;let str = '1';
console.log(typeof(num)); //Number(숫자)console.log(typeof(str)); //String(문자)
prompt('질문') : 질문답변 창 띄우는 함수
input 태그로 입력받는 사용자 입력값도 모두 문자로 처리input도 문자로 기본적으로 인식됨Number(숫자로 변환하고싶은 데이터 또는 함수)%= : 기존 a 값에 b를 나눈 나머지값을 a에 대입한다 ex) a %= b 이 식과 a = a % b 같은 뜻
function 함수명(){재사용문법} 특정 기능을 하는 구문을 묶어 재사용하는 문법==함수
prompt(), log() 등window.print(); 인쇄창 실행, 윈도우 생략가능window.confirm(); 확인/취소 창 실행window.location.href(); 다른 경로 이동window.open('url', '_blank'); 새창(새탭) 열기window.alert(); 경고 메세지 띄우기
function 함수명(매개변수){반복 프로그래밍}함수명(매개변수);
{}밖에서 해야한다!
5x4=(5*4) 5가 두번 반복되지만 값이 같으므로 매개변수는 1개함수명(매개변수에 값을 대입하는 위치);
function A(매개변수){반복 프로그래밍}function B(매개변수){반복 프로그래밍}
function A(매개변수){B();}A(); //A가 실행되면 A안에 B가 함께 실행된다.
get~query~ 위주로 사용하나 레거시코드 등 코드 벤치마킹 등 사용 시 이해와 활용을 돕기 위해 간단히 알면 좋은 DOM 선택방식getElementsByTagName
const 변수명 = document.getElementsByTagName('');변수명[index];getElementsByClassName
const변수명 = document.getElementsByClassName('');변수명[index];getElementById
const 변수명 = document.getElementById('');변수명; //아이디는 단 1개이므로 인덱스 표시 필요없음.
query~querySelector
const 변수명 = document.queySelector('태그명');const 변수명 = document.queySelector('.클래스명');const 변수명 = document.queySelector('#아이디명');const 변수명 = document.queySelector('대상:nth-child(1)');const 변수명 = document.queySelector('부모요소 > 자식요소');()안 선택자를 작성할 수 있는 ES6 이후 DOM선택함수querySelectorAll
const 변수명 = document.querySelectorAll('2개 이상 존재하는 태그명');const 변수명 = document.querySelectorAll('2개 이상 존재하는 클래스명');변수명[index]; //get~ 선택 방식과 동일하게 인덱스로 2개 이상의 대상 구분 필요.
<태그 on이벤트="실행함수()"></태그><button onclick="alert();">DOM변수.addEventListener('이벤트', 시행함수());btn.addEventListener('click', function(){ alert(); });btn.addEventListener('click', func1);function func1(){}'' 빈문자열false 거짓 키워드null 값 없음undefined 값 정의안됨0 숫자 없음NaN 숫자처리안됨
[], {} 빈배열, 빈객체는 참으로 인식함.(내장함수때문)
Boolean(확인데이터)console.log(Boolean(null)); null 데이터의 논리종류를 콘솔에 실행
==, === : 일치연산, 피연산자가 같으면 참!=, !== : 부등연산, 피연산자가 다르면 참<, > : 작다, 크다, 피연산자가 작거나 크면 참>=, <= : 작거나 같다, 크거나 같다, 피연산자가 작거나 같으면 참
if(조건식){조건식이 참일 때 실행되는 위치}else {위 조건식이 거짓일 때 실행되는 위치}{} 안 실행명령이 1줄이면 중괄호 생략 가능, 2줄 이상이면 중괄호 필수if(){}, if(){}
for(초기값; 조건식; 증감식){반복실행결과}for(let i=1; i<11; i++){}for(let i=1; i<=10; i++){}for(let i=0; i<10; i++){}for(let i=5; i<16; i++){}for(let i=5; i<=15; i++){}for(let i=5; i>=0; i--){}
p.textContent = '아이디를 입력하세요';span.textContent = '잔액이 부족합니다.';
p.innerHTML = '아이디를<br> 입력하세요';span.innerHTML = '<em>잔액이</em> 부족합니다.';
appendChild() 함수로 대입해야함
const ul = document.createElement('ul');const dd = document.createElement('dd');const input = document.createElement('input');
main.appendChild(ul);dl.appendChild(dd);form.appendChild(input);