JavaScript 개념🌱

JavaScript 🌱

멀티미디어로 움직이는 이미지, 또는 동적으로 컨텐츠를 바꿀 수 있는 스크립트 언어

자바스크립트의 세분류

• 자바스크립트 코어

  	어떤 개발언어에 문법적인 내용을 다룸

• 클라이언트 측 자바스크립트

  	브라우저를 제어할때 사용하는  자바스크립트 영역 자바스크립트 입력법

• 서버 측 자바스크립트

  	로드 js

JavaScript 실행하기 🌴

✔ Html언어에 자바스크립트 언어 적용하기

1. script태그 넣어주기

html 문서에 body 태그안에 작성하기

<script>
		
		console.log("Hello");

	</script>

console.log의 결과값을 확인 할때에는 오른쪽버튼 검사-> console 클릭해서 확인가능
 
console.log() -> () 소괄호 안쪽에 입력된 정보를 console탭에 출력 시킬때 사용되는 명령어

->가독성이 떨어진다

2. <script src=""></script> 

 src 안쪽에는 자바스크립트 파일경로 입력해주기
js확장명을 갖고있는 파일안에서 자바스크립 언어를 입력해주고  파일경로를 연동해주는 방법  

🔥 src 로 js파일을 연동하거나 script태그안에 작성하거나 해야함

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

👉적용 안된다

🔥 자바스크립트도 css html 처럼 위에서 부터 순차적으로 적용됌

🚀 자바스크립트 코어내용

	<script>

		/*
		console.log("Welcome");
		console.log("Comment");
		*/

-> 전체내용 주석처리하겠다

		// console.log("Welcome")
		
-> 한줄만 주석처리하겠다
	</script>

💡 (전체 주석안에  /*    /*또다른주석*/   */  넣을수 없다)
(전체 주석안에 또 다른 /*    //한줄주석은 넣을수 있음    */

🔥 JS파일 작성

 
💡변수 선언 < comic 박스를 생성한 상태 >

var comic;



💡 변수 초기화 < comic 박스 안에 원피스 데이터를 할당한 상태 >
 👉등호를 사용해서 데이터를 삽입한 상태

comic = "원피스";

console.log(comic);

💡 변수를 선언하고 바로 초기화 작업한 상태
var apple = "사과";

💡 한번에 묶어서 여러개 변수 선언가능

var a;
var b;
var 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

undefined : 자바스크립트가 가지고 있는 데이터의 형태 중 하나

💻 모든 변수는 선언과 동시에 undefined 가 자동으로 할당된다.

var computer;

console.log(computer)

💡 변수안에 만들어진 데이터는 언제든지  내가 원하는 타이밍에 변경가능

var house;
house = "집";

console.log(house); 

house = "아파트"

console.log(house);

var house;
console.log(house);


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

🔍 변수이름 작성요령

💡 캐멀 케이스
var mathScoreStudent = 10;

💡 스네이크 케이스
var math_score_student = 10;

🔥 주의점

1. html에서 사용했던 - 는 사용안됌(케밥케이스)

 var math-score-student = 100; (X)
 
 2. _, $ 특수문자 사용가능
   var _math;
   var $math;
   
3. 알파벳 숫자 조합 가능 단, 숫자먼저나오면 안된다.

var apple10; (O)
var 10apple; (X)

4. 의미가 불분명한 단어사용은 기피하기,
   최대한 자세히 작성하기
var w; 

🚀 데이터 타입 = 데이터의 종류

= 등호안에는 다양한 데이터들이 들어간다.

🚀1. 문자열 (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)

🚀2. 숫자 (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);

👉연산가능

🚀Cf 연산자

🔍 숫자 사칙연산

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 firstName ="Inkweon"
var lastName ="Kim"

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

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

console.log(str11 + time + str12);

🔥 ++, -- 연산자


var num10 = 10;

// num10 = num10 - 1;
// console.log(num10);
// console.log(--num10);  //9
변수안에 들어가있는 숫자를 -1씩 차감시키겠다.
// console.log(--num10); //8

console.log(++num10);  //11
console.log(++num10); //12
변수안에 들어가있는 숫자를 +1씩 증가 시키겠다.

var num10 = 10;
console.log(num10--);
 입력값을 출력해주고 그다음에 1을 차감하겠다
console.log(num10);
 두번째 num10 에서 9가 출력된다.

console.log(--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);

var num10 = 10;
var num20= 20;
->숫자열 데이터 타입

var str10 = "10";
var str20 = "20";
->문자열 데이터 타입
console.log(num10 == str10);  -> true
👉 console.log(num10 === str10); -> false

🔍 ==, ===의 차이점
===값을 비교할때 더 엄격하게 따지는데,(데이터의 타입이 같은지 까지 비교) 
서로의 데이터 타입이 다르기때문에 false로 표시된다.

var num10 = 10;
var num20= 20;
->숫자열 데이터 타입

var str10 = "10";
var str20 = "20";
->문자열 데이터 타입

console.log(num20 != str20); -> false 
👉 console.log(num20 !== str20); -> true

!= -> 같지 않은가?
!== -> true 로나타나는 이유는 비교대상의 데이터 타입이 다르기때문에 다르다 는 true로 나옴

🚀3. 논리 : 논리연산자 : AND(&&), OR(

console.log(num30 === num40 && num30 == num50) -> false
앞에나오는 결과와 뒤에나오는 결과 모두 참일 경우 참이 나옴
console.log(num30 === num40 ||  num30 == num50) -> true
앞이 참이거나 뒤에 참이거나 둘중에 하나가 참이면 참 이나옴

🚀4. 불리언(Boolean) : true, false

console.log(true); -> true
console.log(false); -> false
console.log(1 == 2); -> false
console.log(10 < 20); -> true
console.log (10 === 10 || 20 === 30); -> true

var bool = true;
bool =false;

👉 논리연산자와 결합해서 특정사이트 로그인 할때 사용된다