JavaScript

[JavaScript] event 객체

2023. 8. 2. 10:58

 

JavaScript에서 이벤트 객체(event object)는

DOM 요소에서 발생한 이벤트에 대한 정보를 포함하는 객체이다.

 

 

이벤트가 발생하면 브라우저는 이벤트 객체를 생성하고,

이벤트가 발생한 요소와 관련된 정보를 이벤트 객체에 담아서 이벤트 핸들러 함수로 전달한다.

 

이벤트 객체에는 다양한 속성과 메서드가 포함되어 있어서 이벤트에 대한 정보를 확인하고 처리할 수 있다.

일반적으로 이벤트 핸들러 함수의 매개변수로 이벤트 객체를 받아서 사용한다.

 

ex1. form [ onsubmit ]

<form onsubmit="getPrompt(event)">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>
function getPrompt(event) {
  event.preventDefault(); // 폼 제출 취소

  // 폼 내부의 요소들에 접근하여 값을 가져옴
  const username = event.target.username.value;
  const password = event.target.password.value;

  // 폼 데이터 처리 및 서버에 전송 등의 작업 수행
}

'onsubmit' 이벤트는 <form>요소에서 폼을 제출할 때 발생하는 이벤트이다.

이때 이벤트 핸들러 함수는 하나의 파라미터를 받게 되는데,

이 파라미터는 제출 이벤트에 대한 정보를 담고 있는 이벤트 객체이다.

 

이 객체에는 preventDefault() 메서드가 포함되어 있어서 폼 제출을 취소할 수 있다.

또한 이벤트 객체의 'target' 프로퍼티를 통해 이벤트가 발생한 요소를 가져올 수 있다.

 

 

ex2. checkbox [ onchange ]

<input type="checkbox" name="deleteCheckBox" onchange="onChangeValue(this);" />
function onChangeValue(checkbox){
  const name = $(checkbox).attr('name');        
  $('input[name="'+name+'"]').prop('checked', checkbox.checked);
}

체크 박스는 체크된 상태로 제출되는 경우 해당 값이 서버로 전송되며

체크되지 않은 상태로 제출되는 경우 해당 값이 전송되지 않는다.

 

'checkbox' 요소에서 'onchange' 이벤트는 체크 박스의 상태가 변경될 때 발생한다.

 

이 때 'this'는 체크 박스 자체를 가리키는 것이다.

즉, HTML 요소를 JavaScript로 선택하는 것이다.

'this'는 현재 이벤트가 발생한 요소를 가리키는데, 체크박스의 경우 해당 체크박스 자체가 'this'가 된다.

 

앞선 이벤트 객체에서는 event.target을 통해 체크박스를 가리킬 수 있다.

 

 

간단히 말하자면, 체크박스를 선택하려면 'this'를 사용하고,

체크박스의 이벤트를 처리할 때는 이벤트 객체를 사용하여 'event.target'을 통해 체크박스를 가리킬 수 있다.

 

'JavaScript' 카테고리의 다른 글

[JavaScript] attr과 prop  (0) 2023.08.02
[JavaScript] <form>태그로 서버에 데이터 전송하기  (0) 2023.08.01

[JavaScript] attr과 prop

2023. 8. 2. 09:27

 

attr과 prop는 jQuery에서 DOM 요소의 속성(attribute)과 프로퍼티(property)에 접근하는 데 사용되는 메서드다.

 

https://sso-y.tistory.com/126

 

[JavaScript] DOM (Document Object Model)

💡 DOM (Document Object Model) 웹 페이지의 구조화된 문서를 표현하는 방법 중 하나로, HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스이다. 웹 페이지의 요소(element)들을 객체로 표현하며, 이러한 객

sso-y.tistory.com

 

💡 attr

DOM 요소의 속성(attribute) 값을 가져오거나 설정하는 데 사용된다.

 

속성(attribute)은 HTML 요소의 시작 태그 안에 포함된 속성으로,

'name="value"'와 같이 특정 요소의 속성을 정의한다.

 

* 시작 태그 *

HTML 요소의 시작을 나타내는 부분으로,

요소의 이름과 속성들이 포함되어 있다.

HTML 문서에서 요소를 정의할 때는

'<요소명 속성1="값1" 속성2="값2">'와 같이 시작 태그를 사용한다.

 

예를 들어,

'<input type="text" id="myInput" value="Hello">' 라는 요소가 있다면

'$('#myInput').attr('value')'를 사용하여 '"Hello"'를 가져올 수 있다.

 

💡 prop

DOM 요소의 프로퍼티(property) 값을 가져오거나 설정하는 데 사용된다.

 

프로퍼티(property)는 DOM 요소의 속성(attribute)과 다르게 동적으로 변경되는 값이다.

 

예를 들어,

체크박스의 경우 'checked'라는 프로퍼티가 있고, 이 값은 체크박스의 체크 여부에 따라 동적으로 변경된다.

 

'<input type="checkbox" id="myCheckbox">'라는 체크박스가 있다면

'$('#myCheckbox').prop('checked')를 사용하여 체크 여부를 가져올 수 있다.

'JavaScript' 카테고리의 다른 글

[JavaScript] event 객체  (0) 2023.08.02
[JavaScript] <form>태그로 서버에 데이터 전송하기  (0) 2023.08.01

[JavaScript] DOM (Document Object Model)

2023. 8. 2. 09:12

💡 DOM (Document Object Model)

웹 페이지의 구조화된 문서를 표현하는 방법 중 하나로,

HTML, XML 또는 XHTML 문서의 프로그래밍 인터페이스이다.

 

웹 페이지의 요소(element)들을 객체로 표현하며,

이러한 객체들을 JavaScript를 통해 동적으로 조작하고 변경할 수 있도록 제공된다.

 

 

DOM의 기본 개념

📍 웹 페이지의 모든 요소들을 객체(Object)로 취급된다.

📍 문서 내의 모든 요소들은 트리 구조로 이루어져 있으며, 각 요소들을 부모-자식 관계를 갖는다.

📍 JavaScript를 사용하여 웹 페이지의 요소를 선택하고 조작할 수 있다.

 

 

아래의 HTML 코드를 JavaScript로 조작해보자.

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
    <button id="myButton">Click Me</button>
</body>
</html>

위 HTML 문서에는 'h1', 'p'. 'button' 태그 등의 요소들로 구성되어 있다.

이러한 요소들은 DOM에 의해 객체로 표현된다.

 

아래 JavaScript 코드로 버튼을 클릭했을 때 "Hello, World!"를 출력해보자.

// 버튼 요소를 선택하여 클릭 이벤트 리스너를 등록
document.getElementById('myButton').addEventListener('click', function() {
    alert('Hello, World!');
});

위 코드에서 document는 DOM의 최상위 객체로,

웹 페이지의 전체 문서를 나타낸다.

 

getElementById 메서드를 사용해 myButton이라는 ID를 가진 요소,

즉 버튼을 선택하고

 

addEventListener 메서드를 사용해 클릭 이벤트에 대한 리스너를 등록한다.

클릭 이벤트가 발생하면 해당 버튼이 선택되었으므로 "Hello, World!"가 출력된다.

'JavaScript > 메모' 카테고리의 다른 글

[JavaScript] JavaScript와 jQuery  (0) 2023.07.26

[JavaScript] <form>태그로 서버에 데이터 전송하기

2023. 8. 1. 15:03

<form> 태그는 'action' 속성을 사용해 서버로 데이터를 전송할 수 있다.

 

💡 'action'만 사용

<form class="form-horizontal" id="userForm" method="POST" action="{% url 'user_add' %}">
    <!-- 폼 요소들 -->
    <button type="submit">제출</button>
</form>

form을 제출하면 바라우저가 'action' 속성에 지정된 URL로 POST 요청을 보낸다.

서버는 지정된 URL에 따라 요청을 처리한다.

 

'onsubmit'속성을 사용해 form의 제출 동작을 JavaScript를 통해 커스터마이징할 수 있어,

필요한 경우 데이터 유효성 검사 등을 추가할 수 있다.

 

그러나 서버로 데이터를 전송하기 위해서는 'action'속성을 정의해야만 한다.

'onsubmit'속성만 사용하여 폼을 제출하더라도 데이터는 전송되지 않는다.

 

💡 'action'과 'onsubmit' 사용

<form class="form-horizontal" id="userForm" method="POST" action="{% url 'user_add' %}" onsubmit="return userAddCheck(event);">
    <!-- 폼 요소들 -->
    <button type="submit">제출</button>
</form>

form을 제출하면 브라우저가 먼저 'onsubmit' 속성에 지정된 JavaScript함수를 호출한다.

JavaScript함수가 false를 반환하면 form 제출이 취소되어 데이터가 서버로 보내지지 않는다.

true를 반환하면 브라우저는 기본 form 제출 동작을 따라가며,

action 속성에 지정된 URL로 POST요청이 보내지고 서버가 요청을 처리한다.

 

'JavaScript' 카테고리의 다른 글

[JavaScript] event 객체  (0) 2023.08.02
[JavaScript] attr과 prop  (0) 2023.08.02

[JavaScript] JavaScript와 jQuery

2023. 7. 26. 11:23

 

코드를 보다가 JavaScript와 jQuery가 같이 사용되는 것을 보고 이에 대해 정리하려 한다.

 

JavaScript는 프로그래밍 언어이고,

jQuery는 JavaScript의 라이브러리이다.

 

기본적인 개념부터 정리해보자.

HTML은 웹 페이지의 구조를 정의하는 언어이며,

CSS는 웹 페이지의 스타일과 레이아웃을 지정하는 언어이다.

JavaScript는 이들과 함께 사용하여 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있게 해준다.

 

따라서 HTML, CSS, JS를 함께 사용해 웹 페이지를 만들고 동적으로 제어할 수 있다.

 

 

jQuery는 JavaScript로 작성된 코드를 간결하고 쉽게 작성할 수 있게 도와주는 라이브러리이다.

 

자세히 설명하면 JS DOM 작업을 쉽게 처리할 수 있도록 도와주는 라이브러리이다.

 JavaScript 구성 요소

 

💡 JavaScript core 문법

자바스크립트의 핵심적인 문법과 기능들을 의미

변수, 조건문, 함수 등과 같은 기본적인 문법과 기능들이 여기에 해당

 

💡 JavaScript core 라이브러리

자바스크립트 언어의 기본 기능을 보완하고 확장하는 기능들이 포함된 라이브러리

대표적으로 Array, String, Math와 같은 객체들과 메소드들이 포함

 

💡 JavaScript BOM (Browser Object Model)

브라우저와 관련된 객체들의 집합을 의미

브라우저 창의 크기, URL, 화면 스크롤 위치와 같은 브라우저 창과 관련된 정보와 기능을 다루는 객체들이 여기에 해당

 

💡 JavaScript DOM (Document Object Model)

문서의 구조를 표현하고 조작하는 객체들의 집합을 의미

HTML 문서의 요소들을 자바스크립트로 접근하고 조작하는데 사용됨

웹 페이지의 요소들을 선택하고 변경하거나 이벤트를 처리하는 등의 작업에 사용됨

 

 

예를 들어 JavaScript로 DOM 요소를 선택하고 스타일을 변경하는 코드는 아래와 같다.

var element = document.getElementById("myElement");
element.style.color = "red";

이를 jQuery를 사용해 더 간단하게 작성할 수 있다.

$("#myElement").css("color", "red");

 

앞서 볼 수 있듯, jQuery를 사용해 개발 속도를 높일 수 있다.

 

하지만 

jQuery 라이브러리의 크기가 크고, 로드하는데 소요되는 시간으로 인해 일정한 오버헤드가 발생 수 있다.

(처리 속도가 느림)

 

반대로 JavaScript는 매우 빠른 처리 속도를 가진다.

반복되는 작업이나 빠른 속도가 필요로 하는 작업에는 JS를 사용하고

경우에 따라 적절히 섞어서 사용함이 좋다.

 

 

 

참고로 AJAX(Asynchronous JavaScript and XML)는

웹 애플리케이션에서 비동기적으로 데이터를 처리하는 일반적인 방법론을 지칭하는 용어이다. 

 

이러한 방법론은 기본적으로 자바스크립트를 사용하여 서버와 통신하는 것을 의미하며,

특정 라이브러리나 기술을 사용하여 구현할 수 있다.

 

 

AJAX는 특정 기술이나 라이브러리가 아님!

AJAX를 구현하기 위해 주로 jQuery와 같은 자바스크립트 라이브러리를 사용하는 경우가 많아

AJAX는 라이브러리라는 혼동이 발생..

 

 

AJAX는 웹 페이지의 새로고침 없이

필요한 데이터를 서버로부터 받아오거나 서버에 데이터를 보내는 등의 작업을 수행할 수 있다.

 

'JavaScript > 메모' 카테고리의 다른 글

[JavaScript] DOM (Document Object Model)  (0) 2023.08.02

티스토리툴바