오전
기본 노드 검색
<ul>
<li name="li">item1</li>
<li id="li2">item2</li>
<li name="a">item3</li>
<li class="item">item4</li>
<li name='a'>item5</li>
<li class="item">item6</li>
<li>item7</li>
<li class="item">item8</li>
</ul>
<script>
// undefined 가 뜬다면 요소를 안불러와서 그럼 !
// getElementById
const li2El = document.getElementById('li2') //들어오는 값은 다 id로 인식해서 #안붙임
console.log(typeof li2El)
li2El.style.backgroundColor='orange';
// s라고 붙어있으면 거의다 배열
//
const liEls= document.getElementsByTagName('li')
console.log(liEls)
Array.from(liEls).forEach((item) => { //근데 이건 유사배열임 그래서 만들려면 Array.from() 메서드 사용 , 얕은 배열복사
item.style.fontSize='2rem'
});
//
const li2El_2 = document.querySelector('#li2') //id가 li2 인 요소 선택 , querySelector 쓰는거나 getElementByid 쓰는거나 똑같음 대신 id는 앞에 #을 안붙임!
li2El_2.style.width='300px' // width 300px 지정
//
const itemEls = document.querySelectorAll('.item')
console.log(itemEls) //itemEls , class가 item인 배열 정보 자체를 출력
itemEls.forEach((item)=>{
console.log(item)
})
const aEls=document.getElementsByName('a')
console.log(aEls)
aEls.forEach((item)=>{
console.log(item)
})
form 찾기
document.forms; :
document.forms는 이름과 순서가 있는 '기명 컬렉션(named collection)'입니다. 개발자는 이 이름이나 순서를 사용해 문서 내의 폼에 접근할 수 있습니다.
ClassList :
##classList - Methods ##
- add(String)
지정한 클래스 값을 추가한다.만약 추가하려는 클래스가 이미 존재한다면 무시
- remove(String)
지정한 클래스 값을 제거한다.존재하지 않는 클래스라면? 에러 발생 X
- contains(String)
지정한 클래스 값이 존재하는지 확인.true, false 값을 반환
- replace(old, new)
old class를 new class로 대체
- item(Number)
인덱스 값을 활용하여 클래스 값을 반환
동기(sync) 와 비동기(async) :
동기 : 미리 약속된 규칙을 근거로 동작하는 방식
비동기 : 약속된 규칙대로 동작하지 않고 특정한 방식으로 동작
전체로 요청하냐 , 부분적으로 요청하냐 차이 ?
자바스크립트는 싱글 스레드 방식 : 스레드 : 내려가는 흐름 -->
//비동기 함수의 대표적인 함수
setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
Swiper :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- swiper CDN -->
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<style>
.swiper{
height:500px; //swiper 전체 크기 지정
}
.swiper>.swiper-wrapper{
height:100%;
}
.swiper>.swiper-wrapper>.swiper-slide{
height:100%;
display: flex;
justify-content: center;
align-items:center;
}
</style>
</head>
<body>
<div class="wrapper">
<header></header>
<main>
<section>
<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><a href=""><img src="./image/banner1.jpg" alt=""></a></div>
<div class="swiper-slide"><img src="./image/banner2.jpg" alt=""></div>
<div class="swiper-slide"><img src="./image/banner3.jpg" alt=""></div>
<div class="swiper-slide"><img src="./image/banner4.jpg" alt=""></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div> //swiper 가운데 아래 List 버튼
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div> //swiper 이전 버튼
<div class="swiper-button-next"></div> //swiper 다음 버튼
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</section>
</main>
<footer></footer>
</div>
<script>
// 수평배치 슬라이더
const swiper_01=new Swiper('.swiper',{
// 방향
direction:'horizontal',
// 자동동작
autoplay:{
delay:100,
pauseOnMouseEnter : true,
},
// 무한동작
loop:true,
// 페이징처리
pagination:{
el:'.swiper-pagination',
clickable:'true',
type: 'bullets', //swiper 리스트 목록 모양 콩알 모양으로 지정
},
// next , prev
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
mousewheel : true,
effect : 'fade',//fade , scroll //fade = 사라지듯이 장면 바뀜
})//{}option object
</script>
</body>
</html'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 09월 09일 (1) | 2024.09.10 |
|---|---|
| 24년 09월 06일 (0) | 2024.09.08 |
| 24년 09월 04일 (0) | 2024.09.05 |
| 24년 09월 03일 (0) | 2024.09.05 |
| 24년 09월 02일 (0) | 2024.09.02 |