본문 바로가기

자바스크립트38

오답노트 Javascript Test01 01. 결괏값을 작성하시오. { function func(){ for( i=1; i el % divisor == 0 ); answer = div.length > 0 ? div.sort( (a, b ) => a - b ) : [-1]; return answer } document.write(solution([1,2,3,4,5], 2)) } 1. filter로 2로 나눴을 때 나머지값이 0인 (즉 2의 배수인) 값을 골라냄 == 2, 4 2. div.length(2) > 0이 참임 : 참이면 div안의 순서를 a-b 순서로 정렬하고 거짓이면 -1 출력 3. a-b 순서대로 [2, 4] 출력됨 결과 보기 23. 결괏값을 작성하시오. { function solution(numbe.. 2022. 10. 4.

MySQL MySQL MySQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터베이스라고 부릅니다. MySQL은 세계에서 가장 많이 쓰는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS)입니다. MySQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스를 개발된 무료 프로그램입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, Cafe24, 제로보드 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MySQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MySQL, PHP 의 약어이자 솔루션 스택이다. http://www.mamp.info/en/downlads/ MySQL 실행 윈도우 : cd MAMP.. 2022. 9. 15.

mouseenter / mouseover 의 차이 mouseenter / mouseover 의 차이> mouseenter / mouseover mouseenter / mouseover는 모두 어떤 영역에 마우스가 올라감을 감지하는 메서드입니다. 이 둘의 차이점을 알아봅시다. mouseover와 mouseout mouseover 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. mouseout 메서드는 마우스 커서가 지정 영역 안에서 바깥으로 나갔을 때 이벤트가 발생하는 메서드 입니다. 이 둘은 서로 짝을 이루는 메서드입니다. mouseover와 mouseout mouseenter와 메서드는 마우스 커서가 지정 영역 안으로 들어왔을 때 이벤트가 발생하는 메서드 입니다. mouseleave 메서드는 마우스 커서가 지정 .. 2022. 9. 6.

제이쿼리 스타일 관련 메서드 jQuery : 스타일 관련 메서드> css() 메서드 선택한 요소의 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 .. 2022. 9. 6.

제이쿼리 스타일 관련 메서드 2022. 9. 5.

제이쿼리 속성 관련 메서드 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 요소의 속성을 생성 및 변경합니다... 2022. 9. 5.

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 addclass()메서드 예제 by Youcodein (@youCodein) on CodePen. removeClass() 메서드 요소에서 class 속성을 제거합니다.. 실행 분류 형식 제거 $(".. 2022. 9. 5.

요소 크기 메서드 요소 크기 메서드 정리> 위치 및 크기를 표현하는 속성 메서드 속성/메서드 설명 1 element.clientWidth 요소의 가로값(마진/보더 미포함) 2 element.clientHeight 요소의 높이값(마진/보더 미포함) 3 element.clientTop 요소의 Y축값(부모기준) 4 element.clientLeft 요소의 X축값(부모기준) 5 element.offsetWidth 요소의 가로값(보더/패딩 포함) 6 element.offsetHeight 요소의 가로값(보더/패딩 포함) 7 element.offsetTop 요소의 Y축값(문서 기준) 8 element.offsetLeft 요소의 X축값(문서 기준) 9 element.getBoundingClientRect() 요소의 크기와 뷰포트에 상대.. 2022. 9. 1.

JQuery 탐색 선택자 JQuery 탐색 선택자 1. 기본 탐색 선택자 선택자 종류 설명 children() $("div").children() div 요소의 자식 요소를 선택합니다. parent() $("p").parent() p 요소의 부모 요소를 선택합니다. parents() $("p").parents("div") p 요소의 부모가 되는 모든 div 요소를 선택합니다. closest() $("p").closest("div") p 요소의 부모가 되는 첫 번째 div 요소를 선택합니다. next() $("div.m").next() div.m 요소의 다음 요소를 선택합니다. nextAll() $("div.m").nextAll() div.m 요소의 다음 요소들을 모두 선택합니다. nextUntil() $("div.m").next.. 2022. 8. 31.

JQuery 필터 선택자 JQuery 필터선택자 JQuery의 필터 선택자입니다. 선택자에 ":" 이 붙은 선택자를 필터선택자라고 합니다. 1. 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $("td:header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li요소를 선택합니다. index는 0번이 첫 번째 요소입니다. :gt() $("li:gt(0)") index가 0보다 큰 li요소를 선택합니다. .. 2022. 8. 31.

JQuery 속성선택자 JQuery 속성선택자 JQuery의 속성 선택자입니다. 속성 선택자 선택자 종류 설명 요소[속성] $("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'는 선택되나 'bg_abc'는 선택되지 않습니다. 요소[속성*='값'] .. 2022. 8. 30.

JQuery 기본 선택자 JQuery 기본선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 기본 선택자 선택자 종류 설명 태그 선택자 $("p") p요소를 설명합니다. id 선택자 $("#gnb") #gnb 요소를 선택합니다. class 선택자 $(".logo") .logo인 요소를 선택합니다. 자식 선택자 $("#gnb > ul > li") #gnb의 자식 요소의 자식 요소 li를 선택합니다. 하위 선택자 $("#gnb ul") #gnb의 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $("#visual + #content") #visual의 다음에 오는 #content요소를 선택합니다. 형제 선택자 $("#visual ~ #footer") #visual의 형제.. 2022. 8. 30.

JQuery란? JQuery 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 웹 사이트를 제작할 때 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줍니다. 또한, 제이쿼리를 사용하면 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다. JQuery 특징 1. 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 그렇기 때문에 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없습니다. 2. 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있습니다. 3. 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있습니다. 4. 다양.. 2022. 8. 30.

GSAP란? GSAP 웹 브라우저에서 탁월한 애니메이션을 구현하기 위한 자바스크립트 라이브러리입니다. 기존의 CSS 애니메이션과 JavsScript 애니메이션보다 사용성이 편하고, 탁월한 퍼포먼스가 돋보이는 애니메이션 전용 라이브러리입니다. 사용법 기존의 style이나 js 링크처럼 GSAP에서 script 링크를 가져와, 애니메이션을 쉽게 적용할 수 있게 만들어줍니다. 예시 원본 소스 보기 GSAP 소스 2022. 8. 29.

함수 이해하기 2 함수의 유형 : 함수와 매개변수를 이용한 형태 function func(num, str1, str2) { document.write(num + str1 + str2 + "되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); 결과 보기 함수 유형 : 함수와 변수를 이용한 형태 function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. "); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; const youStr1 = "함수"; const youStr.. 2022. 8. 22.

charAt() charAt() : 지정한 인덱스의 문자를 추출 : 반환(문자열) charAt () 메서드는 지정된 인덱스에있는 문자를 반환합니다. "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.charAt(); //j const currentStr2 = str1.charAt("0"); //j const currentStr3 = str1.charAt("1"); //a const currentStr4 = str1.charAt("2"); //v 2022. 8. 22.

match() match() : 문자열을 검색(정규식) : 반환(배열) match() 메서드는 문자열(정규식)을 검색하고 일치하는 결과값을 배열로 반환합니다. "문자열".match(찾을 문자열, 변경할 문자열) "문자열".match(정규식) "문자열".match(정규식, 변경할 문자열) const str1 = "javascript reference"; const currentStr1 = str1.match('javascript'); //['javascript', index: 0, input: 'javascript reference', groups: undefined] const currentStr2 = str1.match('reference'); //['reference', index: 11, input: 'javas.. 2022. 8. 22.

search() 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 curren.. 2022. 8. 22.

includes() 12. 문자열 메서드 : 검색 : includes() : 문자열 포함 여부 검색 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. "문자열".includes(검색값) "문자열".includes(검색값, 시작값) const str1 = "javascript reference"; const currentStr1 = str1.includes('javascript'); //true const currentStr2 = str1.includes('j'); //true const currentStr3 = str1.includes('b'); //false const currentStr4 = str1.includes('reference'); //true const currentStr5 = str1.. 2022. 8. 17.

padStart() / padEnd() 11. 문자열 메서드 : 변경 : padStart() / padEnd() : 문자열 추가 padStart() / padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const str1 = "456"; const currentStr1 = str1.padStart(1,"0"); //456 const currentStr2 = str1.padStart(2,"0"); //456 const currentStr3 = str1.padStart(3,"0"); //456 const currentStr4 = str1.padStart(4,"0"); //0456 const currentStr5 = str1.. 2022. 8. 17.

replace() / replaceAll() 10. 문자열 메서드 : 변경 : replace() / replaceAll() : 문자열 변경 replace()는 문자열을 부분 문자열로 구분하고 배열로 반환해줍니다. "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) const str1 = "javascript reference"; const currentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const currentStr2 = str1.replace("j", "J"); //자바스크립트 reference const currentStr3 = str1.replace("e", "E"); //jav.. 2022. 8. 17.

split() 09. 문자열 메서드 : 변경 : split() : 문자열에서 원하는 값을 추출 문자열에서 원하는 값을 추출하는 메서드입니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference"; const currentStr1 = str1.split(''); //[0: "j"1: "a"2: "v"3: "a"4: "s" 5: "c"6: "r"7: "i"8: "p"9: "t"10: " "11: "r"12: "e"13: "f"14: "e"15: "r"16: "e"17: "n"18: "c"19: "e"] const currentStr2 = str1.split(''); //['javascript', 'ref.. 2022. 8. 17.

trim() / trimStart() / trimEnd() 08. trim() / trimStart() / trimEnd() 문자열에서 공백을 제거하는 메서드입니다. 문자열 메서드 : 변경 : trim() : 문자열의 앞뒤 공백을 제거합니다 : 반환(문자열) 문자열 메서드 : 변경 : trimStart() : 문자열의 앞 공백을 제거합니다 : 반환(문자열) 문자열 메서드 : 변경 : trimEnd() : 문자열의 뒤 공백을 제거합니다 : 반환(문자열) 번호 기본값 메서드 리턴값 const str1 = " javascript "; const currentStr1 = str1.trim(); document.querySelector(".sample08_N1").innerHTML = "1"; document.querySelector(".sample08_Q1").inne.. 2022. 8. 17.

문자열 결합 / 템플릿 문자열 07. 문자열 : 문자열 결합 / 템플릿 문자열 문자열을 결합하는 방법과 템플릿 문자열 표시 방법입니다. 번호 기본값 메서드 리턴값 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample07_N1").innerHTML = "1"; document.querySelector(".sample07_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample07_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample07_P1").innerHTML = str1 + str2; //자바스크립트제이쿼리 const num1 .. 2022. 8. 17.

toUpperCase() / toLowerCase() 06. tooUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경합니다. toLowerCase() : 문자열을 소문자로 변경합니다. 번호 기본값 메서드 리턴값 const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample06_N1").innerHTML = "1"; document.querySelector(".sample06_Q1").innerHTML = "javascript"; document.querySelector(".sample06_M1").innerHTML = "toUpperCase()"; document.querySelector(".s.. 2022. 8. 17.

정규표현식 정규 표현식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 정규 표현식 객체 주요 메서드 속성 값 속성 설명 test() 정규 표현식과 일치하는 문자열이 있으면 true, 없으면 false를 반환합니다. var reg =/Javascript/; console.log(reg.test('Javascript')); //true console.log(reg.test('script')); //false match() 정규표현식과 일치하는 문자열을 배열로 만듭니다. 일치하는 문자열이 없으면 null을 반환합니다. var reg =/Javascript/; str = 'Java script' console.log(str.match('reg')); //null 정규 표현식 객체 플래그 .. 2022. 8. 17.

slice() / substring() / substr() 1. 문자열 메서드 : 변경 : slice() : 문자열에서 원하는 값을 추출 slice() : 문자열에서 원하는 값을 추출합니다. //slice(시작 위치) //slice(시작 위치, 끝나는 위치)//끝나는 위치 값이 시작 위치 값보다 커야함 //substr(시작위치) //substr(시작위치, 길이) const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(2); //vascript reference const currentStr4 =.. 2022. 8. 17.

indexOf()/lastIndexOf() indexOf() indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. indexOf()는 처음 발견되는 문자열에 대한 index를 반환하고, lastIndexOf는 마지막 문자열의 index를 반환합니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) const str1 = "javascript reference"; const currentStr1 = str1.indexOf('javascript'); //0 const currentStr2 = str1.indexOf('reference'); //11 const .. 2022. 8. 17.

내장함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 하는 경우, 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 때문에 인코딩 함수를 이용하여 문자를 부호화 시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent encodeURIComponent()의 디코딩 함수 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN() 숫자인지 아닌지를 판별하는 함수입니다. 숫자이면 false를 반환해 주고 숫자가 .. 2022. 8. 15.

배열 관련 메서드 배열 관련 메서드 01. 배열 메서드 : join() : 배열 요소 문자열을 결합 :반환(문자열) length 속성은 배열의 길이를 구할 수 있다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); const text2 = arrNum.join(' '); const text3 = arrNum.join('★'); const text4 = arrNum.join('-'); 03. 배열 메서드 : push() / pop() push() 메서드는 배열 마지막 요소에 추가하고, pop() 메서드는 배열 마지막 요소를 삭제한다. 번호 기본값 메서드 리턴값 결과값 const arrNum = [100, 200, 3.. 2022. 8. 11.

이전 1 2 다음

728x90

HTML

자세히보기

CSS

자세히보기

JAVASCRIPT

자세히보기

티스토리툴바