javascript(자바스크립트) 기초, 개발 환경 구축, 기초 함수 소개

안녕하세요!

항상 나아가는 개발자 pink_salt 핑솔입니다!

다음달부터 react-native로 프로젝트를 진행해야할 일이 있어서 이번에 javascript에 대해서 공부해보려고 합니다.

javascript는 저번에 node.js과 react로 웹개발을 할 때 사용하였는데

아직 미숙한 부분이 많아서 ㅜㅜ 기초부터 다시 잡으려고 합니다.

gogo!

 

일단 웹 프로그래밍부터 짚고 넘어갈게요.

웹프로그래밍은 웹사이트, 웹 페이지를 만드는 과정이며 '웹 브라우저'와 관련된 프로그램을 작성하는 것입니다.

• 백엔드(back-end) 프로그래밍 : 서버에서 데이터 관리를 프로그래밍 하는 것입니다.
• 프론트엔드(front-end) 프로그래밍 : 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지(user에게 어떻게 보여질지)를 프로그래밍 하는 것입니다.

 

자바스크립트의 역할

-> 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다.

API를 가져와 javascript에 녹여내면 지도서비스 등 여러가지를 구현할 수 있습니다.

-> 서버를 구성하고 서버용 프로그램을 만들 수 있습니다.

ex) node.js -> 서버를 만들 때 사용하는 자바스크립트 프레임워크

 

자바스크립트의 특징

• 모든 웹 브라우저에서 작동합니다.
• 풀스택 웹 개발, 다양한 용도의 프로그램을 만들 수 있습니다.
• 다양한 자바스크립트 공개 API를 사용할 수 있습니다.
• 다양한 라이브러리와 프레임워크를 사용할 수 있습니다.

API -> Application Programming Interface

---

개발환경 구축

1. 크롬 브라우저 설치하기

https://www.google.co.kr/chrome/?brand=QCDH&gclid=Cj0KCQiAmKiQBhClARIsAKtSj-kGUXp3MKM20hlVAz-qENy3vZzGEvLC6zdsWLR7JGgfy1TNvn5PRB8aAjbHEALw_wcB&gclsrc=aw.ds 

Chrome 웹브라우저

 

2. 비주얼 스튜디오 코드 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

영어 또는 한글판으로 설정해서 코딩하면 됩니다!

테마도 바꿀 수 있으니 설정해서 쓰시면 될 것 같아요.

---

HTML 파일 안에 script 태그가 있습니다.

<script>태그 안에 자바스크립트를 작성할 수 있습니다.

• <script>태그는 HTML 문서 어디에든 사용할 수 있습니다.
• <script> 태그는 한 문서 안에서 여러개를 사용해도 됩니다.
• <script> 태그가 삽입된 위치에서 소스가 실행됩니다.

 

외부 스크립트 파일 연결하기

1. 새 문서를 만들고 js 폴더에 change.js로 저장합니다.
2. change-2.html에서 <script> ~ </script> 사이의 소스를 복사해서 change.js에 붙여 넣습니다.
3. change-2.html에서 <script> 태그부터 </script> 태그까지 소스를 삭제합니다.
4. 자바스크립트 소스 자리에 <script>태그를 사용해 change.js를 연결합니다. ( <script src ="js\change.js"></script>)

 

prompt() 함수 -> 사용자 입력 값 받기

사용자에게 값을 입력받을 때 가장 쉽게 사용할 수 있는 함수입니다.

alert() 함수 -> 알림창으로 출력하기

웹 브라우저 화면에서 간단한 알림 내용을 출력합니다.

 

document.write() 함수 -> 웹 브라우저 화면에 출력하기

결과값을 웹 브라우저 화면에 출력합니다.

아까 prompt함수 나왔을 때 핑솔이라고 입력하였고 name 변수에 전달이 돼서 화면에 "안녕하세요 핑솔님, 환영합니다."가 출력된 것입니다.

 

console.log() 함수 - 콘솔에 출력하기

괄호 안의 내용을 콘솔 창에 출력합니다.

이건 웹 브라우저에 나오지 않고 개발자가 개발할 때 확인하기 위하여 console창에서 값을 확인하기 위해 자주 씁니다.

f12키를 누르고 console창에 가면 볼 수 있습니다.

---

자바스크립트 규칙

• 대소문자를 구별하여 소스를 작성합니다.
• 읽기 쉽게 들여쓰는 습관을 들여야합니다.
• 세미콜론으로 문장을 구분합니다.
• 소스에 메모하려면 주석을 사용합니다. (한 줄 주석은 // 을 사용합니다.)
• 식별자는 정해진 규칙을 지켜 작성합니다.
• 예약어는 식별자로 사용할 수 없습니다.

---

다음엔 변수와 자료형 그리고 연산자에 대해서 알아보도록하겠습니다.

 

공부에 참고한 강의는 인프런의 '자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1'입니다.