본문 바로가기
Computer Science/Etc.

웹 브라우저 JavaScript2

by hzyiunn 2023. 1. 15.
728x90
반응형

* 해당 내용은 인프런 강의 중 이고잉님의 「웹브라우저 JavaScript」를 수강 후 작성한 노트입니다.

 

https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C/dashboard

 

[무료] 웹브라우저 Javascript (자바스크립트) - 인프런 | 강의

생활코딩 자바스크립트 강좌 입니다. 웹브라우저를 직접 제어할 수 있는 자바스크립트 레퍼런스를 공부해 봅니다., - 강의 소개 | 인프런...

www.inflearn.com

2023.01.15 - [Computer Science/Etc.] - 웹 브라우저 JavaScript

 

웹 브라우저 JavaScript

* 해당 내용은 인프런 강의 중 이고잉님의 「웹브라우저 JavaScript」를 수강 후 작성한 노트입니다. https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C/dashboard

hzyiunn.tistory.com

jQuery

  • 원하는 element를 조회, 제어할 수 있는 라이브러리 제공(코드를 짧게, 많은 일 가능 - 가독성 유지보수 쉬움)
  • 자주 사용하는 패턴이나 작업을 효율적으로 할 수 있어서 라이브러리 사용함
  • $('body').prepend('<h1>Hello World</h1>');
  • 태그의 이름이 body인 element를 선택
  • .prepend : body 태그의 앞쪽에 ' ' 안에 코드 추가

 

jQuery 제어 대상 조회 1 : 기본 문법

  • $('li').css('color', 'red');
  • $ : jQuery function을 뜻함. css선택자가 인자로 들어옴.
  • . : 함수가 리턴한 값이 객체라는 것(jQuery 객체)

jQuery 제어 대상 조회 2 : 엘리먼트 제어 1

  • $('li') : li라는 이름을 가지고 있는 모든 태그를 담고 있는 jQuery 객체를 리턴.
  • 코드 작성이 수월하고 더 짧음. DOM과 달리 반복문 사용할 필요가 없음.

jQuery 제어 대상 조회 3 : 엘리먼트 제어 2

  • getElementsByClassName('active') : class 이름을 인자로 이 이름을 갖고 있는 모든 element를 선택하는 DOM 코드
  • $('.active') : class가 active인 element를 제어하는 jQuery 코드

jQuery 제어 대상 조회 4 : 엘리먼트 제어 3

  • getElementById('active') : Id 이름을 인자로, 이 이름을 갖고 있는 모든 element를 선택하는 DOM 코드
  • $('#active') : id가 active인 element를 제어하는 jQuery 코드
  • $('#active').css('color', 'red').css('textDecoration', 'underline'); -> jQuery 2개 코드 같이 사용할 수 있음 : chainining(체이닝)

HTMLElement 1 : 단수와 복수

  • 제어하고자 하는 element에 대한 객체(태그) 찾기가 가장 먼저! -> 이를 하기 위해서는 그 객체가 무엇인지에 대한 이해가 필요함
  • var li = document.getElementById('active');
  • console.log(li.constructor.name);

-> 객체의 이름 알아내기 : li(객체)의 constructor(생성자)함수를 알아낸 후 그 이름 알아내기

  • var li = document.getElementById('active');

       console.log(li.constructor.name);

-> HTMLLIElement (조회한 결과가 하나만 출력되면 HTMLElement에 속함. LI인건 조회한 태그가 li라서)

  • var lis = document.getElementsByTagName('li');

        console.log(lis.constructor.name);

-> HTMLCollection (조회한 메소드가 복수 개의 element를 리턴하면 HTMLCollection 이라는 객체임 - 유사 배열. 배열처럼 사용가능. 여러개의 element 담고 있음)

 

HTMLElement 2 : HTMLElement

-> HTMLLIElement

-> HTMLAnchorElement

  • var target = document.getElementById('button');-> HTMLInputElement
  • console.log(target.constructor.name);
  • 각 element의 태그명에 따라 가운데 들어가는 이름이 다름 : 각각의 element를 제어하기 위한 객체가 다르다 ( = 각각의 객체가 갖고 있는 property<기능>가 다르다) -> 왜 다를까? li는 리스트만 표현하면 됨. 링크는 href라는 속성이 있어야 함, target이라는 속성도 있음. input은 type과 value라는 속성 가짐..
  • 이처럼 모두 HTML의 element라는 공통적인 속성(=공통의 prperty, 특성, 사용성)가지면서도 동시에 각각의 tag 성격의 쓰임, 스펙, 성격에 따라 기능 다름!!! 때문에 각자 다른 객체를 가지고 있어야 한다는 의미
  • 상속 : 객체가 다른 객체의 property를 그대로 물려받으면서 본인에게 필요한 prperty를 추가했을 떄 부모, 자식 객체라고 말함.

HTMLELement 3 : DOM Tree

  • 모든 element들은 공통적인 것과 각각의 element가 li인지 input인지 anchor인지에 따라 각각 기능이 다름
  • DOM Tree

HTMLCollection 객체

  • HTMLColletion : 리턴 결과가 복수인 경우에 사용하는 객체
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title></title>

</head>

<body>

<ul>

<li>HTML</li>

<li>CSS</li>

<li id='active'>JavaScript</li>

</ul>

<script type="text/javascript">

console.group('before');

var lis = document.getElementsByTagName('li');

for(var i = 0 ; i < lis.length; i++)

{

console.log(lis[i]);

}

console.groupEnd();

console.group('after');

lis[1].parentNode.removeChild(lis[1]);

for(var i = 0 ; i < lis.length; i++)

{

console.log(lis[i]);

}

console.groupEnd();

</script>

</body>

</html>

jQuery Object 1

  • jQuery 함수를 실행한 결과 = jQuery 객체
  • jQuery 함수에서 선택한 것에 해당하는 element들에 대한 정보를 가지고 있으면서 동시에 element들에게 작업을 할 수 있음.
  • 암시적 반복 : 내부적으로 필요한 코드를 반복하는..
  • .css 에서 인자가 2개면 설정, 1개면 그 값 가져오는 것(근데 첫 번째 element의 값만 가져옴)

jQuery Object 2 : 엘리먼트 정보

  • var li = $('li');
  • 배열과 유사하기 때문에 length 사용 가능, li[0]도 가능
  • 근데 li[i]는 DOM객체기 때문에 .css 사용 불가능
  • 따라서 $(li[i]).css 는 가능!

jQuery Object3 : map()

var li = $('li');{$(elem).css('color', 'red');
})
console.log(index, elem);
li.map(function(index, elem)
  • map은 함수를 인자로 받도록 되어있음. 함수 호출하는 것! li하나 하나에 대해 함수 호출 되어 있으니까 각 element에 index를 줌. elem도 DOM 객체임

Element 객체

  • element를 추상화한 객체
  • HTMLLIElement -> HTMLElement -> Element
  • Element 부모 객체의 역할 : 문서 상에 나타나는 모든 element들에 대한 기능성 정의하는 객체
  • 왜 굳이 HTMLElement와 Element를 구분할까? DOM이 HTML만을 제어하기 위한 규격은 아니기 때문에. 마크업 언어를 제어하기 위한 규격/표준이 DOM이기 때문에 HTML, XML, SVG, XUL 등과 같은 마크업 언어들은 모두 element들을 갖고 있음. 이 element들에 적용할 수 있는 기능이 Element에 정의되어있음.
  • 주요 기능 : 식별자, 조회, 속성

식별자 API 1 : Element.tagName

  • 각각의 element들이 자신을 찾아낼 수 있도록 이름을 갖는게 식별자, id, class 등
  • Element.tagName 을 이용하면 현재 element의 태그 이름이 무엇인 지 알아 낼 수 있음. tagName은 읽기 전용이라 바꿀 수 없음.

식별자 API 2 : Element.id

  • id는 문서에서 단 하나만 등장할 수 있는 식별자, 하나의 태그만이 그 element를 갖고 있음(유일무이)
var active = document.getElementById('active');active.id = 'deactive';
console.log(active.id);
console.log(active.id);
  • id 변경할 수 있음.

식별자 API 3 : Element.className

  • className보다 classList 사용이 더 쉬움
var active = document.getElementById('active');console.log(active.className);
active.className += " readed";
active.className = "important current";
  • 추가 시 : 기존 유무 확인 필요
  • 삭제 시 : 삭제하지 않을 것을 클래스 이름으로 재지정해야함.

식별자 API 4 : Element.classList

  • class가 여러 개일 수 있음. ex) 'class = "a b c " 그러면 class 이름이 a, b, c인 게 있는 것. 이걸 모두 담아놓은 객체가 Element.classList인 셈.
  • Element.classList[0] 하면 첫 번째 class 이름 알려줌.
  • 추가 : active.classList.add('important');
  • 삭제 : active.classList.remove('important');
  • 유무에 따라 import 제거하거나 생성하거나(on off 같은) : active.classList.toggle('important');

조회 API : getElementsBy*

  • document.getElementsBy* : 문서 전체에서 어떤 element 찾을 때. 하위 element 조회할 때 사용.

속성 제어 API 1 : Element.*Attribute

  • tag의 이름만으로 어떠한 정보의 의미 표현이 부족할 때 속성을 통해 정보에 대한 부가적 정보 표현. element의 속성값 제어.
  • .getAttribute(name);
  • .setAttribute(name, value);
  • .hasAttribute(name);
  • .removeAttribute(name);

속성 제어 API 2 : attribute vs. property

  • attribute 방식 : target.setAttribute('class', 'important');
  • property 방식 : target.className = 'important';
  • property 방식이 더 간편하고 속도가 빠르지만 이름 규칙으로 인해 제한 사항이 있음.
  • property의 경우, 현재 페이지의 전체 주소 리턴.
  • attribute인 경우, href로 지정한 상대 경로를 리턴
728x90
반응형
저작자표시

'Computer Science > Etc.' 카테고리의 다른 글

[Github] 깃허브에 폴더 전체 업로드하기  (0) 2023.03.24
웹 브라우저 JavaScript3  (0) 2023.01.23
웹 브라우저 JavaScript  (0) 2023.01.15
LaTex에서 여러 형태의 글씨체 입력하기  (4) 2022.05.18
LaTex에서 한글 논문 참고문헌(reference) 입력하기  (2) 2022.05.10

관련글

댓글

티스토리툴바