[ HTML + CSS + 자바스크립트] 11.1 ~ 11.4

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

11.1) 객체란

const person = {
  name: ["Hong Gildong"], // 배열
  age: 20, // 숫자
  isAdult: true, // 논리
};

< 객체 >

: 키와 값으로 구성된 속성의 집합

 

- 리터럴 방식 -

: {}을 이용해 객체 생성하는 것

const person = {};

- 빈 객체 -

: 속성이 한 개도 없는 객체

const person = { name: "Hong Gildong" };

- 속성 -

: 키와 값으로 구성

name - 키

Honag Gildong - 값

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  age: 20, // 숫자
  isAdult: true, // 논리
  printInfo: function () {
    console.log("printInfo");
  },
};

< 객체 >

: 객체 안에 또 다른 객체나

함수 들어갈 수 있음

11.2) 객체 속성 다루기

< 객체가 속성에 접근 방법 >

1. 대괄호 연산자

2. 마침표 연산자

const person = {
  name: "Hong Gildong",
  age: 20,
};
console.log(person["name"]); // Hong Gildong
console.log(person["age"]); // 20

1. 대괄호 연산자 >

: [ ] 사용해 객체의 속성에 접근

: 대괄호 안에 키를 넣기

( 큰따옴표/작은따옴표)

: 배열에서도 사용 가능

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  likes: ["apple", "samsung"],
  printHello: function () {
    return "hello";
  },
};
console.log(person["name"]);
// { firstName: 'Gildong', lastName: 'Hong' }
console.log(person["name"]["firstName"]);
// Gildong
console.log(person["likes"]);
// [ 'apple', 'samsung' ]
console.log(person["likes"][0]);
// apple
console.log(person["printHello"]());
// hello
// 함수 호추할 떈 () 사용하므로 뒤에 붙여준다
console.log(person["printHello"]);
// [Function: printHello]

- 속성값 배열, 객체리터럴, 함수 예시 -

const person = {
  name: {
    firstName: "Gildong",
    lastName: "Hong",
  },
  age: 20,
  likes: ["apple", "samsung"],
  printHello: function () {
    return "hello";
  },
};
console.log(person.name.lastName); // Hong
console.log(person.age); // 20
console.log(person.likes[0]); // apple
console.log(person.printHello()); // hello

2. 마침표 연산자

: .를 사용해 객체 속성에 접근

: 객체의 키 식별자에 공백에 있다면

대괄호 연산자로만 접근 가능

(마침표 연산자 사용X)

const person = {
  name: "Hong Gildong",
};
person.name = "kim";
console.log(person.name);

< 객체가 속성에 접근 방법 >

: 키로 속성 접근

const person = {}; // 빈 객체 생성해서 변수에 할당.
console.log(person); // {}
person.name = "Hong Gildong";
console.log(person);
// { name: 'Hong Gildong' }

const person = {}; // 빈 객체 생성해서 변수에 할당.
person.name = {
  firstName: "Gildong",
  lastName: "Hong",
};
person.like = ["apple", "sansung"];
person.printHello = function () {
  return "hello";
};
console.log(person);
//   name: { firstName: 'Gildong', lastName: 'Hong' },
//  like: [ 'apple', 'sansung' ],
//   printHello: [Function (anonymous)]

< 객체 속성 동적으로 추가하기 >

: 객체에 없는 속성이라면,

새로운 속성이 객체에 추가된다.

const person = {
  name: "Hong Gildong",
};
delete person.name; // 또는 delete person["name"]
console.log(person);
// {} 출력

< 객체 속성 동적으로 삭제하기 >

: delete 키워드 명시

11.3) 표준 내장 객체 사용하기

< 문자열 다루는 String 객체 >

const str = "abc";
console.log(str.length);
//문자 개수 세기
// 3

- length 속성 -

const email = "testnaver.com";
if (email.includes("@") === false) {
  console.log("@가 없습니다.");
} // 문자열에서 @가 포함되어있는지 확인
// @가 없습니다.

- includes() 메소드 -

const email = "testnaver.com";
console.log(email.indexOf("t"));
// 특정 문자열이 몇 번째 위치해 있는 지 확인
// 0

const email = "testnaver.com";
if (email.indexOf("@") === -1);
{
  console.log("@가 없습니다");
}
// 특정 문자열이 몇 번째 위치해 있는 지 확인
// 없는걸 찾으려고 하면 -1을 반환을 함. -1이 나오는 거기 때문에
// @가 없습니다

- indexOf() 메소드 - 

const email = "   testnaver.com   ";
console.log(email.trim());
// 공백을 제거할 때 쓰임

- trim() 메소드 - 

: 앞 뒤 공백 제거

 

< 배열을 다루는 Array 객체 >

파괴적 - 원본이 손상된다

비파괴적 - 원본이 손상되지 않는다

const arr = ["a", "b", "c"];
arr.pop();
console.log(arr);

// [ 'a', 'b' ]
// pop이라는 메소드를 호출했더니 원본이 훼손됨

- pop() 메소드 -

: 배열의 맨 뒤에서 데이터를 추출

const arr = ["a", "b", "c"];
arr.push("d");
console.log(arr);

// [ 'a', 'b', 'c', 'd' ]
//pop이라는 메소드를 호출했더니 원본이 훼손됨

- push() 메소드 -

const arr = ["a", "b", "c"];
arr.forEach(function (v) {
  console.log(v);
});
// 매개변수 이름을 지어줌 ( v 라고 지어줬는데 자유롭게 짓기 가능 )
// a
// b
// c
console.log(arr);
// [ 'a', 'b', 'c' ]
// 원본 손상되지 않고 출력됨

- foreach()메소드 -

: 배열안의 요소를 탐색할 때 사용

const date = new Date();
console.log(date);
// 2023-04-09T08:24:31.022Z

< 날짜와 시간을 다루는 Date 객체 >

const date = new Date();
console.log(date.getFullYear());
// 2023

- getFullYear() 메소드 - 

: 연도 출력

const random = Math.random();
console.log(random);
// 랜덤 메소드를 사용하면 임의의 난수가 추출됨
// 0이상 1미만의 난수가 구해진다
// 0이상 1미만의 난수를 이용해서 원하는 범위의 난수를 생성할 수 있다
// 0부터 20 미만의 난 수 구하기 (0~19)
const random1 = Math.random() * 20;
console.log(random1);
// 소수점을 버리는 방법
const random2 = Math.random() * 20;
console.log(Math.floor(random2));
// floor 라는 메소드 사용해서 소숫점 버리기
// 0~ 20까지의 난수를 구하려면 +1을 끝에 해준다.
const random3 = Math.random() * 20 + 1;
console.log(Math.floor(random3));

< 수학 연산을 다루는 Math 객체 >

- Math.random() 메소드 -

11.4)  브라우저 객체 모델 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Window 객체의 속성</title>
  <style>
    /* 웹 브라우저에 스크롤을 생기게 하기 위해 body 태그에 너이, 높이 추가 */
    body{ 
      width:2500px;
      height:5000px;
    }
    /* 스크롤 되어도 버튼이 따라다니게 하기 위해 fixed 속성값 추가 */
    button{
      position:fixed;
      left:10px;
      top:10px; 
    }
  </style>
</head>
<body>
  <button onclick="printInfo()">window 객체 속성</button>
  <script>
    function printInfo(){
      console.log(`웹 브라우저의 너비(innerWidth): ${window.innerWidth}`);
      console.log(`웹 브라우저의 높이(innerHeight): ${window.innerHeight}`);
      console.log(`웹 브라우저 창의 너비(outerWidth): ${window.outerWidth}`);
      console.log(`웹 브라우저 창의 높이(outerHeight): ${window.outerHeight}`);
      console.log(`웹 브라우저 창 위쪽 면과 모니터 사이의 간격(screenTop,screenY): ${window.screenTop}/${window.screenY}`);
      console.log(`웹 브라우저 창 왼쪽 면과 모니터 사이의 간격(screenLeft,screenX): ${window.screenLeft}/${window.screenX}`);
      console.log(`웹 브라우저 창의 스크롤 가로 위치(scrollX): ${window.scrollX}`);
      console.log(`웹 브라우저 창의 스크롤 세로 위치(scrollY): ${window.scrollY}`);
    }
  </script>
</body>
</html>

< window 객체 >

innerWidth와 outerWidth의 차이

: scroll 너비의 포함 유무 

innerWidth - 스크롤 제외

outerWidth - 수직 스크롤도 O

 

innerHeight와 outerHeight도 마찬가지

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>open</title>
  </head>
  <body>
    <button onclick="popup()">팝업</button>
    <script>
      function popup() {
        window.open("popup.html", "팝업", "width=200, height=100");
        // window.open('popup.html', '팝업', 'width=200, height=100, left=400, top=400, titlebar=no, resizable=yes');
      }
    </script>
  </body>
</html>

- window.open() -

: 새로운 창을 오픈할 때

사용하는 메소드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrollTo</title>
  <style>
    body{
      width:5000px;
      height: 5000px;
    }
    div{
      position: fixed;
      top:10px; 
      left:10px;
    }
  </style>
</head>
<body>
  <div>
    <button onclick="sTo()">scrollTo(100, 200)</button>
    <button onclick="sBy()">scrollBy(100, 200)</button>
  </div>
  <script>
    function sTo(){
      window.scrollTo(100, 200);
      // window.scrollTo({left:100, top:200});
    }
    function sBy(){
      window.scrollBy(100, 200);
      // window.scrollBy({left:100, top:200});
    }
  </script>
</body>
</html>

- scroll() -

1. scrollTo

: 한 번에 이동하는 걸 의미

2. scrollBy

: 픽셀만큼 꾸준히 이동

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>scrollToByBehavior</title>
  <style>
    body{
      width:5000px;
      height:5000px;
      background:linear-gradient(#e66465, #9198e5);
    }
    div{
      position:fixed;
      top:10px; 
      left:10px;
    }
  </style>
</head>
<body>
  <div>
    <button onclick="sTo()">scrollTo(4000)</button>
    <button onclick="sBy()">scrollBy(200)</button>
  </div>
  <script>
    function sTo(){
      // window.scrollTo({top:4000});
      window.scrollTo({top:4000, behavior:'smooth'});
    }
    function sBy(){
      // window.scrollBy({top:600});
      window.scrollBy({top:600, behavior:'smooth'});
    }
  </script>
</body>
</html>

behavior

= scroll이 부드럽게 이동함