TIL/JavaScript4 2021.7.13 TIL : [JavaScript] 자바스크립트 기초-4 시계 만들기 자바스크립트에서는 어떤 행동을 일정한 간격을 주고 반복하도록 할 수 있다. setInterval(함수명, ms 단위의 간격);과 같다. 이를 이용하면 서버에서 시간을 받아와 보여주는 기능도 만들 수 있다. 좀 더 깔끔하게 보면서 진행할 수 있도록 새로운 clock.js 파일을 만들고 해당 파일을 html 파일에 연결해 주었다. html은 다음과 같이 clock 이라는 클래스의 h2 태그를 추가했다. Log In 00:00:00 clock.js 파일에서는 배웠던 대로 html 문서 내의 clock 클래스를 변수 지정해주고, 기본 제공해주는 date 객체를 통해 서버의 시간, 분, 초를 받아올 수 있다. 코드는 다음과 같이 작성하면 된다. function clocking1(){ const dat.. 2021. 7. 13. 2021.7.5 TIL : [JavaScript] 자바스크립트 기초-3 오늘은 로그인 박스(폼)을 만드는데 자바스크립트를 이용해볼 것이다. 1. HTML 에서 로그인 폼 만들기 Log In 여기서 div 대신 form을 사용하는 이유는 input tag의 required 속성을 쓰려면 해당 Input이 form 내부에 위치해 있어야 하기 때문이다. 따라서 form 태그로 사용해주는 것이 좋다(해당 기능은 브라우저에서 자체 제공해준다. 15자 이상 입력하면 입력되지 않고, 비어있으면 역시 입력란을 작성하라는 안내 문구를 띄워준다). 이 때 form 태그의 특징은, input에 어떤 단어를 쓰고 엔터를 치거나 버튼을 누르면 페이지가 새로 고침된다는 것이다. 따라서 우리는 자바스크립트로 입력된 정보를 저장하고 페이지가 새로고침되는 것을 막는 과정을 진행해 볼 것이다. 2. 자바스.. 2021. 7. 5. 2021.7.4 TIL : [JavaScript] 자바스크립트 기초-2 아아주 기본 부분을 넘어서 이제 조금 기본 부분을 배워볼 수 있을 것 같다. 이벤트 (Event) 자바스크립트가 웹의 활동성?을 보여줄 수 있는 언어라고 배웠는데, 그 부분들을 조금씩 배워가는 것 같다. 먼저, 이벤트는 사용자가 어떤 행동을 했을 때 보여지는 웹 부분을 어떻게 바꿔갈 수 있는지에 관한 것이다. 코드를 예를 들어 보여주자면 다음과 같다. //html 파일은 지난 번에 이용한 것과 똑같다. const title = document.querySelector(".hello h1"); function clicked(){ const currentColor = title.style.color; let newColor; if (currentColor === "blue"){ newColor = "purp.. 2021. 7. 4. 2021.7.3 TIL : [JavaScript] 자바스크립트 기초-1 1. 변수 자바스크립트 변수를 선언할 때에는 기본적으로 두 가지 형태로 사용할 수 있다. 첫 번째는 변하지 않는 변수인 constant -> const이고 (이 변수로 선언할 경우, 변수의 값을 바꾸려고 해도 에러가 뜬다) 두 번째는 변하는 변수인 let이다. 예를 들면 다음과 같다. const age = parseInt(prompt("How old are you?")); let age1 = parseInt(prompt("How old are you?")); age = age + 2; //에러가 뜬다 age1 = age1 + 2; //정상작동 console.log(age); console.log(age1); 아마 위의 코드 전체를 돌리면 4번째 줄에서 에러가 뜰 것이다. const 변수는 값을 변동시킬 .. 2021. 7. 4. 이전 1 다음
