본문 바로가기

Programming/JavaScript56

문자열(String)값을 문자(Character)로 이루워진 배열(Array)로 만드는 방법 | split | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 문자열을 문자로 이루워진 배열로 만드는 방법에 대해서 알아보겠습니다. const var1 = 'English'; var1 변수에 English 라는 문자열이 있습니다. var2 변수를 만들어 English 문자열을 각 문자로 나눠 배열(Array) 형태로 만드려면, split 함수를 사용해야합니다. const var1 = 'English'; const var2 = var1.split(''); console.log(var2); // ["E", "n", "g", "l", "i", "s", "h"] var2 변수를 console.log로 출력하면, English의 각각의 문자가 배열의 형태로 저장된 것을 확인할 수 있습니다. 이렇게 문자열을.. 2020. 8. 24.
JavaScript에서 Map의 특징과 기본적인 사용방법 여러분 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 Map의 특징과 기본적인 사용방법에 대해 알아보겠습니다. JavaScript에서 Map은 기본적으로 다음과 같은 형식으로 사용합니다. const map1 = new Map(); map1.set('name', 'Hyukho'); map1.set('country','Korea'); console.log(map1); // {'name' => 'Hyukho', 'country' => 'Korea'} console.log(map1.get('name'); // Hyukho JavaScript에서 Map은 다음과 같은 특징이 있습니다. 순서를 기억하며, object와 동일한 key value 쌍 형식의 데이터로 구성되어 있습니다. Key 값을 이용.. 2020. 8. 18.
JavaScript GSAP 라이브러리를 사용해서 애니메이션 효과 추가하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP 라이브러리를 사용해서 애니메이션 효과를 추가하는 방법에 대해서 알아보겠습니다. GSAP 라이브러리가 버전이 3으로 업그레이드 되면서, 기존 버전 2에 Tween, Timeline 플러그인등을 포함하게되었습니다. GSAP3 CDN 링크는 아래 웹페이지에서 확인 가능합니다. https://cdnjs.com/libraries/gsap GSAP3를 라이브러리를 사용하기 위해서는 아래와 같이 GSAP JS 파일을 body 태그 마지막 부분에 추가 해줍니다. GSAP3 HTML5 Boilerplate: gsap.to / gsap.from / x / roation / duration 여기에 header 태그를 만들고 h1을 만들어서 헤드라인을 적어보.. 2020. 8. 14.
JavaScript에서 Object의 특징과 기본적인 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서의 Object의 특징과 기본적인 사용방법에 대해 알아보도록 하겠습니다. JavaScript에서 Object는 다음과 같은 형태를 기본적으로 사용합니다. const object1 = { name: 'Hyukho', age: 20, favorites: ['react', 'angular', 'vue'], greetings(){ console.log('Hello! My name is ' + this.name + ' and I am ' + this.age + ' years old.'); } }; JavaScript에서의 Object는 다음과 같은 특징을 가지고 있습니다. 순서에 상관없는 형태의 key와 value의 쌍으로 구성되어 있으며, value .. 2020. 8. 9.
JavaScript에서 Set의 특징과 기본적인 사용방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 Set의 특징과 기본적인 사용방법에 대해 알아보겠습니다. JavaScript에서 Set은 다음과 같이 사용합니다. const set1 = new Set([1, 'apple']); console.log(set1); // {1, "apple"} JavaScript에서 Set은 다음과 같은 특징들을 가지고 있습니다. Set의 크기는 변경 가능합니다. Set은 중복되는 동일한 값을 허용하지 않습니다. For Loop을 통해 값을 표시할 수 있습니다. Set는 인덱스 값을 가지지 않습니다. 값을 찾아 삭제하는 것이 Array 보다는 효율적입니다. JavaScript의 Set의 특징들을 자세히 확인해 보겠습니다. Set의 크기는 변경 가능합니다. con.. 2020. 8. 9.
JavaScript에서 Array의 특징 및 기본적인 사용 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 Array의 특징 및 기본적인 사용하는 방법에 대해서 알아보겠습니다. JavaScript Array는 다음과 같은 형태를 기본적으로 사용합니다. const array1 = [2, 3, 5, 3]; JavaScript Array는 다음과 같은 특징을 가집니다. Array의 각 값의 위치가 정해져 있으며, Index 값으로 각 값에 접근할 수 있습니다. For loop을 사용해서 값을 표시할 수 있습니다. Array 크기는 변경 가능합니다. Array에 동일한 값이 중복되어 있어도 이상없습니다. Array에 값으로 숫자(Number), 문자열(String), 객체(Object), 배열(Array) 등을 가질 수 있습니다. Array에서 특정 값을.. 2020. 8. 8.
JavaScript GSAP3 애니메이션을 일정 시간단위로 실행하는 방법 여러분 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 같은 Class를 가진 태그들을 일정한 시간단위에 따라 순차적으로 애니메이션을 실행하는 방법에 대해서 알아보겠습니다. 아직 GSAP3 라이브러리를 설치 안해보셨다면, GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치.. 2020. 8. 5.
JavaScript GSAP3 애니메이션 시간 지연 효과 적용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 애니메이션을 구현할 때 시간 지연 효과를 적용하는 방법에 대해서 알아보겠습니다. 아직 GSAP3 라이브러리를 설치 안해보셨다면, GSAP 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 .. 2020. 8. 4.
JavaScript GSAP3 애니메이션 속도 커브 옵션 ease 14가지 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP3 애니메이션 속도 커브 옵션 14가지에 대해 알아보겠습니다. 아직 GSAP3 라이브러리를 설치 안해보셨다면, GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설 smilehugo.tist.. 2020. 8. 4.
JavaScript GSAP3 애니메이션 시간 제어하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 애니메이션을 구현시 시간을 제어하는 방법에 대해서 알아보겠습니다. 아직 GSAP3 라이브러리를 설치 안해보셨다면, GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 .. 2020. 8. 4.
JavaScript GSAP3 회전 애니메이션 구현하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript GSAP3 라이브러리를 사용해서 회전 애니메이션을 구현하는 방법에 대해서 알아보겠습니다. 아직 GSAP3 라이브러리를 설치하지 안해보셨다면, GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설 s.. 2020. 8. 4.
JavaScript GSAP3 애니메이션 gsap.to / gsap.from 사용하는 방법 여러분 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript 애니메이션을 위한 GSAP3 라이브러리의 기본이 되는 gsap.to 와 gsap.from 을 사용하는 방법과 차이점에 대해서 알아보겠습니다. 아직 GSAP3 라이브러리를 설치 안해보셨다면, GSAP3 라이브러리를 설치하는 방법에 대해서는 다음 포스트를 참고 부탁 드립니다. https://smilehugo.tistory.com/entry/javascript-gsap3-library-how-to-install JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법.. 2020. 8. 4.
JavaScript 애니메이션을 위한 GSAP3 라이브러리 설치하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript으로 애니메이션 효과를 연출하기 위해 JavaScript 애니메이션 라이브러리인 GSAP3을 설치하는 방법에 대해서 알아보겠습니다. GSAP3 라이브러리를 설치하기 위해서는 CDN 링크 또는 js 파일이 필요합니다. CDN 링크는 https://cdnjs.com/libraries/gsap 에서 확인이 가능하며 현재 CDN 링크는 https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js 입니다. CDN 링크가 아닌 JS 파일을 사용하시길 원하시는 분들은 아래 파일을 사용하시면 됩니다. 여기서는 CDN 링크를 통해서 GSAP3 라이브러리를 설치하는 방법으로 진행하겠습니다. 다른 JavaScript .. 2020. 8. 4.
JavaScript에서 반복문(for loop)을 사용할때 break, continue 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 반복문(for loop)을 사용할때, break, continue를 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 반복문(for loop)을 사용할 때, break을 사용하는 방법은 다음과 같습니다. for (var i = 0; i < 10; i++ ) { console.log(i); if(i == 5) { break; } } for loop이 0부터 9까지의 숫자를 나열하는 데 if문으로 i가 5와 같은 경우 break하라고 정의되어 있습니다. 따라서 위의 for loop은 0, 1, 2, 3, 4, 5 가 출력됩니다. JavaScript에서 반복문(for loop)을 사용할 때, continue를 사용하는 방법은 다음과 같.. 2020. 2. 14.
JavaScript에서 반복문(for loop) 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 반복문(for loop)을 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 반복문(for loop)을 사용하는 방법은 다음과 같습니다. for (var i = 0; i < 10; i++) { console.log(i); } // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 for loop의 첫번째 parameter에서 i를 0으로 선언하고 두번째 parameter에서 조건식인 i가 10보다 작다는 조건을 정의하고, 세번째 parameter에서 for loop이 돌면서 i값이 어떻게 변할지에 대해 정의합니다. 이렇게 JavaScript에서 반복문(for loop)을 사용하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과.. 2020. 2. 13.
JavaScript에서 삼항연산자를 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 삼항연산자를 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 삼항연산자를 사용하는 방법은 다음과 같습니다. var num = 5; var output = num > 5 ? 'number is greater than five' : 'number is less than equal to five'; num > 5 조건문이 참이면, 첫번째 항인 'number is greater than five'가 output 변수에 저장되고, 조건문 num > 5 가 false이면, 두번째 항인 'number is less than equal to five'가 output 변수에 저장됩니다. 이렇게 JavaScript에서 삼항연산자를 사용하는 방법에.. 2020. 2. 13.
JavaScript에서 조건문(if, else) 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 조건문(if, else) 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 조건문(if, else)를 사용하는 방법에는 크게 3가지가 있습니다. if 만 사용하는 방법, if와 else를 사용하는 방법, if와 else if, else를 사용하는 방법 이렇게 3가지가 있습니다. if 만 사용하는 방법 if (num > 3) { console.log('number is greater than three'); } num에 저장된 숫자가 3보다 큰 경우에만 'number is greater than three'가 출력됩니다. if와 else를 사용하는 방법 if (num > 3) { console.log('number is greate.. 2020. 2. 12.
JavaScript에서 함수(function)를 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 함수를 사용하는 방법에 대해서 알아보겠습니다. JavaScript에서 함수를 사용하는 방법은 크게 두가지가 있습니다. 함수이름과 함께 사용하는 방법과 함수 이름 없이 사용하는 방법(익명함수)이 있습니다. 함수 이름과 함께 사용하는 방법(선언적 함수) sum(); function sum(){ var a = 10; var b = 20; var c = a + b; } 선언적 함수는 호출하는 코드가 먼저 있더라도 상관없이 실행됩니다. 함수 이름 없이 사용하는 방법(익명함수) var sum = function(){ var a = 10; var b = 20; var c = a + b; } sum(); 익명함수는 호출하는 코드보다 항상 먼저 작성되어야 합.. 2020. 2. 12.
JavaScript에서 객체(object)를 만들고 값을 추가하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 객체(object)를 만들고 값을 추가하는 방법에 대해서 알아보겠습니다. 객체(object)를 만들고 값을 추가하는 방법은 세가지가 있습니다. new 생성자를 사용하는 방법과, 객체를 생성하면서 요소를 추가하는 방법, 그리고 중괄호를 사용해서 직접 생성하는 방법이 있습니다. new 생성자를 사용하는 방법 var obj = new Object(); obj.a = 10; obj.name = 'Korea'; obj.fn = function(){}; 객체를 생성하면서 요소를 추가하는 방법 var obj = new Object({a: 10, name: 'Korea', fn:function(){}}); 중괄호를 사용해서 직접 생성하는 방법 var obj.. 2020. 2. 11.
JavaScript의 Data Type(데이터 타입) 종류 안녕하세요. 혀코입니다. 이번시간에는 JavaScript의 Data Type(데이터 타입) 종류에 대해서 알아보겠습니다. JavaScript의 Data Type(데이터 타입)의 종류는 다음과 같습니다. Number, String, Boolean 이렇게 세가지를 Primitive Data Type이라고 합니다. Object, Array, Function 이렇게 세가지를 Composite Data Type이라고 합니다. Undefined, Null 이렇게 두가지를 Special Data Type이라고 합니다. Number: 숫자, 정수와 실수를 의미합니다. String: 문자열을 의미합니다. Boolean: 참과 거짓, true 또는 false 값을 가집니다. Object: 객체, key와 key value.. 2020. 2. 11.
JavaScript에서 var 변수 선언하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 var 변수 선언하는 방법에 대해서 알아보겠습니다. var 변수 선언하는 방법은 다음과 같습니다. var a = 10; var b = 'Hello'; 변수명 a를 만들고, 숫자 10을 저장하고, 변수명 b를 만들고, 문자열 Hello를 저장했습니다. 변수명은 모든 문자를 사용할 수 있는 것이 아니라, 제약사항이 있습니다. 변수명의 첫 글자에는 숫자를 사용할 수 없습니다. 변수명의 첫 글자에 특수기호를 사용할 수 없습니다. 변수명은 JavaScript 예약어를 사용할 수 없습니다. 참고로 JavaScript의 예약어는 다음과 같습니다. abstract boolean break byte catch char class const continue d.. 2020. 2. 10.
JavaScript에서 Comment(주석)하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 Comment(주석)하는 방법에 대해서 알아보겠습니다. JavaScript에서 Comment(주석)하는 방법은 크게 두가지가 있습니다. 한줄을 주석처리 하는 방법과, 여러 줄을 한꺼번에 주석 처리하는 방법이 있습니다. 한줄을 주석처리 하는 방법은 아래와 같이 하면 됩니다. console.log('Hello World') // Hello World를 출력합니다. 주석처리 하고자 하는 줄 앞에 '/' 기호를 두개 연달아 입력하면 해당 줄만 주석처리 할 수 있습니다. 여러줄을 한꺼번에 주석처리 하는 방법은 아래와 같이 하면 됩니다. console.log('comment for multiple line of code') /* 여러줄을 한꺼번에 주석처.. 2020. 2. 10.
JavaScript로 form input으로 받은 문자 웹페이지에 출력하는 방법 안녕하세요. 혀코입니다. 오늘은 JavaScript로 form input으로 받은 문자를 웹페이지에 출력하는 방법에 대해서 알아보겠습니다. index.html을 다음과 같이 작성합니다. Hello World Welcome to Hyukho's Programming Submit form 태그 안에는 input과 button 태그로 구성되어 있습니다. script 태그를 맨 아래 붙여서 모든 DOM element가 로드 되면 script로 DOM을 다룰 수 있게 했습니다. app.js를 다음과 같이 작성합니다. const locationForm = document.querySelector('form') const search = document.querySelector('input') const messag.. 2020. 1. 21.
자바스크립트 JavaScript parseInt() 함수 자바스크립트의 내장 함수 parseInt() 함수에 대해 알아보겠습니다.parseInt() 함수를 사용하면, 실수에서 소수점 이하를 제외한 정수 부분만을 추출할 수 있습니다. 또한 2진수, 3진수 등의 숫자를 정수로 변환할 수 있습니다.소수점 이하를 제외한 정수 부분만을 추출하는 예제를 확인해 보겠습니다. var num1 = 5; var num2 = 2; var num3 = parseInt(num1/num2); console.log(num3); // 2 다음으로는 3진수의 숫자를 10진수로 변환하는 예제를 확인해 보겠습니다. var num1 = 2121; var num2 = parseInt(num1,3); console.log(num2); // 70 parseInt() 함수는 문자열을 숫자로 변환하는 기.. 2019. 3. 12.
자바스크립트 JavaScript filter() 함수 filter() 함수는 하나의 지정된 Array에서 filter() 함수에 true인 결과값만 추출해 내는 기능을 하는 함수입니다.하나의 Array에 -1, 0, 1 값이 있을 경우, filter 조건이 0보타 큰 수라고 하면, Array에서 조건에 맞는 값인 1을 결과값으로 추출합니다. var array1 = [-1,0,1]; array1.filter((num) => num > 0); // [1] 또 다른 예제를 살펴보겠습니다.이번에는 먼저 filter함수를 variable로 정의하고 filter내에서 호출하는 방법을 확인해보겠습니다. var greaterThanZero = (num) => num > 0; var array1 = [-1,0,1]; array1.filter(greaterThanZero);.. 2019. 3. 12.
자바스크립트 JavaScript flatMap() 함수 flatMap() 함수는 map() 함수와 비교해서 이해하는 것이 좋습니다.우선 map() 함수를 살펴보자면, 안의 함수를 실행하여 나온 결과값들을 각각의 Array로 묶어 하나의 Array를 반환합니다. const alphabets = ["a","b","c"]; const fruits = ["apple", "banana", "cherry"]; const mappedExample = alphabets.map((alphabets,index) => [alphabets, fruits[index]]); console.log(mappedExample); // [["a","apple"],["b","banana"],["c","cherry"]] 그래서 단 하나의 Array를 만들기 위해서 flatMap() 함수를 사용.. 2019. 3. 11.