본문 바로가기

Programming/JavaScript56

JavaScript 날짜 시간 출력하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript로 날짜와 시간을 출력하기 위한 Date Class의 사용법에 대해서 알아보겠습니다. 현재 시간 정보를 얻기 위해서는 다음 코드를 사용해서 클래스를 이용해서 인스턴스를 생성합니다. const date = new Date() console.log 를 사용해서 변수 date를 출력하면 다음과 같이 출력됩니다. console.log(date) // Wed Aug 16 2023 11:28:43 GMT+0900 (한국 표준시) 다음은 년도, 월, 일, 요일, 시간, 분, 초, 밀리초를 구하는 방법입니다. date.getFullYear() // 년도를 출력한다. // 2023 date.getMonth() // 월을 출력한다. // 7 // getMonth().. 2023. 8. 16.
[JavaScript] HTML 페이지에 JavaScript 를 사용하는 방법 안녕하세요. 오늘은 HTML 페이지에 JavaScript를 사용하는 방법에 대해서 알아보겠습니다. HTML페이지에 JavaScript를 사용하는 방법은 크게 두가지가 있습니다. 인라인 스크립트로 사용하는 방법이 있고, 외부 스크립트를 임포트해서 사용하는 방법이 있습니다. 인라인 스크립트를 사용하는 방법 다음과 같이 HTML 템플릿이 있습니다. Welcome to Hyukho's Blog JavaScript를 사용하기 위해서는 외부 스크립트를 사용하는 방법 외부의 JavaScript로 만들어진 파일을 가져와서 사용하는 방법은 아래와 같이 사용하면 됩니다. Welcome to Hyukho Blog Welcome to Hyukho Blog 외부 스크립트와 인라인 스크립트를 함께 사용하는 방법은 외부 스크립트를.. 2022. 12. 29.
[JavaScript] 문장에서 어떤 단어를 포함하는지 여부 확인 방법 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 문장에서 어떤 단어를 포함하는지 여부를 확인하는 방법에 대해서 알아보겠습니다. 문장에서 어떤 단어를 포함하는지 여부를 확인하기 위해서 JavaScript의 include 메소드를 사용해야 합니다. let text = "Hello world, welcome to the universe."; let result = text.includes("world"); // true includes 메소드가 받는 parameter로 찾고자 하는 단어 string 값이 반드시 들어가야 합니다. 'Hello World, welcome to the universe.'에서 'world' 단어가 있으므로 true를 출력합니다. 또한, includes 메소드는 .. 2022. 8. 3.
[JavaScript] URL에서 원하는 데이터 추출해서 조작하는 방법 안녕하세요. 혀코입니다. 이번 시간에서 JavaScript를 사용해 URL의 특정 정보를 추출해서 조작하는 방법에 대해서 알아보겠습니다. 현재 웹사이트의 url 값을 가져오는 방법 const url = window.location.href; console.log(url) // https://www.tistory.com URL에서 ID 값을 추출하는 방법 어느 웹페이지의 특정 섹션으로 바로 이동할 수 있도록 특정 섹션에 ID 값이 걸려 있는 URL의 경우, URL 마지막에 # 심볼과 같이 쓰인 단어를 알아내는 방법입니다. let address = 'https://smilehugo.tistory.com/entry/how-to-manipulate-url-using-javascript#examples'; con.. 2022. 8. 1.
[JavaScript] setInterval과 setTimeout의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript의 setInterval과 setTimeout 함수의 차이점에 대해서 알아보겠습니다. setTimeout() 일정한 시간이 지나고 함수를 실행할 때 사용합니다. setTimeout은 parameter로 실행할 함수와, 시간 이렇게 두개를 받거나 실행할 함수가 받는 parameter의 개수를 더한 만큼의 parameter를 받습니다. 실행할 함수에 parameter 가 없는 경우 다음과 같이 작성합니다. function welcomeMessage() { console.log('Hello World'); } setTimeout(welcomeMessage, 2000); 실행할 함수에 parameter가 있는 경우 다음과 같이 작성합니다. function.. 2022. 7. 21.
[JavaScript] 반복문 for ... in 과 for ... of 의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript의 반복문 for ... in 구문과 for ... of 의 차이점에 대해서 알아보겠습니다. for .. in 구문 for .. in 구문은 key 와 value 로 이뤄진 object의 반복문을 돌릴 때 사용합니다. 만약 key 값이 숫자로 되어 있다면, 숫자가 작은 것부터 큰 순서대로 차례대로 출력됩니다. for ... of 구문 for ... of 구문은 기본 적인 array의 반복문을 돌리는 for 문과 동일하게 array의 반복문을 돌리는 데 사용합니다. array를 돌리는 기본적인 for문은 다음과 같습니다. for .. of 구문을 사용할 때에는 array1[i] 할 필요없이 바로 i만 출력해도 인덱스가 아닌 인덱스의 값이 바로 출력이.. 2022. 7. 20.
[JavaScript] console 메서드 10가지 안녕하세요. 혀코입니다. console.log를 코드 테스팅을 할때 자주 사용하는데요. log 메서드 외에 더욱 효과적으로 출력을 하게 도와주는 여러가지 메서드가 있습니다. 그래서 이번 시간에는 console의 메서드 10가지에 대해서 알아보겠습니다. console.log() console.dir() console.count() console.trace() console.assert() console.table() console.group() console.time() console.warn() console.error() 1. console.log() console.log()는 제일 많이 사용하는 메서드 입니다. JavaScript를 배울 때 Hello World를 찍어보면서 사용해 보는 거라 다들 아.. 2022. 7. 18.
[JavaScript] Array.flat() 메서드 (다차수 배열의 차수를 줄이는 방법) 안녕하세요. 혀코입니다. 이번 시간에는 다차수 배열의 차수를 줄이는 자바스크립트의 flat() 메서드에 대해서 알아보겠습니다. 자바스크립트 Array의 flat() 메소드는 Array 배열 구조안에 또 다른 Array를 값을 가질때 이 Array를 평평하게 만드는 함수입니다. 예를 들어 array1이라는 Array에 [ 1, 2, 3, [ 4, 5, 6 ] ] 값이 있을 때, array1.flat()을 실행시키면, [ 1, 2, 3, 4, 5, 6 ]을 반환합니다. 2차수의 배열을 1차수의 배열로 변환 var array1 = [1,2,3,[4,5,6]] array1.flat() // [1, 2, 3, 4, 5, 6] 만약 Array 안의 Array 값에 또 다른 Array가 존재할 경우, flat()을 .. 2022. 7. 15.
[JavaScript] == 대신 ===를 써야하는 이유 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 == 대신 ===를 써야하는 이유에 대해서 알아보겠습니다. 먼저 코드 예제를 먼저 보겠습니다. console.log(3 == "3") // true ==를 사용했을 때 숫자 3과 문자 3을 같다고 JavaScript가 연산하기 때문에 true를 출력하게 됩니다. 반면에 === 를 사용했을 때 숫자 3과 문자 3이 같지 않다고 연산하여 false를 출력하게 됩니다. console.log(3 === "3") // false 또 다른 예를 보면, console.log(0 == "") // true console.log(0 === "") // false == 를 사용할 경우, 숫자 0과 빈 문자 가 동일하다고 연산하여 true를 출력하는데 === 를.. 2022. 7. 14.
자바스크립트의 재귀함수 (Recursive Function in JavaScript) 안녕하세요. 혀코입니다. 이번 시간에는 자바스크립트의 재귀함수(Recursive Function in JavaScript)에 대해서 알아보겠습니다. 재귀함수란 함수 안에 자기자신을 다시 호출하는 함수를 말합니다. 코드를 예로 들자면 아래와 같은 함수입니다. function recursive() { recursive() } recursive() 이 함수를 잘 보면 아시겠지만 무한하게 자기 자신을 호출해서 끝나지가 않습니다. 그래서 if 와 else 조건문 형태를 반드시 같이 써줘야 합니다. if와 else 조건문과 함께 사용하면 다음과 같은 코드가 됩니다. function recursive() { if (condition) { } else { recursive() } } recursive() 여기서 con.. 2022. 7. 12.
JavaScript의 변수선언 키워드 var, let, const의 차이점 | Basics | JavaScript 안녕하세요. 혀코입니다. JavaScript를 프로그래밍 할 때 변수를 선언할 때 var, let, const를 사용합니다. 그래서 이번 시간에는 이 세개의 변수 선언의 차이점에 대해서 알아보도록 하겠습니다. # var ES6 이전에는 var 키워드를 사용해서 변수선언하는 것이 유일한 방법이였습니다. ES6가 나오면서 let과 const가 나오면서 차이가 생겼습니다. var로 변수를 선언을 하게 되면, 코드 어느 부분에서도 해당 변수를 다시 선언할 수도 있고 자유롭게 변수를 업데이트 할 수 있습니다. var num1 = 1; if (true) { var num1 = 2; } console.log(num1); // 2 # let let 은 ES6가 나오면서 새로 적용된 키워드입니다. lexical scop.. 2020. 10. 12.
퀴즈 프로그램 | Project | JavaScript 여러분 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 퀴즈 프로그램을 제작해 보도록 하겠습니다. HTML 파일, CSS 파일과 JavaScript 파일을 다음과 같이 준비 합니다. index.html Question text Question Question Question Question Submit style.css * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #ccc; display: flex; align-items: center; justify-content: center; height: 100vh; } .container { background-color: #fff; border-.. 2020. 9. 14.
2021 신년 D-day 카운트다운 | Project | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript를 사용해서 2021 신년 D-day 카운트다운 프로그램을 작성해보도록 하겠습니다. 기준이 되는 D-day는 신년 2021년 1월 1일로 설정하고 카운트다운을 세어보도록 하겠습니다. HTML 파일, CSS 파일 그리고 JavaScript 파일을 다음과 같이 준비합니다. index.html New Years 2021 0 days 0 hours 0 minutes 0 seconds style.css * { box-sizing: border-box; margin: 0; padding: 0; } body { background-image: url('background.jpg'); background-size: cover; width: 100%; height.. 2020. 9. 13.
영어문장에서 모음의 개수 세는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 영어문장에서 모음의 개수를 세는 방법에 대해서 알아보겠습니다. function vowels(str) { let count = 0; const checker = "aeiou" for(let char of str.toLowerCase()) { if(checker.includes(char)) { count++; } } return count; } 문자열 하나를 받아서 소문자로 바꾼다음 문자열의 단어가 모음으로 이뤄진 checker에 속할때 count를 증가시켜서 모음의 개수를 셀 수 있습니다. 이 코드는 다음과 같이도 적을 수 있습니다. function vowels(str) { let count = 0; const checker = ['a','e','i','o','u'].. 2020. 9. 10.
숫자를 받아서 피라미드 모양으로 표시하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 숫자를 하나받아서 피라미드 모양으로 표시하는 방법에 대해서 알아보겠습니다. 1일때, '#' 2일때, ' # ' '###' 3일때, ' # ' ' ### ' '#####' 4일때, ' # ' ' ### ' ' ##### ' '#######' function pyramid(n) { const midpoint = Math.floor((2 * n - 1) / 2); for(let row = 0; row < n; row++){ let level = ''; for(let col = 0; col < 2 * n - 1; col++) { if(midpoint - row = col) { level += '#'; } else { level += ' '; } } console.log(l.. 2020. 9. 9.
숫자를 받아서 계단형식으로 표시하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript로 숫자 하나를 받아서 #기호로 다음과 같이 계단을 표시하는 방법에 대해서 알아보겠습니다. 1의 경우, '#' 2의 경우, '# ' '##' 3의 경우, '# ' '## ' '###' 4의 경우, '# ' '## ' '### ' '####' function steps(n) { for(let row = 0; row < n; row++) { let stair = ''; for(let col = 0; col < n; col++){ if (col 2020. 9. 8.
한글의 한 글자를 초성 중성 종성 나누는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 한글의 한 글자를 초성 중성 종성으로 나눠 배열로 저장하는 방법을 알아보겠습니다. 우선 문자의 유니코드 번호를 구하는 방법을 알아야합니다. 문자의 유니코드 번호를 구하는 방법은 charCodeAt() 메소드를 사용합니다. 유니코드 번호로 부터 문자를 표시하는 방법은 String.fromCharCode(num) 함수를 사용합니다. 자음에 해당하는 문자를 확인해 보기위해 ㄱ의 유니코드 번호를 확인해보면 12593이며, ㅎ의 유니코드 번호는 12622 이므로, for loop을 이용해서 ㄱ과 ㅎ 사이의 자음을 모두 표시해 보면 다음과 같습니다. "ㄱ".charCodeAt(); // 12593 "ㅎ".charCodeAt(); // 12622 for(let i = 12593.. 2020. 9. 7.
문장의 각 단어의 첫글자를 대문자로 바꾸는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 문장의 각 단어의 첫글자를 대문자로 바꾸는 방법에 대해서 알아보겠습니다. function capitalize(str) { words = []; words = str.split(' '); for(let i = 0; i 2020. 9. 6.
문자열 구성 비교하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 문자열 구성 비교하는 방법에 대해서 알아보겠습니다. function anagrams(stringA, stringB) { let a = stringA.replace(/[^\w]/g,'').toLowerCase().split('').sort().join(); let b = stringB.replace(/[^\w]/g,'').toLowerCase().split('').sort().join(); return a === b; } module.exports = anagrams; 문자열에 replace 메소드를 써서 regular expression(/[^\w]/g,'')을 적용하면, 기호와 스페이스를 제거해줍니다. 여기에 toLowerCase() 메소드를 적용하면 모든 문자를.. 2020. 9. 5.
배열(Array)을 일정한 사이즈에 맞춰 나누는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 배열(Array)을 일정한 사이즈에 맞춰 나누는 방법에 대해서 알아보겠습니다. function chunk(array, size) { const chunked = []; for (let element of array) { const last = chunked[chunked.length - 1]; if(!last || last.length === size) { chunked.push([element]) } else { last.push(element); } } return chunked; } module.exports = chunk; 비어있는 배열(Array)을 하나 만들고, 받은 배열을 for of loop을 사용해 돌립니다. 비어있는 배열의 마지막 element를 .. 2020. 9. 4.
3의 배수에 'Kung' 5의 배수에 'JJak' 표시하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 3의 배수에 'Kung' 5의 배수에 'Jjak' 표시하는 방법에 대해서 알아보겠습니다. function kungjjak(n) { for(let i = 1; i 2020. 9. 3.
문자열 중에서 가장 많이 사용된 문자 확인하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 문자열 중에서 가장 많이 사용된 문자를 확인하는 방법에 대해서 알아보겠습니다. function maxChar(str) { const charMap = {}; let max = 0; let maxChar = ''; for (let char of str) { if(charMap[char]) { charMap[char]++; } else { charMap[char] = 1; } } for (let char in charMap) { if (charMap[char] > max) { max = charMap[char]; maxChar = char; } } return maxChar; } module.exports = maxChar; 문자열을 받아서 for of loop을 사용.. 2020. 9. 2.
숫자를 거꾸로 표시하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 숫자를 거꾸로 표시하는 방법에 대해서 알아보겠습니다. 만약 숫자 19를 거꾸로 표시하면, 91이 표시가 되고, -19를 거꾸로 표시하면, -91이 표시가 되고 700의 경우 7이 표시가 되고, -700의 경우, -7이 표시가 되도록 코딩해 보겠습니다. function reverseInt(n) { return parseInt(n.toString().split('').reverse().join('')) * Math.sign(n); } module.exports = reverseInt; toString() 함수는 숫자를 문자로 바꾸고, split()은 문자열을 배열로 바꾸고, reverse()는 배열의 순서를 바꾸고, join()은 배열을 하나의 문자열로 바꿔줍니다. 그.. 2020. 9. 1.
문자열(string)을 거꾸로 해도 원래 문자열과 동일한지 확인하는 방법 | Alogrithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript에서 문자열을 거꾸로 해도 원래 문자열과 동일한지 확인하는 방법에 대해서 알아보겠습니다. function palindrome(str) { return str == str.split('').reduce((rev,char) => char + rev, '') ? true : false; } module.exports = palindrome; 지난 시간에 문자열 거꾸로 하는 방법에 대해 배운것을 응용하여 입력받은 문자열을 거꾸로 뒤집은 다음, 기존 문자열과 동일한지 확인 후, 삼항 연산자를 사용해서 해당 문자열이 같으면, true를 반환하고 다르다면 false를 반환하도록 구현했습니다. function palindrome(str) { return str .. 2020. 8. 31.
JavaScript 코드 테스트하는 방법 | jest | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript 코드를 테스트하는 방법에 대해서 알아보겠습니다. JavaScript 코드를 테스트 하려면, jest를 설치해줘야 합니다. $ npm install -g jest jest 설치가 되었다면, index.js 파일과 테스트 코드를 작성해야 합니다. index.js 파일을 다음과 같이 작성을 했습니다. function reverse(str) { return str.split('').reduce((rev, char) => char + rev, ''); } module.exports = reverse; 테스트 코드는 test.js로 만들고 다음과 같이 작성했습니다. const reverse = require('./index'); test('Reverse f.. 2020. 8. 30.
JavaScript 코드 디버깅 하는 방법 | node-inspect | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 JavaScript 코드에서 디버깅 하는 방법에 대해서 알아보겠습니다. 다음 코드가 있습니다. function reverse(str) { return str.split('').reverse().join(''); } reverse('asdf'); 디버깅을 하기위해서 코드 안에 debugger 를 추가해 줍니다. function reverse(str) { debugger; return str.split('').reverse().join(''); } reverse('asdf'); 디버깅을 하기 위해서는 node-inspect 가 설치되어 있어야 합니다. 설치가 안되있다면, node-inspect를 설치합니다. $ npm install -g node-inspect 설치가 .. 2020. 8. 29.
배열(Array)을 일괄적으로 업데이트 하는 방법 | map | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 배열(Array)을 일괄적으로 업데이트 하는 방법에 대해서 알아보겠습니다. const var1 = [2, 4, 6]; 상수 var1을 만들고, 배열(Array) [2, 4, 6]을 var1에 저장했습니다. 상수 var2를 만들고, var1에 각 값에 2를 곱한 값을 var2에 저장하려면 map 함수를 사용해야 합니다. const var1 = [2, 4, 6]; const var2 = var1.map(x => x * 2); // [4, 8, 12] 이렇게 배열을 일괄적으로 업데이트 하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2020. 8. 28.
문자열(string)을 거꾸로 출력하는 방법 | Algorithm | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 문자열(string)을 거꾸로 출력하는 방법에 대해서 알아보겠습니다. const var1 = 'English101'; 변수 var1을 만들고, English101이라는 문자열을 var1에 저장했습니다. 문자열을 거꾸로 출력하는 기능이 없기 때문에, 다음과 split함수를 사용해서 문자 배열로 만든다음, reverse 함수를 사용해서 순서를 뒤집고, join 함수를 사용해서 하나의 문자열로 만들어줘야 합니다. const var1 = 'English101'; console.log(var1.split('').reverse().join('')); // 101hsilgnE reverse 함수를 사용하지 않는 경우에는 다음과 같이 진행합니다. const var1 = 'Engl.. 2020. 8. 27.
숫자와 문자로 이루어진 배열을 하나의 문자열로 만드는 방법 | join | JavaScript 여러분 안녕하세요. 혀코입니다. 이번 시간에는 문자로 이루어진 배열을 하나의 문자열로 만드는 방법에 대해서 알아보겠습니다. const var1 = [1, 'a', 'b', 'c', 2]; 변수 var1을 만들고, [1, 'a', 'b', 'c', 2] 배열을 var1에 저장했습니다. 이 배열을 하나의 문자로 만들려면, join 함수를 사용해야 합니다. const var1 = [1, 'a', 'b', 'c', 2]; const var2 = var1.join(''); console.log(var2); // 1abc2 변수 var2을 만들고, 변수 var1에 join함수를 사용해서 변수 var2에 저장했습니다. console.log를 사용해서 변수 var2를 출력해보면, 숫자와 문자가 하나로 합쳐져 하나의 문.. 2020. 8. 26.
배열 순서를 역순으로 바꾸는 방법 | reverse | JavaScript 안녕하세요. 혀코입니다. 이번 시간에는 배열 순서를 역순으로 바꾸는 방법에 대해서 알아보겠습니다. const var1 = [1, 'a', 3, 'b', 5]; 변수 var1에 배열을 입력했습니다. 이 배열을 역순으로 바꾸려면, reverse 함수를 사용하면 됩니다. const var1 = [1, 'a', 3, 'b', 5]; const var2 = var1.reverse(); console.log(var2); // [5, "b", 3, "a", 1] 변수 var2를 만들고, 변수 var1에 reverse 함수를 사용해서 var2 변수에 저장했습니다. 변수 var2를 console.log로 출력하면 원래 배열의 값이 역순으로 저장된 것을 확인할 수 있습니다. 이렇게 배열 순서를 역순으로 바꾸는 방법에 대해.. 2020. 8. 25.