[JS] JavaScript 기초

FroneEnd와 BackEnd

개발 언어는 FrontEnd 와 BackEnd, 크게 두가지로 나뉜다. 간단하게 설명하자면 다음과 같다.

 

FrontEnd
 - 모니터로 보이는 이 '화면'과 같이 보이는 부분을 담당

 

BackEnd
 - 사용자가 볼 수 없는 부분(데이터베이스, 통신, 서버 등)을 담당

 

BackEnd를 잘 구현하기 위해서는 FrontEnd를 알아야 한다. 물론 반대로도 마찬가지 이지만. 

 

FrontEnd언어 중 가장 근본이 되는 JS[JavsScript]에 대해 기초를 알아보자.

 

 

---

 

JavaScript?

JS[JavaScript]는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 별도로 설치하거나 하지 않아도 웹 브라우저에 기본 탑재되어 있어 설치없이 바로 실행이 가능하다.

 

 

JS확인방법

아래 사진처럼 웹 브라우저에 마우스 우클릭-> [검사]를 클릭해 [Console]창에 들어가 JS를 실행시킬 수 있다. 간단하지만 JS로 웹을 만들때 에러를 잡거나 HTML요소들을 보거나 할때 중요한 부분이다.

 

 

 

 

JS동작원리

JS는 HTML의 코드에 <script src=""> 부분에 js를 불러와서 사용한다. 그래서 JS를 사용하려면 기본적인 HTML과 CSS정도가 필요하다. JS는 HTML에서 태그나 아이디, 클래스로 특정 요소를 찾고, 찾은 요소를 변환하는데 사용된다.

 

---

 

JavaScript 기본 문법

변수

모든 개발언어처럼 JS도 변수 선언 문법이 있다.

var a = ""; //전역 변수 선언, var는 문제가 많이 일어나 현재는 거의 사용하지 않는다
const b = ""; // 값을 고정할 때 사용. JS중간에 값이 바뀔 우려가 있을때 const 사용, 값 못바꿈
let c = ""; // 값을 변경시킬 필요가 있을때 사용

//주로 const를 사용하다 필요한 경우에 let을 사용한다
//값을 선언할때 ""는 문자형을 의미

const d = 1;
//숫자만 입력할 경우 숫자(Number)형으로 선언됨

 

변수에 값을 저장해 사용하다 가끔 문제가 발생하는 경우가 존재함.

• undefined : 값이 정의되지 않은 상태.
• null : null값이 저장된 상태. undefined와는 다르다.
• NaN : Not A Number, 계산중 에러가 발생했거나 숫자형이 아닌 문자형을 계산했거나 등의 문제일때 발생

 

* 참고로 숫자형만 값을 비교할 수 있고 문자형은 값 비교가 불가능하다

• "aaa" === "aaa" <- 비교 불가
• 12 >= 11 <- 비교 가능, true 결과값 출력

 

배열(리스트)

//배열은 항상 [0]번 부터 값이 들어간다.

const a = [”a”,”b”,”c”,”d”];
const sport1 = “act”;
const sport2 = “movie”;
const sports = [sport1, sport2];
sports[1] = “watch”; ← 이걸로 1번 인덱스 값 수정 가능

a.push(”e”); //배열에 값 추가 : 배열에 맨 끝(오른쪽)에 값을 추가함
a.shift(); //배열 첫번째 값 삭제-> "a"가 삭제됨
a.pop(); //배열 마지막 값 삭제 -> "e"가 삭제됨
a.splice(0); //배열 값 전체 삭제
console.log(a.length); //.length는 배열 길이를 출력

 

 

Object

같은 변수를 여러개 저장해야할때, 변수를 반복적으로 만들어야하는 번거로움을 제거하기 위해 Object를 사용한다. 쉽게말해 여러 속성을 하나의 변수로 생성할 수 있는 데이터 타입으로 key : value로 값이 저장된다.

//Object 생성 방법
const player = {
	name: "kk7790",
	point: 10,
	skill: javascript
};
console.log(player.name); //Object에서 값을 출력하는 방법1
console.log(player["name"]; //Object에서 값을 출력하는 방법2

player.fat = false; //Object 값 수정 방법. 하나의 값만 수정가능, 전체 수정은 에러남

player.level = 100; //Object에 값(property)추가 방법
delete player.point; //Object의 특정 값 삭제

 

 

IF문

다른 언어와 똑같다.

if(isNaN(age)){
	console.log("숫자 넣으세요");
}else if(age < 18){
	console.log("미자시네요");
}else if(age>=18 && age <=50){
	console.log("젊은이");
}

 

 

함수

함수도 다른 언어와 사용방법은 같다.

function sayHello(nickName, age){
	console.log("Hello!"+nickName + "I'm " + age);
}

sayHello();
sayHello("kk7790", 99);

function plus(a,b){
	return a+b;
}
const addResult = plus(1,4);