JavaScript
자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 사이트에서의 사용으로 많이 알려졌지만, 다른 응용프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 자바스크립트는 본래 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문(syntax)이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문을 바탕했기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과 구문 외에는 자바보다 셀프와 유사성이 많다.
2008년 현재, 가장 최근 버전은 자바스크립트 1.8이고, 파이어폭스 3에서 지원된다. 표준 ECMA-262 3판에 대응하는 자바스크립트 버전은 1.5이다. ECMA스크립트는 쉽게 말해 자바스크립트의 표준화된 버전이다. 모질라 1.8 베타 1이 나오면서 XML에 대응하는 확장 언어인 E4X(ECMA-357)를 부분 지원하게 되었다. 자바스크립트는 브라우저마다 지원되는 버전이 다르며, 가장 범용적으로 지원되는 버전은 1.5이다.
Categories
- CodingGuidelines:JavaScript
- Web Components - 웹컴포넌트 항목별 구현 방법 및 디자인 등 정리.
- JavaScript:Basic - 기초.
- JavaScript:Libraries - 1
- JavaScript Module System - UMD, ES6 Module, CommonJS 의
require
와 AMD의import
차이점 등...- JavaScript:Module와 JavaScript:Import 도 동일한 페이지.
for ... in
문법에 대한 설명. ...
문법. (e.g. let food = {...a,...b}
) ===
)이다. (참고로 "==
"은 "동등 연산자" 이다) ?:
연산자. |>
연산자. [...]
로 값을 넣는다. undefined
에 관련된 내용 총집합. const {name, level} = student;
, const [a, b] = values
처럼 객체 또는 배열을 분해하여 할당한다. const a = [...arr1, value, ...arr2];
, const b = {...obj1, key: val, ...obj2};
- Deep copy가 아니다. const a = data1 ? val1 : val2;
와 같은 3항 연산자. `Hello, ${val}`
와 같이 백틱으로 쿼우딩된 문자열. const a = obj.val?.val2?.data;
const a = b ?? 'Default Value';
func`bla ${kk} bla`
와 같이 함수 호출하는 방법. 실전에서 많이 사용되는 예제는 mui 의 styled component 이다. TypeScript
- TypeScript:AngleBracket -
<
와>
. TypeScript에서 Type Assertion 으로 사용된다.
Web API
Java vs JavaScript vs JScript
라이브스크립트의 이름이 자바스크립트로 변경된 것은 대략 넷스케이프가 자사의 넷스케이프 네비게이터 웹 브라우저에 자바 기술에 대한 지원을 포함하기 시작할 즈음이다. 자바스크립트는 1995년 12월 출시된 넷스케이프 2.0B3에서부터 공개, 채택되었다. 자바스크립트라는 이름은 상당한 혼란을 가져왔다. 이것은 자바와 자바스크립트 간에는 구문이 유사하다는 점(양쪽 모두 C에 바탕을 두었기 때문에) 외에는 실제 관련성이 없었기 때문이다. 두 언어는 의미론적으로 매우 다르고, 특히 각각의 객체 모델은 관련성이 없는데다가 상당 부분이 호환되지 않는다.
웹 페이지 향상 언어로서 자바스크립트의 성공에 자극 받은 마이크로소프트는 J스크립트로 알려진 호환 언어를 개발하게 되었다. J스크립트는 1996년 8월에 출시된 인터넷 익스플로러 브라우저 3.0부터 지원 되기 시작했다. IE 브라우저에서의 자바스크립트 사용은 실제로는 J스크립트의 사용을 의미하는 것이었다. 이에 대한 표준화 요구는 ECMA스크립트에 대한 ECMA-262 표준의 기반이 되었으며, 1996년 11월 이후 세 번째 판까지 출판됐다. 자바스크립트와 함께 자주 쓰이는 용어인 DOM은 사실 ECMA스크립트 표준의 일부가 아니며, 그것은 자체로 하나의 표준이고 XML에 기반한다.
Echosystem
- [추천] Rust Is The Future of JavaScript Infrastructure - Rust는 JavaScript 인프라의 미래입니다
JavaScript는 웹 브라우저가 있는 모든 장치에서 작동하는 가장 널리 사용되는 프로그래밍 언어입니다. 지난 10년 동안 JavaScript를 중심으로 거대한 생태계가 구축되었습니다.
- Webpack: 개발자는 여러 JavaScript 파일을 하나로 묶고 싶었습니다. (번들러)
- Babel: 개발자들은 구형 브라우저를 지원하면서 최신 JavaScript를 작성하기를 원했습니다. (트랜스컴파일)
- Terser: 개발자는 가능한 가장 작은 파일 크기를 생성하기를 원했습니다.
- Prettier: 개발자들은 방금 작동한 독단적인 코드 포맷터를 원했습니다.
- ESLint: 개발자는 배포하기 전에 코드에서 문제를 찾고 싶었습니다.
수백만 줄의 코드가 작성되었으며 더 많은 버그가 수정되어 오늘날 웹 애플리케이션을 제공하기 위한 기반이 되었습니다. 이 모든 도구는 JavaScript 또는 TypeScript로 작성되었습니다. 이것은 잘 작동했지만 JS로 최대 최적화에 도달했습니다. 이는 웹용 빌드 성능을 크게 향상시키도록 설계된 새로운 종류의 도구에 영감을 주었습니다.
ECMAScript
해당 항목 참조.
Curriculum
- How it feels to learn JavaScript in 2016 (2016년에 자바스크립트를 배우는 기분) 2
- JavaScript는 잘못이 없다. 정말로
- JavaScript - 나무위키
- 객체지향 자바스크립트 소개
JavaScript:Basic 부터 시작.
라이브러리 만드는 방법
Tailwind Elements의 packages.json 참고 하자.
Syntax
Class prototype
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
// Use:
var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
class
version:
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Getter
get area() {
return this.calcArea();
}
// Method
calcArea() {
return this.height * this.width;
}
}
const square = new Rectangle(10, 10);
console.log(square.area); // 100
프로퍼티가 포함되었는지 확인하는 방법
- 3 Ways to Check If an Object Has a Property in JavaScript
-
hasOwnProperty()
method -
in
operator - Comparing with
undefined
항목별 표준 객체
값 속성
아래 전역 속성은 간단한 값을 반환하며 속성이나 메서드를 가지고 있지 않습니다.
- Infinity
- NaN
- undefined
- null 리터럴
- globalThis
함수 속성
- Functions - JavaScript | MDN - 함수 정의 방법 및 미리정의된 함수 목록.
객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환합니다.
- eval()
- uneval() - This API has not been standardized.
- isFinite()
- isNaN()
- parseFloat()
- parseInt()
- encodeURI()
- encodeURIComponent()
- decodeURI()
- decodeURIComponent()
Deprecated:
- escape()
- unescape()
기초 객체
다른 모든 객체의 기반이 되는 기초이자 기본 객체입니다. 일반 객체, 함수, 오류를 나타내는 객체를 포함합니다.
- JavaScript:Object
- Function
- Boolean
- Symbol
오류 객체
오류 객체는 기초 객체의 특별한 유형으로, 기본적인 Error 객체와 함께 특정 용도에 최적화된 오류 형태도 포함합니다.
- Error
- AggregateError
- EvalError
- InternalError
- RangeError
- ReferenceError
- SyntaxError
- TypeError
- URIError
숫자 및 날짜
숫자, 날짜, 수학 계산을 나타내는 기본 객체입니다.
- Number
- BigInt
- Math
- Date
텍스트 처리
문자열을 나타내는 객체로 문자열을 조작할 방법도 제공합니다.
- String
- RegExp
인덱스 콜렉션
인덱스 값으로 정렬된 데이터의 콜렉션을 나타냅니다. 배열(형식배열 포함)과 배열형 객체를 포함합니다.
- Array
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
- BigInt64Array
- BigUint64Array
키 콜렉션
키를 사용하는 콜렉션을 나타냅니다. Map, Set 등 순회 가능한 콜렉션은 요소를 삽입 순서대로 순회할 수 있습니다.
- Map
- Set
- WeakMap
- WeakSet
구조화된 데이터
구조화된 데이터 버퍼 및 JavaScript Object Notation(JSON)을 사용하여 작성한 데이터를 나타내고 상호작용합니다.
- ArrayBuffer
- SharedArrayBuffer
- Atomics
- DataView
- JavaScript:JSON
제어 추상화 객체
제어 추상화는 코드 구조화에 도움을 줍니다. 특히, 비동기 코드를 (예를 들어) 깊게 중첩된 콜백 함수 없이 작성할 수 있습니다.
- JavaScript:Promise
- JavaScript:Generator
- JavaScript:GeneratorFunction
- JavaScript:AsyncFunction
리플렉션
- Reflect
- Proxy
국제화
ECMAScript 코어에 추가된 언어 구분 기능입니다.
- Intl
- Intl.Collator
- Intl.DateTimeFormat
- Intl.ListFormat
- Intl.NumberFormat
- Intl.PluralRules
- Intl.RelativeTimeFormat
- Intl.Locale
WebAssembly
- WebAssembly
- WebAssembly.Module
- WebAssembly.Instance
- WebAssembly.Memory
- WebAssembly.Table
- WebAssembly.CompileError
- WebAssembly.LinkError
- WebAssembly.RuntimeError
기타
- arguments
Events
이벤트의 종류와 의미: (이벤트핸들러는 이벤트 앞에 on을 붙여 준다)
- blur 포커스를 다른곳으로 옮길 경우
- click 링크나 폼의 구성원을 클릭할 때
- change 선택값을 바꿀 경우
- focus 포커스가 위치할 경우
- mouseover 마우스가 올라올 경우
- mouseout 마우스가 떠날 경우
- mousedown 마우스를 누를 경우
- mousemove 마우스를 움직일 경우
- mouseup 마우스를 눌렀다 놓을 경우
- select 입력양식의 하나가 선택될 때
- submit 폼을 전송하는 경우
- load 페이지,윈도우가 브라우져로 읽혀질 때
- unload 현재의 브라우저,윈도우를 떠날 때
- error 문서나 이미지에서 에러를 만났을 때
- reset 리셋 버튼이 눌렸을 때
- dbclick 더블클릭시
- dragdrop 마우스 누르고 움직일 경우
- keydown 키 입력시
- keypress 키 누를 때
- keyup 키를 누르고 놓았을 때
- move 윈도우나 프레임을 움직일 때
- resize 윈도우나 프레임 사이즈를 움직일 때
메서드:
- blur() 입력 포커스를 다른 곳으로 이동시킴
- click() 마우스 버튼이 눌러진 것처럼 해줌
- focus() 입력 포커스를 준 것처럼 해줌
- submit() 폼의 submit 버튼을 누른 것처럼 해줌
- select() 메소드 폼의 특정 입력 필드를 선택함
속성:
- event.keyCode 누른 키의 ASCII 정수 값
- event.x 문서 기준 누른 좌표의 left
- event.y 문서 기준 누른 좌표의 top
- event.clientX 문서 기준 누른 좌표의 left
- event.clientY 문서 기준 누른 좌표의 top
- event.screenX 콘테이너 기준 누른 좌표의 left
- event.screenY 콘테이너 기준 누른 좌표의 top
브라우저 객체별 이벤트 핸들러:
- 선택 목록(SELECT) onBlur, onChange, onFocus
- 문자 필드(TEXT) onBlur, onChange, onFocus, onSelect
- 문자 영역(TEXTAREA) onBlur, onChange, onFocus, onSelect
- 버튼(BUTTON) onClick
- 체크박스(CHECKBOX) onClick
- 라디오 버튼(RADID) onClick
- 링크 onClick, onMouseover
- RESET 버튼(RESET) onClick
- SUBMIT 버튼(BUTTON) onClick
- DOCUMENT onLoad, onUnload
- WINDOW onLoad, onUnload
- 폼(FORM) onSubmit
DOMContentLoaded/Load/BeforeUnload/Unload
HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다.
- DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일(<img>)이나 스타일시트 등의 기타 자원은 기다리지 않습니다.
- load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다.
- beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다.
세 이벤트는 다음과 같은 상황에서 활용할 수 있습니다.
- DOMContentLoaded – DOM이 준비된 것을 확인한 후 원하는 DOM 노드를 찾아 핸들러를 등록해 인터페이스를 초기화할 때
- load – 이미지 사이즈를 확인할 때 등. 외부 자원이 로드된 후이기 때문에 스타일이 적용된 상태이므로 화면에 뿌려지는 요소의 실제 크기를 확인할 수 있음
- beforeunload – 사용자가 사이트를 떠나려 할 때, 변경되지 않은 사항들을 저장했는지 확인시켜줄 때
- unload – 사용자가 진짜 떠나기 전에 사용자 분석 정보를 담은 통계자료를 전송하고자 할 때
Tip
기본적으로 디버깅은 아래 함수를 사용하면 된다.
for...of
vs for...in
- [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of for...of - JavaScript | MDN]
- [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...in for...in - JavaScript | MDN]
-
for...of
- 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.
:
const array1 = ['a', 'b', 'c'];
for (const element of array1) {
console.log(element);
}
// "a"
// "b"
// "c"
-
for...in
- 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)
:
const array1 = ['a', 'b', 'c'];
for (const element in array1) {
console.log(element);
}
// "0"
// "1"
// "2"
Remove element in array
Number sort
sort()
메서드는 배열의 요소를 In-Place에서 정렬하고 정렬된 배열을 반환합니다. 기본 정렬 순서는 오름차순이며 요소를 문자열로 변환한 다음 UTF-16 코드 단위 값의 시퀀스를 비교합니다.
정렬의 시간 및 공간 복잡성은 구현에 따라 달라지므로 보장할 수 없습니다.
var score = [4, 11, 2, 10, 3, 1];
/* 오류 */
score.sort(); // 1, 10, 11, 2, 3, 4
// ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않음
/* 정상 동작 */
score.sort(function(a, b) { // 오름차순
return a - b;
// 1, 2, 3, 4, 10, 11
});
score.sort(function(a, b) { // 내림차순
return b - a;
// 11, 10, 4, 3, 2, 1
});
module.exports vs exports
require
키워드는 object
를 반환합니다. 그리고 module.exports
와 exports
는 Call by reference 로 동일한 객체를 바라보고 있고, 리턴되는 값은 항상 module.exports
입니다.
모듈은 기본적으로 객체이고, 이 객체를 module.exports
, exports
모두 바라보고 있는데, 최종적으로 Return 되는 것은 무조건 module.exports
라는 것입니다.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
module.exports = router;
위의 소스는 다음과 같이 해석할 수 있습니다. express.Router()
가 리턴한 "객체"에 일부 프로퍼티를 수정한 뒤, 이 객체 자체를 모듈로 리턴한 것입니다.
'use strict'
strict 모드는 ES5(ECMA Script 5)에 추가된 키워드입니다.
strict 모드는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킵니다. 엄격하게 문법 검사를 하겠다.. 로 이해하면 될 것 같습니다.
스크립트의 시작 혹은 함수의 시작 부분에 "use strict"
(또는 'use strict'
)를 선언하면 strict 모드로 코드를 작성 할 수 있습니다.
with keyword
비유하면, C++의 namespace
와 같은 의미로 사용할 수 있다.
Import에 있는 @ 심볼
config.json
과 같은 파일에서 치환되는 문자열로 사용될 수 있다.
모바일 기기의 onClick
모바일에서는 이벤트 등에 javascript
를 반드시 기술해야 한다.
<!-- ... -->
<a href="javascript:funcBoo()">클릭</a>
<!-- ... -->
<span onclick="javascript:funcBoo()">클릭</span>
<!-- ... -->
Equal to(==) vs Strict equal(===)
- JavaScript:StrictEquality 항목 참조.
typeof vs instanceof
typeof
는 리턴 값으로는 해당하는 변수의 primitive 타입을 문자열로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다.
-
'undefined'
-
'boolean'
-
'number'
-
'string'
-
'object'
-
'function'
위의 기본 형식 중 하나를 스트링 형태로 리턴하기 때문에 어떠한 형인지 스트링으로 구분을 하면 된다. 즉, typeof를 사용해서 object인지 아닌지를 판별하는 경우 아래와 같이 하면 된다.
instanceof
는 prototype
으로 "비교"한다.
Default condition check
조건문에 그냥 넣었을 때 (if (statements) { ... }
) 어떻게 되는지 알고는 있자. 비교 테이블:
Statements | Result |
| false |
| false |
Empty Array object (e.g. | true |
Empty Map object (e.g. | true |
Empty String object (e.g. | true |
Empty object (e.g. | true |
Empty string (e.g. | false |
| false |
var, let, const
각각의 차이점은 다음과 같다:
-
var
: Function scoped, mutable -
let
: Block scoped, mutable -
const
: Block scoped, immutable
(function(global){...})(this)
The function is immediately executed, you do not execute it by calling it.
소수점 이하 제거
아래와 같이 비트연산으로 제거할 수 있다.
fmt 스타일의 포맷팅 문자열
To JSON String
JSON.stringify() 메소드(method)는 자바스크립트 값을 JSON 문자열로 변환하고, 리플레이서(replacer) 함수가 지정되어있을 때 선택적으로 바꾸거나, 리플레이서 배열이 지정되어있을 때 지정된 속성만 선택적으로 포함할 수 있다.
숫자 3자리(천단위) 마다 콤마 찍는 방법
정규식(Regular Expression) 이용하기:
const n1 = 12345.6789;
const n2 = -12345.6789;
const cn1 = n1.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // 12,345.6789
const cn2 = n2.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ","); // -12,345.6789
toLocaleString
함수 사용.
const n1 = 12345.6789;
const n2 = -12345.6789;
const cn1 = n1.toLocaleString('ko-KR'); // 12,345.679
const cn2 = n2.toLocaleString('ko-KR'); // -12,345.679
Select content
function selectText(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
}
}
Style animation Property
// Code for Safari 4.0 - 8.0
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2";
// Standard syntax
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
XMLHttpRequest send
<!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<script>
function onLoad() {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function() {
console.log('Response Text:');
console.log(this.responseText);
});
oReq.open("GET", "test2.html");
oReq.send();
}
</script>
</head>
<body onload='onLoad()'>
</body>
</html>
Errors
javascript 에서 자주 접하는 에러 목록이다:
-
Uncaught TypeError: Cannot read property
- ... -
TypeError: 'undefined'is not an object (evaluating
- ... -
TypeError: null is not an object (evaluating
- ... -
(unknown): Script error
- ... -
TypeError: Object doesn't support property
- ... -
Type Error: 'undefined' is not a function
- ... -
Uncaught RangeError: Maximum call stack
- ... -
TypeError: Cannot read property 'length'
- ... -
Uncaught TypeError: Cannot set property
- ... -
ReferenceError: event is not defined
- ...
빌드 시스템 없이 자바스크립트 라이브러리를 사용하는 방법
빌드 시스템 없이 자바스크립트를 작성하려면 라이브러리를 가져오는 과정이 복잡할 수 있음. 많은 라이브러리가 설정 방법에 대해 빌드 시스템 사용을 전제로 작성하기 때문.
- 자바스크립트 라이브러리가 제공하는 세 가지 주요 파일 형식
- 라이브러리의 빌드 파일에서 파일 형식을 확인하는 방법
- 각 파일 형식을 가져오는 방법
Example
Javascript 예제코드를 정리한다.
- JavaScript:Example:Dip2Pixel
- JavaScript:Example:CountUtil
- JavaScript:Example:XmlReader
- JavaScript:Example:Storage - LocalStorage와 SessionStorage를 적용할 수 있는 TypeScript 구현체 샘플.
- JavaScript:Example:DetectOverflow - ResizeObserver와 Vue를 사용하여 텍스트가 Overflow 되는지 확인하는 예제 코드.
- JavaScript:Example:DisableRightMouseButton - 일명 "불펌방지" 기능. 마우스 오른쪽 버튼 메뉴를 제거한다.
Hello world
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
<title>자바스크립트 페이지</title>
<script type="text/javascript">
document.write("<p>Hello World!</p>");
</script>
</head>
<body>
<noscript>
<p>브라우저가 자바스크립트 기능을 지원하지 않거나 자바스크립트 기능이 꺼져 있습니다.</p>
</noscript>
</body>
</html>
SPA 라우팅 시스템 구현
async function
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
async function asyncCall() {
console.log('calling');
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: "resolved"
}
asyncCall();
월의 마지막 날 구하기
// 3월 1일
let date = new Date(2019, 2, 1);
document.write(date.toLocaleString() + '<br>');
// 2월 28일(말일)
let lastDate = new Date(2019, 2, 0);
document.write(lastDate.toLocaleString() + '<br>');
document.write(lastDate.getDate() + '<br>');
// 2월 27일
let lastDateBefore = new Date(2019, 2, -1);
document.write(lastDateBefore.toLocaleString() + '<br>');
RGB to HEX convert
function componentToHex(c: number) {
const hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
function rgbToHex(r: number, g: number, b: number) {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function hexToRgb(hex: string) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
} : undefined;
}
Video PlayList Autoplay
let videoSource = new Array();
videoSource[0] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
videoSource[1] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
function videoPlay(videoNum) {
element.setAttribute("src", videoSource[videoNum]);
element.autoplay = true;
element.load();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
videoPlay(0); // load the first video
ensureVideoPlays(); // play the video automatically
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
function ensureVideoPlays() {
const video = document.getElementById('videoPlayer');
if(!video) return;
const promise = video.play();
if(promise !== undefined){
promise.then(() => {
// Autoplay started
}).catch(error => {
// Autoplay was prevented.
video.muted = true;
video.play();
});
}
}
Documentation
- JavaScript - The Good Parts
- http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf
-
Javascript_the_good_parts.pdf
Troubleshooting
앱 배포 후 브라우저 캐시를 클리어하지 않으면 최신버전으로 갱신되지 않는 현상
Cache Busting 항목 참조.
See also
- v8
- Ajax
- jQuery
- Node.js
- HTML
- CSS
- ECMAScript
- Abstract syntax tree (AST)
- Immediately invoked function expression] (IIFE)
- Jscript (Microsoft)
Favorite site
Tutorials
- JavaScript Tutorial
-
DEADFIRE Homepage Javascript 강좌5 - JavaScript 강좌 6
- [추천] MDN: JavaScript 안내서
- [추천] [https://msdn.microsoft.com/ko-kr/library/6974wx4d(v=vs.94.aspx MSDN: JavaScript 기본 사항]
-
[추천] JavaScript 재입문하기 (JS 튜토리얼)
Guide
[.Attribute], [.setAttribute(
,
)]
) 문제
- (고급) JavaScript 질문 목록
- [추천] JS Is Weird - JavaScript의 이상한 문법 25개를 문제로 만들었으며 마지막에 답을 알려줍니다. 훌륭한 언어고 일반적으로 잘 사용하지 않는 문법이지만 예상과 다른 결과를 출력한다고 말합니다.
- [추천] Elevator Saga - the elevator programming game - 엘리베이터의 알고리즘을 작성하는 게임.
Debugging
Article
- How it feels to learn JavaScript in 2016 (2016년에 자바스크립트를 배우는 기분) 10
- How it actually feels to write JavaScript in 2016 (2016년에 자바스크립트를 실제로 배우는 기분)
- Performance Tips for JavaScript in V8
- 번역: 자바스크립트의 역사 – 과거
- SlideShare - 목적에 맞게 Angular, react, vue
- [추천] JavaScript Naver D2 - 표준을 위한 움직임: CommonJS와 AMD
- 10 JavaScript libraries to draw your own diagrams (2018 edition) (웹 기반 다이어그램 관련 저작 추천 라이브러리 모음 2018)
- [추천] JavaScript Visualized: the JavaScript Engine - JavaScript 엔진이 작동하는 원리에 대하여 GIF로 잘 설명되어 있다.
- [추천] JavaScript 엔진 톺아보기 (1)
- JavaScript & Node.js Testing Best Practices (한글)
- 2019년과 이후 JavaScript의 동향 – 브라우저 밖의 JavaScript 1
- 자바스크립트는 왜 이모양인가
- (JavaScript 오디오 이펙터 만들기) 오디오 이펙터로 나만의 소리 만들기 (JavaScript; Effects unit) 11
- 자바스크립트는 왜 프로토타입을 선택했을까
References
-
JavaScript:Libraries, JavaScript:Library, Node.js:Libraries, Npm:Libraries, Node:Libraries, TypeScript:Libraries, CSS:Libraries, HTML:Libraries, WebProgramming:Libraries, Frontend:Libraries 모두 동일한 페이지로 링크된다. ↩
-
Looah_-_How_it_feels_to_learn_JavaScript_in_2016.pdf ↩
-
Vanilla_JS_-spa_route_tutorial-_Dev_DY.pdf ↩
-
JavaScript_Garden.pdf ↩
-
Deadfire_hihome_com.7z ↩
-
Math88_com_ne_kr-computer-js-JSmanual.zip ↩
-
A_Study_Plan_To_Cure_JavaScript_Fatigue_-_ko.pdf ↩
-
Meetup_TOAST_Cloud_-_JavaScript_and_Event_Loop.pdf ↩
-
Create_the_latest_JavaScript_web_frontend_development_environment_with_Webpack_and_Babel.pdf ↩
-
Looah_-_How_it_feels_to_learn_JavaScript_in_2016.pdf ↩
-
Javascript-audio-effectors-practice_-_Evans_Library.pdf ↩