변수(let, var)

javascript 소스폴더 : webapp/javascript


자바스크립트 선언 방법3
- inline => 태그에 직접 스크립트를 작성하는 방법(비추)
- internal => <script></script>태그 안에서 작성하는 방법(꼭 필요 할 때만)
   - declare1.html=>internal 방식
- external=> 스크립트 코드를 외부 파일에 작성한 후
                <script src='file_name'></script>와 같이 사용



console.log(  );
- console=객체(object)
- '.'=가지고 있다
- log(  )=함수(function)log
ex) 함수 : alert(  ), log(  )... | (   )이 없으면 변수



irum="이해선";
console.log(irum);
- irum은 변수
- 문자열은 " " 을 사용한다(하지만, ' '와 " "는 구분하지 않는다)
- ' " " ', " ' ' "(정석) -> 가능
- " ' " ', ' " ' " -> 불가능
- ' ' ' ', " " " "-> 불가능
- internal, external은 ';'(세미콜론)은 옵션(붙여도 되고 안붙여도 된다)



<input type='button' value='CLICK'
      onclick='javascript:a=50; b=60; alert(a+b)'>
- onclick : 이벤트 핸들러(on(~하면)+click(이벤트명))
- alert : alert창이 띄어진다(결과창 : 110)
- 버튼을 클릭하면 'javascript:a=50;b=60;alert(a+b)'가 실행



<script>
   function a( ){
   alert('방가~~~'); 
}
</script>
<input type='button' value='CALL'
      onclick='a( )'>
- 버튼을 클릭하면 자바스크립트 함수 a를 실행한다(결과창 : 방가~~~)

---------------
[미션1] declare_test.html, declare_test.js
국,영,수 점수를 임의의 변수에 대입 후, 3개의 성적을 합계, 평균을 계산하여
console에 출력

[미션2] declare_test2.html, declare_test2.js
학번, 성명, 연락처를 임의로 정해 변수에 대입 후, ul태그를 사용하여
document에 출력
---------------

'+'기능 
- 산술연산 : 좌우가 모두 숫자 일 때
- 이어붙이기 : 좌우 하나라도 문자열 일 때
ex) kor=50;
console.log('국어:' + kor); => (결과창 : 국어: 50)



변수(가변 값)사용 목적
1. 재활용 가능(중복사용 가능)
2. 의미 전달이 쉽다
3. 속도 향상up



자바스크립트(javascript) 표기 방법
- 대소문자를 구별한다
- 큰 따옴표, 작은 따옴표를 구별하지 않는다
- 키워드 혹은 명령어들 사이에는 한 칸 이상의 공백을 기술한다
- 함수에는 항상 (  )가 있다
- 명령어들의 집합은 {  }로 묶는다



- 전역형 : {  }와 관계없이 모든 곳에서 사용가능
- 지역형 : {  } 안에서만 사용가능
   - var
      - 해당 페이지 내부에서만 사용 할 수 있다
      - 중복 선언이 가능하다
ex) var a=10; 이라고 선언 후
          a=10; 선언 가능


var | let 차이점
var
- hoisting가능
- 사용 가능 지역은 해당 function내부이다
- var로 선언한 변수의 경우 hoisting시 undefined로 변수를 초기화
let
- hoisting불가능
- 사용 가능 지역은 해당 블럭 내부이다

*let과 const로 선언한 변수의 경우 hoisting시 변수를 초기화하지 않는다
*hoisting : 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미



<script>
function Gu( ){...}
...
var g=new Gu( );
</script>
- g는 변수이면서 객체
- 함수 Gu가 객체형태로 사용되어 new 연산자를 사용하여 객체형 변수 g를 생성

ex) function 붕어빵 틀( ){...}
a=new 붕어빵 틀( );
b=new 붕어빵 틀( );
붕어빵 틀에 의해서 새롭게 만들어진 a, b가 생성된다
- a,b는 객체


변수 사용규칙
- 사용가능 문자 : 영 대/소문자 숫자, 밑줄(-,_), $
- 자바스크립트는 대, 소문자를 구별한다
- 자바 스크립트의 고유명령(예약어)는 사용 할 수 없다(ex)true, false X | true_1, false_2 O)


산술연산자
- "%"는 몫이 정수 일 때까지만 나누고 난 나머지 값을 구하는 연산자
ex) 10/3=3.333...
     10%3=1
     N%7==0일 때, N=7의 배수


관계 연산자
- >, <, >=, <=, ==, ===, !=
ex) a>b(국어적 표현에서는 1,2 옳다)
   1. b는 a보다 작다(전산 상에서 X)
   2. a는 b보다 크다(전산 상에서 O) -> greater than
ex) a<b(국어적 표현에서는 1,2 옳다)
   1. b가 a보다 크다(X)
   2. a가 b보다 작다(O) -> less than
- = : 대입
- == : 등치 -> 값이 동일
- === : 완전등치 -> 값과 데이터가 동일(==보다 속도가 빠르다)




논리 연산자
- 논리의 세계에서는 true(참=on=1), false(거짓=off=0)만 존재

1) 논리 곱(&&, &)
   - 두 개의 조건이 모두 맞아야 결과가 참이 된다
   - && : (조건에 따라) 연산 생략 기능이 있다(논리 연산이기 때문에 true 또는 false로 결과창이 나온다)
   - & : 연산 생략 기능이 없다(1 또는 0으로 결과창이 나온다)

- 논리 곱(~및, ~이고->AND)
ex)p=>나는 서울에 있다
    q=>나는 남자다
p      q      p*q(논리 곱)
1      1        1              true*true=true
1      0        0              true*false=false
0      1        0              false*true=false(첫번째 사건이 0이면 두번째 사건과 관련 없이 결과는0)->생략가능
0      0        0              false*false=false(첫번째 사건이 0이면 두번째 사건과 관련 없이 결과는0)->생략가능

ex)
data : gender, age, zone, hobby 일 때
"서울지역의 20대 남성에 대한 취미들 조합..."
=> zone=='서울'&&
     (age>=20 && age<=29)&& gender='남자'



2) 논리 합(| |, |)
   - 두 개의 조건 중 하나만 참이어도 결과가 참이 된다
   - | | : 연산 생략 기능이 있다(논리 연산이기 때문에 true 또는 false로 결과창이 나온다)
   - | : 연산 생략 기능이 없다(1 또는 0으로 결과창이 나온다)

- 논리 합(~이거나, ~또는->OR)
ex)p=>나는 서울에 있다
    q=>나는 남자다
p      q      p+q(논리 합)
1      1        1              true+true=true(첫번째 사건이 1이면 두번째 사건과 관련 없이 결과는1)->생략가능
1      0        1              true+false=true(첫번째 사건이 1이면 두번째 사건과 관련 없이 결과는1)->생략가능
0      1        1              false+true=true
0      0        0              false+false=false





연산 생략기능
ex) a=10, b=20, c=30

p=b<a(false=0), q=c>a(true=1)일 때
p(0)&&q(1)==>0(첫번째 사건이 0이기 때문에 뒤의 사건에 대한 연산은 하지 않는다 결과는 0)

p=b>a(true=1), q=a>b(false=0)일 때
p(1) | | q(0)==>1(첫번째 사건이 1이기 때문에 뒤의 사건에 대한 연산은 하지 않는다 결과는 1)




[미션]
1)논리곱의 첫번째 조건은 참, 두번째 조건은 거짓
2)논리합은 첫번째, 두번째 모두 참