'💻 Programming/JS, TS' 카테고리의 글 목록

[JavaScript] 자바스크립트로 css 스타일 변경하기

2024.01.13

DOM 요소의 스타일 변경 1) className Product Name 60/60 Submit input.warning { background-color: rgb(248, 191, 145); } #remaining-chars.warning { color:rgb(211, 109, 26); } const spanElement = document.getElementById('remaining-chars'); spanElement.className = 'warning'; element.className('some-class')로 해당 요소에 클래스명을 추가할 수 있다. className으로 css 클래스 추가할 때의 단점 : 이미 클래스를 가지고 있는 요소의 경우, 해당 클래스가 새로운 클래스로 덮어씌어진다...

💻 Programming/JS, TS

[JavaScript] 이벤트 객체

2024.01.13

Event 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다. 웹의 경우 이벤트는 브라우저 윈도우 내에서 발생되는데, 다음와 같은 다양한 이벤트 타입들이 있다. 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둔다(hover). 유저가 키보드에서 키를 선택한다. 유저가 브라우저 창의 크기를 재조정하거나 닫는다. 웹 페이지가 로딩을 완료했다. 양식(form)이 제출되었다. 비디오가 재생되거나, 멈추거나, 혹은 끝났다. 오류가 발생했다. 이벤트리스너의 콜백함수 let paragraphElement = document.body.firstElementChild; function changeParag..

💻 Programming/JS, TS

[JavaScript] window&document 전역객체와 DOM

2024.01.11

전역 window & document 객체 Built-in Variables & Functions 전역 변수로 코드 내에서 항상 사용할 수 있는 변수 window 객체 전역 객체 window 전역 객체는 웹 브라우저 환경에서 전역으로 사용 가능한 객체를 나타낸다. 모든 전역 변수와 함수는 실제로 이 window 객체의 프로퍼티로 존재한다. window 객체의 프로퍼티와 메서드. 함수 기호 f가 표시된 것이 메서드이고 그렇지 않은 것은 프로퍼티이다. window 객체에 내장된 프로퍼티와 메서드들은 window. 없이도 액세스할 수 있다. alert 메서드의 경우 window.alert()로도 사용할 수 있지만 그냥 alert()으로도 실행할 수 있는 것처럼 말이다. 윈도우와 브라우저 탭 윈도우는 웹 브라우..

💻 Programming/JS, TS

[JavaScript] slice vs splice vs split 차이점

2023.08.08

맨날 쓰면서도 이름이 비슷해서 그런가 저 세 메서드가 정리가 안되고 헷갈려서 이 참에 한번 시원하게 정리해보자~! 1. slice Array.prototype.slice() 또는 String.prototype.slice() `slice()` 메서드는 문자열 또는 배열에서 특정 범위의 요소들을 복사하여 새로운 문자열 또는 배열을 반환한다. Array // 예제 출처: MDN web docs - Array.prototype.slice() const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] con..

💻 Programming/JS, TS

[TypeScript] Map

2023.07.27

map은 React.js에서는 주로 배열로 이루어진 데이터를 뿌려줄 때 많이 사용했었는데, 타입스크립트에서 사용법이 조금 특이한 것 같아 간단하게 정리해보고자 한다. 1. Map이란? 자바스크립트와 타입스크립트에서 제공되는 데이터 구조 중 하나로, Key와 Value의 쌍을 저장하는 컬렉션이다. 이 컬렉션은 값에 대한 고유한 키를 사용하여 값을 저장하고 검색하는 데 사용된다. 2. Map의 특징 1) 고유한 key값 `Map`은 key-value 쌍을 저장하는데, 각 key는 중복될 수 없으며 unique한 고유값이어야 한다. key가 중복될 경우, 가장 마지막 value가 저장된다. 2) key-value 쌍으로 저장 각 항목을 key-value의 쌍으로 저장하여, key값을 사용하여 해당 key에 연..

💻 Programming/JS, TS

[JavaScript] 자바스크립트로 크리스마스까지 남은 시간 계산하기

2023.06.21

나는 개인적으로 크리스마스의 분위기와 무드를 매우 매우 좋아하는 사람이다. 아직 한여름도 채 오지 않았지만, 자바스크립트를 이용하여 올해 크리스마스까지 남은 시간을 계산해 보자! 1. JavaScript를 사용하여 크리스마스까지 남은 시간 계산하기 먼저 HTML을 간단하게 작성하고, 자바스크립트 코드를 작성해봤음! 자바스크립트 코드블럭 내에 순서 단계를 주석으로 적어두었고, 자세한 설명은 코드블럭 하단에서 풀어서 적어보려고 한다. Santa is coming! // 1) 시간을 표시할 HTML 요소 지정 const countdownClock = document.querySelector(".countdown"); // 2) 함수 작성하기 const waitingXmas = () => { // (1) 오늘 ..

💻 Programming/JS, TS

[JavaScript] var, let, const

2023.06.20

1. 변수란? 1) 정의 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 기억하고 싶은 데이터 값을 메모리에 저장하고, 저장된 데이터 값을 재사용하기 위해 사용 식별자: 변수의 이름을 '식별자(identifier)'라고도 하는데, 식별자는 값 자체가 아닌 값을 저장하고 있는 메모리 주소를 기억한다. 식별자는 변수명에 국한된 개념이 아니고, 변수, 함수, 클래스 등의 이름은 모두 식별자라고 할 수 있다. 2) 변수의 생성 3단계 - 선언, 초기화, 할당 (1) 변수 선언 변수 선언이란 변수를 생성하는 것, 즉 값을 저장하기 위해 메모리 공간을 확보하고 변수명과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있도록 준비하는 것을 말한다. 변수를 선언..

티스토리툴바