자바스크립트

기초개념

웹사이트 주요기능 and 애니메이션 효과 구현

예전에는 자바스크립트가 웹사이트 영역에서만 활용되었지만 이제는 여러곳에서 활용가능

1. 하이브리드 앱

java, kotlin을 사용하지않고 javascript만으로 동시에 앱을 만들 수 있다.

2. 서버개발작업

javascript 언어기반인 node.js를 이용해 서버개발작업 가능

3. 사물인터넷 (IOT, Internet of Things)

IOT를 만들때도 활용 가능

Javascript의 특징

인간에게 친숙한 언어

입문단계에서 굉장히 빠르게 습득이 가능한 언어

high level language = 인간에게 친숙한 언어

low level language = 컴퓨터가 이해하기 쉬운 언어

Javascript 3가지 분야로 나누어 공부

1. Javascript 코어

Javascript가 가지고 있는 문법적인 특징들을 공부하는 영역

2. 클라이언트 측 Javascript

브라우저를 제어할때 사용되는 Javascript

예)구글에서 검색 -> 현재 마우스 위치나 브라우저 창의 크기를 가져오거나 Javascript를 가지고 html, css에 접근해서 변화를 주고 싶을 때 등의 작업을 수행할 때 사용되는 분야

3. 서버 측 Javascript

node.js의 영역

서버개발에 관심있으면 접하면되는 부분

1,2번만을 연습해도 자바스크립트를 이용하는데 문제는 없다

Javascript 언어를 적용하기 위한 2가지 방법

1. html 문서에 script 태그 사용후 Javascript 코드 사용

여기서 console.log 는 소괄호 안쪽의 정보를 consol 탭에 출력시킬 때 사용되는 명령어

<body>
	<script>
   		console.log("hello"); 
    	</script>
</body>

2. script 를 이용하는 방법

script src = 자바스크립트 파일경로

<script src="js/main.js"></script>

Javascript 코드도 html, css 와 마찬가지로 위에서부터 순차적으로 실행된다.

연동시 주의점

script로 연동하고 script 안에 Javascript 코드를 입력시 적용되지않음

둘중 하나만 선택해서 사용, 혼용X

<script src="js/main.js">
	console.log("aaa")
</script>

여러개의 js파일

css처럼 여러개 파일 생성가능

<script src="js/main.js"></script>
<script src="js/custom.js"></script>

두개의 서로 다른 파일을 연동시켜줄때도 위에서부터 순차적으로 코드를 읽는다

//main.js

console.log("Main");

//custom.js

console.log("custom");

main.js에서 만든 것을 custom.js에서 사용 가능

이때 순서에 주의, 상식적으로 먼저 존재해야지만 나중에 사용가능

이후에 연동된 파일에서 이전에 작성된 변수명과 함수를 써먹을 수 있다. 먼저 존재하는 파일을 연동시켜주고 그 다음 써먹을 파일을 연동시켜야함

//main.js

var mainVar = "Main Var";

function mainFunc() {
	console.log("Main Func");
}

//custom.js

console.log(mainVar);

mainFunc();

Javascript 코어(구조)

Javascript 2가지 주석방식

1. css와 같은 방식 (전체주석)

/*
console.log("comment");
console.log("aaa");
*/

2. // 사용 (한줄주석)

//console.log("comment");

특이한점은 전체주석 안에 전체주석은 사용불가능하지만 전체주석 안에 한줄주석은 사용가능함

/*
//console.log("comment");
console.log("aaa");
*/

자바스크립트 변수

변수 ?

데이터를 저장하는 공간이라고 생각하기 (데이터를 넣을 수 있음)

예시로 이사를 할 때 이사짐 박스에 물품을 넣어야 한다.

만화책 박스 안에는 만화책이라는 데이터가 들어가야한다.

박스 자체를 "변수" 라고 한다면 만화책 박스 라고 구체적인 이름을 명시하는 것을 "변수명" 이라고 한다.

var

변수(박스)를 만들 때 사용

박스 안에 데이터X

var comic;

데이터 넣기

comic 박스 안에 원피스 데이터를 할당한 상태

comic = "원피스";

데이터 확인

console.log(comic);

var 키워드를 사용해서 변수를 만든 상태 = 변수선언

변수에 데이터를 할당한 상태 = 변수 초기화

변수생성(변수선언)과 데이터 넣기(변수 초기화)를 동시에 하기

var apple = "사과";

console.log(apple);

여러개의 변수를 만들때 var를 반복적으로 사용하는 것보다 묶어서 변수선언가능

var a;
var b;
var c;

var a, b, c;

동시 초기화도 가능

두개를 나누는 기준은 취향차이

var d = 10,e = 20, f = 30

var d = 10, 
	e = 20, 
	f = 30

undefined

변수를 선언만 한상태에서는 어떠한 값이 들어가있을까? undefined

자바스크립트는 여러개의 데이터 형태를 가지고있는데 문자, 숫자, 배열, 함수 ,개체 ,null ,undefined

undefined는 다양한 데이터 종류중 하나이다

모든 변수는 선언과 동시에 undefined가 자동으로 할당된다 (중요)

var computer;

console.log(computer)

추가적인 내용

변수안에 생성된 데이터는 언제든지 변경가능

집 -> 아파트로 변경하고 싶을 때

var house;
house = "집";

console.log(house)
house = "아파트";

console.log(house)

즉 최초 변수를 선언하고 최초 초기화를 했을때 무조건 undefined, undefined에서 등호를 사용하여 할당된 데이터로 바뀐것

눈에보이지않는 영역이기때문에 잘 기억 중요한 개념 !!

var house;
console.log(house)

//undefined -> 집
house = "집"
console.log(house)

변수이름 작성요령

두개의 명사를 이어서 작성.

점수인데 축구점수인지 농구점수인지 역사점수인지 구체적으로 명시해줘야 다른 개발자가 코드를 봤을때 이해하기가 쉬움 (최소 두개의 단어로 변수를 작성)

// 캐멀케이스(낙타등에 혹처럼 오르락 내리락)
var mathScoreStudent = 10;


//스네이크 케이스(뱀처럼 길게 늘린다라고해서)
var math_score_student = 10;

// 주의점
//케밥 케이스(사용불가)
var math-score-student = 100;

변수이름 주의점

1. 중간하이푼(-)은 사용할수없음

//케밥 케이스(사용불가)
var math-score-student = 100;

2. 변수이름을 지을때 특수문자 사용가능(변수의 첫글자로), 그외 다른 특수문자를 첫글자로 사용하면 안됨

var _math;
var $math;

3. 변수는 숫자를 조합해서 사용가능하나 숫자가 먼저나와서는 안된다.

var apple10;

var 10apple; (사용불가)

4. 최대한 자세히 적는게 중요.

var w; (잘못된 예)

5. 에약어를 사용하면 안된다

var, typeof, function, null, undefiend, false, console.. 등등 자바스크립트에서 사전에 정의해놓은 키워드를 예약어라고 한다.

예약어들은 하나의 단어로 구성되어있기 때문에 예약어 에러를 피하기위해 두개이상의 명사조합으로 변수이름을 작성하면 에러가 발생하지않는다.

데이터타입

자바스크립트에 등호로 들어가는 여러개의 데이터들이 있는데 데이터의 종류를 데이터타입 이라고 한다.

각각 데이터 타입마다 고유의 skill이 있다.

두개 진영을 분리하고 각각 어떤 특징을 가지고 있는지 알 필요가 있다.

문자열 (String)

문자열 만드는 두가지 방식('', "")

주의할점은 섞어서 사용하면 안됨

var msg1 = "Hello World"
var msg2 = 'Welcome'

console.log(msg1);
console.log(msg2);

var msg3 = "Nice to meet you'; (잘못된 예)

축약어 표기 두가지 방법

""(큰따옴표) 안에 '(작은따옴표) 사용

''(작은따옴표) 안에 특수문자(역슬래쉬:) 사용후 '(작은따옴표)

var msg4 = "She's girl";
var msg5 = 'She\'s girl';

console.log(msg4);
console.log(msg5);

코드가 화면에 출력됐을떄 검은색으로 출력되면 문자열(다크모드 - 흰색)

숫자(Number)

숫자같은경우 파란색(다크모드-보라색)으로 출력

var num1 = 10;
var num2 = -10;
var num3 = 3.14;
var num4 = -3.14;

console.log(num1);
console.log(num2);
console.log(num3);
console.log(num4);

연산자

더하기, 빼기, 곱하기, 나누기, 나머지값

문자열 연산자

""안에 들어가있기떄문에 문자열임

문자열 안에 들어가있는 숫자는 사칙연산 일부작업이 가능(덧셈을 제외하고)

문자열에서 덧셈은 글자를 이어붙인다

//숫자 사칙연산

var a = 20;
var b = 10;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);

//문자열 사칙연산

var str1 = "20";
var str2 = "10";

console.log(str1 + str2);
console.log(str1 - str2);
console.log(str1 * str2);
console.log(str1 / str2);
console.log(str1 % str2);

공백 한개를 문자로 인식해서 큰 공백이 생김

html과 차이가 있다. 공백을 한칸만 인식했지만 자바에서는 공백을 전부 문자로 인식

문자열과 숫자를 덧셈을 해주게되면 최종결과값은 문자열(검은색) 데이터타입(다크모드-흰색) 으로 출력됨

var firstName = "Woosung"
var lastName = "Kim"

console.log(firstName + lastName);
console.log(firstName + "       " +lastName);

var str11 = "현재 시간은 ";
var time = 10;
var str12 = "시 입니다.";

console.log(str11 + time + str12);

++, --

-- 는 변수 안에 들어가있는 숫자를 -1 차감시키겠다 라는 의미

등호 데이터를 볼때는 뒤에서부터 해석하는게 중요

num10에 10이라는 데이터가 들어가 있는 상태에서 -1을 해서 나온 9를 num10(자기자신)에게 업데이트 해준 것

위에 작업을 --로 간소화한것

var num10 = 10;

(num10 = num10 -1;) 같은의미

console.log(num10); //9
console.log(--num10); //8
console.log(--num10); //7

++도 마찬가지

var num10 = 10;

console.log(++num10); //11
console.log(++num10); //12

주의점 : ++, --를 앞에 사용하나 뒤에 사용하나에 따라 결과가 달라짐

console.log에 num10에 있는 값을 출력시켜주고 그다음 1을 차감시키겠다 라는 의미, 한텀쉬고 -1로 차감시켜준것

var num10 = 10;

console.log(num10--); //변화없음
console.log(num10); //9

즉 --앞에 쓴건 1을 차감하고 값을 업데이트해서 console.log에 찍어주겠다

선 차감을 할지 후 차감을 할지 차이

++도 마찬가지

var num10 = 10;

console.log(--num10);
console.log(num10);

나머지기호

+=, -=, *=, /=, %=

개념자체는 나머지 기호에도 똑같이 통용된다.

var num20 = 20;

num20 += 10;    [num20 = num20 + 10; (같은의미)]

console.log(num20);

비교연산자

>, <, ==, ===, <=, >=

true, false로 결과가 나타나는 데이터타입을 boolean이라고 하는데 비교연산자를 사용하게 되면 결과값은 항상 boolean이 나타난다.

var a = 10;
var b = 20;
var c = 30;

console.log(a > b);
console.log(a < b);
console.log(a >= b);
console.log(a <= b);

==, ===는 둘다 같다의 의미를 지니고 !=, !==는 다르다의 의미를 가지고 있다.

var a = 10;
var b = 20;
var c = 30;

console.log(a == b);
console.log(a === b);

console.log(a != b);
console.log(a !== b);

등호 갯수에 대한 차이점

등호가 3개를 사용할때는 값을 비교할때 더 엄격하게 따짐

엄격함이란 비교하는 대상의 데이터타입이 같은지도 따진다

데이터타입이 다르기때문에 등호3개에서는 false로 출력

안전하게 코딩하고싶다면 ==보다는 ===를 사용 (==는 잘 사용안한다 라고 생각)

var num10 = 10;
var num20 = 20;
var str10 = "10";
var str20 = "20";

console.log(num10 == str10);
console.log(num10 === str10);

console.log(num20 != str20);
console.log(num20 !== str20);

논리연산자

AND(&&), OR(||)

AND는 둘다 모두 true인 경우 true가 나오고 OR은 둘중 하나라도 true인 경우 true가 나온다

var num30 = 30;
var num40 = 40;
var num50 = 30;

console.log(num30 === num40 && num30 === num50);
console.log(num30 === num40 || num30 === num50);

boolean

true, false 값만 가지고 있음

변수안에도 direct로 작성도 가능

boolean은 논리연산자와 결합해서 특정 사이트에서 로그인시 아이디, 비밀번호 둘다 맞아야 로그인시켜주는 방식에 활용가능

var bool = true;
bool = false;

console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);

console.log(10 === 10 || 20 === 30);

Author And Source

이 문제에 관하여(script - 1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@woosungkim0123/자바스크립트-1편

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)