국비지원 JAVA(자바) 프로그래밍 (자바스크립트)

*국비지원 JAVA에 관심있으신 분들은 댓글남겨주시면 제가 아는 한 상세히 답변드리겠습니다*

 

 

 js(자바스크립트)는 바디 맨 끝부분에 링크 

console.log('hello') 는 

브라우저 콘솔창에서 확인 가능

vs 코드에서 같은 코드 찾기 alt 누르고 선택

---

변수 상수 

 

let 변수명;  mathScore

cosnt 상수명;  상수선언할 때는 대문자  

 

숫자로 시작 안됨

_ $ ㅣㄷ

 

옛날 방식 ->

    var 옛날꺼 =10;

    console.log(옛날꺼);

   

 

변수 선언 방식 

let a = "hello";
let b= 25;
let c ='ccccc';

let d= 'hello',
    e= 25, 
    f='aaaa';

상수 선언방식 예시

 

const COLOR_RED = '#f600';
const COLOR_BLUE = '#f1';

let color =COLOR_BLUE;


//네비 바 색
console.log(color);

//컨테이너 색
console.log(color);

//footer 바 색
console.log(color);

자료형 동적방식

숫자 

let n= 12345;
n= 'aaa'/333;

console.log(1/0);

console.log(n*10);

console.log(n-10);

 

위처럼 입력하면 

무한대나 Nan 으로 표시된다.

---

문자

작은따옴표 ' ' or 큰따옴표 " " 로 표시 ` ` 도 가능

 

//문자
let str='hello';
let str2="js";
let str3= str2+"abc"+str;
let str4= `aaaa ${str2}`;


console.log(str);
console.log(str2);
console.log(str3);
console.log(str4);

` ` <- $와 같이 사용하면 

변수로 인식해줌

 

` ` 기능 이어서 

//문자
let str='hello';

console.log(str+'js');
console.log(`${1+2} js`)

이런식으로 연산도 가능 함 

 

계산식: 1+1 표현하려고 하려고 할때

//문자
let str='hello';
// 계산식:1+1

console.log("계산식: 1+1 ");
console.log("계산식:" +1+1);
console.log("계산식: "+ (1+1));
console.log(`계산식:${1+1}`)

결과값 

 

불린형(boolean)

//boolean
let a= true;

let b= 5>1;

console.log(b);

 

---

특정값을 할당하지않았을 때

//boolean
let a;

console.log(a);

undefined -> 할당시키지않음

undefined로 설정하는 경우는 거의 없음

---

 

null로설정했을때 

let a = null

console.log(a);

null 로 표시 -> 비어있음

비워두고싶으면 null로 표시 

---

typeof

let a= 1;
console.log(typeof a)

typeof a의 데이터타입이 무엇이냐->

let a= null;
console.log(typeof a)

-> 자바스크립트의 오류로 object 형이라고 표시됨

---

모달(창)

// alert('hello');

// prompt('hello');

// let a = prompt('hello');
// 메세지내용,[기본값]

let a = prompt('나이 입력', 20)
//주의사항 한살 더 많게 설정하고싶어서 
alert(typeof a);
alert(`반갑습니다 ${a + 1 }살`);
//하면 반갑습니다 201살이라고 뜸 형변환을 해야함

형변환 후 ->

let a = Number(prompt('나이입력',20));
alert(typeof a);
alert(`반갑습니다 ${a+1}살`);

---

confirm 확인 취소 

 

확인버튼 누르면 true 

취소버튼 누르면 false 로 저장

---

모달 총 정리 - 떠있는 동안 다음 작업은 중지됨

alert: 단순메세지 출력용

prompt: 사용자가 무언가 입력을 할 수 있는 창 (데이터 타입은 문자)

confirm: 확인취소(true/false)

 

---

---

형 변환 
String(데이터) : 문자형으로 변환

 

형변환

let a = true;
alert(typeof a);

a= String(a);
alert(typeof a);

 

형변환 

let a = '1234'
alert(typeof a);
a= Number(a);
alert(typeof a);

 

 

-

 

 

let a = '111               '
alert (a);
a= Number(a);
alert(a)

공백 없이 111만 출력

 

 

let a = 0;
alert(Boolean(a));

불린에 0 넣으면 false로 출력, 값넣으면 true출력

---

 

""

0

let a; (값 저장 x)

alert(Boolean(a));

let a=null;

alert(Boolean(a));

let a=NaN;

alert(Boolean(a));

 

이런 것들은 전부 FALSE로 형변환 됩니당

---

연산자

+ - * / %

**: 거듭제곱

EX) 2**5 2의5승

let a,b,c;
//5로 초기값을 주고싶음
a=b=c=5;
// 자바에선 안되지만 자바 스크립트에선 됨
console.log(`a=${a}`);
console.log(`b=${b}`);
console.log(`c=${c}`);

 

---

비트연산자

&,|,^,~,<<,>>

 

논리 연산자

&&: and 

||: or

!: not

a>5&&b>10

 

일치 연산자

== 두개 -> 데이터타입까지는 비교를 안함 

=== 세개

둘다 같냐고 물어보는 것 같음

=== 세개쓰는게 더 좋은이유?

타입까지 전부 비교해서 정확하게 알려주기 떄문.

정확하게 비교하자면

== -> 동등연산자 (데이터 타입은 무시하고 겉 모양 만으로 비교)

===-> 일치 연산자( 데이터까지 타입 체크)

console.log(0==false);
console.log(0===false);

console.log(1=='1');
console.log(1==='1');

---

조건문 

 if(조건식) {

 조건식이 참일 때 실행할 코드

}else {

조건식이 거짓일 때 실행할 코드

}

 

if(조건식{

} else if(조건식) {

}else{

}

 

예제 

prompt로 나이를 입력받음

입력받은 나이가 20이상이면 성인

아니면 청소년

성인/청소년은 aleret 출력 

let age= prompt('나이');

if (age>=20) {
   alert('성인'); 
} else {
  alert('청소년');
}

예제 

prompt로 나이를 입력받음

입력받은 나이가 20이상이면 성인

아니면 청소년

성인/청소년은 aleret 출력 

+입력하지 않고 확인, 취소를 누르면 취소했음 출력

let age= prompt('나이');

if (age>=20) {
   alert('성인'); 
} else if(age===null||age==="")
    alert('취소했음')
else{
  alert('청소년');
}

 

---

삼항연산자

조건식? 참: 거짓 

 

예시  

prompt로 나이를 입력받음

입력받은 나이가 20이상이면 성인

아니면 청소년

성인/청소년은 aleret 출력 

let age = prompt('나이를 입력하세요');

let result = age>=20? '성인':'청소년';

alert(result);

---

switch 

switch(값 혹은 계산식 ) {

  case 1 값:

변수가 값이랑 다를경우 처리할 코드

             break;

 case 2 값:

변수가 값이랑 다를경우 처리할 코드

              break;

 case 3 값:

변수가 값이랑 다를경우 처리할 코드

               break;

 case 4 값:

변수가 값이랑 다를경우 처리할 코드

            break;

default:

 변수가 해당 값이 없을 경우 처리할 코드

}

 

예시

let a=3;

switch(a) {
  case 1 :
  alert('a는 1입니다');
  break;
  case 2 :
  alert('a는 2입니다');
  break;
  case 3 :
  alert('a는 3입니다');
  break;
  default :
  alert('a는 1~3이 아닙니다.');
}

스위치는 그냥 prompt 쓰면 안됨

let a = Number (prompt('숫자입력'));

switch(a) {
  case 1:
    alert('a는 1입니다.');
    break;
  case 2:
    alert('a는 2입니다.');
    break;
  case 3:
    alert('a는 3입니다.');
    break;
  default:
    alert('a는 1~3이 아닙니다.');
}

형변환 하거나 ↑

 

let a = prompt('숫자입력');

switch(a) {
  case '1':
    alert('a는 1입니다.');
    break;
  case '2':4
    alert('a는 2입니다.');
    break;
  case '3':
    alert('a는 3입니다.');
    break;
  default:
    alert('a는 1~3이 아닙니다.');
}

↑ case 의 숫자를 문자로 변경 1->'1' 이런식으로 

 

---

prompt로 숫자를 입력받음 (1~4)

 

1,2 입력하면

1과 2중 하나를 입력했음 -> alert창으로 표시

 

3,4 입력하면

3과 4중에 하나를 입력했음 -> alert창으로 표시

 

let a = prompt('숫자입력');

switch(a) {
case '1':
case '2':
  alert('1과 2중 하나를 입력했음')
  break;
  case'3':
  case'4':
  alert('3과4중 하나를 입력했음')
  break;
}

 

---

prompt로 숫자입력받음

홀수입력하면 홀수

짝수입력하면 짝

 

if문이용

let a = prompt('숫자입력');

if (a%2===0) {
  alert('짝수')
} else {
  alert('홀수')
}

swithc문이용

let a = prompt('숫자입력');

switch(a%2) {
  case 0 :
    alert('짝수');
    break;
  case 1 :
    alert('홀수')
  default:
    alert('잘못입력');
}

---

let id = (prompt('아이디를 입력해주세요.'));

if(id === null || id === "") {
  alert('취소함');
} else if(id !== 'admin') {
  alert('사용자 틀림');
} else {

  let pas = Number (prompt('비밀번호를 입력해주세요.'));

  if(pas === 1234) {
    alert('관리자님 어서오세요');
  } else if(pas === null || pas === "") {
    alert('취소함');
  } else {
    alert('비번 틀림');
  }
}


if(id === 'admin') {
  let pas = Number (prompt('비밀번호를 입력해주세요.'));

  if(pas === 1234) {
    alert('관리자님 어서오세요')
  } else if (pas === null || pas === "") {
    alert('취소함');
  } else {
    alert('비번틀림');
  }

} else if (id === null || id === "") {
  alert('취소함');
} else {
  alert('사용자 틀림');
}

---

반복문 while , for

for( 초기값; 조건식; 증감식) {

}

while(조건식) {

 

}

 

1부터 10까지 

for(let i=1; i<=10; i++) {
  document.write(i);
}

for(let i=1; i<=10; i++) {
  document.write(i+"<br>");
}

줄바꿈은

document.write(i+"<br>");

 

숫자점점커지게

for(let i=1; i<=10; i++) {
  document.write(`<h1>${i}<h/1>`);
}

 

 

 

 

 

 

while문 1부터 10까지 출력

let i=0;
while(i<=10)
{document.write(`<h1>${i}<h1>`);
  i++;}

 

2중for문 1부터 25까지 출력하기

let i, j, cnt=0;

for (i= 0; i<5; i++) {
  for (j=0; j<5; j++) {
    cnt++;
    document.write(`${cnt}<br>`)
  }
}

구구단 2단부터9단까지 출력하기

let i, j;


for (i= 2; i<=9; i++) {
  for (j=1; j<=9; j++) {
   document.write(`${i}*${j} = ${i*j}<br>`)
  }
}

 

 

 

 

---

5보다 작은수 출력하기 

그리고 다섯번 반복

let i, j;

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

    if(j%5 === 0) {
      break;
    }
    document.write(j + " ");
  }
  document.write("<br>");
}

1부터 10까지 5의배수 빼고 출력하기 

총 5번

 

let i, j;

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

    if(j%5 === 0) {
      continue;
    }
    document.write(j + " ");
  }
  document.write("<br>");
}

다섯번 반복하는 for문을 outer라는 이름을 붙이고 한번만에 탈출시키기

let i, j;

outer:
for(i=1; i<=5; i++) {
  for(j=1; j<=10; j++) {

    if(j%5 === 0) {
      break outer;
    }
    document.write(j + " ");
  }
  document.write("<br>");
}

---

1부터 10까지 짝수들을 출력

짝수들의 합까지 출력하기

let i;
let sum=0;

outer:
for(i=1; i<=10; i++) {
  if(i%2==0) {
    sum=sum+i;
    document.write(`${i}<br>`)
  }
}

document.write(`총합 :${sum}`);

---

배열  

1~5까지 arr에 대입하고

0번방에 10이라는 갑을 대입 하면 결과값 

let arr =[1,2,3,4,5];

arr[0]=10;

for(let i=0; i<arr.length; i++){
  document.write(arr[i]+"<br>")
}

---

유용한 VS Code 필수 확장 프로그램 | 하늘네트 (hanl.tech)

유용한 VS Code 필수 확장 프로그램 | 하늘네트

---

함수(메서드) 

function 함수이름 () {

함수실행 코드

}

 

변수 범위 체크 하기 

전역변수,

지역변수: 특정함수(메서드)안에서 따로 설정한 것 

구별

 

function showMessage(start,end) {
  alert(start+" "+end)
 
}

showMessage(`hi`,`hello`);

 

리턴

function sum(num1,num2) {
  return num1+num2;
}
let a= sum(10,20);
alert(a);

 

나이확인하는 함수(메서드) 만들기 

function check(age) {
  if(age>=20){
    return true;
  } else{
    return false;
  }
}

let age = prompt('나이입력')

if(check(age)){
  alert(`성인`);
} else {
  alert(`미성년`)
}

위에 age는 check라는 함수를 쓸 때 만든 age

 

밑에 age는  prompt(`나이입력`)을 대입하는 새로운 age를 설정한 것 

 

예를들어 50이라는 값을 입력받으면 

위의 펑션으로 올라가서 age가 20이 넘는지 안넘느지 확인 하는 check메서드(함수)로 간다.

리턴 트루 자리면 밑에 alert성인으로 나오고 아니면 alert미성년으로 나오는데

50이 return true alert 성인자리이므로 

성인 출력 

 

a와b는 prompt로 입력

a와b 중에 작은걸 리턴시켜주는 min 함수를 생성하고

결과를 alert로 출력! 해서 아래처럼 하면 안된다 이유는?!?

function min(a,b) {
  if(a<b) {
    return a; 
  } else (a>b)
  return b;
}

let a= prompt(`a입력`);
let b= prompt(`b입력`);

alert(min(a,b));

이유는 바로 propmt 자체가 문자를 입력하는 것이기 떄문에 숫자를 비교할 수가없다.

prompt를 Number로 형변환 시켜줘야 완벽하게 완성! 

function min(a,b) {
  if(a<b) {
    return a; 
  } else (a>b)
  return b;
}

let a= Number(prompt(`a입력`));
let b= Number(prompt(`b입력`));

alert(min(a,b));

---

함수 표현식 

//요건 함수 표현식
let showMsg= function() {
  alert('ㅎㅇ');
}

함수선언문

//d이건 함수 선언문
function showMsg(){
  alert('ㅎㅇ');

 

함수 표현식과 함수 선언문 차이

 

함수표현식은 쭈욱 내려가다가  코드를 만나면 생성

 

함수 선언문은 어디에서든 호출하면 사용가능(자바스크립트 알고리즘상 읽히게됨)

 

---

"use strict" 사용하면 엄격하게 적용됨 

함수 표현식 사용하면서 

적용했을때 ↓

"use strict"

let age = prompt('나이 입력');

if(age>=20){
  function showMsg(){
    alert('안녕하세요');
  }
}else{
  function showMsg(){
    alert('안녕');
  }
}

showMsg();

에러

적용안했을때 ↓

// "use strict"

let age = prompt('나이 입력');

if(age>=20){
  function showMsg(){
    alert('안녕하세요');
  }
}else{
  function showMsg(){
    alert('안녕');
  }
}

showMsg();

정상작동

함수선언문 사용하면  use strict를 사용해도 

결과값이 나온다느것을 확인! 

"use strict" 

let age = prompt('나이입력');
let showMsg;

if (age>=20) {
  showMsg = function() {
    alert('안녕하세요');
  }
} else {
  showMsg = function() {
    alert('안녕');
  }
}

showMsg();

 

 

---

---

setTimeout 형

n초뒤 실행

setTimeout(showMsg,3000); -> 3초뒤에 showMsg 실행

 

setTimeout(() => {
  
}, timeout);

setTimeout(function() {
  console.log(`새로만듦`)
}, 3000);

setInterval 

n초 뒤 실행하고 n초마다 계속 실행

function showMsg() {
  console.log(`ㅎㅇ`);
}

setInterval(showMsg,3000);

3초마다 계속 실행

---

화살표 함수(람다) 

let sum = (a,b) => a+b;

let sum = (a) => a+5;

let msg= () => alert(`ㅎㅇ`);
msg();

let add = (a,b) => {
  코드들
  코드들
};

let add = (a,b) => {
  let c = a-b;
  return c;
};

alert (add(10,5));

같은형태 함수

let sum(a,b) => a+b;

let sum= function(a,b) {
  return a+b;   
}

---

Object (객체) 자료형   컬렉션 프레임워크 중 map(key:value)과 유사함

Object도 key와 value로 구현

let user = {
  name: 'kim',
  age: 20,  
};

user라는 object가 만들어지고 name이라는 키, age라는 밸류 만들어짐

 

console.log(user.name);

위 처럼 Object.key 값 으로 출력

console.log(Object.key);

 

let user = {
  name: 'kim',
  age: 20,  
  'ip add':'aaa'
};

console.log(user['ip add'])

name, age, 'ip add' 가 key 값

'kim',20,'aaa'는 value

 

let fruit = prompt('과일입력');

let cart= {
  [fruit]:20,
  price:3000
}

alert(cart.apple);

여기서 [fruit]:20 에서 [fruit]는 아직 key 값을 설정하지 않은 상태

 

그렇지만 alert에서  cart라는 오브젝트에 apple이라는 키를 불러달라고하면 

value값인 20이나옴 

아래처럼 ↓

---

function user(name,age) {
  return {
    name:name,
    age:age
  };
}

Object(오브젝트)형을 (user라는 함수로) 함수화시킴 ↑

name에 처리할것 age에 처리할것에 값만 넣으면 return 인데 마치 object를 출력시켜라와 같은 형태가 됨ㅁ

let p1= user('kim',30);

p1에 user('kim', '30') 을 대입해라 ↑

let p1= user('kim',30);
==
let p1 {
  name: 'kim'
  age:30
};

 

name에 처리할것 age에 처리할것에 값만 넣으면 return 인데 마치 object를 출력시켜라와 같은 형태가 됨

function user(name,age) {
  return {
    name:name, //- > 이게 'kim' 이됨
    age:age    //-> 이게 'name' 이됨
  };
}

let p1= user('kim',30);

console.log(p1.name);
console.log(p1.age);

이런식으로