728x90
dataset
HTML 내부에 속성을 추가 (개발자만 사용하는 사용자의 정의 속성)
<태그 data- (변수처럼)이름(을 설정) = "값">
dataset으로 설정한 값은 문자로 나타남!
(혹시나 숫자타입으로 비교하게 되면 작동이 안되니까 그런것 까지 방지하려면 숫자로
형변환을 시켜야 훨씬더 안전하게 이용가능)
알림창이 뜨는데 일정시간이 지나면 자동으로 사라지는 알림창 만들기
n-5초 뒤에 사라지는 알림창
n-4
n-3
n-2
n-1
n초 뒤 사라지는 알림창
<!DOCTYPE html>
<html lang="en">
<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>n초뒤에꺼지는알림창만들기</title>
<link rel="stylesheet" href="n초뒤에꺼지는알림창만들기 copy.css">
</head>
<body>
<div class="alert"><span class="time">5</span>초뒤에 사라지는 알림창</div>
<script src="n초뒤에꺼지는알림창만들기 copy.js"></script>
</body>
</html>css는대충만들어서 생략~
let t= 5;
setInterval(function() {
t--;
document.querySelector('.time').innerHTML = t;
},1000);
setTimeout(hideBlock, 5000);
W
function hideBlock() {
document.querySelector('.alert').style.display = 'none';
}setinterval 기능이 생각이 안나서 힘들었다. 그리고 innerhtml을 쓸생각과
변수t로 설정하고 t--; 할 생각은 더더욱 못했다..쉽지않았다.
캐러셀(carousel)
브라우저 기본동작
a태그 같은 거 클릭하면 -> 해당 페이지로 이동
폼 전송을 클릭하거나 엔터를 누르면 서버로 전송
하는 것을 막는 두가지방법!
첫번째
<a href="http://naver.com" onclick="return false">네이버</a>위방식은 거의 안쓰임 (onclick="return false")
두번째
event.preventDefault()
<a href="http://google.com" onclick="event.preventDefault()">구글</a>브라우저 동작 막는 것 계속이어서
menu.onclick = function(event) {
let url = event.target.getAttribute("href");
alert(url);
console.log(event.defaultPrevented);
event.preventDefault();
console.log(event.defaultPrevented);
// return false;↓
할일목록 만들기
브라우저 기본동작활용
728x90
'국비지원(국비교육) 웹 개발자 과정' 카테고리의 다른 글
| 국비지원 JAVA(자바) 프로그래밍 (git 사용법) (0) | 2023.01.06 |
|---|---|
| 국비지원 JAVA(자바) 프로그래밍 (0) | 2022.12.29 |
| 국비지원 JAVA(자바) 프로그래밍(자바스크립트) (0) | 2022.12.27 |
| 국비지원 JAVA(자바) 프로그래밍(자바스크립트,JSON) (0) | 2022.12.26 |
| 국비지원 JAVA(자바) 프로그래밍(자바스크립트) (0) | 2022.12.23 |