ALL

ALL

Node.js express 설치 및 사용 방법 예제

Expresss는Node.js의 프레임워크입니다.Node.js 사용해 웹 개발을 하는 경우Expresss프레임워크를 사용하면 더욱더 간편하게 개발을 할 수 있게 도와줍니다.Expresss 프레임워크의 특징을 간략하게 보겠습니다.프렘임워크중 점유일이 가장 높다.많은 개발자들이 사용하고 있어 정보들을 많이 얻을 수 있다.확장 모듈이 많이 있고 추가하기 용이하게 되어있다.Express 설치 방법Express를 설치하기 위해서는 Node.js이 설치되어 있어야 합니다.Express 설치는npm커맨드를 사용해 인스톨합니다.npm instal...
2023.08.09
ALLIT자바스크립트
ALL

Node.js 윈도우, Linux 설치 하기 Hello World

JavaScript와 같이 많이 사용하는Node.js사용 방법을 알아보겠습니다.우선 설치 방법과 동작 확인을 하기 위해Hello World를 출력하도록 하겠습니다.개발 환경은 윈도우 또는 Linux 등 각자 다릅니다.많이 사용하는 환경인 윈도우와 Linux를 간단하게 보겠습니다.설치할 버전은 현재LTS(Long term support)버전인 16을 설치하겠습니다.윈도우 Node.js 설치윈도우에서는 Node.js 인스톨 파일을 다운로드 받아 설치를 진행합니다.1. 설치 파일 다운로드다운로드는 공식 사이트에서 받으면 됩니다.2. 설치...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 HTML name 이름으로 요소 정보 취득 getElementsByName

Document오브젝트의getElementsByName메서드를 사용해name이름으로 요소에 접근하는 방법을 알아보겠습니다.getElementsByName작성 방법을 먼저 보겠습니다.document.getElementsByName(name 이름)파라미터로name이름을 지정합니다.샘플 코드를 보면서 사용 방법을 확인해보겠습니다.<!DOCTYPE html><html lang="ko"><head><meta charset="UTF-8"><title>getElementsByName</title></head><body><p>취미 선택</p><l...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 HTML class 이름으로 요소 취득 방법 getElementsByClassName

자바스크립트에서HTML의class속성값을 지정해 해당 요소의 값은 취득하는 방법을 알아보겠습니다.class속성값을 지정해 해당 요소에 접근하기 위해서는getElementsByClassName을 사용합니다.getElementsByClassName사용 방법을 먼저 보겠습니다.getElementsByClassName(class 이름)접근하고 싶은class의 이름을 파라미터로 지정합니다.getElementsByClassName 사용 방법class이름을 지정해 요소의 정보들을 취득해오는getElementsByClassName에 대해 자세히 ...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 HTML 태크 이름으로 요소 취득 방법 getElementsByTagName

자바스크립트에서 HTML의 태그명을 지정 요소를 취득할 수 있는getElementsByTagName대해 살펴보겠습니다.getElementsByTagName메서드의 사용 방법을 먼저 보겠습니다.document.getElementsByTagName(태그 이름)태그 이름에는'div'나'p'처럼태그 종류 이름을 지정합니다.'*'를 지정하면 모든 요소를 취득합니다.태그 이름을 지정해 취득한 반환값은HTMLCollection오브젝트 형태로 반환합니다.HTMLCollection오브젝트는 여러개 요소의 노드가 집합됩니다.집합된 오브젝트에 접근하기...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 HTML id로 데이터 문자열 취득 방법 예제

HTML에서 입력값 또는 텍스트 문자열을 자바스크립트에서 취득하는 방법을 알아보겠습니다.입력값 또는 문자열을 취득하기 위해서는getElementById를 사용합니다.getElementById는 HTML 태그 안에 지정한 id 이름으로 해당 요소를 취득하는 메서드입니다.샘플 소스를 보면서 사용 방법을 알아보도록 하겠습니다.getElementById 메서드getElementById메서드는 HTML 태그 안에서 지정한id이름으로 해당 요소를 취득해오는 메서드입니다.getElementById사용 방법은 아래와 같습니다.document.ge...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 HTML 표시내용 변경 innerHTML 사용 방법

자바스크립트로 무언가 처리를 하고 그 결과에 따라 화면상에 문자열을 변경하고 싶은 경우가 있습니다.이런 경우에는innerHTML프로퍼티를 사용해 표시하고 싶은 내용으로 변경할 수 있습니다.innerHTML프로퍼티를 사용해 표시내용을 변경하는 방법을 알아보겠습니다.innerHTML우선innerHTML이 무엇인지 살펴보겠습니다.innerHTML은 HTML요소의 내용을 ㄹ변경하고 싶은 경우에 사용하는Element오브젝트의 프로퍼티입니다.예를 들어div요소나span요소에 작성한 동적으로 내용을 변경할 때 사용할 수 있습니다.innerHTM...
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 항목 표시, 비표시 방법 예제

문자열이나 사진을 자바스크립트를 사용해 표시하거나 숨기는 방법을 알아보겠습니다.우선 표시 또는 비표시를 하는 방법은 2가지가 있습니다.displayvisibility2개의 설정 방법의 사용법과 차이점을 확인해 보겠습니다.display우선 display로 표시, 비표시 하는 샘플을 보겠습니다.display 표시/비표시 테스트 문자function disControll(num){ if (num == 0) { document.getElementById("disp").style.display="block"; } else { document....
2023.08.09
ALLIT자바스크립트
ALL

자바스크립트 람다식(화살표 함수) 사용 방법 주의점

자바스크립트 ES6에서 도입된 화살표(ARROW) 함수가 있습니다.흔히 람다식이라고 합니다.람다식 함수를 사용할 때 주의할 점이 있습니다.일반적인 방법으로 작성한 함수와 람다식으로 작성한 함수를 비교해보면서 주의점을 보겠습니다.일반 함수와 람다식 함수람다식을 몰라도 누구나 사용할 수 있는 일반적인 함수와 람다식 함수를 비교해서 작성해보면 다음과 같습니다.// 일반 함수let normalFunc = function(x){ console.log(x);}// 람다식 함수let arrowFunc = (y) => { console.log(y...
2023.08.09
ALLIT자바스크립트
다음 페이지로