JS 기초 - 변수, 조건문, 반복문, 함수

javatscript의 기본

1. 기능을 추가하고 다루는 감독 역할을 한다
2. css보다 우선순위가 더 높다
   2-1. css에 컬러값을 줘도 Js에 컬러값을 주면 Js의 컬러값으로 나온다
   2-2. 하지만 css가 이길 방법은 있다

   css의 컬러값 뒤에 !important를 붙여주면 된다
   그러므로 Js는 css의 역할에 관여해선 안된다

3. 기본 출력문 : console.log();
4. 줄바꿈 :\n → html의 br같은 개념
5. console.clear(); : console 창 값 기록 지우기

---

변수

1. 한 공간을 만들고 값을 넣는다

var x; 						// x라는 저장공간을 만든다

x = 5; 						// x라는 변수에 값 5를 넣는다
x = 10;						// x라는 변수에 값 10을 덮어씌운다

2. var let const 세가지만 사용한다

   2-1. var : 변수 타입을 지정해 주지 않아도된다

   • boolean, int... 상관없다
     
     2-3. let : 일정한 또는 지정된 지역에서만 사용
   • 지역변수를 선언하면 선언된 함수의 범위안에서만 사용가능
     
     2-3. const : 상수, 절대 바뀌지 않는 값을 넣는다
   • html의 id와 같은 개념

• 위 개념을 정리하자

console.clear();  //출력기록을 지우고 실행한다

let a = 10;
let b = 5;

let z=a;   //a의 값을 백업한다
a=b;
b=z;       //z=a와 같은 의미

a=b;
b=a;       //a값이 덮어씌어졌기 때문에 둘다 b값이 되버린다

console.log("a : " + a);
// 출력 => a : 5
console.log("b : " + b);
// 출력 => b : 10

---

조건문

• 입력방식 : if (조건){결과}
• else if : 또는
• else : 나머지 → 조건이 필요없다

console.clear();
 var age = 20;

if(age >= 20){
    console.log("성년입니다");
}

else if(age < 20){
    console.log("미성년입니다");
}

연산자가 궁금하다면 아래의 블로그를 참고하자

• 자바스크립트 연산자 정리

• 아래의 코드와 같이 이중으로도 활용할 수 있다

console.clear();
 var age = 50;                  // 나이가 50이다

if(age >= 20 && age <=30){      //20이상 30이하는 할인대상
    console.log("할인대상");
}

else if(age < 20){              //20미만은 비할인대상
    console.log("할인대상이 아닙니다");
}
else{                           // 그 외 나머지도 모두 비할인대상
    console.log("할인대상이 아닙니다");
}

---

// 여기서 if 부분은 아래와 같이 이중 if문으로 바꿀 수 있다

if(age >= 20){
   if(age <=30){ console.log("할인대상");}
}

---

while 반복문

• 입력방법 : while (조건){실행문}
  • if문과의 차이 : if문은 참이면 한번 돌고 끝, while은 참이면 계속 돌아간다
• 반복문 조건
  • 변수의 값, 조건, 다음 스텝 → 이 세가지는 필수이다

    var dan=1;
    	var i=1;							//변수의 값, 시작
    			while(i<=3){				//조건
    					console.log(i);
    					i++;  				//다음 스텝
            }

생각하는 방법 - 이건 진짜 중요!

• 만약 "1,2,3을 10번 출력하고 싶다"면 절대 처음부터 한번에 순서대로 코드를 작성하지 말고 기본 요소를 먼저 만들고 결과목적에 대입하자

1. 1, 2, 3 을 출력하는 코드를 만든다
2. 10번을 출력하는 코드를 만든다
3. 1번을 2번 코드 안에 넣는다

console.clear;

// 코드 합치기
var i = 1;
while (i <= 10) {
    var j=1;
    while (j <= 3) {
        console.log(j);
        j++;
    }
    i++;
}

// 10번 출력하는 코드 - 내가 원하는 목적
var i = 1;
while(i <= 10){
    i++;
}

 1,2,3을 출력하는 코드 - 기본 요소
var j=1; 
while(j <= 3){
     console.log(j);
     j++;
}

---

for 반복문

• 입력방법 : for ( 변수의 값; 조건; 스텝 ) { }
  • while 반복문의 기본 조건을 한번에 보여준다

for( var j=1; j <= 3; j++){
     console.log(j)
     }							//출력값 : 1, 2, 3

---

함수

• 데이터형으로는 한 기능을 실행을 할 수 없다

1. 숫자계열 : 정수(0,1,-1…), 실수(0.5)
2. 논리계열 : true/false
3. 문장계열 : (””) → 실행할 수 없는 데이터는 ();를 못쓴다
   • var a = 10;
   • 10(); →10를 실행한다? x

• 하지만 실행을 할 수있는 데이터를 만드는 것이 함수이다

입력방법 : var a = function( ){ };

html --!
<a href="#" onclick=a();> 버튼 </a>

javascript --!
var a = function(){
console.log('a 실행됨');
};
alert('a실행됨'); // console.log 대신 사용하면 팝업창으로 뜸

• var a = function을 function a라고 입력해도 된다

• 아래는 함수의 기본 틀을 보여주는 예시코드이다

console.clear();

function hello(a, b){  //hello는 매개변수라 한다
    var msg = "";
  
    if(a=="한국어"){
        msg="안녕하세요";   
    	}
    else if(a=="일본어"){
        msg="곤니찌와";
    	}
 
    for(i=0; i<b;i++){
       console.log(msg);
    	}
    }
    hello("일본어", 15);      // "일본어", 15은 hello의 인자값이라 한다

• 위의 코드로 hello라는 변수에 인자값을 활용한 하나의 기능이 생긴 것이다
• 인자값에 "일본어"와 15가 들어가면 곤니찌와가 15번 출력된다

---

Today Commet :

• while 반복문에 명시된 생각하는 방법은 이번에 처음 알게 되었는데 예시는 간단하지만 진짜 중요한 방법이라고 확신한다
  
  
• 여적지 코드를 순서대로 뒤에 적을걸 미리 생각해 가며 하다보니 하나의 코드를 만들때도 시간이 오래 걸리며 오류 발생률도 높았다
  - 이 부분이 내가 개발을 어려워하게된 계기였던거같다...
  
  
• 앞으로 배열, 객체 등등 기능을 공유하고 다루는 것이 있을텐데 위 생각하는 방법을 습관화하자