The flag y allows to perform the search at the given position in the source string.… To grasp the use case of y flag, and see how great it is, let’s explore a practical use case.… Flag y makes regexp.exec to look exactly at position lastIndex, not before, not after it.… doesn’t match at position 3 (unlike the flag g), but matches at position 4.… Using flag y is the key for a good performance.
문자
유니코드
유니코드의 바이트 수
a
0x0061
2
≈
0x2248
2
𝒳
0x1d4b3
4
𝒴
0x1d4b4
4
😄
0x1f604
4
보다시피… a나 ≈같은 문자는 2바이트를 차지하고 𝒳, 𝒴, 😄같은 문자는 코드값이 더 길고 4바이트를 차지합니다.… 문자별 프로퍼티 목록: https://unicode.org/cldr/utility/character.jsp
프로퍼티별 문자 목록: https://unicode.org/cldr/utility… /list-unicodeset.jsp
프로퍼티별 줄임말: https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt… 텍스트 형식으로 정리된 유니코드 문자와 각 문자의 모든 프로퍼티: https://www.unicode.org/Public/UCD/latest/ucd/
예시: 16진수.실제 사례로
DOM 명세서
문서 구조, 조작, 이벤트에 관한 설명이 담겨있고, https://dom.spec.whatwg.org에서 볼 수 있습니다.… CSSOM 명세서
스타일시트와 스타일 규칙, 이 둘을 어떻게 조작할 수 있는지, 이 둘과 문서 사이의 관계를 어떻게 조작할 수 있는지에 대한 설명이 담겨있고, https://www.w3… 몇몇 클래스에 대한 설명은 https://spec.whatwg.org/에서 확인할 수 있습니다.… 프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 Mozilla 재단의 매뉴얼 https://developer.mozilla.org/en-US/search을 찾아보는 것도 좋긴 하지만,… q=whatwg+localstorage, https://google.com?q=mdn+localstorage 처럼 말이죠.
공식 버전이 나오기 이전의 최신 초안은 https://tc39.es/ecma262/에서 확인할 수 있습니다.… 갓 명세서에 등록된 기능이나 '등록되기 바로 직전’에 있는 기능(스테이지(stage)3 상태의 기능), 제안 목록은 https://github.com/tc39/proposals에서… 링크는 다음과 같습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
위 사이트에 들어가서 원하는 내용을 직접… Google 검색 엔진에 접속해 'MDN [원하는 용어]'를 입력해 봅시다. parseInt 함수에 대한 정보를 얻고 싶다면 https://google.com/search?… 관련 기능인 cryptography를 특정 브라우저에서 사용할 수 있는지 아닌지를 보려면 http://caniuse.com/#feat=cryptography를 확인하면 됩니다.
https
main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party… Built-in events mostly have composed: true, as described in the relevant specifications:
UI Events https… ://www.w3.org/TR/uievents.… Touch Events https://w3c.github.io/touch-events.… Pointer Events https://www.w3.org/TR/pointerevents.
…And so on.
조절점 1과 2, 2와 3, 3과 4를 연결하는 선분을 만듭니다.… 조절점이 2개일 때:
P = (1-t)P1 + tP2
조절점이 3개일 때:
P = (1−t)2P1 + 2(1−t)tP2 + t2P3
조절점이 4개일 때:
P = (1−t)3P1… + 3(1−t)2tP2 +3(1−t)t2P3 + t3P4
위 식들은 벡터 방정식입니다.… 따라서 곡선을 이루는 점의 좌표를 얻을 때 P 대신 x와 y를 넣으면 됩니다.
조절점이 3개인 경우를 예로 들어봅시다. 곡선은 각 점의 좌표 (x,y)를 사용해 만들어집니다.… x = (1−t)2x1 + 2(1−t)tx2 + t2x3
y = (1−t)2y1 + 2(1−t)ty2 + t2y3
x1과 y1, x2와 y2, x3과 y3엔 세 조절점의 x, y
Requests are split into 3 types:
Request to the same origin.
Request to another origin.… Request from HTTPS to HTTP (from safe to unsafe protocol).… "strict-origin" – send only origin, don’t send Referer for HTTPS→HTTP requests.… "unsafe-url" – always send full url in Referer, even for HTTPS→HTTP requests.… Referer: https://javascript.info/admin/secret/paths.
For instance:
gr(a|e)y means exactly the same as gr[ae]y.
gra|ey means gra or ey.… Otherwise, if the first digit is 2, then the next must be [0-3].… If we glue minutes and seconds together, we get the pattern: [01]\d|2[0-3]:[0-5]\d.… The alternation | now happens to be between [01]\d and 2[0-3]:[0-5]\d.… Let’s correct that by enclosing “hours” into parentheses: ([01]\d|2[0-3]):[0-5]\d.
Let’s say we have a string like +7(903)-123-45-67 and want to find all numbers in it.… But unlike before, we are interested not in single digits, but full numbers: 7, 903, 123, 45, 67.… The range: {3,5}, match 3-5 times
To find numbers from 3 to 5 digits we can put the limits into curly… braces: \d{3,5}… Then a regexp \d{3,} looks for sequences of digits of length 3 or more:
y2, x3, y3)형태로 정의합니다.… 베지어 곡선에서 중간 조절점의 y 좌표는 제약이 없습니다. 음수 또는 매우 큰 값도 가능하죠.… 아시다시피, timing 함수의 y축은 '애니메이션 프로세스의 완성도’를 나타냅니다. y가 0일 땐 프로퍼티 시작 값을, y가 1일 땐 프로세스 종료 값을 의미하죠.… 그렇기 때문에 y가 0보다 작아지면 left 프로퍼티가 시작 값인 100px 보다 낮게 설정되고, y가 1보다 커지면 left 프로퍼티가 끝값인 400px보다 커지게 됩니다.… 이 예시에선 y 값이 정상 범위를 크게 벗어나지 않기 때문에 ‘부드럽게’ 변형이 일어납니다. 그런데 y 값이 -99나 99가 되면 기차가 앞·뒤로 아주 크게 움직이겠죠?
CORS와 안전한 요청.크로스 오리진 요청을 보낼 경우 브라우저는 항상 Origin이라는 헤더를 요청에 추가합니다.
https://javascript.info/page에서 https… 이 헤더엔 허가된 오리진(위 예시에선 https://javascript.info)에 대한 정보나 *이 명시됩니다.… Content-Type이 application/x-www-form-urlencoded나 multipart/form-data, text/plain가 아닙니다.… 따라서 위 예시처럼 응답이 온 경우엔 하루동안 preflight 요청을 전송하지 않고 바로 본 요청이 전송됩니다.
3단계(실제 요청).preflight 요청이 성공적으로 이뤄진 후에야… 메서드: GET이나 POST 혹은 HEAD
헤더:
Accept
Accept-Language
Content-Language
값이 application/x-www-form-urlencoded나
"+7(903)-123-45-67"같은 전화번호에서 79035419441처럼 숫자만 남겨야 합니다.… 문자: \s와 일치하지 않는 일반 글자 등의 모든 문자
\W
단어에 들어가지 않는 문자: \w와 일치하지 않는 비 라틴 문자나 공백 등의 모든 문자
이번 챕터의 첫 부분에서 +7(… Firefox, IE, Edge에서 지원하지 않음
https://caniuse.com/#search=dotall에서 지원 여부의 최신 상황을 확인해보세요.
Sets.For instance, [eao] means any of the 3 characters: 'a', 'e', or 'o'.
That’s called a set.… For instance:
[^aeyo] – any character except 'a', 'e', 'y' or 'o'.
[^0-9] – any character except a… [𝒳𝒴] – are not two, but four characters:
left half of 𝒳 (1),
right half of 𝒳 (2),
left half of 𝒴… (3),
right half of 𝒴 (4).… The reason is that without flag u surrogate pairs are perceived as two characters, so [𝒳-𝒴
=Y), it means “look for X, but match only if followed by Y”.… =Y)(?=Z) means:
Find X.
Check if Y is immediately after X (skip if isn’t).… Y)X, matches X, but only if there’s no Y before it.… =Y)
Positive lookahead
X if followed by Y
X(?!Y)
Negative lookahead
X if not followed by Y
(?… <=Y)X
Positive lookbehind
X if after Y
(?<!Y)X
Negative lookbehind
X if not after Y
x와 y – 요소를 감싸는 네모의 창 기준 X, Y 좌표
width와 height – 요소를 감싸는 네모의 너비, 높이(음수도 가능)
x와 y, width와 height 이외에 다음과… 그림과 같은 사례에서 left와 top은 x나 y와 다릅니다.… Internet Explorer는 x, y를 지원하지 않습니다.
Internet Explorer는 예전부터 x, y 프로퍼티를 지원하지 않았습니다.… elementFromPoint(x, y).document.elementFromPoint(x, y)을 호출하면 창 기준 좌표 (x, y)에서 가장 가까운 중첩 요소를 반환합니다.… document.elementFromPoint(x,y) 메서드는 (x,y)가 보이는 영역 안(창 안)에 있을 때만 동작합니다.
The browser can’t free it.… For screenshotting a page, we can use a library such as https
Scrolling and resizing.There are methods to move/resize a window:
win.moveBy(x,y)… Move the window relative to current position x pixels to the right and y pixels down.… Negative values are allowed (to move left/up).
win.moveTo(x,y)
Move the window to coordinates (x,y) on… win.scrollBy(x,y)
Scroll the window x pixels right and y down relative the current scroll.… Negative values are allowed.
win.scrollTo(x,y)
Scroll the window to the given coordinates (x,y).
elem.scrollIntoView
ws말고 wss://라는 프로토콜도 있는데, 두 프로토콜의 관계는 HTTP와 HTTPS의 관계와 유사합니다.… Origin – 클라이언트 오리진(예시에선 https://javascript.info)을 나타냅니다.… 셧다운, 부라우저에서 페이지 종료)
1009 – 메시지가 너무 커서 처리하지 못함
1011 – 서버 측에서 비정상적인 에러 발생
…기타 등등…
코드 전체 목록은 RFC6455, §7.4.1에서… socket.readyState 프로퍼티의 값을 확인하면 됩니다.
0 – “CONNECTING”: 연결 중
1 – “OPEN”: 연결이 성립되고 통신 중
2 – “CLOSING”: 커넥션 종료 중
3… Requests to WebSocket use wss://ws.site.com, a subdomain that leads to the WebSocket server, while https
기호
…
…
…
17
단항 덧셈
+
17
단항 부정
-
16
지수
**
15
곱셈
*
15
나눗셈
/
13
덧셈
+
13
뺄셈
-
…
…
…
3… 이 연산자는 할당(assignment) 연산자라고 불리는데, 우선순위는 3으로 아주 낮습니다.
x = 2 * 2 + 1과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 x에 할당되는… 위 예제에서 표현식 (a = b + 1)은 a에 값을 할당하고, 그 값인 3을 반환합니다. 그리고 반환 값은 이어지는 표현식에 사용됩니다.… 괄호가 없으면 a = 1 + 2, 3 + 4에서 +가 먼저 수행되어 a = 3, 7이 됩니다.… 할당 연산자 =는 쉼표 연산자보다 우선순위가 높기 때문에 a = 3이 먼저 실행되고, 나머지(7)는 무시되죠. (a = 1 + 2), 3 + 4를 연산한 것처럼 될 겁니다.
origin:
http://site.com
http://site.com/
http://site.com/my/page.html
These ones do not:
http://www.site.com… (another domain: www. matters)
http://site.org (another domain: .org matters)
https://site.com (another… protocol: https)
http://site.com:8080 (another port: 8080)
The “Same Origin” policy states that:
if
It has 3 modes:
If the regexp doesn’t have flag g, then it returns the first match as an array with… There are 3 differences from match:
It returns an iterable object with matches instead of an array.… If there are no parentheses in the regexp, then there are only 3 arguments: func(str, offset, input).… If the regexp has flag y,… Let’s replace flag g with y in the example above.
The native interface to IndexedDB, described in the specification https://www.w3.org/TR/IndexedDB, is… from 3 to 4 etc.… then 3 to 4).… Perform the request to the object store books.add(book), at (3).… The examples are at the lib page https://github.com/jakearchibald/idb.
그래서 대개는 10억(billion)을 나타낼 땐 '1bn'을 사용하고, 73억을 나타낼 땐 '7.3bn'을 사용합니다. 큰 숫자를 나타낼 땐 이런 방법이 주로 사용되죠.… Math.floor
소수점 첫째 자리에서 내림(버림). 3.1은 3, -1.1은 -2가 됩니다.… Math.round
소수점 첫째 자리에서 반올림. 3.1은 3, 3.6은 4, -1.1은 -1이 됩니다.… Math.floor
Math.ceil
Math.round
Math.trunc
3.1
3
4
3
3
3.6
3
4
4
3
-1.1
-2
-1
-1
-1
-1.6
-2… 비교해봅시다. 1/3은 무한 소수 0.33333(3)이 됩니다.
클래스에서 다룰 예정입니다.
y
문자 내 특정 위치에서 검색을 진행하는 ‘sticky’ 모드를 활성화 시킵니다.… 자세한 내용은 Sticky flag "y", searching at position에서 다룰 예정입니다.… 정규 표현식은 패턴과 선택적으로 사용할 수 있는 플래그 g, i, m, u, s, y로 구성됩니다.
secure.
secure
이 옵션을 설정하면 HTTPS로 통신하는 경우에만 쿠키가 전송됩니다.
secure 옵션이 없으면 기본 설정이 적용되어 http://site.com에서 설정… (생성)한 쿠키를 https://site.com에서 읽을 수 있고, https://site.com에서 설정(생성)한 쿠키도 http://site.com에서 읽을 수 있습니다.… 하지만 secure 옵션이 설정된 경우, https://site.com에서 설정한 쿠키는 http://site.com에서 접근할 수 없습니다.… 메일에 있는 링크를 따라 접속하거나 evil.com과 같은 사이트에서 폼을 전송하는 경우 등과 같이 제3의 도메인에서 요청이 이뤄질 땐 쿠키가 전송되지 않죠.… 배너는 다른 도메인 <img src="https://ads.com/banner.png"> 에서 가져옵니다.
이름 없는 개체 내보내기:
export {x [as y], ...}.… 다시 내보내기:
export {x [as y], ...} from "module"
export * from "module" (default export는… 다시 내보내 지지 않음)
export {default [as y]} from "module" (default export를 다시 내보냄)
가져오기 타입 역시… named export 가져오기:
import {x [as y], ...} from "mod"
default export 가져오기:
import x from
COLOR_ORANGE는 "#FF7F00"보다 기억하기가 훨씬 쉽습니다.… COLOR_ORANGE를 사용하면 "#FF7F00"를 사용하는 것보다 오타를 낼 확률이 낮습니다.… COLOR_ORANGE가 #FF7F00보다 훨씬 유의미하므로, 코드 가독성이 증가합니다.
바로 window.scrollBy(x,y)와 window.scrollTo(pageX,pageY)입니다.… scrollBy(x,y)메서드를 사용하면 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적으로 조정합니다. scrollBy(0,10)는 문서의 스크롤 상태를 현재를 기준으로 스크롤을… 스크롤 상태 변경시키기:
window.scrollTo(pageX,pageY) – 절대 좌표
window.scrollBy(x,y) – 현재 스크롤 상태를 기준으로 상대적으로 스크롤
The first number \d+ has 7 digits, and then a number of 2 digits:… The first number has 7 digits, and then two numbers of 1 digit each:… The first number has 6 digits, and then a number of 3
We can clearly see that the outer element finishes initialization (3) before the inner one (4).… HTML Living Standard: https://html.spec.whatwg.org/#custom-elements.… Compatiblity: https://caniuse.com/#feat=custom-elements.… Edge is a bit behind, but there’s a polyfill https://github.com/webcomponents/polyfills/tree/master/packages
에러가 있는 예시: (1)과 (3)… window.onerror만으로 스크립트를 복구하는 건 사실상 불가능하죠. window.onerror는 개발자에게 에러 메시지를 보내는 용도로 사용합니다.
window.onerror말고 https… ://errorception.com 나 http://www.muscula.com같은 에러 로깅 관련 상용 서비스가 여러 가지 있습니다.
새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 https://tc39.github.io/ecma262/에 추가됩니다.… 엔진별로 어떤 기능을 지원하고 있는지는 https://kangax.github.io/compat-table/es6/에서 확인할 수 있습니다.
. – (3)
반복 작업을 하려면 ‘for’ 뒤에 'await’를 붙인 for await(let value of range)를 사용하면 됩니다. for await(let value… 클라이언트는 https://api.github.com/repos/<repo>/commits 형태의 URL로 요청을 보냅니다.… 헤더에서 https://api.github.com/repositories/93253246/commits?page=2형태의 URL만 추출하기 위해 정규표현식을 사용하였습니다.
For the same key, US layout has “Z”, while German layout has “Y”… Literally, event.code will equal KeyZ for people with German layout when they press Y.… event.code == 'KeyZ' in our code, then for people with German layout such test will pass when they press Y.
Then in result[2] goes the group from the second opening paren ([a-z]+) – tag name, then in result[3]… The array has the length of 3,… The array length is permanent: 3.… A polyfill may be required, such as https://github.com/ljharb/String.prototype.matchAll.… Just like match, it looks for matches, but there are 3 differences:
It returns not an array, but an
콘솔 창에 구문(statement)을 입력하고 실행하면 아랫줄에 실행 결과가 출력됩니다.
1+2를 입력하면 3이 출력되고, hello("debugger")를 입력하면… -- https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/Images/src/largeIcons.svg… Google에서 제공하는 개발자 도구 공식 매뉴얼은 https://developers.google.com/web/tools/chrome-devtools에서 확인할 수 있습니다.
HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다.… 메서드에 대한 자세한 설명은 https://w3c.github.io/beacon/에서 찾아볼 수 있습니다.
sendBeacon는 데이터를 백그라운드에서 전송합니다.… [1] initial readyState:loading
[2] readyState:interactive
[2] DOMContentLoaded
[3] iframe onload
[4
<select> 요소에 대한 명세는 아래 링크에서 볼 수 있습니다 https://html.spec.whatwg.org/multipage/forms.html#the-select-element… 명세서: https://html.spec.whatwg.org/multipage/forms.html.
switch문은 a의 값인 4와 첫 번째 case문의 값인 3을 비교합니다.… 여러 개의 "case"문 묶기.코드가 같은 case문은 한데 묶을 수 있습니다.
case 3과 case 5에서 실행하려는 코드가 같은 경우에 대한 예시를 살펴봅시다… case 3과 case 5는 동일한 메시지를 보여줍니다.
switch/case문에서 break문이 없는 경우엔 조건에 상관없이 다음 case문이 실행되는 부작용이 발생합니다.… 앞서 배운 바와 같이 prompt 함수는 사용자가 입력 필드에 기재한 값을 문자열로 변환해 반환하기 때문에 숫자 3을 입력하더라도 prompt 함수는 문자열 '3'을 반환합니다.… 그런데 세 번째 case문에선 사용자가 입력한 값과 숫자형 3을 비교하므로, 형 자체가 다르기 때문에 case 3 아래의 코드는 절대 실행되지 않습니다.
DOM: https://dom.spec.whatwg.org/#shadow-trees
Compatibility: https://caniuse.com/#feat=shadowdomv1
Shadow
인수가 세 개이므로 sum.length = 3 입니다.
curried(1)(2)(3)이 호출되는 과정은 다음과 같습니다.… 인수의 개수는 아직 3보다 작기때문에 curry는 pass를 반환합니다.
pass 래퍼가 다시 (3)과 함께 호출됩니다.… 다음 호출인 pass(3)가 이전의 인수들인 (1, 2)를 가져오고 3을 추가하고 curried(1, 2, 3) 호출을 합니다 – 여기에 3인수는 마지막으로, 원래의 함수에 전달됩니다
So, e.g. a script at https://facebook.com can’t read the user’s mailbox at https://gmail.com.
pow(2, 4) = 2 * pow(2, 3)
pow(2, 3) = 2 * pow(2, 2)
pow(2, 2) = 2 * pow(2, 1)
pow(2, 1) = 2
이렇게 재귀를… 이제 pow (2, 3)가 호출되면 실행 컨텍스트에서 무슨 일이 일어나는지 살펴봅시다.
pow(2, 3).pow (2, 3)를 호출하는 순간, 실행 컨텍스트엔 변수 x = 2, n… Context: { x: 2, n: 3, 첫 번째 줄 }
pow(2, 3)
위 그림은 함수 실행이 시작되는 순간을 나타낸 것입니다.… 3)
pow (2, 2)의 실행이 다시 시작됩니다.… Context: { x: 2, n: 3, 다섯 번째 줄 }
pow(2, 3)
마지막 실행 컨텍스트까지 처리되면 pow (2, 3) = 8이라는 결과가 도출됩니다.
On the other hand, we should keep in mind that the mouse pointer doesn’t “visit” all elements along the
requestAnimationFrame:
Function animate accepts 3… fraction of time that passed (0 at start, 1 at the end) and returns the animation completion (like y
Events Level 2 specification is supported in all major browsers, while the newer Pointer Events Level 3… Also there are 3 additional pointer events that don’t have a corresponding mouse... counterpart, we’ll… Pointer event properties.Pointer events have the same properties as mouse events, such as clientX/Y,
일치하는 결과가 3개가 아니라 2개인 것을 확인할 수 있습니다.
3 다음에 줄 바꿈이 없기 때문이죠. 텍스트의 끝이기 때문에 $에는 일치하지만요.
차이점이 하나 더 있습니다.
50 개의 검색 결과만 보기