250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

개린이 개발노트

국비지원 JAVA(자바) 프로그래밍(자바스크립트) 본문

국비지원(국비교육) 웹 개발자 과정

국비지원 JAVA(자바) 프로그래밍(자바스크립트)

개린이9999 2022. 12. 28. 09:17
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
'국비지원(국비교육) 웹 개발자 과정' Related Articles more