구글에 Visual Studio Code를 검색하여, 다운로드 받은 후 설정하는 방법을 소개한다.
VSCode(Visual Studio Code)를 실행한 후, 폴더하나를 설정해주고, 폴더 명은 자유지만 나는 JAVASCRIPT라고 했다.
그 후 그 아래에 파일을 만든다.(brackets와 화면 구성이 같다.) 우클릭 후 New File하여 '01.html' 기본파일을 만든다.
[!+tab키] 누르면 기본 코드가 나오는데, brackets와 같다.
[F1키]를 누르면 검색창이 나오는데, setting을 검색하면 아래 Preferences Open Settings(UI)를 클리한다.
그리고 그 위에 font를 입력하면 Editor:Font Family가 글씨체, Editor:Font Size가 글씨크기이다. 사용에 맞게 설정하자.
VSCode는 자동완성은 되지만, 미리보기가 탑재되어 있지 않다.
brackets와 달리 자동완성을 설치하여 미리보기기능이 있다.
VSCode제일 왼쪽 검은색 배경에 문서모양, 돋보기모양, 연결모양, 재생모양, 블럭모양이 보일 것이다.
블럭모양을 누르면 EXTENSIONS라는 창이 뜨는데, live server를 검색하여 첫번쨰로 나오는 플러그인을 install한다.
이것이 실시간 미리보기해주는 것이다. 설치가 완료되면 제일 위 문서모양을 눌러 다시 코드창으로 돌아온다.
돌아와서 파일을 누르고 open with live server를 눌러주면 미리보기창이 보일 것이다.
만약 여기서, Internet Explorer로 뜬다면, [F1키]를 누르고 다시 setting에 들어가 검색창에 live server를 검색한다.
그 후, Custom Browser가 있고, 거기서 원하는 브라우저로 설정하면 된다.
<body>태그 사이에 <h1>Hello!</h1>하여 표시할 Hello!를 넣었다고 하면, 표시창에 뜰 것이다. 마치 brackets처럼말이다.
어떠한 사이트 회원가입창에 들어가보면 이용약관동의, 개인정보 수집 동의, 위치정보 동의 등 필수 동의사항을 눌러야 확인을 누를 수 있게 된다. HTML, CSS는 모양만 만들 수 있지만 이러한 작업들은 Javascript로는 가능하다.
회원가입창이 나오면 아이디, 비밀번호 그리고 이름 등 여러가지 쓰는 칸이 있는데,
몇 자 이상, 조합 등의 기준이 있는 아이디창, 비밀번호창은 인터넷이 끊겨있어도 중복확인 외에, 맞는 조합인지 아닌지 경고문구를 주는 등의 구분해준다. 자바스크립트는 이러한 작업이 가능하게된다.
이러한 결과로 알 수 있는 것은 자바 스크립트는 프로그래밍 처리를 하는 것이고, 프론트 엔드에 기본적인 것을 할 수 있다.
Javascript는 사용자 화면에서의 필요한 처리를 수행하는 언어이다.
여기서 중요한 점은 서버와는 전혀 상관이 없다는 것이다. 서버용 자바스크립트는 따로 있다.
자바 스크립트를 배우는 궁극적 목표는 태그에 기능을 부여하는 것이며, 자바와 문법이 유사하다는 특징이 있다.
자바스트립트를 사용하려면 <script> 태그가 필요하다.
script를 head태그, body태그에 넣어보다보면
title아래에 <script> alert("첫번째"); </script> 하면 첫번째라고 경고가 뜨고,
body에 똑같이해서 두번째, <h1> Hello! </h1>이 있다면 그 뒤에 세번째 스크립트를 하면
결과창에는 첫번째라는 경고창만 뜨고 Hello!는 출력되지 않는다.
첫 번째 경고창을 확인 누르면 두 번째 경고창이 뜨고 확인을 누르면 세 번재 경고창이 뜬다.
Hello는 출력되지 않았었지만, 세 번째 경고창 확인을 누르면 그때서야 Hello가 뜨게된다.
앞으로 script는 head태그에 두고,
script태그 안에 console.log("Hello world"); 를 출력해본다. 이건 콘솔화면에 Hello world가 뜨게 하는
이클립스의 println같은 느낌인데, 이것은 화면에 뜨는 게아니다. 브라우저에 숨어있는데, <F12키>를 눌렀을때 콘솔창에 뜨게 하는 것이다.
javascript도 프로그래밍 언어이다. 프로그래밍 언어라면 있어야 하는 것들이 다 있다.
변수, 조건문, 반복문, 배열, 메소드, 라이브러리가 있고 클래스는 없다.
때문에
var a = 100;
console.log(a); 하면 위 식은 변수 a는 100이고 변수 a를 출력해보라는 식이다.
이와 같이 자바와 비슷하기 때문에 거부감은 덜하다.
'JAVASCRIPT' 카테고리의 다른 글
| [JAVASCRIPT#07]자바스크립트 이미지 확대 축소 및 응용 (0) | 2020.12.23 |
|---|---|
| [JAVASCRIPT#06]비밀번호 검사 (0) | 2020.12.23 |
| [JAVASCRIPT#05] 글자 복사 함수 (0) | 2020.12.22 |
| [JAVASCRIPT#04] 자바스크립트 함수, 함수 활용(태그제어) (0) | 2020.12.22 |
| [JAVASCRIPT#03]자바스크립트와 자바의 차이 (0) | 2020.12.22 |