JavaScript3 [JavaScript] addEventListener 사용 함수 parameter 전달 click 등 이벤트가 발생했을 때 함수를 유발시킬 용도로 target.addEventListener 를 사용한다. 이때 parameter를 포함하는 함수를 전달하면 괄호가 포함되니까 화면이 열리자마자 바로 실행된다. 이벤트가 발생하지 않아도! 예를 들면 이런 식 const userValueDiv = document.getElementById("userValueDiv"); function setValue(id, label) { let Input = document.getElementById(id).value; userValueDiv.textContent = `${label}: ${Input}`; } // getName 버튼을 눌렀을 때 함수가 작동하게 하고 싶다 const getNameButton = d.. 2023. 4. 16. [FE] jQuery 기초 jQuery Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com - HTML/DOM manipulation - CSS manipulation - HTML event methods - Effects and animations - AJAX (비동기 처리) - Utilities 기본 사용 설정: CDN 불러온 후 script 태그 안에 코드 작성 // 혹은 이렇게 .. 2023. 4. 12. [React-JavaScript] 게이지바 만들기 전체 값에서 현재 값의 비율을 나타내는 그래프를 만들고 싶었는데, 뭔가 모듈을 사용해야 하나 싶었지만 이런 간단한 형태는 div의 CSS값 조정으로 간단하게 할 수 있다는 걸 알았다. 전체 코드 import React, { useEffect, useState } from "react"; import styled from "styled-components";// 리액트의 styled-components 모듈 사용 // 테두리 코드 const StyledBase = styled.div` height: 26px;// 게이지 부분의 높이에 border 높이의 2배를 더해준다. border: 3px solid; margin-right: 15%;// 페이지에서 원하는 부분만큼 자유롭게 설정 margin-left: .. 2022. 8. 14. 이전 1 다음 728x90
