참고 : css와 js의 차이는 css는 웹사이트가 뜰때 최초디자인만 지원하고 js는 그 이후에 디자인 변화를 줄 수 있다는 차이가 있다.
document.querySelector으로 이미지에 접근하기
방법은 동일하다.
let image = document.querySelector("#Image");
image.src = "http://placehold.it/300x200";
image.width = "300";
image.height = "200";첫 줄과 같이 접근후 image의 속성들을 정의 해주면 된다. src를 html에서 걸어도 되지만 이렇게 js에서 dom으로 접근해서 걸어줄 수도 있다.
mouseover2
전에는 html에 onmouse속성을 넣어 마우스 오버(event)를 걸어주었는데, 이번에는 js에서 mouseover를 하는 방법이다.
방법을 알아보자
let myRect = document.querySelector("#rect");
// 그 태그의 마우스 이벤트 정의
// 사용법 : 선택태그.addEventListener("이벤트명, 함수(){실행문}")
myRect.addEventListener("mouseover", function (){
// 여기에 실행 코드 적기
myRect.style.backgroundColor = "green";
myRect.style.borderRadius = "50%";
});addEventListener("mouseover", function (){})을 이용하면되고 중괄호안에 이벤트가 일어나면 실행되는 코드를 넣어주면 된다.
계속 동작하는 시계
전에는 date인스턴스를 만들어서 시간을 찍는 법을 봤다.
이번에는 계속해서 흘러가는 시계를 만들어보자.
let clock = document.querySelector("#clock");
setInterval(() => {
let date = new Date();
clock.innerHTML = date;
}, 1000);setInterval자동완성을 시키고 중괄호에 date라는 인스턴스를 만들어주면된다. 이걸 화면에 나타나게 하기위해 clock에 innerHTML을 해주어 date를 넣어준다. 마지막으로 중괄호 밖에 ,를 찍고 밀리초 단위로 흘러갈 시간을 넣어주면 된다. 1000을 넣었으니 한번에 1000밀리초 흘러가는걸 보여준다.
전에는 setInteval을 해주지 않아 흘러가지 않는 시간만을 출력했다. 이제는 흘러가는 시간을 보여줄 수 있게 됐다.
chatGPT이용하기
퀴즈를 풀다가 배우지 않은 내용이 나왔다.
여기서 버튼을 누르면 흰 배경이 검은 배경으로 다시 토글을 누르면 흰 배경으로 바뀌도록 하는 문제였다.
<!-- css 넣기 -->
<style>
* {
padding: 0;
margin: 0;
margin: 0 auto;
}
#container {
width: 1200px;
background-color: beige;
margin: 0 auto;
text-align: center;
padding: 20px;
}
button {
width: 100%;
height: 50px;
margin-top: 10px;
font-size: 2em;
}
.dark {
color: white;
background-color: black;
}
.light {
color: black;
background-color: beige;
}
</style>
</head>
<body>
<div id="container">
<h1 id="content">JS classList</h1>
<!-- TODO: 연습문제 : .dark 클래스 있으면 .light 적용하고
없으면 dark 클래스를 적용하세요
-->
<!-- 힌트 : contain(), toggle() -->
<button onclick="setToggle()">토글</button>
</div>
<script src="./js/quiz_11.js"></script>
</body>html에서는 dark와 light클래스에 위와같은 속성들을 주었지만 button태그에는 아무 클래스가 없었다.
배우지않은 내용
- 그래서 나는 태그에 클래스가 을때 그 태그에 클래스를부여하는 js태그가 있는지 궁금했다.
- 또 원래 클래스에서 다른 클래스로 클래스를 바꿀수 있는지도 궁금하였다.
해결방법
구글링을 하면서 방법을 찾았는데 답이 잘안나왔다.
그때 문득 chatGPT가 떠올랐고 질문을 다음과 같이 했다.
https://chat.openai.com/share/5bdce45c-c22e-4fb5-8185-51c14e4c11c6
이렇게 물어보니 챗지피티가 배우지 않은 속성을 잘 찾아주었고 나는 그것들을 이용해서 if조건문을 이용해서 버튼을 누를때마다 색이 바꿀수 있도록 할 수 있었다.
js코드
function setToggle() {
let content = document.querySelector("#content");
if (!content.classList.contains('dark')) {
content.classList.toggle('dark');
}else{
content.classList.toggle('light');
};
};-
먼저 #content의 속성을 바꿔야해서 #content에 접근해주었다.
-
그리고 만약 #content의 속성이 아무것도 없으면 dark속성을 주고싶어 위와 같이 조건을 주었다.
여기서 chatGPT덕에 알게된 속성이 있다. 바로 classList.contains와 toggle(add와 remove도 있다.)이다. classList는 해당태그의 클래스에 접근하는 것으로 contains의 경우에는 괄호안의 이름으로 되어있는 클래스를 포함하는지 확인 할 수있게 한다. 또 toggle은 속성이 있으면 없애고 없으면 속성을 주는 기능이다. (나머지는 유추가능할것이다.)
- 마지막으로 속성이 다크일경우 light속성을 주기위해 else를 위와 같이 주었다.
결과
잘 실행되었다.
느낀점
html, css, js는 속성들이 워낙 많아서 필요한 속성들을 구글링을 잘해야한다. 그런데 이것은 쉬운 일이 아니다. 오늘도 js에서 필요한속성을 구글에서 찾는다고 힘이 들었다. 그런데 챗지피티를 이용하니 단번에 알려주었다. 시간과 노력을 아낀 셈이다.
물론 기본적인 지식이 없다면 물어볼 수가 없으니 기본적인 지식은 필요하지만 이것을 잘 이용하면 코딩실력도 빨리 늘고 코딩도 쉽게 할수 있을거 같다.
필요한 속성을 알고 싶거나, 말로는 설명이 되는데 이걸 코드로 작성하기 어렵다면 chatGPT에게 물어보는것도 좋은것 같다. 물론 여기서 끝나면 실력이 늘지 않을 것이다. chatGPT에게 설명을 해달라고 하면 자세하게 설명을 해주니 왜이렇게 되는지 깨닫고 어떻게 접근하는 것이 좋은지를 파악하는것이 실력향상에 도움이 될거같다.
자식 태그 선택 방법들
바닐라에서는 태그선택이 중요하다
부모 태그 선택 방법은 간단하다.
let ul = document.querySelector("ul");그냥 선택만 해주면된다. 그런데 자식이 여러명일 경우 선택은 완전 귀찮아진다.
자식 태그 선택방법은 여러개가 있다. 그중 몇개를 보자면
자식태그 선택방법
- 쿼리셀렉트all
- id를 일일이 다 넣기
- let two = ul.children[0].함수;
세번째는 처음 보는 것이다.부모태그에 "."을 찍어 "children[번째수].속성"을 넣어주면 선택하여 속성을 입힐수 있다.
let two = ul.children[1].innerHTML;
let three = ul.children[2].innerHTML;배열형태여서 index번호를 넣어주면된다.
새창/새탭 열기/닫기
function openWin() {
myWin = window.open("notice.html", "doit", "width = 400,height = 350");
}
function closeWin() {
myWin.close();
}window는 브라우저에서 지원하는 객체이다.
open함수의 속성자리에 파일의 경로를 넣어주면 되고 그다음 창이름, 크기순으로 넣어주면 된다.
여기서 특이점은 myWin에는 변수처리를 안 해주었다. 이것은 전역변수로 (자바로치면static인거같다.) 너무많이쓰면 메모리부족현상이 발생해서 되도록 안쓰는게 좋다.
location 버튼에 링크걸기
function moveNaver(params) {
location.href = "http://www.naver.com";
};
// 웹브라우저는 항상 페이지 주소에 대한 이력을 남김
function moveGoogle(params) {
location.replace("http://www.google.com");
};
// replace는 이력을 남기지 않아서 뒤로가기를 할 수 없다.로케이션 또한 브라우저에서 지원하는 객체이다. 버튼에 링크를 걸때 주로사용하는데 여기엔 href속성을 사용하거나, replace를 사용할 수 있다. 둘의 차이는 코드에서 볼 수 있듯 흔적을 남기고 남기지 않고 의 차이에의해 뒤로가기 가능 유무가 차이가 난다.
