Animated Rainbow Nyan Cat
본문 바로가기

javascript26

mouseenter / movesover 차이점 mouseenter / movesover 차이점 mouseenter 자바스크립트 이벤트 Explorer전용 이벤트 입니다. mouseenter mouseenter는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생한다. See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. movesover mouseenter는 오로지 자기 자신에게 마우스 포인터가 와야만 발생한다. See the Pen Untitled by 이유나 (@fkdldhs8484) on CodePen. 2022. 9. 5.
함수 유형 함수 유형 01 : 함수와 매개변수를 이용한 형태 함수 : 실행문 , 재활용 { function func(num, str1, str2){ document.write(num + ". " + str1 + "가" + str2 + "되었습니다. "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); } 함수 유형 02 : 함수와 변수를 이용한 형태 { function func(num, str1, str2) { document.write(num + ". " + str1 + "가" + str2 + "되었습니다. "); } const youNum1 = 1; const youNum2 = 2; const youNum3 = 3; co.. 2022. 8. 22.
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 : 반환 (배열) 셀 범위에서 지정된 항목을 검색하고 범위에서 해당 항목이 차지하는 상대 위치를 반환합니다. // "문자열".search("검색값"); // "문자열".search(정규식 표현); 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(.. 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 currentStr6 = str1.searc.. 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 = str.. 2022. 8. 17.
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.padStart(5, "0"); //00456 const currentStr6 = str1.padStart(6, "0"); //000456 c.. 2022. 8. 17.
repeat repeat() repeat() 메서드는 문자열을 복사하여, 복사한 새로운 문자열을 반환합니다. const str1 = "javascript"; const currentStr1 = str1.repeat(0); //'' 안나옴 const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript 2022. 8. 17.
concat concat() concat() 메서드는 둘 이상의 문자열을 결합하여, 새로운 문자열을 반환합니다. // "문자열",concat()(문자열) // "문자열",concat()(문자열,문자열...) const str1 = "javascript"; const currentStr1 = str1.concat("reference"); //javascriptreference const currentStr2 = str1.concat(" ", "reference"); //javascript reference const currentStr3 = str1.concat(", ", "reference"); //javascript, reference const currentStr4 = str1.concat(", ", "refer.. 2022. 8. 17.
replace/replaceAll replace()/ replaceAll() replaceAll() 메서드는 무자열을 부분 문자열로 구분하고 배열로 반환한다. // "문자열". replace("찾을 문자열","변경할 문자열") // "문자열". replace(정규식) // "문자열". replace(정규식, "변경할 문자열") const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); //Javascript reference const cirrentStr3 = str1.replace("e", "E"); //javasc.. 2022. 8. 17.
split split() 문자열에서 원하는 값을 배열로 반환합니다. // "문자열".split(구분자); // "문자열".split(정규식 표현 가능); // "문자열".split(구분자,갯수); const str1 = "javascript reference" //split 알고리즘 많이 사용 중복된것을 삭제하거나 바꿀 수 잇다. 합칠수도 있음. const currentStr1 = str1.split('') // ['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', ' ', 'r', 'e', 'f', 'e', 'r', 'e', 'n', 'c', 'e'] const currentStr2 = str1.split(' ') // ['javascript', 'reference'] con.. 2022. 8. 17.
소문자/대문자/공백 trim () / trimStar() / trimEnd() 앞 뒤 공백을 제거 한다.(회원가입할 때 많이 사용한다.) const str1 = " javascript " const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = str1; document.querySelector(".sample03_M1").innerHTML = "trim()"; document.querySelector(".sample03_P1").innerHTML = currentStr1; const str2 = " javascript "; cons.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 템플릿 문자열이란? 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다. { // 01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySelector(".sample01_M1").innerHTML = "문자열(string) 결합"; document.querySelector(".sample01_P1").innerHTML = str1 + str2; // 02 const num1 = 100; cons.. 2022. 8. 17.
indexOf() / lastIndexOf indexOf() 문자열에서 특정 문자의 취치를 찾고 숫자를 반환합니다. "문자열, indexOf(검색값)" "문자열, indexOf(검색값, 위치값) " //0 1 2 3 4 5 6 7 8 9 10 11 const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str1.indexOf("reference"); //11 const currentStr3 = str1.indexOf("j"); //0 const currentStr4 = str1.indexOf("a"); //1 const currentStr5 = str1.indexOf("v"); //2 const currentS.. 2022. 8. 16.
slice()/substring()/substr() slice() // "문자열", slice(시작위치) // "문자열", slice(시작위치, 끝나는 위치) const str1 = "javascript relerence" const currentStr1 = str1.slice(0); //javascript relerence const currentStr2 = str1.slice(1); //javascript relerence const currentStr3 = str1.slice(2); //vescript relerence const currentStr4 = str1.slice(0, 1); //1 const currentStr5 = str1.slice(0, 2); //ja const currentStr6 = str1.slice(0, 3); //jav c.. 2022. 8. 16.
정규식 표현 정규표현 정규표현 ? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[abc]d/는'ab', 'bd', 'cd' [^abc] a, b, c 를 제외한 문자 하나를 검색합니다. /[^abc]d/는'ed', 'fd', 'gd' [A-Z] 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표' 문자 그대로의 의미를 사용할 경우 '₩.' 으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색 합니다. \W 알파벳, 숫자, _를 제외하고 검색 합니다. .. 2022. 8. 16.
내장함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. 인코딩, 디코딩 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그햄의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있다. 함수명 설명 encodeURLComponent() 영문,숫자와 () -_.~*!' 을 제외한 문자를 인코딩합니다. decodeURIComponent() decodeURIComponent()의 디코딩 함수 숫자, 유/무한 값 판별 함수 URL주소에 쿼리 정보를 전송하여 데이터를 처리해야 되는 프로그햄의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있다. 함수명 설명 isNaN() 숫자인지 아닌지를 판별하는 함수이다. 숫자이면 false를 반.. 2022. 8. 14.
join() / push() / pop() 배열 객체 배열(array)은 같은 타입의 변수들로 이루어진 유한 집합으로 정의됩니다 join() join 은 배열의 요서들을 연결하여 하나의 문자열로 만드는 함수이다. 배열의 길이가 0이면 빈 문자열을 반환하게 된다. 구분값이 존재하지 않으면 쉼표로 표기되어 연결되고 빈 문자열일 경우 구분없이 연결된다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] length 5 2 [100, 200, 300, 400, 500] length 5 3 [1, 2, ['a', 'b']] length 3 const arrNum = [100, 200, 300, 400, 500]; //01 document.querySelector(".sample01_N1").innerHTML = "1"; docu.. 2022. 8. 11.
요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementByld() documet.getElementByld('content'일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다.) getElementsByClassName() getElementsByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsByTagName() getElementsByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul' 인 요소들을 선택합니다. getElementsByName() >getElementsByName('txt')일 경우 HTML 요소 중 name명이 'txt'인 요소들을 선택합니다. querySeke.. 2022. 8. 5.
전역변수와 지역변수 전역변수와 지역변수 전역변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 지역변수는 함수블록{} 내에서만 사용 가능 전역변수 kor 변수는 전역 변수입니다. 따라서 geScore()함수를 호출 하게 되면 kor 변수 값이 90에서 100으로 바뀐다. var kor = 90; function getscore() { kor = 100; //전역변수 console.log(kor); // 100 } getscore(); console.log(kor); // 100 var num = 10; { var num = 20; //num은 전역 변수이다. console.log(num);//20 } console.log(num);//20 var num = 10; { var num = 10; if (num === .. 2022. 7. 29.
함수 함수 함수는 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합 선언적 함수 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능 function 함수 (){ 실행문; } ; function compute(){ console.log('선언적 함수'); } ; 익명 함수 변수 선언 이후에 호출 var 변수 = function(){ 실행문; }; var compute = function(){ console.iog('익명 함수'); }; 매개변수 함수를 호출할 때 전달하는 변수 function 함수명(매개변수1, 매개변수2,..){ 실행문; } 함수명(매개변수1 값, 매개볏누2 값,..); function getAvg(s1, s2){ var avg = (s1 +s2) /2; return avg; } co.. 2022. 7. 26.
데이터타입 데이터 타입 변수에 저장되는 데이터의 유형으로 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나눌수 있다. Primitive(원시)에는 number, string, boolean, undefined, null, symbol등이 있으며, Object(객체)에는 function, object, array등이 있습니다. number(숫자)데이터 정수, 소수점, 지수를 표현 할 수 있다. var num = 10; var num = 10; var num = 10; console.log(num1);//10 console.log(num2);//10.5 console.log(num2);//100,le+2는 1*10의 2승을 의미한다. string(문자)데이터 "또는"으로 표현,작은따옴표를 .. 2022. 7. 26.
조건문 if문 if문은 if문안에 또 다른 if문을 중첩하여 사용할수 있다. if (조건식) { 실행문; } See the Pen if문 by 이유나 (@fkdldhs8484) on CodePen. switch문 switch문 if문과 다르게 특정조건에 만족 했을때 블록{}을 스스로 빠져나가지 못한다. 초기값 while (조건식) { 실행문; 증가감식; } 2022. 7. 26.
for문 이해하기 반복문 반복문은 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서을 반복적으로 실행시키는 문법을 말한다. 반복문에는 while문, do while문, for문 을 가장 많이 사용한다. while문 특정조건에 만족할때 까지 반복 초기값{ while (조건식) { 실행문; 증가감식; } do while문 조건식이 true 일 경우에 계속해서 반복합니다. 조건식이 false가 되면 반복은 멈춘다. 초기값{ do { 실행문; 증가감식; } while (조건식) for 문 반복횟수가 정해진 경우 사용 for (초기값; 조건식; 증가감식){ 실행문; } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for (let i=0; i 2022. 7. 21.
연산자 연산자 어떤 함수에 작용해 그 함수로 변형시키는 함수를 말한다. 자바스크립트에서 연산자에는 산술 연산자, 대입 연산자, 비교연산자, 논리연산자 등이 있습니다. 산술연산자 요소의 종류로는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)이 있습니다. 산술 연산자는 변수와 변수 사이에 들어가 들어가 연산을 할 수 있도록 만들어 줍니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구 할 때 사용 % 나머지를 구 할 때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 대입 연산자 '='같다는 의미가 아니라 변수에 대입(저장)을 의미 대입 연산자 종류 설명 = num .. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있습니다. 가장 기본이기 때문에 이 부분을 숙지하고 자바스크립트를 공부하세요! 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급되었습니다. 1997년부터 ESMAScript를 따르는 표준화 .. 2022. 7. 20.

/
/
/

CSS
광고준비중입니다.