노마드코더/바닐라JS로 크롬 앱 만들기/2. JS on the browser

Notice

Recent Posts

Recent Comments

Link

관리 메뉴

지 구 여 행

노마드코더/바닐라JS로 크롬 앱 만들기/2. JS on the browser 본문

필기노트/노마드코더

노마드코더/바닐라JS로 크롬 앱 만들기/2. JS on the browser

COSMOSUNION 2022. 8. 1. 23:43

노마드코더 - 바닐라JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

Javascript For Beginners

nomadcoders.co

Javascript on the browser

document(object)

: (객체로써) 웹페이지 자체를 의미

- javascript는 document 객체를 통해 HTML에 접근할 수 있다.

	코드 예제
HTML에서 바라본 관점
Javascript에서 바라본 관점	▼ document(object)의 property로 접근 ▼ javascript로 HTML 변경 가능

HTML element in Javascript - 1

- Javascript에서 HTML 코드와 HTML element를 검색하는 방법

document.getElementById("str") : HTML의 id를 통해 element(객체)에 접근

예. id = "title" 인 <h1> 태그를 선택하는 경우 : document.getElementById("title")

HTML JS

- 선택한 element의 데이터를 확인 및 변경하는 방법?

console.dir(object) : 객체(object)의 프로퍼티(변수) 데이터를 확인

예. console.dir(title); ← id가 아닌 const로 생성하는 변수(객체; const title)

object.property = "changes" : 객체의 프로퍼티 값을 "chages"로 변경

예. title.innerText = "changes" : title 객체의 innerText 속성(프로퍼티)을 "changes"로 변경

변경 전 변경 후

HTML element in Javascript - 2

- Javascript에서 HTML 코드와 HTML element를 검색하는 다양한 방법 :

함수	출력값	정의
.getElementById( Id)	(single) element	id값을 통해 해당 HTML element를 반환
		HTML
		JS
.getElementsByClassName( Class)	array	class값을 통해 해당 HTML element를 반환 : 출력값이 같은 class를 가진 element로 이루어진 array(배열)이므로 object.property 함수를 사용하여 element 접근 불가능
		HTML
		JS
.getElementsByName( Name)	array	고유의 name(property)값을 통해 해당 HTML elements를 반환
		HTML
		JS
.getElementsByTagName( TagName)	array	tag name을 통해 해당 HTML elements를 반환 (예: <div>, <a>, <section>, <button>등)
		HTML
		JS
.getElementByTagNameNS( NameSpace, TagName)	추후 업데이트	지정된 이름과 네임 스페이스의 모든 요소의 NodeList를 반환
		HTML
		JS

- (주로 쓰이는 방법) Javascript에서 HTML 코드와 HTML element를 CSS방식으로 검색하는 방법

함수	출력값	정의
.querySelector()	(Single) element	HTML에서 CSS방식으로 하나의 HTML element를 반환
		HTML
		JS
.querySelectorAll()	array	HTML에서 CSS방식으로 복수의 HTML elements를 반환
		HTML
		JS

- querySelector / querySelectorAll 는 CSS Selector이기 때문에 괄호() 안에 element를 지정할 때 CSS 방식으로 표현

예. HTML element 지정하는 방식 비교 :

.getElementsByClassName()	.querySelectorAll()
document.getElementsByClassName("hello")	document.querySelectorAll(".hello")

예. pseudo-selector를 사용하여 HTML element 지정 가능 : document.querySelector("div.hello:first-child h1");

Events

브라우저가 상호작용하는 모든 형태의 action (예. 마우스클릭, input값 입력등, wifi 접속이 해제될 경우 등) = LISTEN

1. event를 'listening'하는 방법 I - 추천방법

obj.addEventListener(EventType, Function)
* EventType : event 종류
* Function : event 발생시 실행될 함수

→ 다른 방식보다 선호되는 이유 : 추후 비활성화 용이
예. title.addEventListener("click", handleTitleClick);
비활성화 : title.removeEventListener

See the Pen addEventListener by cosmosunion (@cosmosunion) on CodePen.

2. event를 'listening'하는 방법 II

obj.oneventname = function;

예.
title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

See the Pen oneventname by cosmosunion (@cosmosunion) on CodePen.

3. window를 이용하여 event 설정하는 방법

■ window : JS에서 document를 기본적으로 제공하듯이 window도 제공

See the Pen window event by cosmosunion (@cosmosunion) on CodePen.

* document.tagname으로 불러올 수 있는건 <body>, <head>, <title>등의 sementic태그만 가능

예. document.body.style.color = "blue"

* 여기서 title은 const title로 생성한 변수로써의 title이 아니라, <head>내에 존재하는 <title>를 의미

→ <div>나 <span>과 같은 non-sementic태그들은 querySelector / getElementById를 통해 element를 불러오기 가능

Web APIs

■ API(Application Programming Interface) : 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘;

(예. 기상청의 소프트웨어 시스템 내에 있는 '일일 기상 데이터'를 API를 통해 휴대폰의 날씨앱과 통신하여 휴대폰에 매일

최신 날씨 정보를 표시 )

- Application : 고유한 기능을 가진 모든 소프트웨어

- Interface : 두 어플리케이션 간의 서비스 계약

■ Web API : 웹 서버와 웹 브라우저 간의 애플리케이션 처리 인터페이스

( "모든 웹 서비스는 API이지만, 모든 API가 웹 서비스는 아니다.")

- 구글 검색시 'HTML Heading Element - Web APIs'는 JS 관점의 HTML Heading Element를 의미

- element의 사용가능한 property 검색 : console.dir(element) → 'on'으로 시작되는 property = event listener

*element : HTML 태그가 아닌 JS에서 정의한 객체 (예. const title)

CSS in Javascript

Question.
<h1> 태그를 클릭할때마다 파란색 ↔ 빨간색 번갈아가면서 색이 바뀌는 style 변화를 어떻게 적용 가능한가?

Answer 1. only JS

Answer 2. JS에서만 하는경우, h1.style.color을 여러번 호출해야하기에 비효율적

→ h1의 현재 color값(h1.style.color)을 변수에 할당

Answer 3. 웹 브라우저의 style이 JS에서 변경되는 경우, 각 언어의 목적에 맞게 쓰이지 않았기 때문이 비효율적

(JS의 경우 상호작용을 만들어 내는데 적합 / CSS의 경우 style 변경에 적합)

→ 각 언어의 목적에 맞게 재설정 : 더 적은 JS 코드로 동일한 결과를 얻기에 효율적

element.className = "value" : (HTML) element의 class값을 value로 할당

See the Pen Untitled by cosmosunion (@cosmosunion) on CodePen.

Answer 4. 위 코드의 경우, h1.className 값으로 매번 "clicked"라는 raw string을 사용

( = 매번 CSS의 .cliked 코드로부터 class 이름을 불러와야 하기 때문에 error가 발생할 확률 증가)

→ 해당 raw string을 변수를 생성하여 할당

potential bug

: HTML <h1>태그에 clicked 클래스 뿐만 아니라 font나 기타 style을 변경하는 클래스가 존재하더라도,

아래의 코드로 인해 (몇 개의 클래스가 <h1>태그에 존재하든) 모두 제거되고 clickedClass 클래스만 남는다.

(recommended) Answer 5. 위에 명시된 버그를 classList와 function들을 이용하여 추가 및 제거 가능

element.classList : class들의 목록으로 작업할 수 있도록 허용
(비교. className의 경우 이전의 class값들과 상관없이 모든걸 교체)
.contains(class) : 명시한 class가 HTML element의 class목록에 포함되어 있는지 확인
.add(class) : 명시한 class를 element의 클래스 목록에 추가
.remove(class) : 명시한 class를 element의 클래스 목록에서 제거

예. element.classList.contains(clickedClass) : element의 class 목록에 clickedClass 클래스가 존재하는지 확인

See the Pen CSS in JS (recommended) by cosmosunion (@cosmosunion) on CodePen.

important

element.classList.toggle(class) : 명시된 class가 classList에 없으면 추가, 있으면 제거하는 함수 (≒ 전원버튼)
* 위의 .contains() / .add() / .remove() 세 함수를 모두 한꺼번에 처리 가능

contains()
add()
remove()

toggle()

See the Pen CSS in JS (recommended) by cosmosunion (@cosmosunion) on CodePen.

출처 :
1. 노마드코더 / 바닐라JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby
2. AWS / API 초보자를 위한 가이드 https://aws.amazon.com/ko/what-is/api/

'필기노트 > 노마드코더' 카테고리의 다른 글

노마드코더/바닐라JS로 그림 앱 만들기/2. 이미지 추가, 텍스트 추가, 파일 저장하기 (0)	2022.10.03
노마드코더/바닐라JS로 그림 앱 만들기/1. 그리기 기능 설정하기 (0)	2022.10.02
노마드코더/바닐라JS로 크롬 앱 만들기/1. Basic Javascript (0)	2022.07.24
노마드코더/코코아톡 클론코딩/3. Advanced CSS (0)	2022.07.03
노마드코더/코코아톡 클론코딩/2. Learning CSS (0)	2022.07.01