앜스토리 | 호기심 많은 개발자의 보물창고

이벤트는 웹사이트를 인터랙티브하고 재미있는 애플리케이션으로 발전시킵니다. 코드에서 (HTML) 요소의 이벤트를 처리하면 웹 페이지를 유연하게 디자인할 수 있습니다. 따라서 이벤트 및 핸들러도 런타임에 조정할 수 있습니다. 웹 개발에서 가장 자주 사용되는 JavaScript 구조인 데에는 그만한 이유가 있습니다. 이를 통해 사용자가 a 를 클릭하거나 a 를 누르 거나 요소를 눌렀을 때와 같은 페이지의 이벤트를 수신 하여 HTML 요소에 대화형 기능을 추가할 수 있습니다 .buttonkeyloads 이벤트/리스너 개요 및 계획 그림 1: HTML 및 JavaScript의 이벤트 스키마 이벤트 유형을 선택하고 요소에 연결하고 리스너를 정의합니다. 이것은 웹 사용자 인터페이스에서 발생하는 JavaScript의 ..

LightBox는 Web에서 이미지를 오버레이하는 일반적인 방법입니다. 이미지를 클릭하면 라이트 박스는 어떤 형식의 애니메이션 팝업 배경을 흐리게하여 이미지 자체에 초점을 맞추고 있습니다. 이미지도 크고 커지고 있습니다. 우리가 오랫동안 알고 있었다 가장 인기있는 라이트 박스 JavaScript 라이브러리는 데스크톱에서이를 희망하지만, 모바일 플랫폼에서는 그리 많지 않습니다. 이를 무시하고 응답의 필요성은 오늘의 좋은 생각이 아닙니다. 따라서 15의 ​​응답 라이트 박스 라이브러리 컬렉션을 체크 아웃해야하는 이유입니다. Lightbox is one popular way to overlay images on the web. When you click on an image, the Lightbox pops ..

1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) //bathingape var name = 'javascript' console.log(name) //javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용될 지도 파악하기 힘들 뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다. 위의 코드에서 변수 선언 방식만 바꿔보자. let name = 'ba..

클로저는 자바스크립트의 강력한 기능이지만, 너무 남발하여 사용하면 안 된다. 여기서는 클로저에서 사용자가 쉽게 간과할 수 있는 사항을 정리했다. 클로저의 프로퍼티값이 쓰기 가능하므로 그 값이 여러 번 호출로 항상 변할 수 있음에 유의해야 한다. function outerFunc(argNum){ var num = argNum; return function(x) { num += x; console.log('num: ' + num); } } var exam = outerFunc(40); exam(5); exam(-10); 위 코드에서 보는 바와 같이 exam 값을 호출할 때마다, 자유 변수 num의 값은 계속해서 변화하니 주의해야 한다. function func() { var x = 1; return { fu..

다음과 같은 함수를 작성한다고 가정해보자. "I am XXX. I live in XXX. I'am XX years old"라는 문장을 출력하는데, XX 부분은 사용자에게 인자로 입력 받아 값을 출력하는 함수 가장 먼저 생각할 수 있는 것은 앞 문장 템플릿을 전역 변수에 저장하고, 사용자의 입력을 받은 후, 이 전역 변수에 접근하여 완성된 문장을 출력하는 방식으로 함수를 작성하는 것이다. 이 방식으로 구현하면 코드는 다음과 같다. var buffAr = [ 'I am ', '', '. I live in ', '', '. I\am ', '', ' years old.', ]; function getcompletedStr(name, city, age) { buffAr[1] = name; buffAr[3] = c..

노드 설치 프로그램은 노드 사이트에서 다운로드가 가능하다. 노드사이트 < - 클릭 이곳에 접속하면 첫 화면에 Download for Windows(x64)라고 64비트 전용 다운로드 버튼이 두 개 나타난다. 어떤 것을 다운받아도 상관은 없다. 이 포스팅에서는 Current라는 단어가 붙은 버전을 다운로드 한다. 설치를 해보자! LTS와 Current는 차이가 약간 있다.LTS(Long Term Supported) 버전은 서버 환경에서 안정적으로 동작하도록 지원하는 버전이다. 노드를 사용하는 목적이 서버 개발인데 실제로 서버를 운영할 때는 안정성과 보안이 더 중요하므로 LTS 버전을 사용한다. Current 버전은 LTS 버전에 비해 최신 기능을 포함하고 있다. 새로운 기능을 추가하거나 기존 버전에 있는 ..

노드를 개발하는데 필요한 개발 도구를 설치 해보자. 다음 포스팅에서 제공하는 샘플 코드를 실행하기 위해서는 이 포스팅의 설명에 따라서 개발 도구를 먼저 설치해야 한다. 자바스크립트가 기반인 노드는 자바스크립트로 개발할 수 있는 개발 도구라면 어떤 것이든 사용할 수 있다. 예를 들어, 이클립스(Eclipse)를 사용할 수도 잇고 텍스트 편집기인 에디트플러스(EditPlus)도 사용할 수 있다. 이번 포스팅에서는 여러 개발 도구 중 웹 개발에 많이 사용하는 브라켓(Brackets)을 설치해서 사용한다. 순서대로 하나씩 따라가보자. 절대로 어렵지 않다! 브라켓을 설치한다▼크롬 브라우저를 설치한다.▼노드를 설치한다. ① 웹 브라우저를 열고 주소창에 'bracket.io'를 입력한 후 Enter 키를 누른다. 열..