fetch apiasync function 함수이름() { const name = document.getElementById('name').value fetch(`http://localhost:3000/sound/${name}`) .then((response) => response.json()) .then((data) => { console.log(data) document.getElementById('name').value = data });}// 최신 문법async function logJSONData() { const response = await fetch("http://example.com/movies.json"); const jsonData = await..

자바 스크립트에서 자주 쓰이는 함수setTimeout : 정해진 시간에 호출하는 함수 (1번)setInterval : 정해진 시간마다 호출하는 함수 (여러번) 크롬에서 인터벌이 1초보다 짧으면 1초로 바꾼다. 함수를 정리하는 방법 (취소)clearTimeoutclearInterval requestAnimationFrame : 기존에는 인터벌을 이용해 애니메이션을 조작했는데 성능 저하 때문에 등장했다. 사용법requestAnimationFrame( () => console.log("Hi") ); const sayHi = () => { console.log("Hi"); requestAnimationFrame(sayHi);}requestAnimationFrame(sayHi); 이런식으로 콜백함수로 사용하..

== 대신에 ===를 쓴다. == 데이터만 비교 (5 == '5' = True)=== 데이터와 타입까지 비교 (5 === '5' = false) 변수 지정 형식let : 값을 바꿀 수 있는 변수 타입const : 값을 바꿀 수 없는 상수를 명시할 때 사용.객체를 생성하는 방법 { }new 객체의 값을 불러오는 방법.[ ]script 파일을 html 내부에 작성할때는 아주 간단할 때 일반적인 경우 외부의 파일에 작성하며 별도의 파일로 작성하면 브라우저가 스크립트를 다운 받으면서 캐시에 저장해 성능상 이점이 있음. script에 src 속성을 이용해 외부파일 연결을 해놓고 내부 태그에 코드를 입력하면 코드는 무시된다. script 파일에 가장 위 부분에 "use strict"; 라고 작성하면 엄격한 모드를 ..

JavaScriptbtnClacRecord.addEventListener('click', () => { const record = document.getElementById("calc-record"); record.classList.toggle("hidden-record");}); CSS#calc-record{ border-radius: 0.5em; border: none; resize: none; height: 22em; width: 18.6em; position:absolute; background-color:beige;}.hidden-record { display: none;} HTML 동작 원리는 JavaScript에서 HTML에 있는 특정 요..