본문 바로가기

JAVASCRIPT28

mouseenter / mouseover mouseenter, mouseover 이번 시간에는 mouseenter와 mouseover의 차이점을 알아보도록 하겠습니다. mouseenter, mouseover란? mouseenter와 mouseover는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 마우스 이벤트이며, mouseenter는 mouseleave와 짝을 이루고, mouseover는 mouseout과 짝을 이룬다. mouseenter, mouseover의 차이점 해당 두 이벤트를 비슷하지만 이벤트 전파와 취소 가능성에 큰 차이가 있다. mouseenter는 이벤트가 발생 시 버블링이 일어나지 않아 자기 자신만이 이벤트르 받을 수 있고, mouseover는 이벤트가 발생할 때 버블링이 일어나며 상위 요소로 전파된다. mouseove.. 2022. 9. 5.
요소 크기 속성 및 메서드 요소 크기 이번 시간에는 요소의 크기를 알아주는 속성 및 메서드를 알아보겠습니다 9가지의 속성 및 메서드 01. 속성 : clientWidth() : 요소의 가로 값(마진/보더 미포함) 02. 속성 : clientHeight() : 요소의 높이 값(마진/보더 미포함) 03. 속성 : clientTop() : 요소의 Y축 값(부모 기준) 04. 속성 : clientLeft() : 요소의 X축 값(부모 기준) 05. 속성 : offsetWidth() : 요소의 가로 값(보더/패딩 포함) 06. 속성 : offsetHeight() : 요소의 높이 값(보더/패딩 포함) 07. 속성 : offsetTop() : 요소의 Y축 값(문서 기준) 08. 속성 : offsetLeft() : 요소의 X축 값(문서 기준) 0.. 2022. 9. 1.
함수 유형 함수와 매개 변수를 이용한 형태 매개 변수를 이용해 만들어진 함수입니다. 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 + ". " + 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() 문자열(정규식)을 검색하고, 위치 값(배열)을 반환한다. const str1 ="javascript reference" const currentStr1 = str1.match("javascipt"); // javascipt 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 currentStr6 = str1.match(/Reference/i); // Refer.. 2022. 8. 22.
메서드 (search) search() 문자열(정규식)을 검색하고, 위치 값(숫자)을 반환한다. "문자열".search("검색값"); "문자열".search(정규식 표현); const str1 ="javascript reference" const currentStr1 = str1.search("javascipt"); // 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("jqeurey"); // .. 2022. 8. 22.
메서드 (trim / trimStart / trimEnd) trim() / trimStart() / trimEnd() 앞 뒤 공백을 제거한다. 번호 기본값 메서드 리턴값 1 javascript trim javascript 2 str2 trimStart javascript 3 str3 trimEnd javascript const str1 = " javascript " const currentStr1 = str1.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = "javascript"; document.querySelector(".sample03_M1").innerHTML = "trim"; document.que.. 2022. 8. 18.
메서드 (includes) includes() 문자열 포함여부를 검색하여, 불린(true, false)를 반환한다. "문자열".includes(검색값) "문자열".includes(검색값, 위치값) const str = "javascript reference"; const currentStr1 = str1.includes("javascript") // true const currentStr2 = str1.includes("j") // true const currentStr3 = str1.includes("b") // flase //포함하고 있지 않기에 false const currentStr4 = str1.includes("reference") // true const currentStr5 = str1.includes("refere.. 2022. 8. 18.
메서드 (padStart / padEnd) padStart(), padEnd() 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환한다. const str1 = "123" const currentStr1 = str1.padStart(1, "0"); // 123 const currentStr2 = str1.padStart(2, "0"); // 123 const currentStr3 = str1.padStart(3, "0"); // 123 const currentStr4 = str1.padStart(4, "0"); // 0123 // 길이가 4자리로 늘어나기에 0추가 const currentStr5 = str1.padStart(5, "0"); // 00123 const currentStr6 = str1.padStart(6, "0"); .. 2022. 8. 17.
메서드 (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(문자열, 문자열,,,,) 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(", ", "reference", ", ", "book"); // javascript, reference, .. 2022. 8. 17.
메서드 (replace / replaceAll) replace() / replaceAll() 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") // Javascript rEference const cirrentStr4 = str1.replaceAll("e", "E") // Javascript rEfErEncE const cirrentS.. 2022. 8. 17.
메서드 (split) split() 문자열에서 원하는 값을 추출하여 배열로 반환한다. "문자열".split(구분자); "문자열".split(정규식 표현); "문자열".split(구분자, 갯수); const str1 = "javascript reference" 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'] const currentStr3 = str1.split('', 1) // ['j'] const currentStr4 = str1.split('.. 2022. 8. 17.
메서드 (toUpperCase / toLowerCase) toUpperCase() / toLowerCase() 문자열을 대문자로 변경 : 반환(문자열) / 문자열을 소문자로 변경 : 반환(문자열) 번호 기본값 메서드 리턴값 1 javascript toUpperCase JAVASCRIPT 2 JAVASCRIPT toLowerCase javascript const str1 = "javascript"; const currentStr1 = str1.toUpperCase(); document.querySelector(".sample02_N1").innerHTML = "1"; document.querySelector(".sample02_Q1").innerHTML = "javascript"; document.querySelector(".sample02_M1").innerH.. 2022. 8. 17.
문자열 결합 / 템플릿 문자열 문자열 결합 / 템플릿 문자열 템플릿 문자열은 내장된 표현을 사용하는 문자열이다. 번호 기본값 메서드 리턴값 1 자바스크립트, 제이쿼리 문자열 결합 자바스크립트제이쿼리 2 100, 200 숫자(number) 결합 300 3 모던, 자바스크립트, 핵심 문자열(string) 결합 나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다 4 모던, 자바스크립트, 핵심 템플릿 문자열 나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".. 2022. 8. 17.
정규식 표현 정규식 표현 문자열에서 특정 문자 조합을 찾기 위한 패턴이다. 사용 방법 var reg = /javascript/; var reg = new RegExp('Javascript'); 객체 플래그 플래그 설명 i 대소문자 구분 없이 정규식 표현과 문자열을 비교한다. var reg1 = /javascript/; var reg2 = /javascript/i; var str = 'Javascript'; console.log( reg1.test( str ) ); | false console.log( reg2.test( str ) ); | true g 문자열 전체를 정규식 표현으로 비교한다. var reg1 = /a/; var reg2 = /a/g; var str = 'javascript'; console.log( .. 2022. 8. 16.
메서드 (indexOf / lastIndexOf) indexOf() / lastIndexOf() 문자열에서 특정 문자의 위치를 찾고 숫자를 반환하는 메서드이다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) "문자열".lastIndexOf(검색값) "문자열".lastIndexOf(검색값, 위치값) const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascipt") // 00 const currentStr2 = str1.indexOf("reference") // 11 const currentStr3 = str1.indexOf("j") // 0 const currentStr4 = str1.indexOf("a") // 1 const currentStr.. 2022. 8. 16.
메서드 (slice / substring / substr) slice() / substring() / substr() 위 세 가지의 메서드는 문자열에서 원하는 값을 추출하여 문자열로 반환한다. "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는위치) // 시작 위치의 값은 끝나는 위치 값보다 작아야 합니다. // substring() 시작 값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지) "문자열".substr(시작위치) "문자열".substr(시작위치, 길이) // 각 주석 표시는 해당 메서드가 추출한 반환 값 const str1 = "javascript reference" const cuurrentStr1 = str1.slice(0); // javascript reference const cuurrentStr2 = str1.s.. 2022. 8. 16.
내장 함수 내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말한다. 인코딩, 디코딩 함수 http://icoxpublish.com/search?query=자바스크립트'와 같이 URL주소에 쿼리 정보를 전송해 데이터를 처리해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있다. 이런 경우 인코딩 함수를 이용하여 문자를 부호화시키고 부호화된 문자를 다시 원래 문자로 되돌릴 수 있다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ()-_.~*!'을 제외한 문자를 인코딩한다. decodeURIComponent() encodeURIComponent())의 디코딩 함수 숫자, 유/무한 값 판별 함수 함수명 설명 isNaN() 숫자인지 아닌지를 .. 2022. 8. 16.
메서드 (join, push, pop) 01. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열) join() 메서드는 배열의 모든 요소 값을 문자열로 변경하며, 인수로 받은 문자로 연결해서 문장열로 반환한다. const arrNum = [100, 200, 300, 400, 500]; const text1 = arrNum.join(''); // 기본값 const text2 = arrNum.join(' '); // 띄어쓰기 const text3 = arrNum.join('*'); // * const text4 = arrNum.join('-'); // - 메서드 결과값 join('') 100200300400500 join(' ') 100 200 300 400 500 join('*') 100*200*300*400*500 joi.. 2022. 8. 11.
요소 선택 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 getElementById() document.getElementById('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementByClassName() document.getElementByClassName('menu')일 경우 HTML 요소 중 class 명이 'menu'인 요소들을 선택합니다. getElementByTagName() document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. getElementByName() document.getElementByName('txt')일 경우 HTML 요소 중 name명이 '.. 2022. 8. 5.
지역 변수 / 전역 변수 지역 변수 / 전역 변수 변수는 함수 블록{}을 기준으로써 선언 위치에 따라 전역 및 지역 변수로 나뉜다. ps.전역 변수는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만, 지역 변수는 함수 블록{} 내에서만 가능 지역 변수와 전역 변수 선언 위치 지역 변수 전역 변수 function 함수() { var 변수; } var 변수; function 함수() { } 함수 레벨 스코프 var는 함수 블록{}에서만 지역 변수가 존재하며 블록{}이나 제어문 블록{}에서는 지역변수가 존재하지 않는다. ES6에서는 추가된 let과 const는 블록{}이나 제어문 블록{}에서도 지역 변수를 선언 가능 var num = 10; { var num = 20; // num은 전역 변수 console.log(num); /.. 2022. 7. 28.
함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합 분류 종류 설명 사용자 정의 함수 1. 선언적 함수 2. 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 내장 함수 1. 안코딩, 디코딩 함수 2. 숫자 판별 함수 3. 유 무한 값 판별 함수 4. 숫자변환 함수 5. 문자 변환 함수 6. 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다. 선언적 함수 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에 호출 가능 function func(){ document.write("함수가 실행되었습니다.1"); } func(); 결과보기 함수가 실행되었습니다.1 익명 함수 익명 함수는 변수.. 2022. 7. 26.
Data Type 데이터 타입 데이터 타입은 변수에 저장되는 데이터 타입 유형 Primitive(원시) 데이터 타입과 Object(객체) 데이터 타입으로 나뉜다. Primitive(원시) 데이터 타입은 number, string, boolean, null 등이 있으며, Object(객체) 데이터 타입에는 function, object, arrary 등이 있다. number(숫자) 데이터 정수, 소수점 , 지수를 표한 가능 var num = 10; var num2 = 10.5; var num3 = 1e+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num2); // 100, 1e+2는 1*10의 2승을 의미 string(문자) 데이터 ''또는""로 표.. 2022. 7. 25.
조건문 See the Pen Untitled by KDB6 (@kdb6) on CodePen. prompt prompt()는 숫자로 입려간 데이터를 문자 데이터로 처리하기에 '+'연산자를 사용할 경우 더하기 연산이 아닌 연결 연산이 된다. 이 문제를 해결하기 위해서는 Number 사용 See the Pen if문 2 by KDB6 (@kdb6) on CodePen. switch switch(값)의 값과 case의 값들은 하나씩 비교해 일치하는 case를 실행시켜준다. switch문은 if문과 다르게 특정 조건에 만족 했을 때 블록{}을 스스로 빠져나가지 못한다. 이러기에 break명령어를 주어 switch case문의 블록{}을 빠져 나가도록 한다. See the Pen if문 3 by KDB6 (@kdb6) .. 2022. 7. 25.
반복문 반복문 반복문은 프로그램에에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 반복적으로 실행시키는 문법을 말합니다. 반복문에는 while문, do while문, for문이 있으며, for문을 가장 많이 사용합니다. for (초기 값 ; 조건식; 증감값) { 실행문 } while문 for (초기 값 ; 조건식; 증감값) { 실행문 } do while문 for (초기 값 ; 조건식; 증감값) { 실행문 } for문 for (초기 값 ; 조건식; 증감값) { 실행문 } 0부터 99까지 출력하기 //0부터 99까지 출력하기 for(let i=0; i 2022. 7. 25.
연산자 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 연산자입니다. 자바스크립트에서 연산자에는 산술연산자, 대입연산자, 비교연산자, 논리연산자 등이 있습니다. 산술 연산자 산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자다. 산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽으로 이루어진다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 사용할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. ++ 1씩 증가시킬 때 사용합니다. -- 1씩 감소시킬 때 사용합니다. '+'.. 2022. 7. 20.
기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 기초적인 특징과 기본 문법이 있다. 가장 기본이기에 이부분을 숙지하고 자바스크립트를 공부 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. HTML은 정적인 레이아웃을 표현한다면, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프의 커뮤니케이션 브렌던 마이크가 개발 Netscape Navigsator 2.0 에 구현되었습니다. 1996년에는 마이크로소프트사의 자바스크립트 기본 규칙 1. 세미콜론(;) 하나의 실행문이 끝나면 마지막에 세미콜로(;)을 붙여준다. 세미콜론(;)을 붙여 주지 않아도 상관은 없습니다. var num = 5; document.writ.. 2022. 7. 20.

INFORMATION

javascript

css

html