[TS] TypeScript에 대해서
·
Language/TypeScript
TypeScript(TS)는 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어입니다. 기존의 JavaScript는 동적 타이핑 형식으로 변수의 자료형에 제한을 두지 않습니다. 이 때문에 런타임 오류가 발생하기 쉬워, TypeScript는 JavaScript에 정적 타이핑을 추가했습니다. JavaScript의 문제점을 보완하여 만들어진 언어이기 때문에, 런타임에서 구동될 때 최종적으로 JavaScript 코드로 컴파일됩니다. ※ 동적 타이핑의 예시 : Python ※ 정적 타이핑의 예시 : C
[JS] Style 속성과 속성값 정리
·
Language/JavaScript
속성은 요소들이 가지는 특징입니다.때문에 어떠 속성은 모든 종류의 태그에서 사용할 수 있는 반면, 어떤 속성은 정해진 종류의 태그에서만 사용할 수 있습니다.1. Display요소를 어떤 영역 범위로 하여 보여줄 것인지 결정합니다.blockblock 요소. 한줄을 전부 차지하는 사각형 영역none객체 없음inline내용의 길이에 따라 크기가 달라지는 사각형 영역inline-block표현은 inline이나, 내용은 block 요소. 인접한 inline과는 같은 줄에 표시됨list-item글머리가 추가된 block 요소2. Border영역 범위를 시각화합니다.none선 없음dotted짧은 점선dashed긴 점선solid실선double이중 실선 (borderWidth > 3px)groove3dridge테두리가 ..
[JS] Object | 06. Element
·
Language/JavaScript
Element는 getElement 또는 querySelector 종류의 함수로 얻어지는 요소로, 문서의 각 구성요소에 해당하는 객체입니다. 속성 반환값 attributes 속성들 childNodes 하위 객체들 innerHTML 하위 HTML parentNode 상위 객체 메소드 매개변수 기능 반환값 appendChild(obj) element obj :삽입할 요소 obj를 마지막 자식 요소로 이동 getAttribute(attr) str attr : 속성 요소의 특정 속성값 가져오기 속성값 getAttributeNode(attr) str attr : 속성 요소의 특정 속성 객체 가져오기 속성 객체 insertBefore(obj, child) element obj : 삽입할 요소 element chil..
[JS] Object | 05. Document
·
Language/JavaScript
Document는 대표적인 DOM 객체 중 하나로, window 객체 바로 밑에 종속되는 최상위 객체입니다. HTML 문서 자체를 document 객체 하나로 볼 수 있습니다. Document에는 사용할 수 있는 수많은 속성과 메소드가 있으며, 그 중 대표적인 것을 좀 더 자세하게 소개합니다. 메소드 매개변수 기능 반환값 open() 팝업창 열기 close() 팝업창 닫기 execCommand() 문서에서 사용 가능한 명령 실행 1. open & close 팝업창을 열고 닫습니다. 두 함수 사이에 작성되는 코드는 모두 팝업창에 표시됩니다. 때문에 open()을 호출한 후에는 반드시 close()도 함께 호출해야 합니다. 2. exeCommand 문서에서 사용 가능한 명령(복사, 붙여넣기 등)을 실행합니다..
[JS] Object | 04. Cookie
·
Language/JavaScript
Cookie는 사용자가 브라우저를 닫아도 브라우저가 사용자의 정보를 저장할 수 있도록 합니다. 쿠키는 PC의 특정 위치에 텍스트 파일로 저장되며, 저장 전에 얼마 동안 저장할 것인지를 지정합니다. 쿠키는 보안에 취약하기에 중요한 정보는 쿠키로 저장하지 않는 것이 좋습니다. ※ 쿠키는 window가 아닌 document에 속해 있는 객체입니다. 쿠키는 문자열로만 저장할 수 있습니다. 따라서 쿠키를 저장할 때는 다음과 같은 형식의 문자열로 정리하여 document.cookie로 넘겨줘야 합니다. document.cookie = "=; expires=; path=; domain=; secure" - expires | date.toGMTString()으로 받아와 저장합니다. 지정하지 않으면 브라우저를 닫는 즉시..
[JS] Object | 03. Location & History
·
Language/JavaScript
1. LocationLocation은 현재 URL에 대한 정보를 제공합니다.속성반환값hash 또는 href 값의 # 다음 부분host호스트 이름과 포트 번호hostname호스트 이름hrefURL 전체pathnameURL 중 특정 리소스에 접근하는 경로 부분port포트번호protocol통신방식searchhref 값의 ? 다음 부분target타깃 프레임의 이름 메소드매개변수기능반환값assign(url)str url : URL 주소URL의 HTML 문서 읽기HTML 문서reload() 현재 문서 다시 읽기HTML 문서replace(url)str url : URL 주소history 객체의 URL을 현재 주소로 대체※ 이전의 주소는 history에 남지 않음HTML 문서 var count = 10;function..
[JS] Object | 02. Navigator 객체
·
Language/JavaScript
Navigator는 브라우저의 정보를 불러올 수 있는 객체입니다.브라우저는 그 종류와 버전에 따라 지원하는 속성 또는 메소드들이 다르기 때문에,어떤 브라우저 조건에서도 웹이 동작하도록 하려면 브라우저의 조건별로 다른 코드를 짜야 합니다.이를 위해서 먼저 Navigator를 통해 대상 브라우저의 정보를 읽어올 수 있습니다. 속성반환값appCodeName특정 코드 문자열appName브라우저 이름appVersion브라우저 버전cookieEnabled쿠키 사용 여부mimeTypesMIME(Multipart Internet Mail Extension) 타입 리스트platform브라우저가 컴파일된 OS 플랫폼plugins클라이언트에 설치된 플러그인 리스트userAgent클라이언트에게 보내지는 HTTP의 헤더값e.g..
[JS] Object | 01. Window 객체
·
Language/JavaScript
Window는 브라우저와 관련된 객체 중 가장 큰 객체입니다.하나의 document에는 하나의 window 객체가 있습니다.만약 문서 안에 또 다른 문서가 포함되어 있는 구조라면, window 객체도 두 개가 존재하게 됩니다. 문서 안에 문서를 포함하는 구조는 HTML의 태그를 통해 구현할 수 있습니다. 1. 참조각 window 객체는 다른 window에서부터 다음과 같이 참조할 수 있습니다.객체참조winname = window.open( );새로 연 창window.top최상위 프레임window.parent바로 위 프레임window.self자신 (=window)window.openerwindow.open( ) 으로 새 창을 열고 그 window2. 열기window.open( )을 사용해 새로운 wind..