23.02.16(화살표함수, 내장객체, DOM, 선택자 접근)

😀😀

 

 

 

😀화살표함수로 선언하는 방법

info : () => {
	let str = "이름: " + student.name + "<br>" + ...
}

 

😀id가 output인 곳으로 가서 student객체의 info함수를 읽어오거나 설정?

document.getElementById("output").innerHTML = student.info();

 

 

/*
내장객체 : 자바스크립트에서 제공해 주고 있는 객체
예) Date, Math 객체가 대표적인 내장 객체
*/

let date = new Date();

document.write(`${date.getFullYear()} <br>`);
document.write(`${date.getMonth() + 1} <Br>`);
document.write(`${date.getDate()} <br>`);
document.write(`${date.getDay()} <br>`); // 일요일: 0 ~ 토요일6 숫자로 반환 (Switch문사용)

document.write(`${date.getHours()} <br>`);
document.write(`${date.getMinutes()} <br>`);
document.write(`${date.getSeconds()} <br>`);

 

 

/*
Math 객체 : 수학 내장 객체.
     거의 대부분이 함수로 구성.

- abs(숫자)
  ==> 해당 숫자의 절대값을 반환하는 함수.
  
- max(숫자1, 숫자2,.... 숫자n)
  ==> 숫자 중 가장 큰 값을 반환하는 함수.
  
- min(숫자1, 숫자2,.... 숫자n)
  ==> 숫자 중 가장 작은 값을 반환하는 함수.
  
- pow(숫자, 제곱값)
  ==> 숫자의 거듭제곱한 값을 반환하는 함수.
  
- random(숫자)
  ==> 0 ~ 1 사이의 난수를 발생시키는 함수.
  
- round(숫자)
  ==> 소수점 첫째 자리에서 반올림하여 정수를 반환해 주는 함수.
  
- ceil(숫자)
  ==> 소수점 첫째 자리에서 무조건 올림을 하여 정수를 반환해 주는 함수.
  
- floor(숫자)
  ==> 수소점 첫째 자리에서 무조건 잘라내어 정수를 반환하는 함수.
  
- sqrt(숫자)
  ==> 숫자의 제곱근 값을 반환하는 함수.
*/

document.write(`${Math.max(30, 18, 22)} <Br>`);
document.write(`${Math.min(30, 18, 22)} <Br>`);

let num = 2.1234
document.write(`${Math.round(num)} <Br>`);
document.write(`${Math.ceil(num)} <Br>`);
document.write(`${Math.floor(num)} <Br>`);

 

/* (크게 신경안써도됨, 중요한거 몇가지만..!)
BOM(Browser Object Model : 브라우저 객체 모델)
- 자바스크립트가 브라우저와 소통하기 위해서 만들어진  모델임.
- BOM 객체의 최상위 내장 객체는 window 객체임.

* window 객체의 주요 함수
  - open()
    ==> 새로운 창을 띄우고자 할 때 사용하는 함수.
    
  - alert()
    ==> 알림/경고 창을 띄울 때 사용하는 함수.
    
  - prompt()
    ==> 질의 창을 띄울 때 사용하는 함수.
    
  - confirm()
    ==> 확인/취소 창을 띄울 때 사용하는 함수.
    
  - moveTo()
    ==> 창의 위치를 이동시킬 때 사용하는 함수.
    
  - resizeTo()
    ==> 창의 크기를 변경시킬 때 사용하는 함수.
    
  - setInterval()
    ==> 일정 간격으로 지속적으로 실행문을 실행시킬 때 사용하는 함수.
    
  - setTimeout()
    ==> 일정 간격으로 한 번만 실행문을 실행시킬  때 사용하는 함수.

    
* screen 객체
  ==> 사용자의 모니터 정보(속성)를 제공해 주는 객체.
  
  screen 객체의 주요 속성
  - screen.width
    ==> 화면의 너비값을 반환하는 속성.
    
  - screen.height
    ==> 화면의 높이값을 반환하는 속성.
    
  - screen.availWidth
    ==> 작업표시줄을 제외한 화면의 너비값을 반환하는 속성.
    
  - screen.availHeight
    ==> 작업표시줄을 제외한 화면의 높이값을 반환하는 속성.
    
  - screen.colorDepth
    ==> 사용자 모니터가 표현 가능한 컬러 bit를 반환하는 속성.
*/

 

/*
★★★★★★★★★★★★★★★★
location 객체

- 자바스크립트가 실행되고 있는 현재 브라우저의 주소 창에 표시된 주소 값에 관련된 내용을 다루는 객체
- 사용자 브라우저 주소 창의 url에 대한 정보(속성)와 새로고침 기능을 제공해 주는 객체
- location 객체의 주요 속성 및 함수
  * location.href
    ==> 브라우저 창의 url 값을 반환하는 속성
    
location.reload()
==> 브라우저 창의 새로 고침이 일어나게 하는 함수.
*/

document.write(`url 정보 >> ${location.href} <br>`);

 

/*
★★★★★★★★★★★★★★★★
history 객체
- 브라우저가 페이지를 변경한 이력이 저장되어 있는 객체
- 사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음에 방문한 사이트로 되돌아 갈 수 있는 속성과 함수를 제공하는 객체

- history 객체의 속성과 함수
  * length
==> 방문 기록에 저장된 목록의 갯수를 반환하는 속성
  * history.back()
   ==> 이전에 방문한 웹 페이지로 이동하는 함수
  * history.forward()
  ==> 다음에 방문한 웹 페이지로 이동하는 함수
  * histroy.go(숫자)
==> 숫자만큼의 페이지로 이동하는 함수 // -값은 이전, +값은 이후
  
*/

<a href="Exam_02.html>두번째페이지</a>

<input type="button" value="이전페이지" onlclick="history.back()>
<input type="button" value="이전페이지" onlclick="history.go(-1)>
<input type="button" value="다음페이지" onlclick="history.fowrard()>
<input type="button" value="다음페이지" onlclick="history.go(1)>

 

 

/*
DOM(Document Object Model) : 문서 객체 모델
- 웹 문서에서 자바스크립트를 사용하는 가장 큰 이유는 어떤 조건에 맞거나 사용자 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하기 위함.
     이렇게 하려면 웹 문서에 담겨 있는 모든 요소를 따로 제어할 수 있어야 함.
- 예를 든다면 텍스트와 이미지 태그가 있을 때 '하나는 텍스트 단락이 있고 내용은 무엇이다.', 
  '하나의 이미지가  있고 이미지의 크기와 경로는 이렇다' 등을 웹 브라우저에서 기본적으로 알고 있어야 함. 
     그리고 텍스트 요소와 이미지 요소를 각각 제어하기 위해 따로 구별해서 인식해야 함.
     여러 개의 요소를 사용한 웹 문서라면 요소 사이의 포함 관계도 알고 있어야 함. // 부모요소?자식요소?
- 이런 정보를 자바스크립트로 가져와서 프로그램에 사용해야 하는데 이 때 DOM이 등장함.
- DOM은 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법을 말함.
- 자바스크립트를 이용하여 웹 문서의 텍스트나 이미지 등의 요소를 제어하기 위해서는 문서 객체 모델(DOM)을 이해해야 함.
- 사전적 정의를 검색하면 DOM은 객체지향 모델로써  구조화된 문서를 표현하는 형식임.
- 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법을 말함.
- 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 함. 
    쉽게 말을 한다면 어떤 이미지를 올린다고 했을 때 body 내부에 img 태그를 넣어서 src 경로를 붙여 넣어야 브라우저가 인식을 제대로 한다는 것임. 
    제멋대로 태그들의 순서를 바꾸어 코드를 작성하면 브라우저가 그 코드를 인식을 하지 못함. 
    여기서 브라우저가 웹 문서를 이해할 수 있도록 구성된 것을 DOM이라고 함. 
    
    즉, 모든 요소들과의 관계를 부자관계로  표현할 수 있는 트리구조로 구성된 것이 DOM 이라는 것임.
    
    여기서 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는  과정을 말함.
- 이 DOM은 자바스크립트를 통해서 동적으로 변경을 할 수  있음.
- 웹 화면에 보이는 요소를 조작하기 위한 기능으로 가득찬  라이브러리 덩어리.
- DOM은 웹 페이지가 HTML 페이지를 인식하는 방식을 말함.
- 웹 브라우저가 HTML 페이지에 접근하는 방법을 정의한 API임.
- DOM에서 제공하는 일반적인 기능을 여러 개의 DOM 객체로 나누어 구성하고 있음.
- DOM은 정의부분(명세서)과 구현부분으로 나뉘어져 있음. 
    정의부분인 명세서에는 웹 페이지 문서를 조작할 때 지켜야 할 약속(규칙, 규약)이 명시되어 있는 문서일 뿐 실제 동작하는 구현 소스 코드는 전혀 존재하지 않음. 
    텅 빈 상자와도 같음. 
    이 명세서를 만드는 곳이 바로 웹 관련 표준을 정의하는 협회인 W3C임. 
    구현 부분은 바로 웹 브라우저 내부에 존재함.
- 브라우저 제작사(IE, Chrome, FireFox, Safari 등등)는 DOM에 명시되어 있는 인터페이스에 맞춰 자신들만의 특화된 고유 기술을 이용해 독자적으로 기능을 구현함.
- 눈에 보이지는 않지만 사실 브라우저에 출력된 웹 페이지는 온통 DOM 객체로 구성되어 있음.
- 자바스크립트 코드에서는 동적인 HTML을 만들어내기 위해  DOM 객체에 접근하여 조작을 하게 됨.
      
- 문서 객체 : 자바스크립트에서 이용할 수 있는 객체.
   * 노드 : - HTML 웹 페이지 구성 요소의 가장 작은 단위를 말함.
          - 문서를 이루는 모든 요소를 통합해서 부르는 용어.
                           즉, HTML 페이지의 각 요소(태그)들, 주석도 노드에 속함.
          - 브라우저는 이런 노드로 가득찬 웹 페이지를 읽어들여 해석을 한 후,
                           각 노드에 접근하여 제어할 수 있는 DOM 객체를 생성함.
   * 요소(element) : <시작태그> 텍스트 </끝태그>
   * 텍스트 노드 : 요소 안에 있는 글자. innerHTML과 관계가 있음.
   
- 노드, 수타일, 속성, 이벤트, 위치 및 크기들을 다룰 수 있는 다양한 기능이 포함되어 있음.

- 보통 DOM 방식은 트리 구조임. 
    브라우저가 웹 페이지를 처리하는 과정을 살펴보면먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하고자 HTML 웹 페이지를 읽은 후 파싱 단계를 거침. (파싱: 잘라내기)
    이 후 DOM 객체로 변환(트리구조) 후 화면에 출력을 함.

- 예를 들어 웹 페이지에 <img src="test.jpg"> 태그 노드가 있다면 브라우저에 의해 HTMLImageElement라는 DOM 객체가 생성이 됨. 
     이 객체는 다른 DOM 객체와는 다르게 이미지를 읽어들이는 특별한 기능이 있어서 실행 시에 "test.jpg" 라는 외부 이미지 파일을 읽어 들이게 됨. 
     즉, 문서 상의 노드는 "브라우저이군. 이 노드를 보고 알맞은 DOM 객체를 생성해 주세요" 라는 의미일 뿐, 모든 작업은 이제 브라우저에서 만들어낸 DOM 객체로  처리를 하게 됨.
- DOM 객체가 생성되는 순서를 자세히 살펴 보면, 웹 브라우저는 가장 먼저 최상위에 해당하는 HTMLDocument 클래스의 객체를 생성함. 
    이후에 생성되는 모든 DOM 객체는 HTMLDocument 객체의 자식 객체로 만들어짐.
*/


/*
브라우저가 웹 페이지를 처리하는 과정
1. 웹 페이지 읽기
  - 먼저 브라우저는 HTML 페이지를 읽음.

2. 파싱 단계
  - 이어서 파싱(parsing) 단계를 거쳐서 웹 페이지 내용을 해석하게 됨.
          이 때 작성한 마크업 태그와 1:1 매칭이 되는 DOM 클래스 객체를 생성하게 됨.
          이렇게 생성된 객체는 저마다 고유한 기능을 하게 됨.
  - 좀 더 자세하게 설명을 한다면 웹 브라우저가 HTML 페이지를 읽을 후 파싱 단계에서
    <div> 태그를 만나게 되면 HTMLDivElement 라는 클래스의 인스턴스(객체)를
          생성하게 되고, <img> 태그를 만나면 HTMLImageElement 라는 클래스의 인스턴스를 생성하게 된다는 의미임.
          
3. 출력
  - 마지막으로 웹 브라우저는 생성한 DOM 객체를 가지고 우리가 보고 있는 웹 페이지 화면을 만들게 됨.
*/

/*
DOM을 공부하면서 알아야 할 내용
1. 노드 다루기
   - 문서에서 특정 태그 이름을 지닌 노드 찾기
   - 특정 노드의 자식노드에서 특정 태그 이름을 가진 노드 찾기
   - 문서에서 특정 클래스가 적용된 노드 찾기
   - 문서에서 특정 아이디를 가진 노드 찾기
   
   - 자식 노드 찾기
   - 부모 노드 찾기
   - 형제 노드 찾기
   
   - document.createElement() 메서드를 사용해서 노드 생성 및 추가하기
   - HTMLElement.innerHTML 프로퍼티를 사용해서 노드 생성 및 추가하기
   - Node.cloneNode() 메서드를 사용해서 노드 생성 및 추가하기
   - 노드 삭제하기
   - 노드 이동시키기
   
   - 텍스트노드 생성 및 추가하기
   - 텍스트노드 내용 변경하기
   
2. 스타일 다루기
   - 스타일 속성 값 구하기
   - 스타일 속성 값 설정하기
   - 스타일 속성 제거하기

3. 속성 다루기
   - 속성 값 구하기
   - 속성 값 설정하기
   - 속성 값 제거하기

4. 이벤트 다루기
   - 이벤트 리스너 추가하기
   - 이벤트 리스너 삭제하기
   - 이벤트 발생시키기
   - 사용자 정의 이벤트 만들기
*/

 

<!-- 웹 요소에 접근한다..
웹 문서의 특정한 선택자에 접근하는 방법
1. querySelection() : 선택자 하나에 접근하는 방법 (@개발자모드 콘솔창) 
       형식) document.qureySelector(선택자)

2. querySelectAll() : 여러개의 선택자에 접근하는 방법
       형식) document.querySelectorAll(선택자)
       
querySelector(선택자).innerText
==> 웹 브라우저 창에 보이는 내용을 가져옴

querySelector(선택자).innerHTML
==> 요소 안에 있는 태그와 내용을 함께 가져옴

querySelector(선택자).textContent
==> 요소의 내용을 가져오되, 소스에 있는대로 가져옴

정리하자면 웹 요소의 내용을 가져올 경우에는 innerText나 textContent 프로퍼티를 사용하면 되고
요소안에 있는 태그까지 같이 가져올 경우에는 innerHTML 프로퍼티를 사용한다.
 -->

<!--
자바스크립트에서 스타일 변경하는 방법
형식) 요소.style.속성명 (단, css의 - 는 붙이지 않고 대문자로 camelCase로 씀)
 --> 

let title = document.querySelector("#title");

let name = document.querySelectorAll(".user")[0];

let name = document.querySelectorAll(".user");

for(let i=0; i<name.length; i++) {
		name[i].style.border = "3px solid blue";
}




title.onclick = () => title.innerText = "프로필";

name.onclick = () => {
name.innerHTML= "<b>이름: 미레도<b>";
name.style.color = "blue";
name.style.backgroundColor = "yellow"; 
}

// form 태그에 있는 특정 요소에 입력된 값을 가져오는 방법
// 형식) document.폼이름.name이름.value