JavaScript "10" + 1 = "101" , "10" - 1 = 9 인 이유. 사양을 잘 살펴봐야 합니다. 결과를 오해하기 전에 사양을 잘 살펴보자JavaScript 더하기 연산자 (+)12.8.3 The Addition Operator (+)를 살펴보도록 합시다. ▶ NOTE The addition operator either performs string concatenation or numeric addition.12.8.3.1 Runtime Semantics : EvaluationAdditiveExpression : AdditiveExpression + MultiplicativeExpression 더하기 연산자는 문자의 연결과 숫자의 덧셈을 한다는 것을 알 수 있습니다.다음으로 JavaSc..
Node.js + Express + MongoDB 사용하여 API를 만드는 방법을 소개합니다. 작성하는 API에 대한 링크 이 포스트에서 사용하는 주요 기술을 소개합니다. 이외에 사용하는 package 등은 중간에 간단히 설명합니다. 당연히 javascript 지식은 있어야 합니다. Node.js : 서버 측에서 움직이는 JavaScriptExpress : Node.js MVC 프레임워크MongoDB : NoSQL로 불리는 데이터베이스 전제 조건여기에선 Node.js와 MongoDB가 설치되어 있는 것이 개발의 전제 조건입니다. 설치되지 않은 분은 아래 링크를 통해 쉽게 설치할 수 있습니다. MongoDB 설치Node.js 설치 Node.js + Express API 만들기 순서이 포스트에선 아래 순서로..
개요이 문서에서는 로컬 스토리지 설명과 각 브라우저의 동작을 검증합니다.로컬 스토리지는 데이터를 브라우저에 저장하는 구조입니다. 저장할 때 사이트마다 Key와 문자의 조합으로 데이터를 저장합니다. 사이트별 영역은 각각 독립적이며 다른 사이트에서 기록한 데이터를 조작할 수 없습니다.또한 사이트마다 저장할 수 있는 한도는 제한됩니다. 그 구체적인 크기는 브라우저마다 다릅니다. 자세한 사양은 아래를 참조하세요.https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute 구현 예시아래에 로컬 스토리지의 사용 방법을 소개합니다. 파이어폭스, 크롬, 익스플로러11, 엣지. 로컬스토리지 API 사용 예제localStorage 관련한..
JavaScript 프로그램을 한 번에 완벽하게 동작시키는 건 어렵습니다. 그럴 때, 어떤 방법으로 자바스크립트 디버깅을 해야 합니다. 그 디버깅 하는법이 맹활약하는 console.log라고 아십니까? console.log를 사용하여 디버깅 할 때 브라우저 콘솔 화면에 어떤 메시지를 표시할 수 있으신가요? 이번 글에서는 console.log 사용 방법부터 console.log를 사용한 디버깅 방법까지 상세하게 설명합니다. console.log는 JavaScript의 기본! 확실히 기억하고 활용할 수 있도록 하세요. console.log 란?여러분은 console.log를 사용해 보셨나요? 원래, console.log가 뭔지 아시나요? JavaScript 프로그래밍의 디버깅 방법은 다양하지만, 압도적으로 ..
아래와 같은 JavaScript 배열을 객체로 변환하고자 합니다. ['a','b','c'] 위 배열을 { 0: 'a', 1: 'b', 2: 'c'} 이런 오브젝트로 변환하는데 몇 가지 방법이 있습니다. 자바스크립트 2가지 방법 + jQuery 1가지 방법, 총 3가지 소개합니다. 1. ECMAScript 6 : Object.assign Object.assign() 함수는 열거 가능한 값을 하나씩 대상 오브젝트로 복사할 때 사용합니다. Object.assign({}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"} length 배열은 열거할 수 없어서 복사되지 않습니다. ES6 스프레드 사용하여 같은 결과를 얻을 수도 있습니다. { ...['a', 'b', 'c'] } 2. 중간에..
JavaScript에서 연월일시분초로 얻는 소스 코드 예시입니다.자바스크립트 타임 스탬프 작성과 날짜, 시간의 동적 표시에 활용할 수 있습니다. /** * 현재 시간을 문자열 YYYYMMDDHHMMSS로 돌려받는 함수 * @returns {string} 예시 20170101000000 */var currentDateTimeString = function () { // 현재 시간 var d = new Date(); var fillZero = function ( number ) { return (0 + number).slice(-2); } // 연월일시분초 획득 var year = d.getFullYear(); // 연도 var month = fillZero(d.getMonth() + 1); // 월 var..
여러분은 HTML, CSS, JS의 차이와 역할 구분하여 대답할 수 있습니까? 왠지 알고 있는 것 같은데 구체적으로 말하기 곤란한 분들도 있겠죠? 그런 분들을 위해 HTML CSS Javascript 기본 이해하기 설명합니다. 목차 1 HTML이란 1.1 HTML 버전 1.2 HTML 작성 1.3 HTML 마크업 작성해보기 2 CSS란 2.1 CSS 버전 2.2 CSS 작성 2.3 CSS로 제목 꾸며보자 3 JavaScript 란 3.1 JavaScript 작성 3.2 JavaScript로 아코디언 메뉴를 만들어 보기 4 정리 - HTML이란 - 정식 명칭은 "HyperText Markup Language (하이퍼 텍스트 마크 업 언어)"이며, 줄여서 "HTML"이라고 합니다. 쉽게 말하면 평소 여러분이..
클로저를 활용할 경우 여러 장점이 있지만, 변수가 묶여 반복문이 비정상적으로 구동하는 경우가 있습니다. 예를 들면 아래와 같습니다. var funcs = []; for (var i = 0; i < 3; i++) { funcs[i] = function() { console.log("My value: " + i); }; } for (var j = 0; j < 3; j++) { funcs[j](); } 의도는 1, 2, 3을 순차적으로 출력하는 것입니다. 하지만, 클로저 결과 화면처럼 3이란 숫자만 3번 출력됩니다. 문제는 변수 i 가 외부 변수에 바인딩된다는 것입니다. 하지만, 여러 해결책이 있습니다. 하나씩 알아보겠습니다. ◆ 인덱스 변수를 묶는 가장 간단하고 읽기 쉬운 방법 for (var i = 0; ..
[자바스크립트 강좌 007] 프로그램, 키보드 소스 (char code) 참조 - On-screen HTML/자바스크립트Javascript keyboard [링크]소스 - Keyboard.zip [링크] 원 소스 제작자 분께서 덴마크 분이셔서 그런가, 키보드는 덴마크 기준으로 제작되었습니다. 기본적으론, 자바스크립트(JavaScript) 함수의 ID를 주요 요소로 사용해서 구현이 되었고, Firefox, Opera, Chrome, IE9에서 테스트가 되었다고 합니다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717..