💻 학습 내용
자바스크립트란?
🖤 자바스크립트는 인간에게 친숙한 언어라고 볼 수 있다.
high level language 중 하나가 자바스크립트 언어이다.
입문하는 단계에서 빠르게 습득할 수 있는 언어이다.
자바스크립트 사용 분야
🖤 하이브리드 앱
자바스크립트 css 익히게 되면 안드로이드 앱, 앱스토어 앱을 출시할 수 있게 됐다.
🖤 node.js
자바스크립트 언어를 기반으로 node.js 툴을 이용해서 개발할 수 있다.
Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼
작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능
🖤 자바스크립트 iot
웹사이트의 주요기능을 제작하는 것 뿐만 아니라 굉장히 다양하게 사용될 수 있따.
자바스크립트 3분야
🖤 자바스크립트 코어 : 개발언어의 문법적인 내용을 다루는 영역
🖤 클라이언트 측 자바스크립트 : 브라우저를 제어할 때 사용하는 자바스크립트
🖤 서버 측 자바스크립트 : node.js 영역
자바스크립트 연동 방법
🖤 js 파일 안에서 자바스크립트 언어를 작성하고 script태그에 src를 활용해서 파일을 연동시킬 수 있다.
위에서부터 순차적으로 실행된다는 것을 기억해두자
🖤 연동을 할 때 src로 하고 script 태그 안에 또 script태그 를 작성하면 적용이 되지 않는다.<script src="js/main.js"></script> <script> /* console.log("Hello"); console.log("Comment"); 전체 주석 (전체 주석 안에 한줄 주석을 넣을 수 있다) */ // console.log("AAA") 한 줄 주석 </script>🖤 src로 연동하거나 script하나만 해야지 두가지를 혼용해서 사용하면 안된다.
🖤console.log(“Hello");
콘솔탭에 특정 언어를 출력할 때 사용되는 명령어
🖤 자바스크립트가 작성된 것을 확인하고 싶으면 console 버튼을 누르면 된다.
자바스크립트 코어
-자바스크립트 변수 : 데이터를 저장하는 공간
이삿짐 박스가 변수 (이삿짐 박스에 들어갈)물품이 데이터이다.
이삿짐 박스는 겉에다가 어떠한 내용물이 들어갈지 겉에 표기를 해줘야 한다.
예) 이삿짐 박스 = 만화책 박스->(변수명)
데이터 타입=데이터의 종류
(공부할 때 영어 표기도 같이 기억하면 좋다)
•문자열 (String)
•숫자(Number)
•논리(Boolean) : true or false
•undefined
•null
——————————————————————————> 원시 타입
•배열 (Array)
•함수 (Function)
•객체 (Object)
——————————————————————————> 참조 타입
변수 입력 방법
🖤 comic 박스를 생성한 상태
//변수 선언
var comic;
🖤 comic 박스 안에 원피스 데이터를 할당한 상태
// 변수 초기화
comic = "원피스";
console.log(comic);
🖤 변수를 선언함과 동시에 초기화를 진행해준 상태
var apple = "사과";
🖤 변수 동시 선언 2가지 방법
var a;
var b;
var c;-
줄 바꿈 없이
var a, b, c; -
줄 바꿈 있음
var a,
b,
c;🖤 변수 동시 초기화
var d = 10;
var e = 20;
var f = 30;- 줄 바꿈 없이
var d = 10, e = 20, f = 30;
- 줄 바꿈 있음
var d = 10,
e = 20,
f = 30;🖤 모든 변수는 선언과 동시에 undefined 자동으로 할당된다.
var house;
cosole.log(house);
undefined -> 집
var house;
house = "집";
console.log(house);
집 -> 아파트
house = "아파트";
console.log(house);
변수명 작성 방법
🖤 캐멀 케이스
var mathScoreStudent = 10;
🖤 스네이크 케이스
var math_score = 10;
🖤 이렇게 작성하면 안됨
var math-score-student=100;
var _math;
var $math;
var apple10;
var 10apple; 숫자가 먼저 나와서는 안된다
var w; 다른 개발자가 알 수 있게 자세하게 작성해주어야 한다. 의미가 불분명한 단어 작성 x
데이터 타입
🖤 문자열 (String)
- "" 사용
var msg1 = "Hello Future"; - '' 사용
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';
역 슬래쉬로 작은 따옴표를 넣어주면 인식이 된다.
🖤 숫자 (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);
계산이 가능하다
console.log(num1 + num2);
console.log(num1 + num3);
🖤 연산자
숫자 사칙연산
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);
var fistName = "Jeno";
var lastName = "Lee";
console.log(fistName + " " + lastName);
var str11 = "현재 시간은";
var time = 10;
var str12 = "시 입니다.";
console.log(str11 + time + str12); //문자열 데이터 타입으로 출력된다 (검정색 글씨)++, -- 연산자
var num10 = 10;
num10 = num10 -1;
console.log(--num10); //9
console.log(--num10); //8
console.log(++num10);
console.log(++num10);
console.log(num10--); num10값을 출력시키고 그 다음에 -1을 하겠다는 의미 (한텀 쉬고 다음 num10에서 결과값이 출력됨)
console.log(num10);+=, -=, *=, /= ,%= 본인의 값을 업데이트 하고 싶을 때
var num20 = 20;
num20 = num20 + 10;
num20 += 10;
console.log(num20);
비교 연산자 >, <, ==, ===, !=, !==, <=, >=
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);
console.log(a == b);
console.log(a === b);
console.log(a != b);
console.log(a !== b);var num10 = 10;
var num20 = 20;
var str10 = "10";
var str20 = "20";
console.log(num10 == str10);
console.log(num10 === str10); //데이터 타입 까지 비교하기 때문에 false가 나옴
-> 주료 사용
console.log(num20 != str20); //데이터 타입을 떠나서 내용물은 같기 때문에 false
console.log(num20 !== str20); //데이터 타입이 다르기 때문에 true -> 주로 사용논리 연산자 : AND(&&), OR(||)
var num30 = 30;
var num40 = 40;
var num50 = 30;
console.log(num30 === num40 && num30 === num50 && num40 !== num50);
console.log(num30 === num40 || num30 === num50 || num40 > num50);불리언(Boolean) : true , false
console.log(true);
console.log(false);
console.log(1 === 2);
console.log(10 < 20);
console.log(10 === 10 || 20 ===30);
var bool = true;
bool = false;마무리
자바스크립트를 처음 배웠다. 개념 부분이 컴활이랑 비슷한 부분이 있었다.
오늘은 기본적인 개념을 배웠는데 주말동안 남은 자바스크립트 강의를 다 들어야 겠다.
