Giant Danio Fish
본문 바로가기

Javascript29

오답노트01 오답노트 2022-10-06일자 오답노트입니다. 01. 결괏값을 작성하시오. parseInt(x) : x의 자료형을 숫자(정수)로 바꿔줌, 숫자가 아니면 NaN 반환합니다. NaN이 나올때 까지 식을 돌려보면 6 + 9 + 9 + 1 = 25 function q1(num) { let answer = 0; while(num) { answer += num % 10; num = parseInt(num / 10); } return answer; } console.log(q1(1996)); 정답 25 02. 결괏값을 작성하시오. sort()메서드는 순서대로 정렬합니다. 맨 첫번째 숫자 기준으로 반환하므로 정답은 1, 10, 2, 3, 31, 32, 4가 됩니다. function q2() { const array .. 2022. 10. 6.
mouseenter 과 mouseover 의 차이점 mouseenter 과 mouseover 메서드의 차이 안녕하세요 오늘은 mouseenter 과 mouseover 메서드의 차이점을 알려드리겠습니다. mouseover 와 mouseenter 둘 모두 이벤트 메서드 addEventListener에서 사용하는데요, 둘 모두 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다 라는 공통점을 가지고있는데요, 차이점이란 mouseover은 버블링 효과를 가진다는 점입니다. 버블링 효과에 대해선 아래쪽 예시를 통해 쉽게 알려드리겠습니다. 예시 See the Pen mouseover by younghwan12 (@younghwan12) on CodePen. mouseenter 요소에 마우스 포인터가 진입하면 발생합니다. 오로지 자기 자신에게 .. 2022. 9. 5.
요소 크기 메서드 위치 및 크기를 표현하는 속성 메서드 안녕하세요 오늘은 위치 및 크기를 표현하는 속성 메서드에 대해서 알려드리겠습니다. 속성 메서드 설명 메서드 설명 clientWidth 요소의 가로(패딩 포함, 보더/마진 미포함) clientHeight 요소의 세로(패딩 포함, 보더/마진 미포함) clientTop 요소의 Y축값(부모기준) clientLeft 요소의 X축값(부모기준) offsetWidth 요소의 가로(패딩/보더 포함, 마진 미포함) offsetHeight 요소의 세로(패딩/보더 포함, 마진 미포함) offsetTop 요소의 X축값(문서기준) offsetLeft 요소의 Y축값(문서기준) element.getBoundingClientRect 크기 및 위치 속성 메서드 예시 See the Pen Untitl.. 2022. 9. 1.
문자열 관련 메서드 charAt() charAt() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 charAt()입니다. charAt() charAt() 메서드는 지정한 인덱스의 문자를 추출 해 문자열을 반환합니다. "문자열".charAt(숫자); const str1 = "javascript reference"; const currentStr1 = str1.chartAt(); //j const currentStr2 = str1.chartAt("0"); //j const currentStr3 = str1.chartAt("1"); //a const currentStr4 = str1.chartAt("2"); //v 결과 확인하기 j j a v 2022. 8. 22.
문자열 관련 메서드 match() match() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 match()입니다. 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 current.. 2022. 8. 22.
문자열 관련 메서드 search() search() 안녕하세요. 오늘 소개시켜드릴 문자열 메서드는 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.searc.. 2022. 8. 22.
함수의 유형 함수의 유형 안녕하세요. 함수의 유형에 대해 설명 드리겠습니다. 함수와 매개변수를 이용한 형태 매개변수를 이용해서 함수를 만들 수 있습니다. function func(num,str1, str2){ document.write(num + ". " + str1 + "가 " + str2 +"되었습니다."); } func("1","함수", "실행"); func("2","자바스크립트", "실행"); func("3","제이쿼리", "실행"); 결과 확인하기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 함수와 변수를 이용한 형태 실행문에 변수를 넣어서 함수를 실행하였습니다. function func(num, str1, str2){ document.write(num +.. 2022. 8. 22.
includes() includes() 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.includes("referen.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 : 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴{}입니다. `string text` //문자열 결합 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.write(str1 + str2); // 자바스크립트제이쿼리 //숫자(number) 결합 const num1 = 100; const num2 = 200; document.write(num1 + num2); //300 //문자열 결합 const text1 = "모던"; const text2 = "자바스크립트"; const text3 = "핵심"; document.write("나는 " + text1 +"(modern) " + text2 +"(javascript) "+ .. 2022. 8. 17.
문자열 관련 메서드 (replace(), replaceAll()) replace() / repalaceAll() replace() 메서드는 문자열을 부분 문자열로 구분하고 배열로 반환합니다. "문자열".replace("찾을 문자열", 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) /g는 global의 약자로 여러개를 찾는다는 의미다. const str1 = "jcavscript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e".. 2022. 8. 17.
문자열 관련 메서드 repeat() repeat() repeat() 메서드는 복사하여, 복사한 새로운 문자열을 반환합니다. str.repeat(count); const str1 = "javascript"; const currentStr1 = str1.repeat(0); //"" 0번 반복이므로 빈란이나옵니다. const currentStr2 = str1.repeat(1); //"javascript" const currentStr3 = str1.repeat(2); //"javascriptjavascript" 2022. 8. 17.
문자 관련 메서드 (padStart(), padEnd()) padStart() / padEnd() padStart/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. str.padStart(targetLength [, padString]) 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.padStart(5, "0"); //00456 con.. 2022. 8. 17.
문자열 관련 메서드 concat() concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. 기존배열을 변경하지 않으며, 추가된 새로운 배열을 반환합니다. array.concat([value1[, value2[, ...[, valueN]]]]) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const curren.. 2022. 8. 17.
문자열 관련 메서드 (trim(), trimStart(), trimEnd()) trim() / trimStart() / trimEnd() trim() 메서드는 앞, 뒤 공백을 제거합니다. trimstart는 말그대로 앞쪽 공백, trimEnd는 뒤쪽 공백, trim은 공백을 전부 없앱니다. str.trim() // 예시입니다. const str1 = " javascript "; const currentStr1 = str1.trim(); //javascript const str2 = " javascript "; const currentStr2 = str2.trimStart(); //javascript const str2 = " javascript "; const currentStr2 = str2.trimEnd(); // javascript 2022. 8. 17.
문자열 관련 메서드 소문자 대문자(toUpperCase(), toLowerCase()) toUpperCase() / toLowerCase() toUpperCase() : 문자열을 대문자로 변경 하고 toLowerCase() : 문자열을 소문자로 변경 한다. str.toUpperCase() // 예시입니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); //JAVASCRIPT const str2 = "JAVASCRIPT"; const currentStr2 = str2.toLowerCase(); //javascript 2022. 8. 17.
문자열 관련 메서드 split() split() 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); // 예시입니다. const str1 = "jcavscript reference" const currentStr1 = str1.split(''); //['j', 'c', 'a', 'v', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' '); //['jcavscript', 'reference'] const currentStr3 = str1.split('', 1); //.. 2022. 8. 17.
문자열 관련 메서드 (indexOf() / lastindexOf()) indexOf() / lastindexOf() indexOf는 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. 일치하는 값이 없을 시 -1을 반환합니다. lastindexOf는 indexOf와 같이 위치를 찾고 숫자를 반환하지만 기준점이 끝이 시작입니다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastindexOf(검색값) "문자열".lastindexOf(검색값, 위치값) // 예시입니다. const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str2.indexOf("reference"); //11 const .. 2022. 8. 16.
문자열 관련 메서드 (slice(), susbstring(), substr()) 문자열 관련 메서드 자바스크립트 문자열 관련 메서드중 오늘은 slice(), susbstring(), substr()에 대해서 소개드리려고 합니다. slice() 문자열에서 원하는 값을 추출하여 문자열을 반환하는 메서드입니다. "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는위치) // 예시입니다. 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 curr.. 2022. 8. 16.
정규식 표현 정규 표현식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 정규 표현식 객체 주요 패턴 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는 'ad', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합니다. /[^abc]d/는 'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-a] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를.. 2022. 8. 16.
내장 함수 내장 함수 내장 함수란 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 ㄱ녕우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 () -_ . ~ * ! ' 을 제외한 문자를 인코딩합니다. decodeURIComponent() encodeURIComponent() 의 디코딩 함수 예시 // 예시입니다. var encodeStr = '자바스크립트'; console.log(encodeURICo.. 2022. 8. 13.
배열 관련 메서드(join(), push(), pop()) 배열 관련 메서드 자바스크립트 배열 관련 메서드중 오늘은 join(), push(), pop()에 대해서 소개드리려고 합니다. join() 배열 요소 문자열을 결합할 수 있고, 문자열을 반환할 수 있습니다. 자주쓰이며 중요합니다! 예시로 설명 드리겠습니다. // 예시입니다. const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); //리턴값이 공백 없이 나옵니다. const text2 = arrNum.join(' '); //리턴값이 공백을 추가해서 나옵니다. const text3 = arrNum.join('★'); //리턴값에 ★을 추가해서 나옵니다. const text4 = arrNum.join('-'); //리턴값에 -을 추가해.. 2022. 8. 11.
요소 선택 메서드 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByID() document.getElementByID('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() document.getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementsByName() document.getElementsByName('txt')일 경우 HTML 요소 중 nam.. 2022. 8. 6.
지역변수/전역변수 지역변수/전역변수 변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역변수'로 나누어집니다. '전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역변수'는 함수 블록{} 내에서만 사용할 수 있습니다. 전역 변수와 지역 변수 선언 위치 전역 변수 지역 변수 var 변수; function 함수(){ } function 함수(){ var 변수; } 예시3-14 // 함수블록안에 kor 변수는 전역변수인데 func함수를 호출 하게 되면 kor 변수 값이 90에서 100으로 바뀐다. var kor = 90; function func(){ kor = 100; // 전역변수 document.write(kor); // 100 } func(); document.write(.. 2022. 7. 28.
함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합이다. 함수의 종류 1. 선언적 함수 2. 익명함수 3. 매개변수 함수 4. 리턴값 함수 1. 선언적함수 '선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능하다. 선언적 함수의 형식은 다음과 같다 function func() { document.write("실행되었습니다1."); } 결과 확인하기 실행되었습니다1. 2. 익명함수 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 준다. 선언적 함수의 형식은 다음과 같다 const func = function() { document.write("실행되었습니다2."); } 결과 확인하기 실행되었습니다2. 3. 매개변수.. 2022. 7. 26.
데이터 타입 데이터 타입 데이터 타입(Daya Type)은 변수에 저장되는 데이터의 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌 수 있습니다. Primitive(원시) 데이터 타입으로는 number, string, boolean, undefined, null, symbol 등이 있으며, Object(객체) 데이터 타입에는 function, object, array 등이 있습니다. number(숫자) 데이터 number 데이터는 정수, 소수점, 지수를 표현할 수 있습니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(n.. 2022. 7. 25.
조건문 조건문 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장입니다. if문과 switch문이 있습니다. if문 if문의 기본 형식입니다. if (조건식) { 실행문; } if (조건식) { 실행문1; } else { 실행문2; } if (조건식) { 실행문1; } else if (조건식2) { 실행문2; } else { 실행문3; } switch문 switch문의 기본 형식입니다. switch (값) { case 값1 : 실행문; break; case 값2 : 실행문; break; default : 실행문; } 01. if문(제어문) //조건문 if,else문의 기본문이다 if("0null"){ document.write("실행되었습니다(true).".. 2022. 7. 25.
반복문 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다 for문 for문의 기본 형식입니다. for ( 초기값; 조건식; 증가감식){ 실행문; } while문 while문의 기본 형식입니다. 초기 값 while (조건식) ){ 실행문; 증가감식; } do while문 do while문의 기본 형식입니다. 초기 값 do {{ 실행문; 증가감식; } while (조건식) 1. 0부터 99까지 출력하기 시작값 0부터 1씩 증가해서 100보다 작거나 같은 값 까지 구한다 //0부터 99까지 출력하기 for( let i = 0; i < 100; i++ ){ .. 2022. 7. 21.
연산자 기본 규칙 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자를 다루는 기본적이면서도 가장 많이 사용되는 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫 을 구할 때 사용 합니다. % 나머지를 구할 때 사용 합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. 대입 연산자 대입 연산자는 변수에 값을 대입할때 사용하는 이항 연산자이며, 피연산자들의 결합 방향은 오른쪽에서 왼쪽입니다. 대입 연.. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다 HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는.. 2022. 7. 20.

광고 준비중입니다