본문 바로가기

Javascript/기초 Javascript3

Javascript 자바스크립트 날짜 표시하기 / Date(); setInterval(); p태그입니다 클릭 Date();를 활용하면 현재 시각을 넣어줄수가 있습니다. 단순하게 시간만 표시해주는것에서 더 나아가 우리가 정한 간격에 맞춰 시간의 변화를 보여줄수도 있겠습니다. 위에서 버튼을 클릭하면 displayDate()함수가 실행되도록 만들어놨죠? 클릭하면 위처럼 현재 시각을 알려줍니다. 그런데 여기에 덧붙여서 setInterval("displayDate()", 1000);을 설정해주면 1초에 한 번씩 시간이 바뀌게 됩니다. 10000이 아니라 10000으로 설정해주면 10초에 한 번씩 시간이 바뀌게 되겠죠? setInterval()함수는 우리가 지정한 일정한 시간간격에 따라 반복적으로 실행됩니다. 첫 번째 인자에는 그렇게 간격을 두고 실행할 함수를 넣어주면 됩니다. 이번 경우에는 displa.. 2021. 6. 8.
Javascript 자바스크립트 버튼 클릭해서 화면 바꾸기 p tag입니다 아이디를 demo로 준 p태그를 통해서 이번에는 텍스트를 입력하고 버튼을 꾹 눌러보는 것까지 해보겠습니다. input요소의 여러가지 타입 중에서 text와 button을 사용해보겠습니다. onclick에서 쓴 함수는 btnClick()으로 스크립트 안에 넣어줬습니다. 이름을 입력하고 입력 버튼을 누르면 우리가 btnClick()함수에서 만들어놓은것처럼 p 태그는 button click!으로 바뀌고, 텍스트 인풋의 밸류는 버튼 클릭으로 바뀌게 됩니다. 이 입력 후 모든게 버튼을 클릭하여서, 미리 만들어놓은 btnClick()함수가 동작하였기 때문입니다. input button 버튼을 만드는 방식은 input type = "button"을 활용하거나, 을 활용하는 방법이 있습니다. 둘 다 버.. 2021. 6. 8.
Javascript 자바스크립트 기초 개념 이해하기 이름에 자바가 들어가있지만 Java 언어와는 완전히 다른 자바스크립트에 대해 배웠습니다. 단순하게 딱 나눠서 말한다면 자바스크립트는 클라이언트 즉 프론트엔드에서 사용하는 것이고 자바는 서버, 즉 백엔드에서 쓰는 것입니다. 그렇다면 자바스크립트를 사용하는 이유가 무엇일까요? 그것은 바로 웹에 접근하기 위해, 우리가 열심히 HTML에서 만들었던 tag들에 접근하기 위해서 스크립트를 짜는 것입니다. 보조 프로그래밍 언어로서 컴파일을 하지 않아 빠르고 가볍다는 장점이 있습니다. 이것에서 더 나아가 경량화 시킨 것이 JQuery라고 보시면 됩니다. 이렇게만 봐서는 실질적으로 어디에 쓰이는지 잘 모르겠는데, 한 가지 예시를 들자면 우리가 홈페이지에 회원 가입을 할 때 필요한 정보들을 입력하는 단계가 있습니다. 이 .. 2021. 6. 8.