까먹기 위해 기록하는 것이다

1. Event 1. JqueryEvent Jquery의 이벤트도 자바스크립트와 마찬가지로 사용자 동작에 매핑돼서 실행될 기능들을 미리 구현해 놓는 것. 이벤트 등록 방식 선택자.이벤트(click, dblclcik, load, ready, ...)(콜백함수); $("선택자").click(() => { alert("클릭"); }); 선택자.on("이벤트", 콜백함수); $("선택자").on("click", () => { alert("클릭"); }); 동적으로 생성되는 태그들에는 위 이벤트 등록방식은 먹히지 않는다. 동적 태그의 이벤트 등록방식은 $(document).on("이벤트", "선택자", 콜백함수); let htmlStr = ` 버튼 ` $("body").append(htmlStr); $("#btn..

1. method 1. 객체 조작 메소드 객체 조작 메소드 DOM 객체에 접근해서 태그를 삭제, 추가 또는 내용들을 추가/삭제 그리고 속성값들을 가져오거나 변경할 수 있는 메소드. html(): 순수 자바스크립트의 innerHtml과 매핑되는 메소드. 선택자.html(): 선택한 태그의 모든 하위태그들을 문자열로 반환 선택자.html("새로운 태그 문자열"): 선택한 태그의 모든 하위 태그들을 삭제하고 새로운 태그를 생성. text(): 순수 자바스크립트의 innerText와 매핑되는 메소드. 선택자.text(): 선택한 태그의 텍스트 반환 선택자.text("새로운 문자열"): 선택한 태그의 텍스트를 모두 삭제하고 새로운 텍스트 추가. css(): 순수 자바스크립트의 선택자.style.속성과 매핑되는 메..

1. Selector 1. 직접 선택자 전체 선택자: DOM의 모든 태그 선택. $("*") 아이디 선택자: 해당 아이디명을 가지고 있는 태그 선택. $("#아이디") 클래스 선택자: 해당 클래스명으로 되어있는 태그 선택. $(".클래스명") 태그 선택자: 해당 태그들 모두 선택. $("태그명") 그룹 선택자: 여러 개의 선택자를 묶어서 선택. $("선택자1, 선택자2, ..., 선택자n"). 선택자n에는 아이디, 클래스, 태그 선택자 등 다양한 선택자들을 넣을 수 있다. 2. 관계 선택자 선택자.parent(): 선택자의 부모 요소 선택 $("기준 선택자"): 기준이 되는 태그의 모든 하위 태그 중에 선택자에 해당되는 태그들 모두 선택 선택자.children(), $("기준 > 선택자"): 기준이 되는..

1. Jquery 1. Jquery Jquery는 자바스크립트의 DOM 객체 조작을 도와주는 라이브러리 선택자부터 이벤트, 애니메이션 등 DOM객체를 선택하거나 DOM객체에 이벤트를 만들고 애니메이션 효과를 추가할 때 순수 자바스크립트보다 편하게 구현할 수 있다. //순수자바스크립트 선택자 const box = document.getElementById("box"); const box = document.querySelector("#box"); //jquery 선택자 const box = $("#box"); Jquery의 장점 DOM객체를 조작하는 것이 순수 자바스크립트보다 편하고 간단하며 코드가 짧다. Jquery로 구성된 라이브러리들이 다양해서 달력이나 시계 등 순수 자바스크립트로 구현하는 것보다 훨..

1. ES6(Ecma Script 6) 1. const, let의 등장 var 변수는 중복 선언이 가능하고 블록단위 변수가 아니며 호이스팅이 가능한 문제점이 존재하여 ES6부터는 let, const라는 변수 선언 방식이 등장했다. 블록단위 변수 let let은 중복선언 불가능하고 블록단위이며 호이스팅 불가능한 var의 대체 변수 상수를 선언하는 const const변수는 상수를 선언할 때 사용하여 선언과 동시에 초기화가 일어나야 한다. const도 let과 동일하게 블록단위 변수이며 호이스팅 불가능 const는 상수이기 때문에 값의 재할당 불가능 기본적으로 const로 변수를 선언하되 변경될 경우가 있는 변수만 let으로 선언한다. const와 객체 const 변수로 객체를 선언하게 되면 객체안의 속성들..

1. 메소드와 이벤트 1. 메소드(함수, 기능, 펑션) 메소드는 기능을 정의해 놓은 코드 블록 메소드의 선언 //ES5 function 메소드명(파라미터(파라미터도 타입 지정하지 않음)) { 기능정의; } //ES6 const 메소드명 = (파라미터) => { 기능정의; }; ``` 3. return; : 아무것도 반환하지 않는 리턴문을 사용할 수 있다. 메소드의 종료를 의미한다. 특정 조건이 충족됐을 때 함수를 종료시켜야 한다면 return;으로 종료시킨다. 4. 지역변수와 전역변수 - 자바스크립트에서 지역변수는 중괄호 블록('{}')으로 감싸진 블록 안에 선언된 변수를 의미. - 전역변수는 script 태그 안에서 바로 생성한 변수를 전역변수라고 부른다. 전역변수는 해당 html 페이지가 로드되면 생..

1. 자바스크립트의 객체 1. 객체 자바스크립트에서 객체는 웹 화면과 관련된 모든 대상을 가리키는 것을 의미한다. 자바스크립트 객체의 종류 DOM(문서 객체 모델: Doucumnt Object Model) : 웹 문서면 자체도 객체지만 웹 문서 안의 태그들도 객체로 받아서 사용할 수 있다. BOM(브라우저 객체 모델: Browser Object Model) : 브라우저에서 사용하는 정보를 받아오는 객체 모델. navigator, history, location, screen 등이 존재합니다. 내장객체 : String, Array, Date, Math 등 자바스크립트 내부에 구현되어 있는 객체. 사용자정의 객체 : 사용자에 필요에 따라서 직접 구현한 객체 2. 내장객체 Date: 날짜와 시간정보를 나타내주..

1. 배열 1. 자바스크립트 배열 자바스크립트에서 배열은 기본 자료형 중 하나로 되어있다. 배열의 길이를 지정하지 않고 가변적인 배열로 사용할 수 있다. 여러 자료형의 값을 하나의 배열에 담아서 사용할 수 있다. 2. 배열의 메소드 join: 배열의 값들을 하나의 문자열로 합쳐서 반환 reverse: 배열의 순서를 역순으로 바꿔서 반환 sort: 배열을 오름차순으로 정렬 후 반환 splice: 지정한 index 범위 만큼의 데이터 삭제 후 새로운 값 추가 slice: 원하는 구간만큼 잘라서 배열로 반환 pop: 배열의 마지막 요소 꺼내서 반환하고 원본 배열에서 꺼낸 요소 삭제 push: 배열의 마지막 요소 뒤에 새로운 요소 추가

1. 조건문 1. ifelse ifelse 자바와 동일하게 if(조건1) { //조건1이 true일 때 실행 } else if(조건2) { //조건1이 false이고 조건2가 true일 때 실행 } ... else { //위의 모든 조건이 false일 때 실행 } 2. switch ~ case ~ default 1. switch(변수) { case 값1: //변수가 값1일 때 실행 break; case 값2: //변수가 값2일 때 실행 break; ... default: //변수가 위의 모든 값이 아닌 다른 값일 때 실행 } 2. 반복문 1. for for(let(var) 초기화 식; 조건식; 증감식) { //반복 실행 } 2. while while(조건식) { //반복 실행 } 3. do~while d..

1. 연산자 1. 산술연산자 산술연산자는 Java와 모두 동일하다. +, -, *, /, %, --, ++ 연산방식은 모두 Java의 산술연산자의 연산방식과 동일하다. 2. 대입연산자 =, +=, -=, *=, /=, %= 과 같이 Java의 대입연산자와 모두 동일하다. 3. 비교연산자 ==, >, >=,