자바스크립트 - 06

월요일좋아·2022년 10월 25일

jquery js

JavaScript

목록 보기

6/6

study05

...

프로젝트 : study06

객체 알아보기

객체(object)란?

프로그램에서 인식할 수 있는 모든 대상
데이터를 저장하고 처리하는 기본 단위

자바스크립트 객체

자바스크립트 안에 미리 객체로 정의해 놓은 것

문서 객체 모델(DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 텍스트 필드 등을 모두 별도의 객체로 관리
브라우저 관련 객체 : 웹 브라우저 정보를 객체로 관리
내장 객체 : 웹 프로그래밍에서 자주 사용하는 요소를 객체로 정의해 놓음

사용자 정의 객체

-필요할 때마다 사용자가 직접 만드는 객체

객체의 인스턴스 만들기

객체는 객체 자체가 아니라 인스턴스 형태로 만들어서 사용
인스턴스 : 객체를 틀처럼 사용해서 같은 모양으로 찍어낸 것
new 객체명

ex) Data 객체의 인스턴스를 만들어서 날짜와 시간 표시하기

var now = new Date(); -- Data 인스턴스 만들고 변수에 저장하기 --
document.write("현재 시각은" + now);

내장객체 - Array 객체

배열 만들기

초깃값이 있는 경우( 추천 )

var numbers = ["one", "two", "three", "four"];	// 배열 선언
var numbers = Array("one", "two", "three", "four"); // Array 객체를 사용한 배열 선언

Array 객체의 메서드

///////////////////////////////////////////////////////////
concat 등... 책 참고!///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////

내장객체 - Date 객체

///////////////////////////////////////////////////////////
new Date
new DAte("2020-02-25")
new Date("2020-02-25T18:0:00")등... 책 참고!///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////
getFullYear 등... : 날짜,시간,정보 가져오기<<----- 많이사용함
getMonth() : 주의? 0부터 시작함 (0~11)
getDate() : 주의? 1부터 31까지임(1~31)
getDay() : 주의? 0부터 시작함 (0~6) + 0이 일요일임.
getTime() : 거의 안씀
getHours() getMinute(), getSeconds() : 사용함
getMilliseconds() : 거의 안씀

study02.js : Date 객체 실습

-- Date 객체 실습 --

console.log('----- Date 객체 사용하기 -----');

let now = new Date();

console.log(now);   // 현재 시간이 아닌 다른 시간이 나옴
console.log(now.toLocaleString());  // 현재 내가 있는 지역의 시간으로 변환시켜서 나옴 2022. 10. 7. 오전 10:19:31
console.log(now.toString());    // 전체출력됨 : Fri Oct 07 2022 10:19:31 GMT+0900 (대한민국 표준시)
console.log(now.getFullYear()); // 2022
console.log(now.getUTCFullYear());  // 2022

console.log(now.getMonth());  // 9 (월은 0부터 시작 -> 10월 = 9)
console.log(now.getDate());  // 7 (일은 1~31)
console.log(now.getDay());  // 5 (요일은 0~6, 0이 일요일)

console.log(`현재 시간 : ${now.getHours()}`);  // 10
console.log(`현재 UTC 시간 : ${now.getUTCHours()}`);  // 1
console.log(`현재 분 : ${now.getMinutes()}`);  // 22
console.log(`현재 초 : ${now.getSeconds()}`);  // 5

내장객체 - Math 객체

Math 객체의 특징

수학 계산과 관련된 메서드가 많이 포함되어 있지만 수학식에서만 사용하는 것은 아님
무작위 수가 필요하거나 반올림이 필요한 프로그램 등에서도 Math 객체의 메서드 사요함
Math 객체는 인스턴스를 만들지 않고 프로퍼티와 메서드 사용

Math 객체의 메서드

floor( )
max( )
min( )
random( )
round( )

위 5개 정도의 메서드만 자주 사용

study02.js : Math 객체 실습

-- Math 객체 실습 --

console.log('\n----- Math 객체 사용하기 -----\n');

console.log(`PI : ${Math.PI}`);

let result = 10 / 3;
console.log(`10 / 3 을 그대로 출력 시 ${result}`); // 3.3333333333333335
console.log(`10 / 3 의 소수점 올리기 : ${Math.ceil(result)}`); // 4
console.log(`10 / 3 의 소수점 버리기 : ${Math.floor(result)}`); // 3
console.log(`5.5에 대한 반올림 : ${Math.round(5.5)}`); // 6
console.log(`5.4에 대한 반올림 : ${Math.round(5.4)}`); // 5

console.log(`매개변수 중 최대 값 선택하기 : ${Math.max(10, 20, 30)}`);  //결과 : 30
console.log(`매개변수 중 최소 값 선택하기 : ${Math.min(10, 20, 30)}`);  //결과 : 10

로또번호 생성 실습

// random : 0.0 ~ 0.9 까지의 숫자를 발생
console.log(`랜덤 숫자 발생 : ${Math.random()}`);

// 문제1) Math.random() 를 사용하여 로또 번호 생성 프로그램을 작성하세요.
// Math.round(Math.random() * 45)
// 풀이
let lotto = [];

for (let i = 0; i < 7; i++) {
    const rnd = Math.round((Math.random() * 45) + 1);

    for(let j = 0; j < i; j++) {
        if(rnd == lotto[j]) {
            i--;
            break;
        }
        lotto[i] = rnd;
    }

    if(i == 0) {    // 무조건 한번 실행
        lotto.push(rnd);
    }
}

브라우저 관련 객체

window : 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다.
document : 웹 문서마다 하나씩 있으며 <body>태그를 만나면 만들어진다. HTML문서의 정보가 담겨있다.
history :
location :

window 객체의 프로퍼티

localStorage : 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환합니다.
sessionStorage : 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환합니다.
ScrollX : 스크롤했을 때 수평으로 이동하는 픽셀 수를 나타냅니다.
ScrollY : 스크롤했을 때 수직으로 이동하는 픽셀 수를 나타냅니다

window 객체의 메서드

alert() : 알림 창을 표시합니다.
scroll() : 문서에서 특정 위치로 스크롤합니다.
confirm() : [확인], [취소] 버튼이 있는 확인 창을 표시합니다.
prompt() : 프롬프트 창에 입력한 텍스트를 반환합니다.
open() : 새로운 창을 엽니다.

navigater 객체

사용하는 브라우저가 많아지고, 웹 어플리케이션이 등장하면서 navigater 객체에 여러 프로퍼티가 등장하고 있음.
일부 브라우저에서만 지원하는 프로퍼티도 있음
모바일 app : 1. 네이티브, 2. 하이브리드, 3. 웹 앱 -> 2, 3번이 모바일 웹.
프로퍼티와 메서드
//////////////////////////////////////

history 객체

방문한 사이트 주소가 배열 형태로 저장됨

메서드
- back() /////////////////////////////////////////
- go()) /////////////////////////////////////////

location 객체

현재 문서의 url 주소 정보가 담겨있음
이 정보를 편집해서 브라우저 창에 열 사이트/문서 지정
프로퍼티
- href: 전체 URL입니다. 이 값을 변경하면 해당 주소로 이동할 수 있습니다.
메서드
- reload() : 현재 문서를 다시 불러옵니다.

문서 객체 모델 알아보기

문서 객체 모델이란

자바스크립트를 이용하여 웹 문서에 접근하고////////수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

DOM 트리

노드 : DOM 트리에서 가지가 갈라져 나간 항목
웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것

DOM 요소에 접근하고 속성 가져오기

getElementsById() 메서드

요소명.getElementById("id명")

getElementsByClassName() 메서드

요소명.getElementByClassName("class명")

getElementsByTagName() 메서드

요소명.getElementsByTagName("태그명")

querySelector() 메서드, querySelectorAll() 메서드

querySelector()는 한 개의 값만 반환
노드.querySelector(선택자)
querySelectorAll() 메서드는 반환 값이 여러 개일때 모두 반환 -> 노드 리스트(배열)로 저장됨
노드.querySelectorAll(선택자 또는 태그)
id 이름 앞에는 해시 기호(#). class 이름 앞에는 마침표(.)

innerText, innerHTML 프로퍼티

웹 요소의 내용을 수정하는 프로퍼티

innerText : 텍스트 내용 지정
요소명.innerText = 내용
innerHTML : HTML 태그까지 포함해서 텍스트 내용 지정
요소명.innerHTML = 내용

study06 - study03.html

<script>
    window.addEventListener('DOMContentLoaded', function () {
      let now = new Date();

      const innerText = document.querySelector('#div01-btn01');
      innerText.addEventListener('click', function () {
        document.querySelector('#current').innerText = now;
      });
      const innerHtml = document.querySelector('#div01-btn02');
      innerHtml.addEventListener('click', function () {
        document.querySelector('#current').innerHTML = `<b>${now}</b>`;
      });
    });
  </script>

</head>

<body>
<div class="container p-4">
  <div id="div01">
    <button type="button" id="div01-btn01" class="btn btn-primary">innerText로 표시</button>
    <button type="button" id="div01-btn02" class="btn btn-primary">innerHtml로 표시</button>

    <h1>현재 시간 : </h1>
    <div id="current">

    </div>
  </div>
</div>
</body>

getAttribute() , setAttribute() 메서드

/////////////////////////////////////////////////////////////

addEventListner

////////////////////////////////////////////////////////////

DOM에서 이벤트 처리하기

DOM의 event 객체

웹 문서에서 이벤트 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 담긴 객체

프로퍼티
- button : 마우스에서 누른 버튼의 키값을 반환
- charCode : keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드 값으로 반환
- target : 이벤트가 최초로 발생한 대상을 반환

this

이벤트가 발생한 대상에 접근할 때 사용하는 예약어

<script>
  var card = document.querySelector("#card");
card.onclick = function(event) {
  alert("클리한 이미지파일 : " +this.src ////////////////////////////

CSS 속성에 접근하기

자바스크립트를 사용해 각 요소의 스타일을 자유롭게 수정할 수 있음.
document.요소명.style.속성명

color 처럼 한 단어인 속성명은 그대로 사용
background-color 등 중간에 하이픈이 있는것은 카멜 명령으로 바꿔야 적용이 됨 (backgroundColor)

/////////////////////////////////////////////
study06 - study03.html

<script>
    window.addEventListener('DOMContentLoaded', function () {
   
      let myRect = document.querySelector('#rect');
      myRect.addEventListener('mouseover', function () {
        myRect.style.backgroundColor = 'green';
        myRect.style.borderRadius = '50%';
      });

      myRect.addEventListener('mouseout', function () {
        myRect.style.backgroundColor = '';  // 컬러 없애기
        myRect.style.borderRadius = '';
      });
    });
</script>

<body>
<div id="rect" style="border: 1px solid black; width: 150px; height: 150px"></div>
</body>

<script>
// ul 태그의 li 태그를 노드 리스트라는 객체의 배열로 반환
  window.addEventListener('DOMContentLoaded', function () {
      let ul = document.querySelectorAll('li');
      console.log(ul);

      for(let i = 0; i < ul.length; i++) {
        console.log(ul[i]); // F12 - 콘솔창에서 확인
      }
    });
</script>

<body>
  <div id="div02">
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>javascript</li>
    </ul>
  </div>
</body>

월요일좋아

이전 포스트