개발일지

개발일지 2일차

2023. 3. 8. 01:20
목차
  1. 자료와변수 예제풀이
  2. 요약
  3. 예제1
  4. 예제2
  5.  
  6. 예제3
  7. 예제4
  8.  
  9. 상수와변수 예제풀이
  10.  
  11. 요약
  12.  
  13. 예제1
  14.  
  15.  
  16.  
  17. 예제2
  18.  
  19.  
  20.  
  21. 예제3
  22.  
  23. 예제4
  24.  
  25.  
  26. 자료형변환 예제풀이
  27. 요약
  28.  
  29. 예제1
  30.  
  31. 예제2
  32. 예제3
  33. 예제4
  34. 예제5
  35. 전역일 계산기
  36. 조건문if 예제풀이
  37. 요약
  38.  
  39. 예제1
  40. 예제2
  41. 예제3
  42. 예제4
  43. 예제5
  44. 예제6
  45. 조건문switch 예제풀이
  46. 요약
  47.  
  48. 예제풀이1
  49. 예제풀이2
  50. 예제풀이3
  51. 예제풀이4
  52. 예제풀이5

자료와변수 예제풀이

요약

  • 자료형이란 자료의 종류를 의미
  • 문자를 표현할 때는 문자열(String) 자료형을 사용
  • 숫자를 표현할 때는 숫자(Number) 자료형을 사용
  • 참과 거짓을 표현할 때는 불린(Boolean) 자료형을 사용

 

예제1

연산자 피연산자 자료형
+(문자열 연결 연산자) 문자열
+(덧셈 연산자) 숫자
&& boolean AND 연산자 (한쪽만 false여도 false)
- 숫자 연산자(빼기)
* 숫자 연산자(곱)
|| boolean OR 연산자 (한쪽만 true여도 true)

 

 

예제2

console.log("# 연습문제")  결과값 // # 연습문제
console.log("\\\\\\")      결과값 //\\\\\\\

 

예제3

console.log("안녕하세요[1]") //녕
console.log("안녕하세요[2]") //하
console.log("안녕하세요[3]") //세
console.log("안녕하세요[4]") //요
console.log("안녕하세요[5]") //5번째 글자는 존재하지 않기때문에 undefined

 

예제4

console.log(2 + 2 - 2 * 2 / 2 * 2) //0
console.log(2 - 2 + 2 / 2 * 2 + 2) //4

 

상수와변수 예제풀이

 

요약

  • 상수는 변하지 않는 값을 저장하는 식별자이다. const 키워드를 사용해 선언
  • 변수는 변하는 값을 저장하는 식별자이다. let 키워드를 사용해 선언
  • 상수 또는 변수를 생성하는 것을 선언이라고 한다.
  • 상수 도는 변수에 값을 넣는 것을 할당이라고 한다.

 

예제1

상수를 선언할때 사용하는 키워드  => [ const ]

  1. const
  2. let
  3. var
  4. comment

 

 

 

예제2

값을 할당할 때 사용하는 연산자 => [ = ]

  1. :=
  2. =
  3. <=
  4. =>

 

 

 

예제3

const r
r = 10

console.log(`넓이 = ${3.14 * r * r}`)
console.log(`둘레 = ${2 * 3.14 * r}`)
//syntaxError 문법오류: const는 상수이기때문에 r의 값을 10으로 재할당 할 수없다


let r
r = 10

console.log(`넓이 = ${3.14 * r * r}`)
console.log(`둘레 = ${2 * 3.14 * r}`)
넓이 = 314
둘레 = 62.8000000004
//let은 변수 재할당이 가능한 키워드이므로 결과값 r=10 으로 출력가능

 

 

예제4

const number = 10

console.log(++number)
console.log(number++)
console.log(++number)
console.log(number--)

//const는 상수이기 때문에 값이 변하면 오류가 뜬다. ++연산자는 변수의 값에 1을더하므로 11이되기 
//때문에 오류이다.

 

 

자료형변환 예제풀이

요약

  • 사용자로부터 글자를 입력 받을 때는 prompt 함수를 사용
  • 어떤 자료형의 값을 다른 자료형으로 변경하는 것을 자료형 변환 이라고한다.
  • 숫자 자료형으로 변환할때 Number() 함수를 사용
  • 문자열 자료형으로 변환할 때 String() 함수를 사용
  • 불 자료형으로 변환할 때 Boolean() 함수를 사용

 

예제1

사용자로부터 불 입력을 받는 함수는? => [ confirm ]

  1. input()
  2. boolinput()
  3. confirm()
  4. prompt()

 

예제2

함수이름 설명
Number() 숫자 자료형으로 변환
String() 문자열 자료형으로 변환
Boolean() 불 자료형으로 변환

*문자열에 +를 붙히면 숫자열로 변환됨.

 ex) +a = 숫자열

 

예제3

const rawInput = prompt('inch 단위의 숫자를 입력해주세요') //inch 단위 받기

const inch = Number(rawInput) //prompt로 받은 inch단위를 숫자형으로 변환
const cm = inch *2.54       // inch *2.54로 cm로변환

alert(`${inch}inch는 ${cm}cm 입니다.`) //inch와 cm의 값을 표기

 

예제4

const rawInput = prompt('inch 단위의 숫자를 입력해주세요') //inch 단위 받기

const inch = Number(rawInput) //prompt로 받은 inch단위를 숫자형으로 변환
const cm = inch *2.54       // inch *2.54로 cm로변환

alert(`${inch}inch는 ${cm}cm 입니다.`) //inch와 cm의 값을 표기

 

예제5

const rawInput = prompt('달러 단위의 금액을 입력해주세요')  //달러금액 받기

const dollar = Number(rawInput)   //받은 달러값을 숫자형으로 변환
const won = dollar * 1207  //변환한 달러값 * 1207
    
alert(`원화${won}입니다.`)  //원화로 변환

 

전역일 계산기

const dutydate = prompt('복무일수를 입력해주세요') //현재 복무일 수 입력 이때 받은 일수는 문자형

const a = Number(dutydate)    // 받은 현재 복무일 수를 숫자형으로 변환 문자형 -> 숫자형

console.log(`현재복무 일수는 ${a} 남은 복무일수는 ${540 - a}일 입니다.`) //전역일 계산기
//a는 숫자형으로 변한된 복무 일 수 ${육군전체 복무 일수 - 숫자형으로 변한된 복무 일 수}

 

조건문if 예제풀이

요약

  • if조건문은 조건에 따라 코드를 실행하거나 실행하지 않도록 하기 위해 사용하는 구문
  • else 구문은 if 조건문 뒤에 사용하며, if 조건문이 거짓일때 사용
  • 중첩 조건문은 조건문을 중첩해서 사용하는 경우
  • if else if 조건문은 중첩 조건문에서 중괄호를 생략한 형태, 겹치지않는 3가지 이상의 조건으로 나눌때 사용

 

예제1

const x = 1
if( x > 4 {
    console.log('참입니다.')
})
//false


const x = 0
if( x > 4 {
    console.log('참입니다.')
})
//false


const x = 10
if( x > 4 {
    console.log('참입니다.')
})
//true

 

예제2

const a =  Number(prompt('첫번째 숫자', '')) //prompt로 받은 값은 문자열 이므로 숫자열로변환
const b =  Number(prompt('두번째 숫자', '')) //prompt로 받은 값은 문자열 이므로 숫자열로변환

if (a > b){
     alert('첫번쨰 입력한 숫자가 더 큽니다.')
 }else if(a===b){ //else if를 사용했을때는 ()안에 조건이 들어가 꼭 들어가 있어야한다.
     alert('두 숫자가 같습니다.')
 }else{ // else를 사용할때는 조건이 없어야 한다.
     alert('두 번째로 입력한 숫자가 더 큽니다.')
 }

* ===문은 a와 b의 형까지 비교하기 때문에 Number() 숫자열로 형변환을 한후 비교한다.

 

예제3

if (x > 10 && x < 20){
    console.log('조건에 맞습니다.')
}
// &&(and 연산자)가 들어가야 x > 10, x < 20 두개의 조건을 모두 충족 했을때 true가 되며 if문이
//실행됩니다.

 

예제4

const a = Number(prompt('숫자를 입력해주세요.',''))

 if (a > 0){
     alert('입력한 숫자는 양수입니다.')
 } else if (a===0){
     alert('입력한숫자는 0 입니다.')
 } else{
     alert('입력한 숫자는 음수입니다.')
 }

 

예제5

const a = Number(prompt('숫자를 입력해주세요.',''))

if (a % 2 ===0){ 
     alert('입력한 숫자는 짝수 입니다')
 }else{
     alert('입력한 숫자는 홀수 입니다.')
 }

 

예제6

const a = Number(prompt('월를 입력해주세요.',''))

if (a <= 4){
    alert('봄입니다')
}else if (a >= 5 && a <= 8){ // a가 두항의 조건을 충족했을때 true값을 가지며 if문은 true 값을 가진자리에서 종료
    alert('여름입니다.')
}else if (a >= 9 && a <= 12){
}else{
    alert('겨울입니다.')
}

 

 

조건문switch 예제풀이

요약

  • switch 조건문은 값에 따라서 조건분기를 걸어주는 조건문
  • 조건부 연산자는 A ? B : C 와 같은 형대로 피연산자 3개를 갖는 연산자입니다. 조건 분기에 사용가능
  • 짧은 조건문은 논리 연산자의 특이한 성질을 사용해서 조건분기에 활용하는 코드
  • if 조건문은 switch 조건문으로 작성가능하고 switch 조건문은 if조건문으로 작성이 가능하다

 

예제풀이1

const result = (100 > 200)
    ?prompt ('값을 입력해주세요','')
    :confirm('버튼을 클릭해주세요')
alert(result)
//상수 result의 100이 200보다 작지만 크다고 설정되어있어서 false

 

예제풀이2

const rawInput = prompt('태어난 해를 입력해주세요,', '')
const year = Number(rawInput)
const e = year % 12

let result
switch(e){
    case 0:
        result = '원숭이'
        break
    case 1: result = '닭'; break;
    case 2: result = '개'; break;
    case 3: result = '돼지'; break;
    case 4: result = '쥐'; break;
    case 5: result = '소'; break;
    case 6: result = '호랑이'; break;
    case 7: result = '토끼'; break;
    case 8: result = '용'; break;
    case 9: result = '뱀'; break;
    case 10: result = '말'; break;
    case 11: result = '양'; break;
   //한줄에 입력하려고 하면 세미콜론으로 줄을 나눠준다
}
alert(`${year}년에 태어났다면 ${result}띠 입니다.`)

 

예제풀이3

const rawInput = prompt('태어난 해를 입력해주세요,', '')
const year = Number(rawInput)

let gan
let e1= year % 10
if (e1 === 0) {gan='경'}
else if (e1 === 1) {gan='신'}
else if (e1 === 2) {gan='임'}
else if (e1 === 3) {gan='계'}
else if (e1 === 4) {gan='갑'}
else if (e1 === 5) {gan='을'}
else if (e1 === 6) {gan='병'}
else if (e1 === 7) {gan='정'}
else if (e1 === 8) {gan='무'}
else if (e1 === 9) {gan='기'}

let tti
let e2 = year % 12
if (e2 === 0) {tti='경'}
else if (e2 === 1) {tti='신'}
else if (e2 === 2) {tti='임'}
else if (e2 === 3) {tti='계'}
else if (e2 === 4) {tti='갑'}
else if (e2 === 5) {tti='을'}
else if (e2 === 6) {tti='병'}
else if (e2 === 7) {tti='정'}
else if (e2 === 8) {tti='무'}
else if (e2 === 9) {tti='기'}

alert(`${year}년은 ${gan}${tti}년입니다.`)

 

예제풀이4

switch 조건문과 직접적인 관련이 없는 키워드

  1. switch
  2. brack
  3. default
  4. else 

*else는 if조건문을 사용할때 사용된다.

*break 키워드는 switch 조건문이나 반복문을 빠져나가기 위해 사용하는 키워드이다.

 

 

예제풀이5

다른 실행 결과는 내는 코드

  1. true ? alert('출력A') : alert('출력B')  => 출력A
  2. false ? alert('출력B') : alert('출력A') => 출력A
  3. true || alert('출력A')  => true  or 연산자는 한항의 조건만 충족해도 true를 출력한다.
  4. true && alert('출력A')  => 출력A

 

자바스크립트가 조금씩 이해가 되고 있긴하지만 하나를 알면 알아야 할게 20개더 생기는것 같다.

재밌으면서도 배워야할게 많다고 생각하니 열심히 달려야 할 것 같다.

'개발일지' 카테고리의 다른 글

개발일지 5일차  (0) 2023.03.10
개발일지 4일차  (0) 2023.03.10
개발일지 3일차  (0) 2023.03.09
개발일지 1일차  (0) 2023.03.07
개발일지 프롤로그  (0) 2023.03.06
  1. 자료와변수 예제풀이
  2. 요약
  3. 예제1
  4. 예제2
  5.  
  6. 예제3
  7. 예제4
  8.  
  9. 상수와변수 예제풀이
  10.  
  11. 요약
  12.  
  13. 예제1
  14.  
  15.  
  16.  
  17. 예제2
  18.  
  19.  
  20.  
  21. 예제3
  22.  
  23. 예제4
  24.  
  25.  
  26. 자료형변환 예제풀이
  27. 요약
  28.  
  29. 예제1
  30.  
  31. 예제2
  32. 예제3
  33. 예제4
  34. 예제5
  35. 전역일 계산기
  36. 조건문if 예제풀이
  37. 요약
  38.  
  39. 예제1
  40. 예제2
  41. 예제3
  42. 예제4
  43. 예제5
  44. 예제6
  45. 조건문switch 예제풀이
  46. 요약
  47.  
  48. 예제풀이1
  49. 예제풀이2
  50. 예제풀이3
  51. 예제풀이4
  52. 예제풀이5
'개발일지' 카테고리의 다른 글
  • 개발일지 4일차
  • 개발일지 3일차
  • 개발일지 1일차
  • 개발일지 프롤로그
index.ys
index.ys
머리속에 떠도는 코드조각들을 맞추는 공간입니다.
index.ys
코린이 개발일지
index.ys
전체
오늘
어제

공지사항

블로그 메뉴

  • 홈
  • 방명록
  • Github
  • Notion
  • Figma
  • 타닥타닥 (235)
    • 개발일지 (124)
    • html , css (0)
    • Javascript (30)
    • Node.js (8)
    • React (2)
    • 네트워크 (1)
    • DB, SQL (5)
    • AWS (11)
    • CS (21)
    • 면접 (13)
    • 사진 (4)
    • 북로그 (3)
    • 머릿속 (5)

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
index.ys
개발일지 2일차
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.