개인 자료 정리 홈페이지 입니다.

Note > 자바스크립트 관련

Note > 자바스크립트 관련html_javascript_dom 관계

By a3040, Published on Invalid Date

HTML(Hyper Text Markup Language)은 웹 페이지의 구조를 정의하기 위한 마크업 언어입니다. HTML 문서는 브라우저에 의해 해석되어 웹 페이지의 구조와 내용이 표시됩니다.


DOM(Document Object Model)은 HTML 문서를 계층 구조로 표현하는 모델입니다. DOM은 HTML 문서의 모든 요소를 객체로 표현하며, 이를 통해 JavaScript와 같은 스크립트 언어로 HTML 문서의 구조와 내용을 동적으로 조작할 수 있습니다.


JavaScript는 1995년에 브렌던 아이크(Brendan Eich)가 개발한 스크립트 언어입니다. 처음에는 브라우저에서 간단한 검증 기능을 수행하는 데에 주로 사용되었습니다.하지만 현재 웹 페이지의 동적인 기능을 구현하는 데에 필수적인 언어로 성장했습니다. 또한 OS단에서 동작하는 javscript 런타임 Node.js의 등장으로 서버 측에서도 활용될 수 있는 범용적인 프로그래밍 언어로 성장하였습니다.


- 핵심 언어(ECMAScript)

- DOM(Document Object Model)을 포함한 Web API


HTML, DOM, Javscript의 서로간의 관계는, 

HTML 문서를 로드하면 브라우저는 문서의 구조를 DOM으로 변환합니다. 이후 JavaScript를 사용하여 DOM에 접근하고 조작할 수 있습니다. 이를 통해, 웹 페이지를 동적으로 변경하거나 이벤트 처리를 수행하는 등의 작업을 수행할 수 있습니다.


1. HTML 문서와 해당 문서의 DOM으로 변환 예시

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
 <meta></meta>
</head>
<body>
	<header>
		<h1>Welcome to My Website</h1>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<section>
			<h2>About Us</h2>
			<p>...</p>
		</section>
	</main>
	<footer>
		<p>&copy; My Website</p>
	</footer>
</body>
</html>


위의 HTML 문서를 브라우저가 해석한 결과 DOM은 다음과 같습니다.

HTML
├── HEAD
│   ├── TITLE
│   └── META
└── BODY
    ├── HEADER
    │   ├── H1
    │   └── NAV
    │       └── UL
    │           ├── LI
    │           ├── LI
    │           └── LI
    ├── MAIN
    │   └── SECTION
    │       ├── H2
    │       └── P
    └── FOOTER
        └── P


2. javscript의 DOM 사용


이렇게 변경된 DOM에 JavaScript를 사용하여 접근하고 조작할 수 있습니다. 

Javascript를 이용해서 DOM에 접근, 페이지의 제목을 변경하는 예시입니다.


document.querySelector('header h1').textContent = 'My New Website';


이후 변화된 내용은 브라우저를 통해 사용자가 확인할수 있게됩니다.

Note > 자바스크립트 관련Template literals/console.log

By a3040, Published on Invalid Date

Template literals - JavaScript | MDN (mozilla.org)


이중 따옴표 나 작은 따옴표 대신 백틱(` `) (grave accent) 을 이용합니다.

보통 키보드 가장 왼쪽상단 1 숫자키 옆 또는 esc키 아래에 있는 물결문자 넣을때 사용하는 키를 그냥 누르면 나타납니다.``

``안에  ${}안에 변수나 표현식을 넣어서 문자열 안에서 동적으로 값을 표현할 수 있습니다.


여러줄인 경우도


//따옴표인경우
console.log("string text line 1\n"+  
"string text line 2");

//백틱인경우
console.log(`string text line 1
string text line 2`);


console.log

개발자 도구의 콘솔(console)에 로그를 출력하는 메소드입니다. 주로 디버깅용으로 사용됩니다.


개발자 도구의 콘솔(console) <-- PC브라우저 사용시 F12 키 누른 후 콘솔탭


문자열 출력

console.log('Hello, world!');


변수 값 출력

const myVar = 42;

console.log(myVar);


객체 출력

const myObj = { name: 'John', age: 30 };

console.log(myObj);


변수 값과 문자열 조합 출력

const myVar = 'world';

console.log(`Hello, ${myVar}!`);


로그의 스타일 지정

console.log('%cHello, world!', 'color: blue; font-size: 20px;');



let num1 = 10;
let num2 = 20;
let str = "hello";

console.log(num1, num2, str);



let obj = { name: "John", age: 30 };
console.log(`My name is ${obj.name} and I'm ${obj.age} years old.`);



const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
console.log(`Person: ${JSON.stringify(person)}`);

console.log(`Age: {}`, person);

console.log(`hello:%s, im %d`, 'xx', 20);




Note > 자바스크립트 관련[web api] DOM

By a3040, Published on Invalid Date

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 


API (web or XML page) = DOM + JS (scripting language)


중요한 데이터 타입들

document :

element :  DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. 

nodeList:  elements 의 배열이다.

attribute : attributes 는 DOM 에서 elements 와 같은 nodes 이다. 

namedNodeMap:




DOM 소개 - Web API | MDN (mozilla.org)

Note > 자바스크립트 관련클래스 이름 얻기 classList

By a3040, Published on Invalid Date

HTML요소에서 클래스 목록을 얻습니다. DOMTokenList 객체를 반환합니다.

관련 메소드는

add(className): 클래스 추가

remove(className): 클래스 삭제

toggle(className): 클래스 토글 (존재하지 않으면 추가, 존재하면 삭제)

contains(className): 클래스 포함 여부 확인

item(index): 클래스 목록에서 인덱스로 클래스 얻기

length: 클래스 목록의 길이

가 있습니다.


classList



const element = document.getElementById("myElement");
// 클래스 추가
element.classList.add("newClass");
// 클래스 삭제
element.classList.remove("oldClass");
// 클래스 토글
element.classList.toggle("active");
// 클래스 포함 여부 확인
const hasClass = element.classList.contains("active");
console.log(hasClass);
// 클래스 목록의 길이
const classCount = element.classList.length;
console.log(classCount);


Note > 자바스크립트 관련유사배열

By a3040, Published on Invalid Date

유사배열은 실제 배열은 아니지만 배열과 유사한 동작을 하는 객체를 나타냅니다. 

유사배열 객체는 다음 특징을 가집니다:


1.인덱스를 사용하여 요소에 접근할 수 있어야합니다.

2.length 속성을 가지고 있어서 요소의 개수를 알 수 있어야합니다.

3.반복 가능(iterable)하므로 for...of 루프나 forEach와 같은 반복 메서드를 사용할 수 있습니다.

4.Array객체가 아니어서 .map등 사용이 안됩니다. Array 객체로 변환 후 사용해야합니다.


대표적 예시 : 문자열(String), 함수 인자(arguments), NodeList, TypedArray

//문자열(String): //문자열은 각 문자에 대한 인덱스로 접근할 수 있으며 length 속성이 있습니다.
const str = "Hello";
console.log(str[0]); // "H"
console.log(str.length); // 5



//arguments는 함수라면 처음부터 갖고 있는 숨겨진 속성입니다.
function example() {
    console.log(arguments[0]);// 1
    console.log(arguments.length);// 3
}
example(1, 2, 3); 



const elements = document.querySelectorAll("div");
console.log(elements[0]); // 첫 번째 div 요소
console.log(elements.length); // 요소의 개수



//TypedArray: Uint8Array, Int32Array와 같은 TypedArray 객체도 유사 배열입니다.
const uint8Array = new Uint8Array([1, 2, 3]);
console.log(uint8Array[0]); // 1
console.log(uint8Array.length); // 3


제너레이터(generator) 객체는 유사 배열이 아닙니다.

제너레이터 객체는 반복 가능한(iterable) 객체로, next() 메서드를 사용하여 값을 순차적으로 생성하고 반환하는 객체입니다.


function* gen(from=0, to=10, step=1){
    for( let i=from; i<to; i+=step)
        yield i;
}

const x = gen();
try{
    console.log( x.join(',') )
}catch(e){
    console.error('gen은 generator객체여서 join안됨', e);
}
console.log( x[3] ); //undefined , next()로 접근 
console.log(Array.prototype.join.call([...x], '|'));