Program/JavaScript(284)
-
[JavaScript] 폴더 안의 파일 갯수 세기 (length)
파일폴더에 있는 파일의 갯수를 세는방법 const fs = require('fs'); const dir = './directory'; fs.readdir(dir, (err, files) => { console.log(files.length); });
2021.03.09 -
[JavaScript] 현재 날짜+요일+시간을 표시하는 시계
현재날짜와 요일, 그리고 매초 갱신되는 시계 만들기 물론 CSS로 디자인을 정리해 줘야 하지만, 위와 같은 시계를 만드는 코드 CSS로 디자인을 정리안해주면 걍 어글리 텍스트임.... const clockContainer = document.querySelector(".js-clock"), dateTitle = clockContainer.querySelector(".currDate"), clockTitle = clockContainer.querySelector(".currTime"); function getDate(){ const date = new Date(); const week = new Array ('[일]','[월]','[화]','[수]','[목]','[금]','[토]'); const year ..
2021.03.05 -
[JavaScript] 미니(inline) 조건문
inline 미니 조건문 템플릿 리터럴 등에서 간단하게 조건문을 추가하고 싶을때 유용한 조건문 문법은 다음과 같다. 조건문 ? true일때 실행문 : else일때 실행문 예시) clockTitle.innerText = `${seconds < 10 ? `0${seconds}` : seconds}`;
2021.03.05 -
[JavaScript] .addEventListener
.addEventListener 이벤트가 발생했을때 함수를 실행하는 메소드 예제) 브라우저에서 글씨를 클릭하는 이벤트가 발생할때 글씨색깔을 변경해보자! // HTML Try This // JavaScript const title = document.query.Selector("#title"); const BASE_COLOR = "red"; const OTHER_COLOR = "blue"; function handleCLick() { const currentColor = title.style.color; if (currentColor === BASE_COLOR){ title.style.color = OTHER_COLOR; } else { title.style.color = BASE_COLOR; } } fu..
2021.03.05 -
[JavaScript] HTML,CSS 객체에 접근할때!
가져오고.... document.getElementById : id로 지정된 값을 가져온다 document.getElementByClassName : class로 지정된 값을 가져온다 docement.getElementByTagName : Tag 값을 가져온다 .... 등등등 ... document.querySelctor("#이름"); id로 지정된 값을 가져온다 document.querySelctor(".이름"); class로 지정된 값을 가져온다 document.querySelctor("태그이름"); tag로 지정된 값을 가져온다.... 등등등 ... 내보내고... 변수이름.innerHTML = 실행값 변수이름.style.color = "red" document.title = 실행값.... 등등등....
2021.03.05 -
[JavaScript] (`) 백틱(backtick)과 템플릿 리터럴
세상 강력한 백틱(backtick) JavaScript에서 템플릿 리터럴에 활용되는 강력한 문자가 있다. 바로 키보드에서 숫자 1 왼쪽에 자리하고 있는 문자 (`) 이다. 이 문자를 백틱(backtick)이라고 하는데 언뜻 잘못보면 작은 따옴표와 혼동하기 아주 딱 좋다... 영문명칭으로는 Backquote, backtick, grave accent 등 다양한 이름이 붙어있다. 자바스크립트에서는 백틱(`)을 사용하여 문자열을 표현하는 것을 '템플릿 리터럴'이라고 한다. 백틱을 사용하는 장점은 여러가지가 있지만 가장 큰 장점은 다음과 같다. 1. (\n) 등을 사용하지 않고도 줄바꿈을 쉽게 할 수 있다. 2. 문자열 내부에 표현식을 포함 할 수 있다. 3. 표현식을 사용함으로써 (' ')(" ")라던가 (+..
2021.03.05 -
[JavaScript] 자바스크립트에서 배열을 만드는 방법 Array, Object
자바스크립트에서 배열을 만드는 방법 Array, Object 1. Array(배열) 배열을 만드는 첫번째 방법은 이름 그대로 Array(배열)이다. 배열의 깂(요소)으로는 number, string, booliean, float, 변수, 함수, Array, Object, 등 어떤 값이라도 추가할 수 있으며, 종류가 다른 값들도 함께 담을 수 있다. Array의 이름을 호출하면 전체 배열값을 반환해주고, Array의 이름에 인덱스번호를 입력하면 인덱스 번호에 있는 값을 반환한다. const myInfo = ["playdaddy", "48", true, "Seoul"]; console.log(myInfo); console.log(myInfo[3]); // { name: 'wondhan', age: 48, g..
2021.03.04 -
[JavaScript] 자바스크립트 변수(상수)생성 방법 let, var, const
JavaScript에서 변수(variable)를 생성하는 방법 JavaScript에서 변수를 생성하는 방법 광역변수, 지역변수 등등... 여러가지가 있지만 우선 먼저 대표적인 세가지 방법에 대해서 간략하게 알아봅니다. 1. let 첫번째로 let 을 사용하여 변수를 생성하는 방법입니다. let a = 1234; a = 1234; // let을 생략하고 변수의 생성이 가능 let의 경우는 보통 생략하고 사용하는 경우가 많으며, 생략을 하고 변수이름만으로도 변수의 생성이 가능합니다. 이때 이렇게 생성된 변수는 광역변수라고 일컬어지며 다른 함수등에서도 사용이 가능한 변수로 만들어지게 됩니다. 또한 이 경우에는 언제든지 변수의 값을 수정, 변경 및 삭제가 가능합니다. 2. var 두번째로 가장 많이 사용하는 변..
2021.03.02 -
[JavaScript] 함수(functuon)만들기, 호출하기
JavaScript에서 함수 만들기, 호출하기 (매개변수 없을때); JavaScript에서 함수는 function을 먼저 선언하고 함수이름+괄호()+{ 대괄호 안에 실행코드 }의 형식으로 만들어집니다. 함수를 호출할때는 함수이름+괄호()+세미콜론; 의 형식으로 호출합니다. 문법) // 함수만들기 function 함수이름(){ 실행코드 } // 함수호출하기 함수이름(); 예시) // 함수만들기 function f123(){ console.log(1); console.log(2); console.log(3); } // 함수호출하기 f123(); JavaScript에서 함수 만들기, 호출하기 (매개변수 있을때); JavaScript에서 함수를 만들때 매개변수(parameter)값을 지정해서 함수를 만들 수 있..
2021.03.02 -
[JavaScript] HTML에서 JavaScript 변수(상수) 사용하기
HTML에서 JavaScript 변수 사용하기 JavaScript에 생선된 변수를 HTML에서 사용하는 방법은 여러가지가 있습니다. 그중에서도 id를 부여하고 사용하는 방식이 가장 보편적으로 사용하는 방법중 하나입니다. 사용방법은 다음과 같습니다. // 태그에 id값을 부여합니다 // // javaScrip에서 id값을 받아 javaScript의 변수값을 입력합니다 // [JavaScript] 자바스크립트 변수(상수)생성 방법 let, var, const [JavaScript] 변수생성 let, var, const JavaScript에서 변수(variable)를 생성하는 방법 JavaScript에서 변수를 생성하는 방법 광역변수, 지역변수 등등... 여러가지가 있지만 우선 먼저 대표적인 세가지 방법에 대..
2021.02.26