김갱환
맨땅에 코딩
김갱환
전체 방문자
오늘
어제
  • 분류 전체보기 (239)
    • ⁂ 맨땅에 코딩 (11)
      • : Story (3)
      • : MiniProject 'MyWeb' (1)
      • : Final Project (5)
      • : Josa-Moa 한국어 조사 처리 프로젝트 (1)
    • —————Frontend——————————————.. (0)
    • ⁂ HTML (10)
      • : 기본 익히기 (10)
    • ⁂ CSS (15)
      • : 기본 익히기 (15)
    • ⁂ Java Script (32)
      • : 기본 익히기 (28)
      • : 자바스크립트 라이브러리 (1)
      • : 연습 문제 (3)
    • ⁂ jQuery (11)
      • : 기본 익히기 (11)
    • ⁂ Bootstrap (3)
      • : 기본 익히기 (3)
    • ⁂ TailWind CSS (1)
    • ⁂ AJAX (5)
      • : 기본 익히기 (5)
    • ⁂ Vue.js (3)
      • : 기본 익히기 (3)
    • —————DB : Data Base————————.. (0)
    • ⁂ Oracle DB (27)
      • : 기본 익히기 (24)
      • : 연습 문제 (3)
    • ⁂ MyBatis Framework (15)
      • : 기본 익히기 (15)
    • —————Backend———————————————.. (0)
    • ⁂ Java (62)
      • : 기본 익히기 (42)
      • : JDBC - Java DataBase Conn.. (4)
      • : Crawling (2)
      • : 독학으로 공부하기(과거) (11)
      • : 연습문제 (3)
    • ——————Web————————————————— (0)
    • ⁂ JSP (28)
      • : 기본 익히기 (28)
    • ⁂ Spring FrameWork (15)
      • : Legacy Project (1)
      • : 기본 익히기(Boot 기반) (14)
    • ——————————————————————— (0)
    • ⁂ Error Note (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 연산자 #기본연산자 #코딩 #자바 #독학 #자바공부 #자바연산자
  • ErrorPage
  • 코딩공부
  • 코딩
  • web.xml수정
  • 코딩공부 #코딩 #자바 #자바독학 #자바공부 #개발자 #프론트앤드 #백앤드 #풀스택
  • 객체지향프로그래밍
  • 풀스택
  • 코딩 #코딩공부 #프론트앤드 #백앤드 #풀스택개발자
  • HTML공부
  • 개발자
  • 비트연산자 #코딩공부 #자바공부 #코딩 #자바 #프로그래밍 #개발자
  • 자바
  • httperror
  • 프론트앤드
  • 백앤드
  • 코딩 #코딩공부 #상수 #리터럴 #형변환 #개발자 #자바 #자바공부 #자바독학
  • 자바공부
  • 코딩공부 #자바공부
  • http에러메세지

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
김갱환

맨땅에 코딩

⁂ Java Script/: 기본 익히기

[JS] #11 This

2022. 8. 17. 12:18

참조 사이트

https://www.w3schools.com/js/js_this.asp

 

JavaScript this

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

1. This is Me!!

 

 this는 자신이 갖고 있는 요소를 가리킬 때 쓰이는 명령어이다.

 자바스크립트에서 자신이 갖고 있는 요소에 접근할 때 코드가 불필요하게 길어질 때가 있다.

 그럴 때 this를 사용하여 자신의 요소에 손쉽게 접근할 수 있다.

 

 이제 버튼을 만든 뒤 자신의 요소에 접근하는 방법을 알아보자.

 

<!DOCTYPE html>  
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>02_this.html</title>
    </head>
    <body>        

        <h3>this</h3>

        <form id="myform" name="myform">
            <input type="button" name="btn1" id="btn1" value="버튼1" onclick="test1()">
            <input type="button" name="btn2" id="btn2" value="버튼2" onclick="test2(this)">
            <input type="button" name="btn3" id="btn3" value="버튼3" onclick="test3(this.value)">


        </form>

        <script>
            // 참조 https://www.w3schools.com/js/js_this.asp
            /* 
                ● [this]
                 - 자기 자신의 요소를 가리킴
            */
        </script>

    </body>
</html>

 

 버튼 1은 값을 지정해주지 않았고,

 버튼 2는 this 명령어를 정해주었고,

 버튼 3은 this의 value 값을 정해주었다.

 

 

2. 자신의 요소에 접근하기

 

1) name으로 접근하기 (비추천)

 이 방식은 구식 방식이기 때문에 그렇게 추천하지는 않는다.

 코드는 아래와 같으며 f 변수를 하나 선언해서 name 값을 불러오는 방식을 취한다.

function test1() {
    let f=document.myform;
    alert(f); // [object HTMLFormElement]
    alert(f.btn1); // [object HTMLInputElement]
    alert(f.btn1.value); // 버튼1
} // test1() end

 

2) id로 접근하기 (추천)

 지금까지 흔히 써왔던 id로 접근하는 방법이다.

function test1() {
    alert(document.getElementById("btn1").value); // 버튼1
} // test1() end

 

 

3. this로 접근하기

function test2(obj) {
    alert(obj); // [object HTMLInputElement]
}

 test2(this)는 현재 this 명령어가 지정되어있다.

 그렇기 때문에 test2(this)는 그 자체의 값 모두가 넘어오게 된다.

 그래서 아래처럼 this의 value 값을 바로 접근할 수도 있다.

alert(obj.value); // 버튼2

 

 

4. this의 value값으로 바로 접근하기

 this의 value값으로 바로 접근하는 것도 가능하다.

function test3(val) {
    alert(val); // 버튼3
} // test3() end

 

 코드가 점점 짧아지고 간소화되는 것이 눈에 보이길 바란다.

 이처럼 자신의 요소 중 필요한 요소에 손쉽게 접근할 수 있도록 도와주는 것이 바로 this 명령어이다.

 이를 잘 활용하면 복잡하고 긴 코드를 단순화할 수 있고 손쉽게 프로그래밍을 할 수 있다.

 

 

5. this.form

 this는 자신이 속해있는 상위 항목에 접근할 수도 있다.

 this.form을 입력하면 자신의 요소가 속해있는 <form>을 불러오게 된다.

<form>
	<input type="button" name="btn4" id="btn4" value="버튼4" onclick="test4(this.form)">
</form>

function test4(frm) {
    alert(frm); // [object HTMLFormElement]
}

 

* form 주의할 점 *

 - form 자체에 this를 지정해주면 위와 같이 [object HTMLFormElement] 요소에 접근한다.

 - form에 this를 지정해줄 때 this.form을 지정해주면 <form>요소가 속한 상위의 <form>을 찾게 된다(사실 <form>안에 <form>이 올 수도 없다). 그래서 undefined가 출력되게 된다.

 - this는 폼 컨트롤 요소에서만 사용한다. 예를 들어 <a> 태그에서는 사용이 불가하다.

 

 

 ↓ 테스트 해보기!!

 위에서 설명했던 각각의 버튼의 접근을 읽어보며 버튼을 눌러보고 알림창을 확인해보자.

 

02_this.html

this


저작자표시 비영리 동일조건 (새창열림)

'⁂ Java Script > : 기본 익히기' 카테고리의 다른 글

[JS] #13-1 오픈소스 활용하기 : 카카오 우편번호 서비스  (0) 2022.08.17
[JS] #12 JavaScript JSON  (0) 2022.08.17
[JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기  (0) 2022.08.17
[JS] #9-2 유효성 검사 - 회원가입틀 만들기 2  (0) 2022.08.16
[JS] #9-1 유효성 검사 - 회원가입틀 만들기 1  (0) 2022.08.16
    '⁂ Java Script/: 기본 익히기' 카테고리의 다른 글
    • [JS] #13-1 오픈소스 활용하기 : 카카오 우편번호 서비스
    • [JS] #12 JavaScript JSON
    • [JS] #10 자바 스크립트에서 스타일(.CSS) 접근하기
    • [JS] #9-2 유효성 검사 - 회원가입틀 만들기 2
    김갱환
    김갱환
    코딩의 코자도 모르는 이의 공부 기록장

    티스토리툴바