.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..

가져오고.... document.getElementById : id로 지정된 값을 가져온다 document.getElementByClassName : class로 지정된 값을 가져온다 docement.getElementByTagName : Tag 값을 가져온다 .... 등등등 ... document.querySelctor("#이름"); id로 지정된 값을 가져온다 document.querySelctor(".이름"); class로 지정된 값을 가져온다 document.querySelctor("태그이름"); tag로 지정된 값을 가져온다.... 등등등 ... 내보내고... 변수이름.innerHTML = 실행값 변수이름.style.color = "red" document.title = 실행값.... 등등등....

세상 강력한 백틱(backtick) JavaScript에서 템플릿 리터럴에 활용되는 강력한 문자가 있다. 바로 키보드에서 숫자 1 왼쪽에 자리하고 있는 문자 (`) 이다. 이 문자를 백틱(backtick)이라고 하는데 언뜻 잘못보면 작은 따옴표와 혼동하기 아주 딱 좋다... 영문명칭으로는 Backquote, backtick, grave accent 등 다양한 이름이 붙어있다. 자바스크립트에서는 백틱(`)을 사용하여 문자열을 표현하는 것을 '템플릿 리터럴'이라고 한다. 백틱을 사용하는 장점은 여러가지가 있지만 가장 큰 장점은 다음과 같다. 1. (\n) 등을 사용하지 않고도 줄바꿈을 쉽게 할 수 있다. 2. 문자열 내부에 표현식을 포함 할 수 있다. 3. 표현식을 사용함으로써 (' ')(" ")라던가 (+..

자바스크립트에서 배열을 만드는 방법 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..

태그는 브라우저에서 텍스트를 입력하고 지정한 URL로 값을 전송해주는 태그. form태그의 프로세스를 간략하게 정리해보면... 첫번째 input 태그에서 type(형식)은 text박스(1줄짜리)로, name(입력값)은 title로 지정 다음 textarea 태그는 여러줄을 입력할 수 있는 텍스트 박스 생성, name(입력값)은 description으로 지정 마지막 input 태그에서 type(형식)은 submit 으로 제출버튼 생성 위와같이 입력하고 제출버튼을 클릭하면 form의 action이 활성화되면서 입력값을 전송하기 위한 주소가 필요하므로 action 뒤에 입력값을 전송하고자 하는 주소를 추가하고, 마지막으로 post방식으로 전송함으로써 전송하는 url 주소의 노출을 차단.

PM2 is... Advanced, Production Process Manager for node.js Install 방법 터미널 창에서 'npm install pm2 -g' 을 입력. 마지막에 '-g'를 입력해야 어디서든 실행이 가능한 프로그램으로 설치됨... 실행방법 pm2 start 파일명.js --watch 마지막에 '--watch'를 입력해야 파일이 변경되었을때 프로그램을 자동 리프레쉬(프로그램 리부팅)기능 활성화 사용방법 pm2 monit → 모니터링 프로세스 런치 pm2 list → 터미널창에 실행중인 프로세스 리스트 표시 pm2 log → 터미널창에 발생 이벤트를 텍스트로 표시 종료방법 pm2 stip 파일명 설치 및 자세한 설명은 아래의 링크에서... pm2.keymetrics.io/ ..

클리어픽스(clearfix)란 float으로 인하여 아래와 같이 영역이 깨져버리는 현상이 발생한다면... 즉 height 값이 사라져 영역이 깨진다면... overflow: hidden;을 사용하여 영역을 잡을 수 있지만 불안정. 이때, float을 사용한 상위(부모)박스에 .clearfix를 설정하면 float 으로 인하여 영역이 깨지는 현상을 방지하게 된다. 결국 .clearfix는 영역을 잡아주기 위한 css 속성. 클리어픽스의 사용방법은 다음과 같다. /* CSS */ .clearfix:before, .clearfix:after { display: block; content: ''; line-height: 0; } .clearfix:after { clear:both; } .clearfix { *z..

시멘틱태그(sementic tag)란 인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조는 웹문서에서 원하는 정보를 찾기가 점점 힘들어 지게 만드는 원인이었다. 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위한 태그. HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그. HTML5 이전에는 구조를 구분하기 위하여 div태그에 id 또는 클래스 등으로 구분하며 구조를 설계했으나 시멘틱태그의 등장으로 인하여 좀더 명시적이면서도 직관적인 구조의 설계가 가능해졌다. 시멘틱태그를 사용하면 좋은점(장점) 1. SEO 최적화에 유리. (SEO: Sea..

JavaScript에서 변수(variable)를 생성하는 방법 JavaScript에서 변수를 생성하는 방법 광역변수, 지역변수 등등... 여러가지가 있지만 우선 먼저 대표적인 세가지 방법에 대해서 간략하게 알아봅니다. 1. let 첫번째로 let 을 사용하여 변수를 생성하는 방법입니다. let a = 1234; a = 1234; // let을 생략하고 변수의 생성이 가능 let의 경우는 보통 생략하고 사용하는 경우가 많으며, 생략을 하고 변수이름만으로도 변수의 생성이 가능합니다. 이때 이렇게 생성된 변수는 광역변수라고 일컬어지며 다른 함수등에서도 사용이 가능한 변수로 만들어지게 됩니다. 또한 이 경우에는 언제든지 변수의 값을 수정, 변경 및 삭제가 가능합니다. 2. var 두번째로 가장 많이 사용하는 변..

JavaScript에서 함수 만들기, 호출하기 (매개변수 없을때); JavaScript에서 함수는 function을 먼저 선언하고 함수이름+괄호()+{ 대괄호 안에 실행코드 }의 형식으로 만들어집니다. 함수를 호출할때는 함수이름+괄호()+세미콜론; 의 형식으로 호출합니다. 문법) // 함수만들기 function 함수이름(){ 실행코드 } // 함수호출하기 함수이름(); 예시) // 함수만들기 function f123(){ console.log(1); console.log(2); console.log(3); } // 함수호출하기 f123(); JavaScript에서 함수 만들기, 호출하기 (매개변수 있을때); JavaScript에서 함수를 만들때 매개변수(parameter)값을 지정해서 함수를 만들 수 있..