반응형

SW 배움터/자바 스크립트 7

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

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

jQuery 기초 강좌 1 : jQuery를 사용하는 2가지 방법

jQuery는 JS를 간단하게 사용할 수 있게 해 주는 유용한 라이브러리로서 jQuery를 사용하기 위해서는 jQuery파일을 불러오거나 jQuery CDN 검색해서 사용할 수 있게 하는 등 사전 작업이 필요하다. 이번 시간에는 jQuery를 사용하는 2가지 방법에 대해서 알아보겠다. 1. jQuery 파일 직접 불러와서 사용하기 jQuery 파일은 jQuery 공식 사이트(https://jquery.com/)에서 압축 파일로 다운 받을 수 있다. 파일의 압축을 풀어 폴더에 저장한 다음 다음과 같이 불러온다. 아래 코드는 버튼을 누르면 이미지가 사라지고 또 한번 버튼을 누르면 이미지가 다시 나타나는 간단한 프로그램이다. 이 프로그램을 jQuery를 이용해서 작성해 보았다. 태그 사이에 를 입력하고 태그 ..

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 구구단 가로 형식에 맞혀 출력하기

JS로 구구단을 출력하는 프로그램을 작성해 보자. 구구단은 이중 for 문을 이용해서 출력해야 하기 때문에 안쪽 for문에는 각 단별로 2~9를 곱한 수를 출력하게 하고 바깥 for 문에는 2~9단의 타이틀이 나타나게 하면 된다. 일단 이중 for문의 코드를 작성해 보자. 그런데 단순히 코드만 작성하다 보면 출력이 1열 종대로만 나열되는 이상한 형식으로 출력된다. 즉 다음과 같이 출력된다는 말이다. 우리가 원하는 형식은 각 단이 가로로 출력되는 형식이지 세로로 출력되는 형식이 아니다. 각단이 가로로 나열되게 하려면 어떻게 해야 할까? 2가지의 방법을 생각해 볼 수 있을 것인데 하나는 html에서 테이블을 이용해 원하는 만큼의 칸을 만든 후 각 칸 안에다 숫자를 입력하는 방법이 있을 것이고 또 하나의 방법..

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로 저장한다...

자바 스크립트 일반

I. 자바 스크립트 일반 개략적인 자바스크립트의 개발사를 보자. 1990년 중반에 Netscape사에서 liveScript를 만들었으나 자바가 나온 다음 sun사하고 liveScript를 확장해서 만든게 자바 스크립트이다.(sun은 이름만 빌려주고 만든 것은 Netscape사이다.) 자바 스크립트는 말 그대로 태그로 스크립트를 만든다는 뜻이다. 즉 정적인 HTML 문서와 달리 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어이다. 또한 객체 지향을 추구하는 스크립트 언어이기 때문에 필요한 객체를 호출해 HTML 문서 속에서 바로 작업할 수 있다는 것이 특징이다. 자바 스크립트는 HTML 소스에 삽입된 형태로 웹브라우저 내에서만 실행된다. 지금은 대부분의 프로그램들이 CC(Creative Cl..

반응형