'웹 프로그래밍/JavaScript' 카테고리의 글 목록

웹 프로그래밍/JavaScript (32)

VS Code 에서 JavaScript 실행하기

웹 프로그래밍/JavaScript 범범조조 2023. 5. 19. 21:05

개요 VS Code 를 이용하여 JavaScript 실행하는 방법에 대해서 알아봅니다. 여러가지 방법이 있지만, 매우 간편한 방법중 하나인 Code Runner 를 이용하여 사용하는 방법에 대해서 정리 진행합니다. 1. Code Runner Extension 설치 VS Code 에서 아주 쉽게 JavaScript 를 실행하려면, Code Runner Extenstion 설치를 진행하면 됩니다. 2. 테스트 진행할 JavaScript 파일 생성 설치를 완료 하였다면, 테스트 진행할 자바스크립트 파일 하나를 생성합니다. 그리고 아래와 같이 테스트 진행할 자바스크립트 코드를 입력합니다. 저 같은 경우에는 hello.js 프로젝트 파일 생성 후 아래의 코드를 작성하였습니다. 그리고, Ctrl + Alt + N ..

[JavaScript] 디데이(D-Day) 구하기

웹 프로그래밍/JavaScript 범범조조 2022. 12. 19. 18:57

개요 JavaScript 에서 D-Day 를 구현하는 방법에 대해서 공부 진행합니다. 예를들어, 현재 날짜가 2022-12-19 라고 하였을 때, 2022-12-31 을 입력하게 되었을 경우 해당 날짜까지 얼마의 시간이 남았는지 D-Day 를 구하는 예제 코드를 구현해 봅니다. HTML 에서는 간단히 Input 태그와 버튼 태그를 통해 값을 입력하여 D-Day 를 표시해 봅니다. HTML 예제로 사용하는 HTML 코드는 다음과 같습니다. 년,월,일 을 입력하는 3개의 input 태그가 있고, 입력된 값을 통해 버튼을 클릭하게 되면 D-Day 를 구해서 표시해주는 내용입니다. 버튼 위 HTML 코드를 작성 후, 브라우저에서 확인하게 되면 아래와 같이 보입니다. JavaScript 다음은 D-Day 를 구현..

[JavaScript] JavaScript – DOM 요소 선택하기

웹 프로그래밍/JavaScript 범범조조 2020. 12. 31. 00:00

안녕하세요. 오늘은 JavaScript에서 DOM(Document Object Model) 요소를 선택하는 방법에 대해서 알려 드리려고 합니다. JavaScript에서 HTML 요소들을 다루기 위해서는 여러가지 방법이 있는데요. 오늘은 그 여러가지 방법들을 어떻게 소스코드 상에서 다루는지 예제 코드를 통해서 보여 드리려고 합니다. 우선 방법의 종류는 아래와 같습니다. 1. HTML 태그 이름을 이용한 선택 2. 아이디를 이용한 선택 3. 클래스를 이용한 선택 4. name 속성을 이용한 선택 5. CSS 선택자를 이용한 선택 6. HTML 객체 집합을 이용한 선택 위의 6가지 방법의 DOM 요소 선택하는 방법들이 있습니다. 그럼 위의 6가지 방법의 예제 코드들 작성해서 실행 결과까지 보도록 하겠습니다. ..

[JavaScript] JavaScript – Array를 반복적으로 참조하는 메서드

웹 프로그래밍/JavaScript 범범조조 2020. 12. 30. 00:00

안녕하세요. 오늘은 JavaScript에서 배열을 나타내주는 Array 에 대해서 알아 보려고 합니다. 그 중에서도, Array 메서드들에 대해서 알아보려고 하는데요. 앞서, 기본으로 자주 사용되는 Array 메서드들을 몇 가지 추려내서 예제 코드를 작성해 보았는데요. 오늘은 원본 배열을 반복적으로 참조하는 메서드들에 대해서 알아보려고 합니다. 바로 예제 코드를 작성해서 알아 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 6..

[JavaScript] JavaScript – Array 메서드 사용 방법

웹 프로그래밍/JavaScript 범범조조 2020. 12. 29. 00:00

안녕하세요. 오늘은 JavaScript에서 Array 메서드 사용하는 방법에 대해서 알려 드리려고 합니다. Array 객체는 배열 즉, 정렬된 값들의 집합을 표현해 줄 때 사용하는 객체인데요. 앞서서 JavaScript에서 배열에 대해서 공부를 했었는데요. 그 개념과 동일하다고 생각 하시면 되겠습니다. 그럼 JavaScript에서 기본으로 제공해 주고 있는 Array 메서드들에 대해서 한번 예제 코드를 통해서 어떤 것들이 있는지 알아 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 4..

[JavaScript] JavaScript – reduce 함수

웹 프로그래밍/JavaScript 범범조조 2020. 12. 29. 00:00

안녕하세요. 오늘은 JavaScript에서 Array API에서 기본으로 제공해주는 함수 중에서 reduce 함수에 대해서 공부해 보려고 합니다. reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 그 결과 데이터를 반환하는 메서드 인데요. reduce 메서드의 인자는 총 4개의 인자를 가집니다. 1. accumulator 2. cur 3. index 4. souce 위와 같이 4가지의 인자값을 가지는데요. reduce 함수의 반환 값은 accumulator에 할당이 되고, accumulator는 순회 중 유지되므로 결국 최종 반환되는 결과 값은 하나의 값이 됩니다. 그럼 예제 코드를 통해서 reduce 함수를 어떻게 사용하는지 알아 보도록 하겠습니다. 예제 코드는 Student ..

[JavaScript] JavaScript – Arrow Function(화살표함수) 사용 방법

웹 프로그래밍/JavaScript 범범조조 2020. 12. 28. 00:00

안녕하세요. 오늘은 JavaScript에서 제공해주는 기본 문법 중, Arrow Function 화살표 함수 사용방법에 대해서 알아보려고 합니다. 지난번 자바스크립트 함수 관련해서 포스팅을 한적이 있는데요. 이전의 함수를 표현할 때에는 함수 이름, 스코프 등과 같은 기호들을 포함해서 named function 에 대해서 설명을 드렸다면 오늘은 이러한 함수들의 표현을 훨씬 간결하게 표현해줄 수 있는 문법인 Arrow Function 사용 방법을 알려 드리려고 합니다. 말로 하는 것 보다 소스코드를 보면서 이해하는게 훨씬 낫겠죠?ㅎㅎ 바로 예제 코드를 통해서 Arrow Function을 어떻게 사용하는지 보여 드리도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1..

[JavaScript] JavaScript String(문자열) 메서드 사용하기

웹 프로그래밍/JavaScript 범범조조 2020. 12. 28. 00:00

안녕하세요. 오늘은 JavaScript에서 기본적으로 제공해주는 메서드인 String 문자열 객체 메서드 사용하는 방법에 대해서 알려 드리려고 합니다. String에서 기본으로 제공해주는 메서드들의 종류가 많은데요. 오늘은 모든 메서드들을 다 알 수는 없고, 프로그래밍을 하면서 많이 쓰는 메서드들 위주로 제가 생각해서 예제 코드를 작성해 보려고 합니다. 예를 들어, 문자열 위치 반환해 주는 메서드나 문자열 추출, 분리, 결함 해주는 메서드 등 자주 쓰이는 메서드들 위주로 예제 코드를 작성해 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38..

[JavaScript] JavaScript Date(날짜) 메서드 사용하기

웹 프로그래밍/JavaScript 범범조조 2020. 12. 27. 00:00

안녕하세요. 오늘은 JavaScript 에서 기본적으로 제공해주는 Date 메서드에 대해서 알아보고 또한 소스코드로 어떻게 작성하는지도 공부해 보려고 합니다. 기본적으로 제공해주는 Date 메서드들의 종류가 워낙 많기 때문에 모든 메서드들을 다룰 순 없고, 사용량이 많은 메서드들을 기준으로 예제코드를 작성해 보도록 하겠습니다. 크게 어려운 부분은 없기 때문에 한번씩 따라 쳐 보시면서 이런것들도 있구나~ 이렇게 생각하고 넘어가시면 좋겠습니다. 그럼 바로 예제 코드를 작성해 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 4..

[JavaScript] JavaScript 함수 (function) – arguments 객체

웹 프로그래밍/JavaScript 범범조조 2020. 12. 26. 00:00

안녕하세요. 오늘은 JavaScript에서 arguments 객체에 대해서 알아 보려고 합니다. JavaScript에서는 만약 함수의 정의보다 더 많은 수의 매개변수(인수)가 전달이 된다면, 매개변수에 대입되지 못한 인수들은 참조할 방법이 없어 집니다. 바로 이런 경우에 arguments객체를 이용해서 동적으로 유용하게 인수를 전달 받을 수 있는데요. 어떻게 해서 전달을 받는건지 소스코드를 통해서 알아 보도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 JavaScript 연습 - 범범조조 h1{ color: white; background-color: r..

[JavaScript] JavaScript Date(날짜) 객체 사용하기

웹 프로그래밍/JavaScript 범범조조 2020. 12. 26. 00:00

안녕하세요. 오늘은 JavaScript 에서 날짜를 표현할 때 사용하는 Date 객체 사용하는 방법에 대해서 알아보려고 합니다. JavaScript에서 제공해주는 날짜와 시간 값의 범위는 아래와 같습니다. 1. 년 2. 월 3. 일 4. 시 5. 분 6. 초 위와 같이 년, 월, 일, 시, 분, 초 이렇게 크게 6가지의 범위로 날짜와 시간을 표시할 수 있는데요. 그럼 바로 예제 코드를 통해서 어떻게 JavaScript에서 날짜와 시간을 Date 객체를 통해서 어떻게 표시하는지 보여드리도록 하겠습니다. 예제 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 4..

[JavaScript] JavaScript Number 메서드 사용방법

웹 프로그래밍/JavaScript 범범조조 2020. 12. 25. 00:00

안녕하세요. 오늘은 JavaScript에서 기본으로 제공해주는 Number 메서드에 대해서 알아 보고 각 메서드 별로 어떻게 사용하는지도 알아 보려고 합니다. Number 메서드는 크게 아래와 같이 6가지가 있습니다. 1. Number.parseFloat() – 문자열 파싱하여, 문자열에 포함된 숫자 부분을 실수 형태로 반환 2. Number.parseInt() – 문자열을 파싱하여, 문자열에 포함된 숫자 부분을 정수 형태로 반환 3. Number.isNaN() – 값이 NaN(Not a Number) 인지 아닌지를 검사 4. Number.isFinite() – 값이 유한한 수인지 아닌지를 검사 5. Number.isInteger() – 값이 정수인지 아닌지를 검사 6. Number.isSafeInteg..

1
2
3

Sidebar

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바