[4기]9일차 Java Script 배우기1 ( Java Script란?,변수,함수,조건문 )

오늘은 드디어!!! 부트캠프를 참여하면서

 

첫 프로그래밍 언어 Java Script 를 간단하게 

 

무엇인지 알아보았어요 ㅎㅎㅎ

 

음 처음이라 되게,,,,,,

 

자주 사용하지 않는 단어들을 쓰다보니 

 

헷갈리기보단 낯설어서 머엉--- 하면서 들은거 같기두,,,,,ㅋㅋㅋㅋㅋ

 

그래도 아직 초반이라 들을만 했던걸로 ~ 

 

 

일단 자바스크립트가 무엇인가에 대해 

 

탄생배경등 설명을 들었는데 

 

강사님께서 항상 역사에 대해 재밌게 설명해주시더라구요 ㅋㅋㅋㅋ 

 

탄생배경에 대해 이야기하실때마다 되게 재밌네라는 생각을 한거 같아요 ㅎㅎ

 

그럼, 자바스크립트란?

 

- html, css를 프로그래밍적으로 제어 가능

- 웹브라우저가 해석해서 바로 실행할 수 있는 유일한 언어

 

* 해석해서 바로 사용가능한게 유일하다니.... 왜일까요? 

왜 이것만 유일할려나..? 만들지못하나?? 좀 궁금하긴하네요?

 

ㅋㅋㅋㅋ알아봐야징 

 

그럼 이 자바스크립트 언어가 동적인 웹을 만들기 위해 할 수 있는것은?

 

1. 데이터 저장 2. 값을 계산한다. 3. 결과 반영 4. 다른 컴퓨터 통신이 있어요!

 

값을 계산하는게 가장 인상깊은거 같아요 ㅎㅎㅎ 

 

먼가 프로그래밍하면 막 계산해야할거같구 그런 이미지가 

 

떠오른달까요?ㅋㅋㅋㅋㅋ ㅎㅎ

 

자바스크립트도 css와 같이 

1. html 태그내에 삽입

2. 스크립트 태그 사용

3. 외부파일 저장 후 사용

 

다양한 방법으로 사용이 가능하지만,

 웬만하면 3번 외부파일로 따로 작성 후 적용하는 것이 베스트라고 하네요 ㅎㅎ

 

복잡해지고 길어지고 알아보기 힘들어서 그런거겠죠!?!?!?

 

ㅎㅎㅎㅎㅎㅎ

 

그럼, 자바스크립트를 사용하려면 

 

변수, 함수를 알아야 한다고 하는데엽! 

 

변수란?

 

-  말 그래도 변할 수 있는 값, 변할 수 있는 정보

 

var x = 3;
let y = 4;
const z = 5;

 

변수는 선언하고 = 을통해 할당하며 사용 가능하다.

또한, const 는 다른 두가지와 다르게 상수이기 때문에 변경할수 없는 수이다! 

 

그럼 나머지는 값을 계속 변경이 가능하지욥!!!

 

* 처음에는 그럼 왜 상수를 변수로 놔둔건가 의문이였어욬ㅋㅋㅋㅋ 

 

변수명을 우리가 지정할때, 

 

다른언어와 마찬가지로 내마음대로 1234 이렇듯 제목을 막 정해서는 안되는데용

 

1. $와_를 제외한 공백, 특수문자, 구두점을 사용할 수 없습니다!

2. 첫글자는 숫자금지

3. 대소문을 구별합니다.

ex) hello 와 Hello는 다른것!

4. 예약어가 쓰일 수 없다. 

- 이 경우 자바스크립트가 사용중인 문법이기에 사용이 안됩니다!

5. 유니코드 사용가능 

- 한국어 등 전세계 언어가 가능하지만 실무나 대부분 영문을 사용합니다 ㅎㅎ

 

평소에 코드를 작성할때도 어떤 변수명을 쓰느냐도 되게 중요하더라구요 ㅎ

 

처음 html할때는 한국어로 막 적었는데 

 

 연습을 통해 조금씩 성장하는걸로 !!!

 

변수 특징 

1. 변수는 var, let, const 로 선언이 가능하다.

요즘엔 var를 사용지향하고 let 과 const를 사용한다고해요 ㅎ

var의 경우 의도치않은 값까지 적용될 수 있어 그렇다고 합니다.

 

2. 변수를 선언할 때 var, let, const 한번만 사용

 

3. let, const은 블록 레벨 선언으로 불리며, 

블록밖에서 접근할 수 없으며 재정의가 불가능한 특징을 가지고 있다.

 

* const는 무조건 초기화 필수 

 

- 그럼, 여기서 블록레벨? 블록이 뭐지? 

 

{} 블록은 요거요거!!! 

여러줄의 코드를 하나로 묶어주는 단위랍니다 ㅎㅎ

 

 

2. 함수 

 

함수라고 하면 수학공부할 때 항상 듣던 말인데요 ㅎㅎ

정작 쓸때는 그냥 썼지 뜻에 대해는 생각 한적 없는 거 같아요 

 

강사님께서 재밌게 표현해주셨는데,

 

제가 맛난 라면 레시피를 가지고 있고 그 레시피를 알려달라고 여기저기서 

이야기할 때마다 적어서 주면 비효율적이므로 

 

이것을 복사 후 건내주는것

이게 함수가 하는 역할이라는거죠!!!

 

완전 이해쏙쏙 ㅋㅋㅋㅋ (라면맛있겠당)ㅋㅋ

 

반복적으로 필요한 코드를 덩어리 묶어서 

필요할때 마다 꺼내 쓰면? 베스트! 효율극대화 ㅎㅎㅎ

 

 구조는

 

함수 선언 : function 함수명 (){} 

함수 호출 : 함수명();

 

이렇게 구성!

 

선언 시, 함수명 옆에 () 안에 들어가는것이 파라미터! 매개변수 !

호출 시 함수명 () 들어가는것이 아규먼트 ! 전달인자! 라고 부릅니당

 

function 함수1 (a, b, c){

return a + b + c

}

 

함수1(10, 20, 30);

 

이럴경우 a,b,c는 파라미터 10,20,30 은 아규먼트 가 되겠죠!?

 

파라미터에 따라 다양한 결과값을 보여주게 된다.

 

그럼, 이 함수를 왜쓸까?

 

1. 재사용성이 높다 

-라면레시피처럼 복사해서 전달전달전달하면 재사용성이 높지요!

2. 유지보수가 용이 

- 보수가 필요한 함수만 쏘옥 뺴서 수정 하면? 유지보수 짱!

3. 구조파악 용이

- 반복되는 코드를 호출하면 언제든 쓸수 있으니 

굳이 같은 반복코드를 안써두 되니 구조가 간략해지겠당! 

 

이렇듯, 함수의 이용이 매우 중요하다는것을 배울 수 있었습니다!

 

 

 

3. 조건문

 

조건문이 참인 값이나 거짓인 값을 반환하는지에 따라 코드를 

수행할겨? 말겨? 를 판단합니다!

 

그 중 가장 대표적이고 많이 사용하는 if문! 

 

1) if - 조건이 만약 true일경우 안에 있는 코드를 실행하는반면, 

false 거짓일경우 다음 코드를 실행합니다. 

 

그럼 if는 참일때 실행되기에, 그다음 실행될

false 의 코드가 필요한데 이때는 else문을 사용하게 된다.

 

2) if - else 문

let x = 3;
let y = 7;

if(x == y){
  document.write('if문으로 실행되었습니다.');
} else{
  document.write('else문으로 실행되었습니다.');
}

 

- 만약 x와 y가 같다면 'if문으로 실행되었습니다.'을 화면에 적어죠 

아니라면 'else문으로 실행되었습니다.' 적어죠 

 

이렇듯! 참이면 if 코드 실행 아니라면 else 문 코드실행 !!!

 

삼항연산자 > if -else를 간단하게 표현한 방법이다.

 

let item = true ? console.log('true') : console.log('false');
console.log(item);

 

true는 참이기에 console.log('true') 실행되면서 item에 할당된다.

또한 console.log함수는 반환값이 underfined 이라 item엔 underfined 할당된다!

 

if문과는 다르게 삼항연산자는 코드의 실행, 값으로사용할 수 있다.

 

하지만 if문보다 간단하게 표현하기에 

너무 많은 조건들을 비교할 경우, if문에 비해 가독성이 떨어지므로 주의주의!!!!

 

이렇게, 오늘은 간단하게 자바스크립트에 대해 기본을 배워보았습니다!!

 

처음 언어를 시작하는 만큼 

 

단어들이 익숙해지도록 한번 더 읽어보고 실행해보고 연습해봐야 할 거같아요 ㅎㅎ

 

얼른 배워나가서 내가 만든 html css 적용해서 로그인 화면 구동 될 수 있게 

 

하면 너무 재밌을 거같아요 ㅎㅎㅎ 

 

그러기 위해서!!! 공부 파이팅!!!!!!!

 

내일 수업도 파이팅!!!!!!!!