저번 시간 수업 복습
웹브라우저에 이벤트라는 개념이 도입되면서 동적으로 더 활용하게 됐다고 보면 된다.
브라우저에서 웹페이지를 불러오는 것.
어떤 링크를 클릭하는 것.
ㄴ 이런 것들을 이벤트라고 할 수 있는데
사용자가 웹문서를 이렇게 벗어나서 브라우저의 제목 표시줄을 클릭한다.
이거는 이벤트가 아니다.
웹페이지안에서 일어나는 모든 동작들을 이벤트라고 표현할 수 있지만 모든 것들이 다 이벤트가 되는 것은 아니다.
마우스나 키보드를 사용 웹페이지 불러오거나 폼에다가 내용 입력하는 것들을 이벤트라고 보면 된다.
이벤트를 가장 빠르게 하는 것
태그 on 이벤트명 = 함수명
이게 이벤트를 처리하는 방법이라고 보면 되고
DOM을 이용한 이벤트 처리한 방법도 해봤다.
웹요소.on이벤트명 = 함수
오늘 수업 시간
웹요소에 이미지라는 객체에 src라는 속성을 활용해보겠다
객체를 하는데 타입을 살펴보자
배열로 만든 자료형은 타입을 살펴보면 object
그래서 배열도 하나의 객체가 되고요 > 실제로 존재하는 사물을 객체라고 표현한다고 보면 되고
자바스크립트에서 객체는 데이터와 그 데이터에 접근하고 조작하는 방법을 정의하는 자료 구조입니다.
객체는 키-값 쌍으로 이루어진 속성들을 포함하며, 이러한 속성은 객체의 상태를 나타냅니다. 객체는 함수도 포함할 수 있으며, 이러한 함수를 메서드라고 합니다.
| 객체 | 실제로 존재하는 사물 |
| 특징 | 이름과 값으로 구성된 속성을 한다. |
| ex | 강아지 이름 : 구름 (구체적으로 나온 속성) 나이 : 7살 (구체적으로 나온 속성) 취미 : 산책하기 (강아지가 하는 동작인 메서드) 기타 : 밥 잘 먹음 (강아지가 하는 동작인 메서드) |
date라는 객체가 가진 여러가지 속성 중에서 필요한 것을 가져다 쓴다.
객체 안에 다양한 속성과 메서드를 가지고 있따. 이런 것들을 내장객체라고 표현한다.
객체를 하나 만들때
객체명을 쓰고 중괄호로 시작 그리고 키랑 값을 넣어준다.
ex)
강아지 = {
이름(key): '구름'(값)
나이: 7(속성)
}
만약에
이름이란 속성이 필요하다
그러면,
강아지(객체명).이름(속성)
이렇게 출력해주면 된다
메서드는 어떻게 해야하나? 함수로 표현을 한다.
ex)
산책 >> function(어느 장소를 산책할 지 (장소)) { }
먹다 >> function(food) { }
강아지.eat()
객체에 eat이라는 메서드를 실행하겠다고 보면 된다.
선언만 하고 속성을 추가하는 것을 배웠다.
그럼 이름을 지우고 싶다 하면 delete pet.나이 를 쓰면 된다.
그랬더니 나이는 제거 됐고 이름만 확인 해볼 수 있게 됐다.
객체를 만들고 속성이나 이런 것들을 추가하고 delete 이정도만 파악하기
GPT에게 물어본 결과
person 이라는 객체 . 속성을 나타냄
person이라는 세이 헬로!라는 메서드!
속성은 눈에 보이고 구체적인 것(정적)
메서드는 눈에 보이지 않고 추상적인(동적)
따라서 객체를 사용하면 관련된 정보와 동작을 묶어서 표현할 수 있어 코드를 조직하고 유지보수하기 쉽게 만들어 준다.
객체는 참조하는 형태로 만들어줘야 한다.
그래서 new 예약어를 넣고 이용해서 만든다.
내장 객체를 활용하실 때는 객체는 인스턴스로 만들어서 변수에 저장해서 사용을 한다.
이렇게 기억하고 앞으로 작업을 진행하면 된다.
나이나 접근하는 게 아무데서나 접근 가능하다. (let의 nme을 pet)
GPT 정리
자바스크립트에서 객체를 만든다는 의미는
애네를 활용하려고 표현했기 때문에 객체만들고 제어하는 건 없었다
만들어 놓은 거는 언제든지 썼던 것처럼 하나의 객체에 속성이나 메서드가 필요하다는 것을 얼마든지 작업해놓고 가져다 쓸 수 있는 걸로 보면 된다.
new라는 예약어를 이용해서 하는 이유 살펴보기
씨 샘플을 출력하면 샘플의 속성이 만들어진 게 아니다
그래서 기본 자료형이라는 하는
넘버 스트링 불린이 있는데 이것들은 객체로 선언하고 싶다.
뉴 를 내장객체를 인스턴스로 선언해서 할 때 뉴라는 키워드를 사용하는데
뉴라는 키워드는 일반적인 자료형을 객체로 변환해서 사용하고 싶을 때 사용하는 키워드이다.
자료를 객체로 선언할 때 뉴라는 키워드를 사용한다고 보면 된다
f만들었으니까 샘플이라는 게 추가 됐음
270 이라는 값이랑 샘플 10이라는 값이 출력되겠죠
에프로 출력하면
값만 들어가 있는 거라서
매체에 값만 들어가 있는 것을 출력할 때는
new 생성할 때 매개변수로 속성 이름이랑 값을 같이 줄 수는 없나?
넘버라는 데이터형이 속성이나 키를 갖지 않음
기본 자료형을 봤을 때
데이터 종류에 스트링이랑 넘버라는 거는 그냥 스트링이다 문자다 그런 것만 할당이 되는 거지
애는 무슨 키다. 이런 종류를 할당하지 않는다.
일반적인 자료인데 객체로 변환시켜서 지금처럼 이름 값도 갖고 속성도 가질 수 있게 변환시키겠다고 하는데 new 키워드를 사용해서 만든 것
pet이라는 객체를 만든 거고 (객체를 생성할 때의 방법)
객체를 만들고 그 밑에 속성 이름이랑 값을 나열하는 것 (넘버와 스트링 불린은 가장 기본 자료형)
넘버라고 된 기본 자료형에 나는 속성등을 추가할 수 있는 객체로 자료형을 변환시키고 싶을 떄 new라는 키워드를 사용한다고 이해하면 되고
내장객체라는 것을 사용할 때 내장객체 속성을 불러와서 사용하면 된다.
일단 기본 자료형을 객체로 변환시키는 거다. 객체로 선언하는 거다
그래서 속성을 가질 수 있는 거로 변환을 시키는 거라고 생각하는 게 제일 좋을 것 같다.
넘버 객체에서 사용하는 메서드를 살펴보도록하기
자바스크립트에서 주로 사용되는 내장객체에 해당되는 것을 살펴보자
그중 가장 많이 활용되는게
Array (이 내장객체는 항상 첫 글자가 대문자로 되어 있다.)
그중 가장 많이 활용되는게
Array를 사용하지 않았지만 넘버라고 배열을 선언한 후 값을 선언
확인: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
Array - JavaScript | MDN
다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다.
developer.mozilla.org
이런식으로 배열을 합치는 방법을 활용한다.
let chars1 = chars.push("e", "f"); > 추가되는 push
let chars2 = chars.unshift("0", "1"); > 맨 앞에 추가되는 unshift
char1, char2 출력하면 배열 개수가 나온다.
마지막 , 첫번째 요소 꺼내는 방법
원래 배열 > 0,1,a,b,c,d,e,f
.pop() f를 꺼낸 후 배열 >0,1,a,b,c,d,e
.shift() 0를 꺼낸 후 배열1,a,b,c,d,e
N부터 마지막까지 제거하는 방법
(교수님께 피드백 요청)
(수정 후)
원래) 넘버스 값: 0,1,1,2,3,4,5
제거된 값) 인덱스:1,2,3,4,5
삭제된) 넘버스 값: 0,1
인덱스는 제거된 값이다 그래서 2부터 마지막 값을 삭제한 값을 나타낸 것이고
실제 넘버스의 값은 0, 1 이 된 것이다.
넘버스 값: 9,8,1,2,3,4,5
인덱스:8
넘버스 값: 9,1,2,3,4,5
인덱스 1 부분인 8을 1 (한개)만 삭제해라.
yyyy - mm - dd/ yyyy / yyyy - mm
mm/dd/yyyy
yyyy-mm-ddTHH
43일수가 나왔다
Math.random()
브라우저와 관련된 객체
window
document
navigator
history > 방문 기록 객체
location > 현재 페이지 URL 관련된 정보가 담김
screen > 스크린 현재 사용하는 화면에 대한 정보가 담겨 있다
윈도우라는 객체 내에는 프로퍼티도 있는데
우리가 거기에서 사용한 게 뭐다?
alert라고 안하고
window.alert()
가 된다. 윈도우라는 객체에 사용
array() 객체를 만들었는데
a = new array()
a.push
이런식으로 표시를 한다.
문서객체 모델(DOM)
html, head 를 요소라고 불렀다 (= 문서 객체 조작)
자바스크립에서 문서 객체를 조작한다는 말은 html입장에서는 요소를 조작하는 거라고 보면 된다.
객체 조작을 하는 여러가지 라이브러리들이 많음 그래서 객체 조작할 때 조금 더 편안하게 쓸 수 있다.
제이쿼리, 리액트. 제이쿼리는 라이브러리고 리액트는 프레임워크라고 부름
그런 것들이 리넘 누서 객체를 조작하는 것들을 더 쉽게 조작할 수 있게 만들어준다.
우리는 지금 js에서 조작하는 것을 배우고 있고 DOM에 접근할 때 이런 방법이 이벤트리스러니 하고 또 뭐가 있었나요?
querySelector 이런 것들도 설명 해드렸고 테스트도 해봄
class 나 id로 스타일을 구분된 선택자를 가지고 DOM에 접근할때는
getElementByld() (아이디명을 쓰면된다) >> 중복되지 않은 및 유일한 이름
getElementByClassName() (클래스명을 쓰면된다) >> 중복가능
이렇게 이용한다
반환되는 값이 2개 이상일 수도 있을때
요소명(div).getElementByClassName()
이렇게 사용한다
어느 요소에 있는 클래스네임에 해당하는 객체를 가져와라는 뜻
클래스명을 넣어주면 그 클래스명을 가지고 있는 모든 요소를 찾아오게 된다고 보면 된다.
태그 이름으로 접근하는 방법
요소명.getElementsByTagName()
특정 조건에 해당하는 모든 요소를 간단하게 선택하고 조작할 수 있는 성능입니다. 특히 특정 요소의 요소에 스타일을 적용하거나 이벤트를 처리하는 등의 작업을 할 때 유용합니다.
querySelectorAll 애네가 반환되는 위치가 조금씩 다르다
querySelector(#선택자) >>아이디
querySelector(/.선택자) >>클래스
클래스는 여러개있는데 .클래스명을 쓰면 여러개 중에서 첫 번째 요소만 반환이 되고 모두 가지고 오고 싶을 때는
querySelectorAll(선택자 또는 태그)를 넣으면 된다
클래스 네임이나 태그네임 애네들을 찾아서 가지고와서 변수에다가 저장할 수 도 있고 특정한 요소 p, a와 같은 HTML에 해당하는 요소를 가지고 올 때는 애네들을 쓴다.
조건문이나 반복문이나 변수의 개념 상수의 개념 이런 것들은
모든 프로그램의 기본적으로 사용되기 때문에
이벤트 발생할 다음에 나는 h1의 객체를 이렇게 조작하겠다는 것
h1을 여러가지 하고
셀렉터All로 바꿔도 안된다.
header 배열은 아닌데 배열처럼 쓰인다.
h1이라는 것을 여러가지로 나온 거 > 배열처럼 읽어들여야해서 반복시켜야한다
for each 라는 메서드를 이용한다.
이렇게 여러개를 가져오게 된다.
쿼리는 어떻게 들어가냐 (사진 찍어놓음 수정하기)
노드.querySelector(#선택자 /.선택자)
글자 조작하기
문서객체.textContent
문서객체.innerHTML : 입력된 문자열을 HTML 형식
이런식으로 글자 조작하는 법을 알아볼 수 있다.
단편적으로 실행된 것을 확인!
스타일 조작하기
스타일을 조작 할 때는 대표적으로
background-color : css
이 컬러는 css에서 썼다.
js에서는 스타일 속성을 줄 때 백그라운드컬러 (하이픈 없이 대문자로 씀) (backgroundColor)
textAlign 같은 경우에도 하이픈이었다면 여기에서는 이런식으로 쓸 수 있다고 보면 된다.
객체.style.backgroundColor
이런 형태를 더 많이 사용한다.
<js>
백틱을 쓰는 이유 문자 리터럴로 가지고 오고자 할 때
val이라는 값이 변수처럼 바꾸면서 쓰고자 할 때 > 문자열로 들어오는 게 아니라 index가 변화하는 원리는 곱하기 10 때문에
인덱스 값에 곱하기 10을 하니까 첫번 째 div에서는 백그라운드 컬러가 0,0,0이 된다 검은색
두번째 한바퀴 돈다 두번째는 10,10,10이 됨 (이걸 표현하려고 함)
Css에서 얼마든지 처리 가능한 것들이 자바스크립트에서는 어떻게 가져와서 어떻게 처리하는지를 보여드리고 있는 것
html 내에 있었던 div를 생성되는 어떤 요소나 노드들을 가지고 오는 것을 해봤다면
JS에서 문서객체를 생성해보기
문서에서 (생성할 문서 객체 이름을 넣기)
document.creatElement(문서 객체 이름)
이렇게 했는데 안나옴 그래서
(생성을 시키고 난 다음에 이 생성된 것을 배치해줘야한다)
부모 객체를 쓰고 자식 객체를 넣어줘야한다.
부모객체.appendChild(자식객체)
이렇게 나옴 생성만 하고 끝나는 게 아니라 생성되고 난 다음에 배치 " document.body.appendChild(header);" 까지 해줘야한다.
그다음에는 객체를 이동시키는 작업도 할 수 있다.
이동 된 장면!
이런 식으로 이동되는 것을 확인 할 수 있다.
append를 시켜야 완벽하게 생성된다.
함수를 표현하는 방법은 말씀드린 이유 중 하나는 아주 기본적인 fuction해서 만들겠다 함수 이렇게 함수를 만듦 (이게 가장 기본)
여기에서 여러번 반복하거나 이게 아닌 간단하게 내가 함수로 뭔가 표현을 하고자 할 때 사용하는 방법이 익명함수, 기명
이름이 없는 함수를 사용했다.
이렇게 화살표 함수 간단하게 쓰는 것
이런 거 없이 fuction이라는 키워드 이런 거 넣고 싶지 않아요
그럴 때는 그냥 매개변수 입력받을 수 있는 괄호와 이런 형태로 하면 함수명도 없이
나는 그냥 toFirst라는 함수로 실행을 해주는 것 ( 간단하게 선언하는 함수라고 보면된다)
함수를 사용하는 방법은 개발자마다 다르게 선호하지만 안전이나 보안적인 측면에서는 익명함수를 쓰시는 게 바람직하다.
문서 객체에 해당하는 것들을 불러들여서 자바스크립트에서 가져와서 처리하는 방법들을 몇 가지 살펴봤다.
클론코딩 > 사실 책 보면서 처리하면 충분히 이해할 수 있다.
그러니까 클론코딩 한번 실행해보기
스크립트에 관련된 기본적인 문법이 다 나와 있고
자바스크립트에 대한 것을 완전히 마무리 설명을 드리지 않음
문서 객체 모델하고 이벤트쪽 조금 더 설명 드리고 클론코딩 하는 방법 같이 해보고
>> 수요일날 유인물로 나눠드리고 DOM API 우리가 했던 것들이 요약돼서 나온다
Event:Listener에 대한 부분만 설명되어 있는데
클래스리스트 애드 하는 거 리무브시키는 거 같이 해보도록 한다.
for each불러와서 함수 몽땅 불러와서 배열 형식으로 불러온다고 말씀 드림
그래서 함수추가해서 반복하는 것들 콘텐츠에 추가하는거 textContent 도 나왔고
배열을 가지고 조각하는 거에 reverse, join 하지 않았는데 같이 해볼 예쩡이다.
교재에 있는 거 일단 위주로 하시고 추가되는 부분은 유인물로 나눠드리고 조금 더 마무리한 후에 예상문제랑 같이 나눠드림
20일날 종료(15일 마무리 20일 시험 및 클론코딩)
// const pet = {
// name: "구름",
// eat: function (food) {
// alert(this.name + "이는 " + food + "을 먹는다");
// // 자기 이름에다가 나는 동작을 할 거다
// },
// };
// pet.eat("밥");
// console.log(JSON.stringify(pet, age, 3));
// const pet = {};
// // 객체를 선언만 하고 추가를 한다
// pet.이름 = "구름";
// pet.나이 = 7;
// delete pet.나이;
// console.log(JSON.stringify(pet));
//내장객체에 now라는 변수를 넣어서 참조할 수 있게끔 만들어 준다
// let now = new Date(); //객체의 인스턴스를 만든다
// document.write(now);
// document.write(pet.이름);
//number라고 배열을 선언함 각각의 값을 가지고 있다고 선언함
// let numbers = [1, 2, 3, 4, 5];
// let chars = ["a", "b", "c", "d"];
// for (let i = 0; i < numbers.length; i++) {
// document.write("<p>" + numbers[i] + "</p>");
// }
// let numChars = numbers.concat(chars); // 넘버 객체랑 콘캣해서 합쳐줌
// document.write(numChars);
// let chars1 = chars.push("e", "f");
// let chars2 = chars.unshift("0", "1");
// document.write("<p>" + chars + "</p>");
// document.write("<p>" + chars1 + "</p>");
// document.write("<p>" + chars2 + "</p>");
// document.write(chars.pop() + "를 꺼낸 후 배열 >" + chars + "<br>"); //마지막 요소를 꺼낸다
// document.write(chars.shift() + "를 꺼낸 후 배열" + chars + "<br>"); //맨앞 요소를 꺼낸다
// let num = numbers.unshift(9, 8);
// //numbers라고 된 배열에 splice 인덱스값을 지정하다
// // document.write(numbers.splice(2)); //2까지 지워져있음
// document.write("<p> 넘버스 값: " + numbers + "</p>");
// newNumbers = numbers.splice(1, 1);
// document.write("인덱스:" + newNumbers);
// document.write("<p> 넘버스 값: " + numbers + "</p>");
// //인덱스가 2번인 요소부터 마지막까지 삭제하겠다.(다른결과가 나옴)
// // 날짜!!!
// let now = new Date();
// let firstDay = new Date("2023-10-01");
// let toNow = now.getTime(); //오늘까지 지난 시간
// let toFirst = firstDay.getTime();
// let passTime = toNow - toFirst;
// passTime = Math.round(passTime / (1000 * 60 * 60 * 24));
// //1분, 1시간, 하루
// document.write(passTime);
// 윈도우라는 객체를 활용
// window.open("2023-11-13속성메서드\transition.html", "notice", "width:500");
// 첫번째 상대 경로 복사
// 두번째 인수가 창에 이름이 들어가는데 공백으로 두고
// 세번째 인수는 창의 옵션을 지정해서 왼쪽 위 넓이 위치를 지정 크기 지정
// document.addEventListener("DOMContentLoaded", () => {
// const header = document.querySelectorAll("h1");
// alert(header.length);
// header.forEach((header) => {
// header.textContent = "HEADERS";
// header.style.color = "white";
// header.style.backgroundColor = "black";
// header.style.padding = "10px";
// });
// -------------------------------------글자 조작
//하나만 가져올 때 쿼리셀레터를 쓰면됨
// const a = document.querySelector("#a");
// const b = document.querySelector("#b");
// a.textContent = "<h1> textContent 속성 </h1>";
// b.innerHTML = "<h1> innerHTML 속성 </h1>";
//---------------------스타일 조작
// const divs = document.querySelectorAll("body > div");
// divs.forEach((div, index) => {
// console.log(div, index);
// const val = index * 10;
// div.style.height = `10px`;
// div.style.backgroundColor = `rgba(${val},${val},${val})`;
// });
// const header = document.createElement("h1");
// header.textContent = "HEADERS";
// header.style.color = "white";
// header.style.backgroundColor = "black";
// header.style.padding = "10px";
// document.body.appendChild(header);
// });
//---------------------------객체이동
document.addEventListener("DOMContentLoaded", () => {
const divA = document.querySelector("#first");
const divB = document.querySelector("#second");
const h1 = document.createElement("h1");
h1.textContent = "이동하는 h1";
const toFirst = () => {
divA.appendChild(h1);
setTimeout(toSecond, 5000);
//타이머함수(함수,시간) , setTimeout 특정한 시간 뒤에 앞 함수를 한 번 호출한다는 뜻
//setInterval 특정한 시간마다 함수를 호출한다.
//어느정도 시간이 흐르고 다음 거를 동작할 때 이 타이머 함수를 이용한다고 보면 된다.
};
const toSecond = () => {
divB.appendChild(h1);
setTimeout(toFirst, 5000);
};
toFirst();
});
//배경색만 짝수일 때와 홀수일 때 다르게 지정하는 방법
//글자조작하는 방법'프론트엔드 > JavaScript' 카테고리의 다른 글
| 11/15 클론코딩 시작전 기초 연습 (0) | 2023.11.15 |
|---|---|
| 이미지클릭시 (0) | 2023.11.06 |
| 이벤트(events), DOM(script 위치, defer속성이용), 콜백함수(addEventListener) (0) | 2023.11.06 |
| a부터 b까지 값을 구해보기 (0) | 2023.11.06 |
| 매개변수, 인수, 익명함수, 기명함수, 자기호출함수, 화살표함수 (0) | 2023.11.06 |