반응형

자바 스크립트 4

자바 스크립트에서 'console.log(변수명)' 단축키로 한번에 입력하기

자바 스크립트에서 'console.log(변수명)'을 단축키로 한 번에 입력하고 지우는 방법을 알아보자. 일반적으로 자바 스크립트에서 'console.log(변수명)'을 입력하려면 'console.log(변수명);'을 하나 하나 입력해야 한다. 추적해야 하는 변수가 많을 겨우 이것들을 일일이 입력하고 추적하는 것은 쉬운 일이 아니다. 이럴때 'turbo Console Log' 익스텐션을 사용해 보자. 그러면 자바 스크립트 console.log의 신기원을 볼 수 있을 것이다. VScode 익스텐션 항목에서 'turbo Console Log'을 입력하고 검색되는 익스텐션을 설치한다. 먼저 console.log로 값을 추적하고 싶은 모든 변수를 선택한다. 하나의 변수를 선택하고 또 다른 변수를 같이 선택할 때..

replit에서 JS 파일 실행하기

replit에는 50개가 넘는 템플릿이 제공되지만 JS는 어떻게 실행할 수 있는지 알기가 어렵다. 한번 알기만 하면 쉽지만 처음 그 방법을 알기까지 꽤 많은 시행착오와 시간을 들여야 한다. 이번 포스트에서 그 시간을 아껴보자. https://replit.com/~에 접속해서 회원가입 하고 로그인 한다. 초기 화면이 열리면 '+' 표시가 있는 아이콘 중 아무것이나 클릭한다. 'Create a Repl' 창이 열리면 'HTML, CSS, JS' 부분을 클릭한다. Title부에 적당한 제목을 입력하고 엔터를 누르거나 '+ Create Repl' 버튼을 클릭한다. 'index.html, style.css, script.js' 파일이 있는데 'script.js' 파일이 JS 코드를 입력할 수 있는 파일이다. 'i..

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 4가지 방법

JS에서 웹 브라우저 화면에 변수나 데이터를 출력하는 데에는 4가지의 방법이 있다. 1) document.write() 2) window.alert() 3) console.log() 4) innerHtml 등을 이용하는 방법이 그것이다. 하나 하나 예제를 보면서 설명해 보겠다. 1. document.write()를 사용하는 방법 document.wirte()은 JS에서 가장 쉽게 변수나 문자열을 출력하게 해 주는 메서드이다. ()속에 출력하고 싶은 변수나 문자를 입력하면 된다. 태그 사이에는 무엇을 하는 것인지에 대한 주제를 입력해서 현재 어떤 작업을 하는지 알 수 있게 한다. 태그 사이에 JS 코드가 들어간다. document.wirte() 메서드의 ()속에 출력내용이 변수 일 경우에는 " " 없이 변..

자바 스크립트로 전구 불 켜고 끄기

프런트 엔드 개발의 3대장이라 하면 HTML, CSS, Java Script 세가지를 들 수 있는데 이중 Java Script는 HTML과 CSS로 만든 웹페이지에 동작을 주는 역할을 한다. 이번 시간에는 자바 스크립트의 역할을 간단하게 이해할 수 있도록 웹페이지에서 전구를 켜고 끄는 코드를 작성해 보자. 1. 먼저 인터넷에서 전구의 이미지를 다운받아 준비한다. 물론 켜진 것과 끄진 것 두개의 그림이 필요하다. 2. 컴퓨터에서 탐색기를 열고 빈 폴더에 다운받은 이미지 두개를 넣어둔다. 3. VS code를 열어서 준비해 둔 탐색기의 빈 폴더를 찾아간다. 폴더에 2개의 이미지만 들어있다. 4. '파일' 메뉴에서 '새 텍스트 파일'을 선택하고 코드를 입력한다. 코드를 입력했으면 ****.html로 저장한다...

반응형