자바스크립트 기초 (5)

⭐️ 함수란?

함수는 코드 블록을 정의하고 재사용 가능한 기능 단위로 사용하는 데 사용됩니다.

함수는 특정 작업을 수행하고 값을 반환할 수 있습니다.

함수는 프로그래밍에서 중요한 개념 중 하나이며, 다양한 방식으로 정의하고 호출할 수 있습니다.

 

중복되는 기능을 하나의 메서드로 사용자 정의하여 호출하며 사용이 가능하다는 것

함수의 기본 형태는 여러 가지가 있습니다.

함수 기본 형태 (1) - 함수 선언문

함수의 기본형태 (2) - 함수 표현식

이 외에도 화살표 함수, 메서드 방식, 즉시 실행 함수 등 여러 형태가 있지만 주로 사용하는 것들을 예시로 들어봤습니다.

자바스크립트는 동적인 기능들을 만들다보니 특정 버튼을 누르면 이벤트가 일어나는

onclick이나 mouseover, onload 같은 이벤트 핸들러들을 많이 사용하게 됩니다.

클릭 이벤트가 발생했을 시 특정 함수를 호출하여 기능을 제공하는 것

 

💫 자바스크립트에서 요소를 선택하고 조작하는 유용한 메서드 ( document 객체에서 제공되는 메서드들)

- document.querySelector - 여러 요소를 선택할 수 있다.

Ex) var element = document.querySelector(".my-class"); // 클래스 선택자

     var element = document.querySelector("#my-id"); // 아이디 선택자

     var element = document.querySelector("div"); // 요소 선택자 

     var element = document.querySelector("[name='my-name']"); // 속성 선택자

 

- document.querySelectorAll

- document.getElementById - id를 사용하여 문서 내의 요소를 선택합니다.

- document.getElementsByClassName - 클래스 이름을 사용하여 문서 내의 요소를 선택합니다.

- document.getElementsByTagName - 요소 이름을 사용하여 문서 내의 요소를 선택합니다.

- document.getElementsByName -이름 속성을 사용하여 문서 내의 요소를 선택합니다.

 

💫  자바스크립트에서 날짜 관련 함수

자바스크립트는 날짜와 시간을 다루기 위한 다양한 내장 함수와 객체를 제공합니다.

다음은 주요한 자바스크립트 날짜 함수와 관련된 내용입니다

1. Date() 생성자 : Date() 생성자는 현재 날짜와 시간을 나타내는 Date 객체를 생성합니다. Date() 생성자 사용 예시

var currentDate = new Date(); // 현재 날짜와 시간을 가지는 Date 객체 생성

 

var specificDate = new Date("2023-07-05); // 특정 날짜와 시간을 가지는 Date 객체 생성

 

var specificDateTime = new Date(2023,6,5,10,30,0);

 

2. getFullYear(), getMonth(), getDate(), getDay() 등 : Date 객체의 메서드 사용하여 날짜와 시간의

다양한 부분 가지고 올 수 있다.

var date = new Date();

var year = date.getFullYear(); // 현재 연도 가져오기

var month = date.getMonth(); // 현재 월 (0부터 11까지, 0은 1월을 의미)

var day = date.getDate(); // 현재 일 가져오기

var dayOfWeek = date.getDay(); // 현재 요일 (0은 일요일을 의미)

 

3. setFullYear(), setMonth(), setDate(), setHours() 등 : Date 객체의 메서드를 사용하여 날짜와 시간의

특정 부분을 설정할 수 있다.

var date = new Date();

date.setFullYear(2023); // 연도 설정

date.setMonth(6); // 월 설정 (0부터 11까지)

date.setDate(5); // 일 설정

date.setHours(10); // 시간 설정

 

4. toLocaleDateString(), toLocaleTimeString() 등 : Date  객체의 메서드를 사용하여 지역화된 날짜와 시간

문자열을 가져올 수 있다.

 

var date = new Date();

var localDateString = date.toLocaleDateString(); // 지역화된 날짜 문자열 가져오기

var localTimeString = date.toLocaleTimeString(); // 지역화된 시간 문자열 가져오기

 

5. getTime(), setTime() : Date 객체의 메서드를 사용하여 날짜와 시간을 밀리초 단위의 숫자 값으로

가져오거나 설정할 수 있다.

 

var date = new Date();

var timestamp = date.getTime(); // 현재 날짜와 시간의 밀리초 단위의 타임스탬프 가져오기

var newDate = new Date(1625468300000); // 밀리초 단위의 타임스탬프로부터 새로운 Date 객체 생성

이 외에도 Date 객체는 다양한 기능을 제공하고 있다.

날짜와 시간을 비교, 연산, 형식화 등 작업이 가능하다.