본문 바로가기

FrontEnd/HTML5 & CSS & JavaScript28

[JavaScript] 함수의 스코프와 클로저 스코프(Scope, 유효범위) 스코프란? 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)을 찾아내기 위한 규칙이다. 자바 스크립트는 이 규칙대로 식별자를 찾는다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 갖는다. 만약 스코프가 없다면 어떻게 될까? 스코프가 없다면 같은 식별자 이름은 충돌.. 2021. 9. 28.
[JavaScript] 가격 표시하기(천 단위 콤마 포맷) JavaScript로 RegExq를 사용해 1,110,000과 같은 천 단위마다 콤마(,) 표시를 해주는 문자열을 만들어본다. 1. 소수점 없는 정수에 천 단위 콤마 표시 // 1,234,567,890 var original = "1234567890"; var fomatting = original.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 정규식 패턴은 / / 안에 작성한다. \B(?=(\d{3})+(?!\d)) 가 정규식 구문이며, 아래와 같은 조건을 가진다. 1. \B(): 뒷 부분이 괄호 안의 조건을 만족하는 문자열 단어 경계 불일치, \b(단어 경계 일치)의 반대개념 \B가 앞에 붙는 경우 (ex. \Bpo , [=po\b]) pop kpo po \B가 뒤에 붙는 경우 .. 2021. 7. 13.
[HTML5] canvas를 이용한 Image Crop HTML5의 canvas를 이용해서 이미지의 특정 부분을 Crop 한다. 이미지에 crop할 범위를 그리는 방법은 이전 게시물을 참고한다. 이미지를 Crop 알고리즘은 다음과 같다. 1. 이미지에서 x(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop x 좌표), y(이미지의 LeftTop을 기준으로 Crop 범위의 LeftTop y 좌표), width(Crop 범위 사각형의 width), height(Crop 범위 사각형의 Height)를 구한다. 2. Crop한 이미지를 그릴 after div에 canvas Element를 새로 만들어준다. 3. 1번의 정보를 이용해 after div canvas에 image를 그려준다. ※참고 canvas.getContext('2d').drawImag.. 2021. 2. 27.
[HTML5] canvas에 마우스로 사각형 그리기 마우스로 사각형을 그리기 위해서, HTML5 canvas를 이용해본다. mousedown시에는 마우스 클릭상태를 on으로 변경하며, 사각형의 시작 x, y 좌표를 얻고, mousemove시 클릭 상태라면, 시작 x, y와 현재 마우스 point를 사용해 사각형을 그리고, mouseup시에는 마우스 클릭상태를 off로 변경한다. 2021. 2. 26.
[HTML5] track 태그 속성 사용하여 Video 자막 추출하기 HTML5 태그에서 속성을 이용해서 현재 재생중인 자막의 텍스트를 불러올 수 있다. 우선 자막 텍스트를 추출하기 위해 알아야할 함수는 다음과 같다. HTMLMediaElement.textTracks Media 내부에 선언된 객체의 순서를 지켜 순서대로 TextTrack을 반환하는 함수이다. 자막 읽기 위와 같은 코드에서 .textTracks의 반환 결과는 [track(Korean1), track(Korean2), track(Korean3)]이 된다. .textTracks의 반환 결과 : HTMLMediaElement.pause(), HTMLMediaElement.pause .pause()는 의 재생상태를 일시정지로 변경하는 메소드로 .play()와 반대되는 함수이다.(.play()는 를 재생시키는 함수).. 2020. 2. 12.
[HTML5] Video Track 태그 사용하기(자막 파일 사용하기) HTML5 태그에서 태그를 이용하여 자막 파일을 영상에 사용할 수 있다. HTML5 태그 태그는 media 요소 ( 및 )의 자막, 캡션 파일과 같은 시간별 텍스트가 포함된 파일을 지정하는데 사용된다. 트랙은 WebVTT(Web Video Text Tracks, .vtt 파일) 또는 TTML(Timed Text Markup Language) 형식을 사용해야 한다. WebVTT WEBVTT FILE 000:00:01.000 --> 00:00:02.500Hello. This is frist Subtitle. 100:00:02.500 --> 00:00:03.000It is very easy to use. 0 : 헤더, 필수 요소는 아니다.00:00:01.000 --> 00:00:02.500 : 시간으로 -->.. 2020. 1. 31.
반응형