본문 바로가기

Javascript/vanilla js

 (3)
[JavaScript] Quotes and Backgrounds Quotes학습내용 : 웹 페이지에 명언과 작가를 랜덤하게 출력명언 10개를 가진 quotes.js 파일 생성const quotes = [ { quote: "삶이 있는 한 희망은 있다.", author: "키케로" }, { quote: "아는 것이 힘이다.", author: "프랜시스 베이컨" }, { quote: "대부분의 사람들은 삶을 이끌어 가지 않고, 단지 삶에 따라 흘러갈 뿐이다.", author: "세네카", }, { quote: "삶은 선택의 연속이다.", author: "윌리엄 제임스" }, { quote: "모든 위대한 것은 꿈에서 시작된다.", author: "엘리노어 루스벨트" }, { quote: "성공은 실패의 연속에서 비롯된다.", author: "콘래드 힐튼" }, { quot..
[JavaScript] Clock IntervalsInterval : 매번 일어나야 하는 무언가시계 만들기에 앞서 폴더 분리js파일과 css파일의 폴더 생성기존 app.js → greeting.js 로 파일명 변경index.html 수정파일 하나에 모두 작성해도 되지만 너무 빡빡해 보일 수 있으니 분리 ... h2 태그 생성 후 h2를 받아와서 내부에 텍스트 입력index.html00:00 clock.jsconst clock = document.querySelector("h2#clock");function sayHello() { console.log("Hello");}// sayHello 함수를 5000ms(5초) 마다 실행setInterval(sayHello, 5000); Timeouts and Dates학습내용 : functi..
[JavaScript] Form submission Log In html에서 input 태그를 통해 입력을 받고버튼을 눌러 이벤트가 발생할 수 있도록 함function onLoginBtnClick() { const username = loginInput.value; if (username === "") { alert("Please write your name"); } else if(username.length > 15){ alert("Your name is too long.") }} 자바스크립트에서 유효성 검사와 함께 클릭 이벤트가 발생했을 때의 동작을 정의해 줌 아무것도 입력하지 않고 로그인 버튼을 누를 경우 alert 창이 뜨는 것을 확인 할 수 있음     html에서 form 태그를 활용하여 추가적인 기능들을 사용할 수 있음for..

티스토리툴바