자바스크립트

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

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

ALLIT자바스크립트

자바스크립트 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...

ALLIT자바스크립트

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

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

ALLIT자바스크립트

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

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

ALLIT자바스크립트

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

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

ALLIT자바스크립트

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

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

ALLIT자바스크립트

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

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

ALLIT자바스크립트

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

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

ALLIT자바스크립트

자바스크립트 jQuery Form 데이터 배열, 쿼리 형식으로 전송하기

텍스트 박스에 입력한 값을 jQuery를 사용해 처리할 로직에 전달해야 하는 경우가 많습니다. 또는 체크박스나 라디오 버튼등 입력할 수 있는 항목이 많은 경우도 있습니다. 로직은 자바나 PHP 등등 따로 만들어 놓은 경우가 많기 때문에 POST 또는 GET으로 전송합니다. 이렇게 로직 부분에 입력한 값을 전송할때 항목이 여러 개일 경우 배열로 전송하면 값을 취득하기 편리합니다. serializeArray 배열 형식 serializeArray를 사용하면 데이터를 전송할 때 배열 형태로 전송을 할 수 있습니다. 예제를 보면서 사용방법을...

ALLIT자바스크립트

다음 페이지로

1 2 3 4 5