본문 바로가기

전체 글109

HTML요소를 동적으로 다룬다고? DOM 목차1. DOM이란?2. 요소를 다루는 방법3. 동적으로 요소를 사용하는 이유 1. DOM이란?인터넷을 통해 여러 사이트를 들어가보면 해당 사이트에 따라 여러 이벤트나 공지사항이 슬라이드로 움직이거나 선택되는 메뉴에 따라 다른 서브 메뉴가 나타난다. 이러한 신기한 동작들을 어떻게 하는 것일까? js를 사용하면 이러한 요소들을 동적으로 움직이게 할 수 있는데 이렇게 브라우저에 움직이거나 움직일 수 있는 요소들을  DOM(Document Object Model)이라고 하며 움직이게 하는 행위를 DOM 조작이라고 한다. 2. 요소를 다루는 방법js에서 DOM을 다루는 방법은 여러가지가 있다. 이제 방법을 알아보도록 하자1) 요소(태그) 생성하기document객체를 통해 새로운 요소를 생성할 수 있다.docum.. 2024. 4. 27.
원시타입vs참조타입 목차1. 원시타입2. 참조타입 자바 스크립트에서는 데이터를 다룬다. 데이터의 유형들이 많은데 어떤 타입들이 있는지 알아보자. 1. 원시타입값을 참조하는 데이터 타입으로 데이터가 할당된 변수를 통해 다른 변수에 값을 복사할 때 새로운 메모리 공간에 값을 할당받는다.string연속된 문자들을 나열한 문자열 데이터number제한범위가 존재하는 숫자형 데이터gibint제한범위가 큰 숫자형 데이터boolean참(true)과 거짓(false)을 나타내는 데이터, 비교와 논리연산의 결과로도 사용undefined데이터가 할당되지 않았을 때 자동적으로 할당 데이터가 없다는 것을 표시하는 타입nullundefined와 유사하지만 의도적으로 할당 데이터가 없다는 것을 표시하는 타입 2.참조타입데이터를 담는 데이터의 주소를 .. 2024. 4. 26.
동적언어를 정적으로 사용하기! 타입스크립트 목차1. 타입스크립트2. 문법3. 파일변환1. 타입스크립트자바스크립트에서 타입검사가 추가된 언어기존의 자바 스크립트의 경우에는 동적인 언어로 변수에 할당하는 데이터가 어떤 타입이든 상관이 없었다. 하지만 이는 여러 문제를 야기할 수 있어 변수에 정적인 타입을 지정하여 실행하기 전 타입 검사를 통해 동적 언어에서 발생할 수 있는 문제를 해결할 수 있었다.2. 문법문법 자체는 자바 스크립트와 크게 다르지 않다. 다만 변수나 함수명 뒤에 데이터나 함수의 반환 데이터에 대한 타입을 지정하여야 한다.//변수변수예약어 변수명 : 타입 = 값;ex) let num : number= 10;//함수함수예약어 함수명(매개변수1:타입,매개변수2:타입):반환타입{ //실행할 코드}function fn(num1:numbe.. 2024. 4. 25.
원시타입이 메서드를 사용해? 박싱과 언박싱 1. 원시타입의 객체화2. 박싱과 언박싱3. 사용하는 이유1. 원시타입의 객체화js에서 다루는 데이터 타입 중 원시타입이라고 불리는 타입이 있다 . 그런데 원시타입의 데이터 중에 문자열, 숫자, 불리언 타입은 특별한 것이 있다. 바로 객체가 메서드를 사용하는 것처럼 메서드를 사용한다는 것이다. 이 때문에 원시타입이 아니라 객체인가? 라는 혼란이 생길 수도 있다. 원시타입의 일부는 객체가 아니지만 메서드를 호출하면 특별한 현상이 나타난다. 바로 오토박싱이 된다는 것이다.그렇다면 박싱은 무엇일까? 2. 박싱과 언박싱박싱 : 원시 타입의 데이터가 같은 형태의 클래스의 객체로 변환되는 것문자열과 숫자, 불리언 타입이 메서드에 접근할 수 있던건 메서드를 호출하는 순간 자동으로 객체로 변환되기 때.. 2024. 4. 24.

티스토리툴바