📌 Math.random() 활용하기 랜덤으로 명언이 나오게 하려면 이 명언을 담아줄 그릇, Array가 필요하다. JS const quotes = [ { quote: "Love is, above all else, the gift of oneself.", author: "Jean Anouilh", }, { quote: "Life is either a daring adventure or nothing.", author: "Helen Keller", }, { quote: "Words without actions are the assassins of idealism.", author: "Herbert Hoover", }, { quote: "Self-confidence is the first requisite ..
📌 실시간 시계 만들기 HTML 00:00 JS const clock = document.querySelector("h2#clock"); 위와 같이 clock을 추가해준다. 그럼 페이지에는 00:00만 보일 것이다. 이번에는 setInterval과 시간 관련 명령어를 사용한다. 먼저 setInterval은 특정 시간마다 무슨 일이 일어나게 하고 싶을 때 사용한다. (호출할 함수 이름, 초(ms)) 비슷하게 setTimeout도 있는데 얘는 특정 시간 '후'에 무슨 일이 일어나게 한다. 사용 방법은 동일하다. function sayHello() { console.log("hello"); } setInterval(sayHello, 5000) sayHello 함수를 5초마다 작동시키겠다는 뜻이다. 시간에 대한..
📌 Login을 구현해보자 - 입력 HTML Log In HTML 내에 id="login-form"을 가진 div를 만들고 그 아래 input과 button을 만들어준다. 이를 JS에서 찾아내보자. JS const loginform = document.getElementById("login-form"); const loginInput = loginform.querySelector("input"); const loginButton = loginform.querySelector("button"); document에서 id="login-form"를 찾고, 그 아래에 있는 input, button을 찾아낸다. const loginInput = document.querySelector("#login-form in..
📌 JS가 어떻게 HTML을 움직일까? JS가 HTML의 요소들을 읽는다. console에 document를 검색하면 아래와 같이 정보가 나온다. HTML내 stylesheet를 연결하듯이 script를 연결하면 JS와 연동이 된다. 참고로 HTML에서 타이틀을 바꿔도 JS에서 타이틀을 바꾼다면 JS 버전으로 적용이 된다. HTML에 있는 요소를 JS에서 편집하려면 어떻게 해야 할까? 1) document.getElementById("id에 해당되는 것") HTML 안에서 id를 통해 element를 찾아준다. 2) document.getElementsByClassName("class name에 해당되는 것") id보다 class name을 많이 쓴다고 한다. 이놈은 여러 가지 요소들을 가져올 때 사용하..
📌 JS란? 브라우저가 이해하는 언어로 HTML, CSS, JS가 있는데, 이중 JS는 FE가 쓰는 유일한 프로그래밍 언어다. JS를 사용하면 3D를 구현하게 하는 라이브러리(three.js)나 리액트 네이티브(JS로 AOS, IOS 앱 구현하는 도우미), 일랙트론(FE 언어로 데스크탑 앱을 만드는 도우미) 등을 사용할 수 있다. FE의 유일한 프로그래밍 언어인 동시에 범용성이 넓은 언어로 FE을 고려한다면 반드시 배워야 한다. 📌 데이터 타입 데이터 타입은 전체적으로 Python과 매우 유사하다. 1) number > 정수/소수 2) string Python의 print와 유사하게 console.log()를 사용한다. 웹 브라우저의 개발자 모드 console 부분에 출력값이 찍힌다. print할 때처럼..
