3.22 - JS

javascript는 head안에 주로쓰고 그렇게 권장함

 

head 안에 <script type="text/javascript">로 이제부터 javascript를 쓰겠다고 알려놓는다

 

 

출력

 

document.write >> 말그대로 page위에 document를 쓰는 것 - 동적인 부분에서 html과 다름

 

ex)

html에서 tag를 사용해 1+1을 쓰면 그대로 화면에 1+1이라고 뜬다

javascript를 사용해서 1+1을 쓰면 계산된 값인 2가 나온다

 

alert >> 경고창이다

 

ex)

alert(Hello World!);

 

 

console.log >> 소스창에 console안에 뜨는데 js가 제대로 작동이 되는지 안되는지 확인할 수 있다(? 아직 잘 모르겠음)

 

html 태그 안에 속성값으로 onclick/ click 을 주고 그 안에 java를 넣어서 태그에 움직임을 준다

 

 

ex)

    <input type="button" value="버튼" onclick="alert('WARNING')">

input이라는 태그안에 3개의 속성값이 들어갔다 type, value, onclick

type과 value에 맞는 output이 나왔다

 

onclick속성값 때문에 버튼을 누르면

이렇게 alert(경고창)이 뜬다.

 

변수: Variable

>> 좌항과 우항을 대입해서 같게 만들어준다.

상수: Constant

>> 절때 변하지 않는 것.

 

Data type)

글자형 : string ('')

>> 글자형은 적힌 내용이 무엇이든 글자 그대로를 인식한다

ex) console.log('40');

>> console에서 40이라는 숫자를 숫자가 아닌 글자 자체로 인식한다

console.log('40'+'80');

result = 4080

 

숫자형 : int

ex) console.log(40);

>> 숫자 40으로 인식함

console.log(40+80);

result = 120

 

>>연산할때

console.log('40'+40);

80이 아니라 숫자 40과 글자 40을 붙힌 4040이 나온다

 

 

대입연산자 : "=" equiation doesn't means both elements have same value but makes them same

heini = 80;

>> heini의 value가 80이 되었다

 

heini2 = 120;

>> heini2의 value가 120이 됨

 

연산자 : addition, subtraction, multiplication, division ...,etc

설정된 변수 값이 있어야 함

console.log(heini+heini2);

result = 200

 

 

Boolean = result output form of 'True or False'

 

조건문 / if

use two equiation : ==

it gives a question "is the both elements on other side are the same?"

 

so 'IF' the value is same it shows result of TRUE

and when it's different, shows result of FALSE

>> under Boolean

 

if(heini == num){

     console.log('right')

}

else {

     console.log('wrong')

}

 

>> heini의 값이 num과 같은가? 같다면 (if) 'right'를 띄우고 틀리다면 (else) 'wrong'을 표시해라

 

비교문 / = > <

console.log(heini == heini2);

>> heini 는 80, heini2는 120이기 때문에 boolean값으로 false로 표현됨

>> 만약 두 elem의 value가 같다면 true로 표현됨

 

다른 방법으로 표현해볼때

result = heini == heini2;

console.log(result);

 

>> result로 값을 내놓고 console.log를 통해서 표시한다. 결과는 똑같이 false로 표현됨

 

result = heini < heini2;

console.log(result);

 

>> heini (80) 는 heini2(120)보다 작다 그러므로 result의 값는 true고 그게 console.log를 통해서 표시된다.

>> console.log가 없으면 안보인다>

 

반복문 / for

for(i=1; i<10; i++){

     console.log('2*'+i+'=' + 2*i)

}

 

>>for 문 : i가 1이고 (i=1) 10보다 작을때(i<10) 까지 반복한다 (i++)

>>console.log: 크게 두가지를 더한다고 생각한다 <'2*'+i+'='> + <2*i>

                    2*과 = 는 ''로 감싸져있다 >> 글자형이라는 소리 >> 그러므로 두가지 elem은 고정이 되고 위에 for문                      에 맞춰진 i 만 계속 바뀌면서 연산값을 낸다. >> output을 보면 구구단이랑 똑같다.

>> 2 x 와 = 는 고정/ 반복문에 맞춰서 i는 계속 변경

source > console에서 볼 수 있음