javascript-sort

Javascript Array sort

기본

오름차순

1
2
3
const array = ['z', 'c', 'a'];
array.sort();
console.log(array);

image

javascript-3

원시 값과 객체의 비교

원시 타입 vs 객체 타입

원시타입 : immutable value
객체타입 : mutable value
원시 값을 변수에 할당하면 변수에는 실제 값이 저장
객체를 변수에 할당하면 변수에 참조 값이 저장
Pass by value : 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사
Pass by referencce : 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사

javascript-2

제어문

주어진 조건에 따라 블록을 실행하거나 반복 실행 할 때 사용
일반적 코드의 실행 순서를 인위적으로 제어

블록문

0개 이상의 문을 중괄호로 묶은 것
자바스크립트에서는 하나의 실행 단위로 취급
단독으로 사용가능하나 일반적으로 제어문, 함수 선언문 등에서 사용

Javascript-1

자바스크립트 개발 환경과 실행 방법

자바스크립트 = ES + Web API
Node.js : ES + Node.js API

자바스크립트는 브라우저에서 HTML, CSS와 함께 실행
렌더링엔진 : HTML, CSS
자바스크립트 엔진 : 자바스크립트

HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘김
자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어권한을 넘겨서 브라우저가 중지했던 시점부터 DOM생성을 재개
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 애러가 발생할 수 있다.

Javascript vs ECMAScript

Javascript = ECMAScript ?

최초의 Javascript는 넷스케이프의 웹 브라우저에서 정적 HTML페이지를 동적으로 표현하기 위하여 탄생하였다.

그리고 마이크로소프트에서 이 Javascript의 파생 버전인 JScript를 만들었다.

당시 웹브라우저 시장은 넷스케이프가 압도적이었으나 MS사가 Windows에 자신들의 웹브라우저를 끼워팔면서 점유율은 역전되었다.

이 때 많은 웹브라우저 제조사들은 자사의 브라우저에서만 동작하는 기능을 경쟁적으로 만들면서 Javascript의 파편화가 극심해졌다.

이런 각 벤더 사마다 다른 Javascript를 표준화하기 위하여 넷스케이프가 ECMA 인터내셔널에 표준화를 요청하였고 그렇게 탄생한 것이 ECMAScript이다.

그러나 당시 막강한 점유율로 시장에서 압도적 우위에 있던 MS사의 미온한 참여로 당시 ECMAScript 버전은 많은 문제가 있었다.

그 후 Google의 Chrome이 IE의 점유율을 끌어내리면서 ESMAScript5(ES5)가 제정되면서 표준화 문제가 어느정도 해결되기 시작하였다.

이렇게 여러 밴드사가 공통으로 지원하는 Javascript의 Core를 ES = ESMAScript라고 한다.

그 외에 각 벤더의 브라우저가 별도로 지원하는 Web API는 어전히 존재하고 있다.
즉,

자바스크립트 = ES + Web API

와 같다.

2019-04-16 TIL

picture

<picture> 내에 <img>를 사용하는 것은 필수

1
2
3
4
5
<div class="rwd-wrapper">
<picture>
<source srcset="images/image-1x.png 1x, images/image-2x.png 2x"
</picture>
</div>

2019-04-15 TIL

footer

img

image


마크업

내 마크업

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.footer-bg
footer.footer
a
img

ul.footer-menu
li
div.copyright
p
a
p
div.badge
img.badge-html
img.badge-css

2019-04-12 TIL

인기 사이트

image

마크업

내 마크업

1
2
3
4
5
6
7
section.favorite
h2.favorite-heading
ol.favorite-list
li
a
strong
a.favorite-more

강사님 마크업
1
2
3
4
5
6
7
section.favorite
h2.favorite=heading
ol
li.no1
a
em.up, em.down, em.stop
favorite-more

2019-04-11 TIL

새소식

image

마크업

내 마크업

1
2
3
4
5
6
7
8
9
10
section.news
h2.news-header
a.news-link
article.news-item
h3.news-item-subject
time
p.news-item-brief
span
img
a.news-more

강사님 마크업

1
2
3
4
5
6
7
8
9
10
section.news
h2.news-heading
article.news-item
h3.news-item-subject
time.news-item-date
p.news-item-brief
figure.news-item-thumbnail
img
figcaption
a.news-more

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×