본문 바로가기

자바스크립트58

[JavaScript] 함수 유형 알아보기 함수 유형 이번 포스팅에서는 자바스크립트의 재활용 목적으로 사용되는 함수 유형 7가지를 살펴보도록 하겠습니다. 1. 함수 유형 : 함수와 매개변수를 이용한 형태 재활용 목적으로 사용되며 함수와 매개변수를 이용한 형태입니다. function func(num, str1, str2) { document.write(num + ". " + str1 + "가 " + str2 + "되었습니다. "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "제이쿼리", "실행"); // 이런식으로 추가하면서 소스 재활용이 가능함 결과 보기 1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 제이쿼리가 실행되었습니다. 2. 함수 유형 : 함수와 .. 2022. 8. 22.

[JavaScript] 문자열 메서드 - includes() 문자열 메서드 : 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 = s.. 2022. 8. 17.

[JavaScript] 문자열 앞·뒤 채우기 - padStart() & padEnd() 문자열 메서드 : padStart() / padEnd() 이번 포스팅에서는 문자열 메서드 중 padStart()와 padEnd()에 대해 다뤄보도록 하겠습니다. padStart() / padEnd() 주어진 길이에 맞게 앞·뒤의 문자열을 채우고, 새로운 문자열을 반환한다. 앞의 문자열을 채우는 건 padStart(), 뒤의 문자열을 채우는 건 padEnd(). "문자열".padStart(길이) "문자열".padStart(길이, 채울 문자열) "문자열".padEnd(길이) "문자열".padEnd(길이, 채울 문자열) 코드 보기 const str1 = "456"; const currentStr1 = str1.padStart(1, "0"); // 456 const currentStr2 = str1.padSta.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - repeat() 문자열 메서드 : repeat() 이번 포스팅에서는 문자열 메서드 중 repeat()에 대해 다뤄보도록 하겠습니다. repeat() 문자열을 복사하여 복사한 새로운 문자열을 반환해준다. 즉, 단순 반복 기능이다. str1.repeat(반복 횟수); 코드 보기 const str1 = "javascript"; const currentStr1 = str1.repeat(0); //아무것도 출력되지 않음 const currentStr2 = str1.repeat(1); //javascript const currentStr3 = str1.repeat(2); //javascriptjavascript 2022. 8. 17.

[JavaScript] 문자열 메서드 - concat() 문자열 메서드 : 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(",.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - replace() & replaceAll() 문자열 메서드 : replace() / replaceAll() 이번 포스팅에서는 문자열 메서드 중 replace()와 replaceAll()에 대해 다뤄보도록 하겠습니다. replace() / replaceAll() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환한다. 문자열을 부분 문자로 구분하고 문자열로 반환한다. Visual Studio Code의 replace 기능을 떠올리면 이해하기 쉬울 것. //"문자열".replace(찾을 문자열, 변경할 문자열) //"문자열".replace(정규식) //"문자열".replace(정규식, 변경할 문자열) replaceAll에 대한 설명은 아래 예시 코드 밑의 주석 참고할 것. 코드 보기 const str1 = "javascript r.. 2022. 8. 17.

[JavaScript] 문자열 메서드 - split() 문자열 메서드 : split() 이번 포스팅에서는 문자열 메서드 중 split()에 대해 다뤄보도록 하겠습니다. split() 문자열에서 원하는 값을 배열로 반환한다. split('') 따옴표 안에 아무것도 안 쓸 경우 모든 문자열이 한 글자씩 쪼개져 나오며 따옴표 안에 문자열에 포함된 내용을 쓸 경우 해당 내용만 지워진 채 출력된다. // "문자열".split(구분자); // "문자열".split(정규식 표현); // "문자열".split(구분자, 제한(개수설정)); 코드 보기 const str1 = "javascript reference"; const currentStr1 = str1.split(''); //['j', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't', '.. 2022. 8. 17.

[JavaScript] 문자열 앞·뒤 공백 제거하기 - trim() & trimStart() & trimEnd() 문자열 메서드 : trim() / trimStart() / trimEnd() 이번 포스팅에서는 문자열 메서드 중 trim() / trimStart() / trimEnd() 이 3가지에 대해 다뤄보도록 하겠습니다. trim() / trimStart() / trimEnd() 문자열의 앞·뒤 공백을 제거한다. trim() : 문자열 앞·뒤 공백 제거 trimStart() : 문자열 앞 공백만 제거 trimEnd() : 문자열 뒷 공백만 제거 번호 기본값 메서드 리턴값 1 ___javascript___ trim() javascript 2 ___javascript___ trimStart() javascript___ 3 ___javascript___ trimEnd() ___javascript 코드 보기 // 앞 뒤.. 2022. 8. 17.

[JavaScript] 대소문자 변경 - toUpperCase() & toLowerCase() 문자열 메서드 : toUpperCase() / toLowerCase() 이번 포스팅에서는 문자열 메서드 중 toUpperCase와 toLowerCase에 대해 다뤄보도록 하겠습니다. 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"; .. 2022. 8. 17.

[Search Effect] 검색 이펙트 02 검색 이펙트 만들기 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 CSS 속성들을 검색창 형식으로 원하는 결과가 나오도록 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 02의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 02 03 04 05 06 indexOf()를 이용하여 검색하기 CSS 속성 검색하기 검색하기 플렉스, 애니메이션, 백그라운드, 기타 등등 유형별로 검색해보세요. 전체 속성 개수 : 0 accent-c.. 2022. 8. 17.

[JavaScript] 정규 표현식 알아보기 정규 표현식이란? 정규 표현식(正規表現式, Regular Expression)은 문자열에서 특정 문자 조합을 찾기 위한 패턴으로 특정한 조건의 문자를 검색하거나 치환하는 과정을 매우 간편하게 처리할 수 있도록 하는 수단입니다. 정규 표현식 객체 주요 패턴 패턴 설명 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-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0~9 까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표'.. 2022. 8. 16.

[Search Effect] 검색 이펙트 01 검색 이펙트 만들기 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 검색 이펙트를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 그동안 배웠던 HTML 태그와 CSS 속성, JavaScript 실행문들을 검색창에 키워드를 입력해서 설명을 볼 수 있는 페이지를 만들어보도록 합시다. 나중에 모르는 게 생겼을 때 공부하기 편하게 말이죠! 자, 그럼 시작해볼까요? HTML 소스 보기 검색 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. CSS 소스를 함께 보고 싶다면 맨 아래의 'CSS 소스 보기' 버튼을 누를 것. Search 01 HTML CSS JavaScript 02 03 04 05 06 indexOf()를 이용하여 검색하기 HTML 태그 검색하기 검색하기 a : .. 2022. 8. 16.

[JavaScript] 문자열 메서드 - indexOf() & lastIndexOf() 알아보기 문자열 메서드 : indexOf() / lastIndexOf() 이번 포스팅에서는 문자열 메서드 중 indexOf와 lastIndexOf에 대해 다뤄보도록 하겠습니다. indexOf() 문자열에서 특정 문자열의 첫번째로 시작되는 위치를 앞에서부터 찾고, 그 위치를 숫자로 반환한다. "문자열".indexOf(검색값) "문자열".indexOf(검색값, 위치값) 찾는 문자열이 없으면 -1을 리턴(출력)한다. 문자열을 찾을 때 대소문자를 구분한다. 코드 보기 const str1 = "javascript reference"; const currentStr1 = str1.indexOf("javascript"); // 0 : 시작위치를 의미함 const currentStr2 = str1.indexOf("referen.. 2022. 8. 16.

[JavaScript] 문자열 메서드 알아보기 문자열 메서드 이번 포스팅에서는 문자열 메서드에 대해 다뤄보도록 하겠습니다. 문자열 메서드 중 가장 많이 쓰이는 slice() / substring() / substr()에 대한 설명입니다. 얼핏보면 비슷해 보이는 이 3가지에도 꽤나 큰 차이점이 존재하는데요 이에 대해서 깊게 다뤄보도록 하죠. slice() / substring() / substr() 문자열에서 원하는 값을 추출해 문자열을 반환하는 메서드이다. 사용하는 방식은 아래 박스 참조. "문자열".slice(시작위치) "문자열".slice(시작위치, 끝나는 위치) // 시작위치의 값은 끝나는 위치의 값보다 작아야 한다. // substring() 시작값이 끝나는 값보다 클 경우 두 값을 바꿔서 처리(에러 방지) "문자열".substr(시작위치) .. 2022. 8. 16.

[JavaScript] 내장 함수 내장 함수 자바스크립트에 기본적으로 내장되어 있는 함수들을 말한다. 인코딩, 디코딩 함수 'https://www.google.com/search?query=자바스크립트' 위와 같이 URL 주소에 쿼리 정보를 전송해 데이터를 처리해야 하는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있는데 이런 경우 인코딩 함수를 이용해 문자를 부호화시키고 부호화된 문자를 다시 디코딩 함수를 이용해 원래 문자로 되돌릴 수 있다. 함수명 설명 encodeURIComponent() 영문, 숫자와 ( ) - _ . ~ * ! ' 을 제외한 문자를 인코딩한다. decodeURIComponent() encodeURIComponent()의 디코딩 함수 예제 코드 보기 var encodeStr = '.. 2022. 8. 13.

[JavaScript] 배열 메서드 알아보기 배열 메서드 이번 포스팅에서는 배열 메서드에 대해 다뤄보도록 하겠습니다. 배열 메서드 중 가장 많이 쓰이는 join(), push(), pop()에 대한 설명입니다. join() 배열의 요소들을 연결하여 하나의 값으로 만든다. 문자열 값으로 반환한다. 번호 기본값 메서드 리턴값 1 [100, 200, 300, 400, 500] join('') 100200300400500 2 [100, 200, 300, 400, 500] join(' ') 100 200 300 400 500 3 [100, 200, 300, 400, 500] join('★') 100★200★300★400★500 4 [100, 200, 300, 400, 500] join('-') 100-200-300-400-500 코드 보기 const arr.. 2022. 8. 11.

[Quiz Effect] 퀴즈 이펙트 04 - 객관식(한 문제) 유형 퀴즈 만들기 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 객관식 유형 네 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 // quizChoice와 quizSelect는 총 4개이므로 뒤에 All을 붙여준다. const quizT.. 2022. 8. 8.

[JavaScript] 요소 선택 메서드 알아보기 요소 선택 요소를 직접 선택하는 메서드 메서드 설명 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 요소 중 name명이 '.. 2022. 8. 5.

[Quiz Effect] 퀴즈 이펙트 03 - 주관식(여러 문제) 유형 퀴즈 만들기 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 주관식(여러 문제) 유형 세 번째 주관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Cla.. 2022. 8. 5.

[Quiz Effect] 퀴즈 이펙트 02 - 주관식 유형 퀴즈 만들기 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 주관식 유형 두번째 주관식 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Class명과 연결시킨다. //c.. 2022. 8. 4.

[Quiz Effect] 퀴즈 이펙트 01 - 정답 확인하기 유형 퀴즈 만들기 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다. 이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다! 변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다! 정답 확인하기 유형 첫번째 정답 확인하기 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다. HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것. // 선택자 : 상수 const를 필요한 만큼 선언한 다음 HTML 영역의 div, 시맨틱 태그 등의 Class명과 연결.. 2022. 8. 4.

[JavaScript] 전역변수와 지역변수 전역변수와 지역변수 변수는 중괄호(함수 블록){ }를 기준으로 변수 선언 위치에 따라 전역변수와 지역변수로 나뉜다. 지역 변수는 블록 내에서만 사용 가능한 반면, 전역변수는 블록 바깥이나 안쪽이나 자유롭게 사용 가능하다. 전역변수와 지역변수의 선언 위치 이렇게 블록 { }에 의해 변수 범위가 달라지는 것을 변수의 scope(스코프)라고 한다. 전역변수 지역변수 var 변수; function 함수 () { } function 함수 () { var 변수; } 예시 01 아래의 예시에서는 함수 블록 내의 kor 변수가 전역변수이며 getScore() 함수를 호출하게 되면 kor 변수 값이 90에서 100으로 변경된다. var kor = 90; function getScroe() { kor = 100; // 전.. 2022. 7. 28.

[JavaScript] 함수의 종류와 사용방법 함수 프로그램에서 반복적으로 사용되는 기능을 만들기 위한 코드들의 집합 01. 선언적 함수 함수를 선언할 때 이름을 붙여주는 함수. function func() { document.write("함수가 실행되었습니다.1"); } func(); // 이걸 써야 출력됨 결과 보기 함수가 실행되었습니다.1 02. 익명 함수 말 그대로 이름 없는 함수로 함수코드가 변수명에 저장된 형태이다. const func = function() { document.write("함수가 실행되었습니다.2"); // 변수 이름 (func)을 쓰고 있어서 익명함수 } func(); 결과 보기 함수가 실행되었습니다.2 03. 매개변수 함수 함수 호출 시 인수로 전달된 값을 함수 내부에서 사용 가능하도록 해주는 변수. str이 바로 매.. 2022. 7. 26.

[JavaScript] 데이터 타입 종류 알아보기 데이터 타입 변수에 저장되는 데이터의 유형(타입)을 의미하며 원시(Primitive) 타입, 객체(Object)타입으로 나뉩니다. 원시 타입에는 number, string, boolean, undefined, null, symbol 등이 있으며 객체 타입에는 function, object, array 등이 있습니다. 01. number 정수, 소수점, 지수 표현 가능합니다. var num1 = 10; var num2 = 10.5; var num3 = le+2; console.log(num1); // 10 console.log(num2); // 10.5 console.log(num3); // 100 le+2는 1*10의 2승을 의미함. 02. string 문자를 표현하고자 할 때 사용하는 데이터이며 ' '.. 2022. 7. 25.

[JavaScript] 조건문의 종류와 사용방법 조건문 프로그램에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문입니다. 그 중 if가 가장 기본이 되는 실행문입니다. 01. if문 조건에 맞으면(참(ture)이면) 참의 결과를 실행시켜줍니다. console.log로 출력시켰기 때문에 Chrome F12 키를 통해 콘솔 창에서만 확인 가능. /* if (조건식) { 실행문; } */ var age = 10; // age(나이)는 10세이다. var admissionFee = ' '; // (입장료) 결과 실행 칸 if (age < 13) { // age = 10, 13 이하이므로 true admissionFee = '2,000원'; // true이므로 '2000원' 출력됨 } console.log(admissionFee); 결과.. 2022. 7. 25.

[JavaScript] 반복문 사용법과 활용예시 반복문 프로그램에서 필요한 결과 값을 도출하기 위해 실행문의 순서를 여러번 반복시킬 때 사용하는 문법입니다. while문, do while문, for문 등이 있지만 for문이 가장 많이 쓰입니다. for (초기 값; 조건식; 증감값) { 실행문; } 01. while문 조건식이 true일 경우에 계속해서 반복하는 반복문입니다. /* 초기 값 while (조건식) { 실행문; 증가감식; } */ var n = 1; var sum = 0; while(n < 8) { sum += n; n++; } console.log(sum); 결과 보기 28 02. do while문 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while문과 같지만 무조건 중괄호{ } 안의 실행문을 실행한 후 조건을 검사하여 반복.. 2022. 7. 21.

[JavaScript] 연산자 종류 알아보기 자바스크립트 연산자 프로그램에 필요한 수식을 만들 때 필요한 것이 바로 연산자입니다. 자바스크립트에서 연산자에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 01. 산술 연산자 사칙연산을 다루는 정도의 기본적이고 아주 많이 쓰이는 중요한 연산자입니다. 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구할 때 사용 % 나머지 구할 때 사용 ++ 1씩 증가 시킬 때 사용 -- 1씩 감소 시킬 때 사용 02. 대입 연산자 값을 변수에 대입(저장)하는 방식의 연산자로, 대입연산자에서의 '='는 '같다'가 아닌 대입(저장)함을 의미합니다. 대입 연산자 종류 속성.. 2022. 7. 20.

[JavaScript] 자바스크립트 기본 규칙 기본 규칙 자바스크립트를 다루기 위해서는 먼저 기초적 특징과 기본 문법을 숙지할 필요가 있습니다. 자바스크립트란? JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립트 프로그래밍 언어입니다. HTML은 정적인 레이아웃을, 자바스크립트는 동적인 기능을 표현합니다. 자바스크립트는 1995년 넷스케이프 커뮤니케이션의 브렌던 아이크가 개발하였스며 Netscape Navigsator2.0에 구현되었습니다. 1996년에는 마이크로소프트사의 Internet Explorer3.0 탑재되었으며 java 애플릿으로 구현된 웹 브라우저의 지지부진한 보급과 맞물려 빠르게 보급 되었습니다. 1997년부터 ESMAScript를 따르는 표준화 작업을 통해 현재는 모든 브라우저에서 지원됩니다. 자바스크립.. 2022. 7. 20.

이전 1 2 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바