본문 바로가기

dev/javascript158

[javascript] 자바스크립트 console.log 사용 방법 (로그 찍기) 참고: https://www.geeksforgeeks.org/javascript-console-log-with-examples/ console.log()는 이미 정의된 모든 종류의 변수를 출력하거나 사용자에게 표시되어야 하는 메시지를 출력하는데 사용되는 javascript 함수 입니다. 문법: console.log(A); 매개변수: 배열, 객체 또는 모든 메시지가 될 수 있는 것들을 허용합니다. 반환값: 주어진 매개변수의 값을 반환합니다. 1. 숫자를 인수로 전달 숫자가 console.log() 함수에 전달되면 함수가 이를 표시합니다. 결과: 2. 문자열을 인수로 전달 문자열이 함수 console.log()에 전달되면 함수가 이를 표시합니다. 결과: 3. 문자를 인수로 전달 문자를 console.log(.. 2022. 5. 27.
[javascript] 자바스크립트 fetch api 사용 방법 참고: https://www.javascripttutorial.net/javascript-fetch-api/ 이 튜토리얼에서는 javascript의 fetch api를 사용하여 어떻게 비동기 HTTP 요청을 하는지 알아보겠습니다. fetch api는 웹브라우저에서 서버로 HTTP 요청을 하게 해주는 최신 인터페이스입니다. 만일 XMLHttpRequest(XHR) 객체를 사용하고 있다면 fetch api로 모든 작업을 대체할 수 있습니다. 추가적으로 fetch api는 서버에서 웹브라우저로 데이터를 전송할 때 유연한 기능을 제공하기 위해 Promise를 사용하기 때문에 더 간단하고 깔끔합니다. fetch() 메소드는 웹브라우저에서 URL 요청을 전송할 때 전역 스코프를 가지기 때문에 어디서든 사용이 가능합.. 2022. 5. 4.
[javascript] 자바스크립트 문자열에 0으로 자리수 채우는 방법 (padding) 참고: https://www.samanthaming.com/tidbits/97-string-padstart-padend/ 문자열에 자릿수를 맞춰 특정 문자를 채우기는 매우 쉽습니다. 메소드에 원하는 문자열과 길이를 매개변수로 전달하기만 하면 됩니다. 그러면 전달받은 길이를 만족할 때 까지 문자열이 채워집니다. padStart() 메소드를 사용하여 이를 시작 부분에 적용하고, padEnd() 메소드를 사용하여 문자열 끝 부분에 적용합니다. const padded = '15'; padded.padStart(4, '0'); // "0015" const string = 'hi'; string.padStart(3, 'c'); // "chi" string.padEnd(4, 'l'); // "hill" 문법 아래 코.. 2022. 5. 3.
[javascript] 자바스크립트 enter key 입력 방법 참고: https://codesource.io/how-to-trigger-enter-key-in-javascript/ 이 튜토리얼에서는 javascript에서 어떻게 엔터키를 입력 받을지 알아보겠습니다. form에서 input 값을 전송할 때 일반적으로 전송 버튼을 클릭해서 전송을 했습니다. 그런데 가끔은 키보드의 엔터키를 누름 으로서 form input을 전송하는 기능이 필요할 때가 있습니다. 이를 javascript로 구현하는건 쉽습니다. 다음 예제는 이러한 기능을 구현한 예제입니다. Press Enter for Trigger the Button Press the "Enter" key to trigger the button. Button 여기서는 단순하게 input 필드와 버튼을 넣었습니다. 또 사용.. 2022. 5. 2.
[javascript] 자바스크립트 querySelector 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/이 튜토리얼에서는 CSS 선택자를 기반으로 element를 찾는 javascript의 querySelector()와 querySelectorAll()을 사용하는 방법을 설명합니다.JavaScript의 querySelector()및 querySelectorAll() 메소드 소개querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 다음 코드는 querySelector() 메소드의 문법을 보여줍니다.let element = par.. 2022. 4. 29.
[javascript] 자바스크립트 array 사용 방법 참고: https://www.programiz.com/javascript/array 이 튜토리얼은 예제와 함께 javascript array를 배울 수 있도록 했습니다. array는 여러개의 값을 한번에 저장할 수 있는 객체입니다. 예를 들면 const words = ['hello', 'world', 'welcome']; 여기서 words가 array 입니다. 그리고 이 배열은 3개의 값을 저장하고있습니다. array 생성하기 array는 다음의 두가지 방법으로 생성할 수 있습니다. 1. array 리터럴 사용하기 배열을 생성하는 가장 쉬운 방법은 array 리터럴 '[]'을 사용하는 것 입니다. const array1 = ["eat", "sleep"]; 2. new 키워드 사용 배열은 javascrip.. 2022. 4. 27.
[javascript] 자바스크립트 classList 사용 방법 참고: https://www.javascripttutorial.net/javascript-dom/javascript-classlist/ 이 튜토리얼에서는 javascript classList 속성을 사용하여 element의 class를 사용하는 방법을 보입니다. classList는 element의 읽기전용 속성으로 css class의 현재 값을 반환합니다. const classes = element.classList; classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다. 이제 classList의 인터페이스를 통해 css class를 조작하는 예제를 보겠습니다. elem.. 2022. 4. 27.
[javascript] 자바스크립트 Promise 사용 방법 참고: https://www.geeksforgeeks.org/javascript-promises/ Promise 는 javascript에서 비동기 작업을 처리하는 데 사용됩니다. 기존 코드만으로는 콜백의 콜백을 만들어 점점 관리가 어려워지는 콜백 지옥을 해결하고 다수의 비동기 작업을 처리할 때 관리하기 쉽도록 만들어줍니다. Promise 이전에는 이벤트와 콜백 함수가 사용되었지만 기능이 제한적이고 다루기 힘들었습니다. 여러번 중첩된 콜백함수를 계속 사용하는 것은 점점 프로젝트를 관리하기 힘들게 하고 사용자가 동시에 여러개의 콜백을 처리하는 것도 쉬운일은 아닙니다. 이벤트 역시 비동기 작업 처리에 적합하지는 않습니다. Promise는 간편하게 비동기 작업을 처리하기 위한 이상적인 선택입니다. 이는 여러 비.. 2022. 4. 26.
[javascript] 자바스크립트 및 캔버스를 이용한 그림판 만들기 참고: https://dev.to/javascriptacademy/create-a-drawing-app-using-javascript-and-canvas-2an1 이 튜토리얼에서는 브라우저에서 간단히 그림을 그릴 수 있도록 하는 스크립트를 만들 것입니다. 이를 위해 기본 javascript와 canvas API를 사용할 것입니다. 이 튜토리얼을 마치고 나면 canvas API와 javascript의 이벤트 처리에 대한 대략적인 흐름을 알게 될 것입니다. HTML markup 전체 앱을 section으로 래핑하고 class 이름을 container로 해서 시작하겠습니다. 이는 툴바와 드로잉 보드를 정렬하는데 사용합니다. 이 안쪽에 툴바를 위치시킬 div를 넣고 javascript 작업을 수월하게 하기위해 .. 2022. 4. 26.
[javascript] 자바스크립트 createElement 사용방법 참고: https://www.javatpoint.com/javascript-create-element 이 글은 javascript를 통해 HTML element를 만드는 방법에 대해 설명합니다. 그리고 생성된 element를 document에 삽입하는 예제도 함께 소개합니다. HTML 코드는 element를 만드는 유일한 방법은 아닙니다. 간단하기 때문에 대부분 HTML document에서 바로 element를 생성하곤 했지만 javascript로도 element를 생성하는 것이 가능합니다. document.createElement()는 javascript를 통해 동적으로 특정한 이름의 HTML element를 생성하는데 사용됩니다. 이 메소드는 element의 이름을 매개변수로 받아서 해당 노드를 생성.. 2022. 4. 21.
[javascript] 자바스크립트 setInterval 사용방법 참고: https://www.javatpoint.com/javascript-setinterval-method javascript의 setInterval() 메소드는 지정된 시간 간격마다 지정된 기능을 반복하고자 할 때 사용합니다. 이는 특정 코드나 주어진 함수를 지정된 간격으로 호출합니다. 이 메소드는 윈도우가 닫히거나 clearInterval() 메소드가 호출될 때 까지 계속 실행되고 리턴값으로 0이 아닌 숫자인 타이머 id를 반환합니다. setTimeout() 메소드와는 달리 setInterval() 매소드는 함수를 여러번 호출하고 또한 window. 구문을 생략할 수 있습니다. setInterval() 메소드의 일반적인 사용방법은 다음과 같습니다. 문법 window.setInterval(functi.. 2022. 4. 21.
[javascript] 자바스크립트 setTimeout 사용방법 참고: https://www.freecodecamp.org/news/javascript-settimeout-how-to-set-a-timer-in-javascript-or-sleep-for-n-seconds/ 이 튜토리얼은 javascript 내장 메소드인 setTimeout()을 사용한 코드 예제를 보여주고 이 메소드가 작동하는 방식을 이해하는데 도움을 줄 것입니다. javascript에서 setTimeout()을 사용하는 방법 setTimeout() 메소드의 기능은 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 특정 시간에 javascript 코드를 실행하도록 타이머를 설정하는 것이라고 생각할 수 있습니다. 예를 들어 아래 코드는 2초가 지난 후 javascript 콘솔에 "Hello Worl.. 2022. 4. 20.
[javascript] 자바스크립트 audio 사용방법 참고: https://www.developerdrive.com/manipulating-html5s-native-audio-with-javascript/ 타사 플러그인을 사용하지 않고 음원을 재생하려면 HTML5의 기본 오디오 요소를 사용하면 됩니다. Chrome 10+ 및 Firefox 3.6+와 같은 최신 웹 브라우저에는 이미 요소와 이를 조작할 메소드, 속성이 라이브러리 형태로 내장되어 있습니다. 여기서는 몇 가지 사용법을 알아보고 javascript를 사용하여 오디오 파일을 실행하는 방법을 알아보겠습니다. AUDIO METHOD .load() 재생을 위해 오디오 요소를 로드하거나 리로드합니다. audioElement.load(); .play() 오디오 파일의 재생을 시작합니다. audioElemen.. 2022. 4. 12.
[javascript] 자바스크립트 forEach, map, filter, find 배열 메소드 사용 예제 자바스크립트에는 배열을 돌며 값을 처리할 수 있도록 도와주는 기능이 있습니다. 단순히 for 루프를 사용하여 각각의 배열 값을 처리할 수도 있지만 사용 목적에 따라 적절한 배열 메소드를 사용하는게 좋습니다. [].forEach() 가장 기본적인 배열 메소드로써 for 루프와 동일한 기능을 합니다. 파라미터로 현재 배열값과 인덱스를 받을 수 있습니다. const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9]; numberList.forEach((item, index) => { console.log(item, index); }); for 루프보다 깔끔하게 배열 값을 처리할 수 있습니다. [].map() map 메소드는 모든 요소를 돌며 일괄적으로 요소들을 변경하는 기능을 합니다. .. 2019. 12. 6.
[javascript] 자바스크립트 JSON.parse() JSON.stringify() 사용 예제 요즘 브라우저들은 JSON 오브젝트를 만지기 위해 parse와 stringify 같은 매우 유용한 메소드를 제공하고 있습니다. JSON.parse()는 JSON 문자열을 받아 자바스크립트 객체로 변환해 주고, JSON.stringify()는 자바스크립트 객체를 JSON 형식의 문자열로 바꿔줍니다. 상호 변환을 통해 쉽게 JSON 객체를 다룰 수 있습니다. JSON.stringify() const myObject = { name: 'dog', age: 2 }; const myString = JSON.stringify(myObject); myObject는 자바스크립트 객체입니다. 이를 JSON.stringify()를 통해 문자열로 바꾸는 코드 예제입니다. 위의 그림에서 보이는 것 처럼 myObject를 ty.. 2019. 12. 5.
[javascript] 자바스크립트 타이머 (setTimeout, setInterval) 자바스크립트를 짜다보면 함수를 바로 실행하지 않고 일정시간 뒤에 실행하도록 하고싶을 때가 있습니다. 이런 기능을 구현할 수 있도록 자바스크립트에서는 setTimeout과 setInterval 함수를 지원합니다. setTimeout 일정 시간(밀리세컨드) 이후 함수 실행 setTimeout(() => { // do something console.log('javascript'); }, 1000); 위 코드는 첫번째 인자의 함수를 1000 밀리세컨드 이후에 실행하도록 하는 코드입니다. 1000 밀리세컨드는 1초 입니다. 만약 주어진 시간이 지나기 전에 타이머를 취소하고 싶으면 clearTimeout을 사용합니다. const timer = setTimeout(() => { // do something cons.. 2019. 12. 5.
[javascript] 자바스크립트 ES6 (ECMAScript 2015) 원문: https://www.w3schools.com/js/js_es6.asp JavaScript let let은 블록 스코프 내에서 변수를 선언할 수 있게 해줍니다. var x = 10; // Here x is 10 { let x = 2; // Here x is 2 } // Here x is 10 JavaScript const const로는 상수를 선언할 수 있습니다. (상수 값을 가지는 자바스크립트 변수) const는 let과 비슷하지만 값을 수정할 수 없습니다. var x = 10; // Here x is 10 { const x = 2; // Here x is 2 } // Here x is 10 Arrow Functions 함수를 작성할 화살표 함수로 좀더 짧은 문법을 사용할 수 있습니다. func.. 2019. 11. 22.
[javascript] 자바스크립트 랜덤숫자 사용하기(Math.random) 자바스크립트에서 Math.random() 함수를 사용하면 0에서 1 사이의 숫자를 리턴합니다. (0포함 1제외) // Math.random() console.log(Math.randon()); 0에서 10 사이의 랜덤 값을 얻고 싶다면 Math.random() 함수에 10을 곱하면 0 2019. 11. 22.

티스토리툴바