startsWith(), endsWith() startsWith() / endsWith() startsWith()메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWith()메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열); "문자열".endsWith(검색 문자열, 시작 위치값); js const str1 = "javascript reference"; const currentStr1 = str1.startsWith('javascript'); const currentStr2 = ..
filter(), map(), Array.from() filter() filter()메서드는 조건에 만족하는 배열 요소 검색할 때 사용하며 배열로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.filter(el => el === 300); document.querySelector(".sample12_N1").innerHTML = "1"; document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample12_M1").innerHTML = "filter(el => ..
find(), findIndex() find() / findIndex() find()메서드는 배열 요소를 검색할 때 사용합니다. 조건에 일치하는 요소의 값을 반환하며 없을 경우 undefined를 반환합니다. findIndex()메서드는 배열 요소를 검색할 때 사용하며 인덱스로 반환하며 조건에 일치하는 값이 없을 경우 -1을 반환합니다. 번호 기본값 메서드 리턴값 js //01. find() const arrNum = [100, 200, 300, 400, 500]; // const result = arrNum.find(function(element){ // return element === 300; // }); // const result = arrNum.find((element) => { // retu..
indexOf(), lastIndexOf(), includes() indexOf() / lastIndexOf() / includes() indexOf()메서드는 배열 요소를 검색할 때 사용하며 숫자로 반환합니다. lastIndexOf()메서드는 배열 요소를 끝에서 검색하여 숫자로 반환합니다. includes()메서드는 배열 요소를 검색하여 불린(true, false)으로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum = [100, 200, 300, 400, 500]; const arrIndex = arrNum.indexOf(200); document.querySelector(".sample10_N1").innerHTML = "1"; document.querySelector(".sam..
slice(), splice() slice() slice()메서드는 배열 요소를 다른 요소로 변경하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.slice(2); document.querySelector(".sample08_N1").innerHTML = "1"; document.querySelector(".sample08_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample08_M1").innerHTML = "arrNum.slice(2)"; document.querySelector(".sample0..
reduce(), reduceRight() 2. reduce() / reduceRight() reduce()메서드와 reduceRight()메서드는 배열 요소를 하나로 정리하여 결과값을 반환합니다. 둘의 차이점은 reduceRight() 메서드가 배열의 끝에서부터 시작합니다. 배열이 숫자라면 합을 구할 수 있고, 문자라면 결합하여 반환합니다. 번호 기본값 메서드 리턴값 js //01. reduce const arrNum1 = [100, 200, 300, 400, 500]; const arrReduce1 = arrNum1.reduce(element => element); document.querySelector(".sample07_N1").innerHTML = "1"; document.querySelect..
concat() concat() concat()메서드는 배열의 요소를 결합하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); document.querySelector(".sample06_N1").innerHTML = "1"; document.querySelector(".sample06_Q1").innerHTML = "[100, 200, 300], [400, 500, 600]"; document.querySelector(".sample06_M1").innerHTML = "arrNum1.concat(arrNum..
reverse(), sort() 2. reverse() / sort() reverse()메서드는 배열 요소의 순서를 반대로 정렬하여 배열로 반환하고, sort() 메서드는 배열 요소를 정렬하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 js //01. reverse() const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); document.querySelector(".sample05_N1").innerHTML = "1"; document.querySelector(".sample05_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector("...
unshift(), shift() 1. unshift() / shift() unshift()메서드는 배열 처음 요소에 추가하여 숫자로 반환하고, shift() 메서드는 배열 처음 요소 삭제해 삭제한 요소를 반환합니다. 번호 기본값 메서드 리턴값 결과값 js // 01.unshift() const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_N1").innerHTML = "1"; document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.queryS..
비구조화 할당 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식 { const obj = { a: 100, b: 200, c: "javascript" } const {a, b, c} = obj; document.write(a); document.write(b); document.write(c); } 결과보기 객체구조분해할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식 { const obj = { a: 100, b: 200, c: "javascript" } const {a: name1, b: name2, c: name3} = obj; document.write(name1); document.write(name2)..
객체 : 데이터 불러오기 : 펼침연산자 - 복사 배열 혹은 객체에 포함된 항복을 그대로 복사해 목록으로 만듭니다. const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj } document.write(spread.a) document.write(spread.b) document.write(spread.c) 결과보기 객체 : 데이터 불러오기 : 펼침연산자 - 추가 복사한 항목 뒤에 항목을 추가합니다. const obj = { a: 100, b: 200, c: "javascript" } const spread = { ...obj, d: "jquery" } document.write(spread.a); document.write(spre..
내부함수 : 스코프, 클로저 함수 안에 또 다른 함수를 선언한 것이 내부함수입니다. 스코프는 어느 범위(전역, 지역)까지 참조되는지를 뜻합니다. 클로저는 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 합니다. function func() { function funcA() { document.write("함수가 실행되었습니다.") }; funcA(); function funcB() { document.write("함수가 실행되었습니다.") }; funcB(); } func(); 결과보기
콜백함수 : 다른 함수에 인수로 넘겨지는 함수 콜백함수는 하나의 함수가 실행되고 두 번째 함수를 실행하는 함수입니다. function func() { document.write("함수가 실행되었습니다.2") } function callback(str) { document.write("함수가 실행되었습니다.1") str(); } callback(func); 결과보기 콜백함수 : 반복문 콜백함수를 반복문을 사용해 반복하는 방법입니다. function func(index) { document.write("함수가 실행되었습니다." + index); } function callback(num) { for (let i = 1; i { // console.log("funcA가 실행되었습니다."); // }, 1000..
클래스 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다 class study { constructor(num, name, job) { this.num = num; this.name = name; this.job = job; } result() { document.write(this.num + ". 내 이름은 " + this.name + "이며, 직업은 " + this.job + "입니다.") } } const info1 = new study("1", "웹쓰", "웹퍼블리셔"); const info2 = new study("2", "웹스토리보이", "프론트앤드 개발자"); info1.res..
MouseOver, MouseEnter MouseOver, MouseEnter의 차이를 알아봅시다. MouseOver, MouseEnter에 대해서 mouseOver와 mouseEnter는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, 이와 반대로 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 마우스 이벤트는 mouseOut과 mouseLeave입니다. 주로 아래와 같이 짝을 이루어 사용합니다. mouseOver mouseOut mouseEnter mouseLeave mouseover mouseover는 지정된 요소에 (자기 자신)을 포함하면서, 밑에 자식요소가 존재한다면 자식영역까지 포함됩니다. mouseenter mouseenter는 지정된 요소(자기 자신)만 해당되며,..
jQuery 스타일 관련 메서드 jQuery 스타일 관련 메서드를 알아봅시다. css() 메서드 실행 분류 형식 취득 $("div").css("width"); 생성, 변경 $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 함수 $("div").css("width", function(index, w){ //index는 각 div 요소의 index 0, 1, 2 //w는 각 div 요소의 width 값 return css속성 // 각 div 요소의 css 속성을 변경합니다. }); ... 내용 내용 내용 예제 See the Pen 제이쿼..
jQuery 속성 관련 메서드 jQuery 속성 관련 메서드를 알아봅시다. attr() 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성 return attribute(속성) // 각 a..
jQuery 클래스 관련 메서드 jQuery 클래스 관련 메서드를 알아봅시다. addClass() 메서드 요소에 class 속성을 추가합니다. 실행 분류 형식 추가 $("div").addClass("클래스명"); 콜백 함수 $("div").addClass(function(index, className)){ //index는 각 div 요소의 index 0, 1, 2 //className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); ... 내용1 내용2 내용3 예제 See the Pen 제이쿼리 클래스메서드 by kimyihyung (@kimyihyung) on CodePen. removeClass() 메서드 요소에 class 속성을 제거..
자바스크립트 요소 속성(크기) 요소 속성(크기) 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 세로(패딩/보더 포함, 마진 미포함) innerWidth / outerWidth 브라우저의 가로 값(스크롤바 미포함 / 포함) innerHeight / outerHeight 브라우저의 세로 값(스크롤바 미포함 / 포함) offsetTop / offsetLeft 요소의 좌표값(문서 기준) offsetParent 요소의 좌표값(부모 기준) pageXOffset / window.scrollX 요소의 가로 스크롤 값 page..
필터 선택자 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 번째 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. :lt() $("li:lt(2)") inde..
탐색 선택자 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closet("div") p 요소의 부모가 되는 첫 번째 div 요소를 찾습니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").nextUntil("p") d..
속성 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 종류 선택자 종류 설명 요소[속성] $("span[class]") span 요소 중 class 속성을 가지고 있는 요소를 선택합니다. 요소[속성='값'] $("span[class='abc']") span 요소 중 class가 'abc'인 요소를 선택합니다. 요소[속성!='값'] $("span[class!='abc']") span 요소 중 class가 'abc'가 아닌 요소를 선택합니다. 요소[속성~='값'] $("span[class~='abc']") span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg abc'는 선택되나..
jQuery 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. jQuery 기본 선택자의 형식은 다음과 같습니다. $("선택자") | $("#gnb") 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p 요소를 선택합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual 다음에 오는 #content 요소를..
GSAP GSAP(The GreenSock Animation Platform)은 자바스크립트 로 제어하는 타임라인 기반의 애니메이션 라이브러입니다. GSAP을 사용하면 자바스크립트 애니메이션을 좀 더 쉽게 작성할 수 있습니다. GSAP는 애니메이션 시퀀스에 관련해서 CSS의 keyframe과 animation 보다 더 정밀한 컨트롤을 할 수 있습니다. 공식페이지 : https://greensock.com/get-started/ 사용하기 CDN을 사용합니다. CDN Tween 객체를 만드는 기본 메소드 • gsap.to() • gsap.from() • gsap.fromTo() to 메소드는 타겟을 어디론가 보낸다는 것, from은 어디서부터, fromTo는 어디서부터 어디로 어떻게 애니메이션을 만들지 결정..
jQuery 알아보기 jQuery(제이쿼리)는 웹 사이트를 제작할 때 자주 사용되는 기능들을 쉽게 사용할 수 있도록 모아놓은 자바스크립트 라이브러리를 말합니다. 복잡한 상호작용을 하는 자바스크립트를 쉽게 추가할수 있도록 해주면서 다양한 웹 브라우저에서 동작하도록 만들어줍니다. 사용하기 CDN 호스트를 사용하는 방법, API 다운 받아 사용하는 방법, url 사용하는 방법 CDN API 다운 받아서 연결 url 제이쿼리 특징 ① 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 이것은 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없다. ② 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 ..
함수 유형 01. 함수 유형 : 함수와 매개변수를 이용한 형태 함수와 매개변수를 활용해 함수를 재활용 할 수 있습니다. function func(num, str1, str2){ document.write(num + ". " + str1 + "가 " + str2 + "되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과 확인하기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 02. 함수 유형 : 함수와 변수를 이용한 형태 함수와 변수를 이용해 함수를 재활용 할 수 있습니다. function func(num, str1, str2){ document.wr..
search() search() 메서드는 문자열(정규식)을 검색하고 위치값(숫자)를 반환합니다. "문자열".search("검색값") "문자열".search(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.search("javascript"); //0 const currentStr2 = str1.search("reference"); //11 const currentStr3 = str1.search("j"); //0 const currentStr4 = str1.search("a"); //1 const currentStr5 = str1.search("v"); //2 const currentStr6 = str1.search("jquer..
charAt() / charCodeAt() charAt() 메서드는 지정한 인덱스의 문자를 추출하여 문자열을 반환합니다. charCodeAt() 메서드는 지정한 숫자의 유니코드 값을 반환합니다. "문자열".charAt(숫자); "문자열".charCodeAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); const currentStr2 = str1.charAt("0"); const currentStr3 = str1.charAt("1"); const currentStr4 = str1.charAt("2"); const currentStr5 = str1.charCodeAt(); const currentStr6 = str1..
match() match() 메서드는 문자열을 검색하고 배열을 반환합니다. "문자열".match("검색값") "문자열".match(정규식 표현) const str1 = "javascript reference"; const currentStr1 = str1.match("javascript"); //javascript const currentStr2 = str1.match("reference"); //reference const currentStr3 = str1.match("r"); //r const currentStr4 = str1.match(/reference/); //reference const currentStr5 = str1.match(/Reference/); //null const currentS..
