[JavaScript] 기본 문법

MINJEE·2023년 12월 9일
JavaScript
0

SMHRD_6_JavaScript

목록 보기
2/8
post-thumbnail

◉ 자바스크립트로 출력하기

  • document.write(’내용’); : HTML문서 내부에 출력
    • 이미 로딩된 문서를 모두 지우고 새로운 내용으로 덮어쓰기 때문에, 실행 시점과 위치에 유의
  • (태그를 요소로 선택한 변수).innerText = ‘내용’; : HTML 요소의 내용 변경
  • (태그를 요소로 선택한 변수).innerHTML = ‘내용’; : HTML 요소의 HTML코드 변경
    • HTML 코드를 직접 작성하거나 동적으로 생성할 때는 보안 상의 위험이 있을 수 있으므로 주의
  • console.log(’내용’); : 개발자 도구의 콘솔창에 출력
    • 주로 디버깅 목적으로 사용
    • 변수의 값을 확인하거나 코드의 흐름을 추적하는 데 유용
  • console.info(’정보’) : 개발자 도구의 콘솔창에 출력
    • console.log()와 비슷하게 동작하지만, 주로 정보성 메시지를 출력할 때 사용
  • alert(’내용’); : 팝업 경고창으로 출력
    • 사용자에게 주의를 알릴 때나 간단한 알림을 표시할 때 유용

innerText와 innerHTML
<p class="my-class">원래 내용</p>
element가 위의 p태그 요소라면,
element.innerText = "새로운 내용" 는 '원래 내용'을 '새로운 내용'으로 변경
element.innerHTML = "<p class='my-class' color='red'>새로운 HTML코드</p>" 는 시작태그부터 끝태그까지 요소 전체를 변경


◉ 자바스크립트로 입력받기

  • prompt(’메시지’[,’입력내용 기본값’]); : 입력창으로 입력
    • 간단한 대화상자를 통해 사용자로부터 텍스트를 입력받을 수 있음
    • 문자열 반환
    • 메시지(첫번째 매개변수)는 대화상자에 사용자에게 표시할 내용
    • 입력내용 기본값(두번째 매개변수)는 입력창에 미리 표시되는 입력 내용
    • 기본값은 생략 가능하고, 기본값이 있을 때 기본값을 지우고 제출하면 null값 반환
    var name = prompt("이름을 입력하세요", "홍길동");
var age = prompt("나이를 입력하세요");
  • confirm(’메시지’); : 확인/취소를 통한 입력
    • 확인 대화상자를 통해 사용자가 확인 또는 취소 버튼을 클릭할 수 있는 선택지를 제공
    • True, False 반환
    var result = confirm("정말로 삭제하시겠습니까?");

◉ 변수 (Variables)

var 변수명 = 값;

  • 변수 선언 : var, let, const 키워드 사용

  • 변수 할당 : 등호(=) 키워드 이용하여 변수에 값 할당

  • 변수명 규칙

    • 영어, 숫자, '_' 만 사용가능
    • 예약어 사용불가
    • 대소문자 구분
    • 두단어 이상은 낙타표기법 사용
    • 의미있게 변수명 만들기!

  • 변수 재선언과 재할당

    varletconst
    재선언가능불가능불가능
    재할당가능가능불가능
    • 재선언 예시 : var x=1; var x=2;
    • 재할당 예시 : var x=1; x=2;

    let과 const는 같은 스코프 내에서 변수를 재선언할 수 없음. 이는 변수 이름 충돌로 인한 오류를 방지하고 프로그램의 안정성을 높이는 데 도움이 됨!!
    var는 되도록 사용 안하기!

예시 : 점심 메뉴 추천받기

let lunch = prompt('오늘 점심 뭐 먹을래요?');
// prompt로 입력받은 내용을 문자열로 lunch변수에 저장
document.write('저도 ' + lunch + ' 좋아해요');
// 문자열이나 변수들을 이어서 출력할 때 + 이용

◉ 데이터 타입 (자료형)

자바스크립트는 동적 타입 언어로, 변수에 할당되는 값에 따라 자료형이 동적으로 결정된다.
자료형은 원시 타입과 참조 타입으로 나뉜다.

원시타입 (Premitive Types)

: 쪼갤 수 없는 자료형

  • Number (숫자형) : 정수와 부동소수점 숫자를 나타냄

  • String (문자열) : 문자들의 시퀀스를 나타냄, 작은 따옴표나 큰 따옴표로 묶어서 표현

  • Boolean (논리형) : true/false으로 표현

  • undefined : 값이 할당된 적 없거나 존재하지 않는 속성

    • 선언만 되어있는 변수 (초기화는 하지 않은 경우에 해당)

  • null : 아무런 값을 나타내지 않을 때 (ex. 공백일 때)

  • NaN : Not a Number, 주로 수치 연산에서 유효하지 않은 결과를 나타내기 위해 사용

    • 0으로 나누거나 숫자가 아닌 값을 숫자로 변환하려고 할 때 자동 생성됨
    • 자기 자신과도 동등하지 않음 → ==나 ===로 비교할 경우 false, isNaN()함수를 사용해야함
    NaN == NaN; //false
NaN === NaN; //false
isNaN(NaN); //true

  • Symbol (심볼) : 유일(Unique)하고 변경 불가능한(Immutable) 값을 나타냄

    • 직접적으로 읽거나 수정 불가능
    • 주로 객체의 속성 이름으로 사용 → 다른 속성과 충돌하지 않고 유일한 식별자로 사용 가능
    • 유일성 보장 → 동일한 설명을 가진 심볼이라도 서로 다른 값으로 취급
    • Symbol() 생성자 함수로 생성, 매개변수로 심볼에 대한 설명을 제공할 수 있음
    // 심볼 생성
const symbol1 = Symbol();
const symbol2 = Symbol("mySymbol"); //설명으로 "mySymbol"을 포함한 심볼

// 심볼 사용 (주로 객체의 속성 이름으로 사용)
const obj = {
	[symbol1]: "value 1",
	[symbol2]: "value 2"
};

console.log(obj[symbol1]); // "value 1"
console.log(obj[symbol2]); // "value 2"

참조타입 (Reference Types)

  • Object (객체) : 여러 속성과 값들을 그룹화하는 자료구조
    • {키:값} 으로 이루어진 속성의 집합
  • Array (배열) : 여러 개의 값을 순차적으로 저장하는 자료구조
    • 여러 데이터 타입을 포함할 수 있음
    • [요소1, 요소2, ...] : 쉼표로 구분하여 대괄호로 묶어서 배열 선언
  • Function (함수) : 재사용 가능한 코드 블록을 정의하고 호출할 수 있는 자료형

원시타입과 참조타입 비교

원시 타입참조 타입
변수에 값 자체가 저장변수에 참조(메모리 주소)가 저장
변수 간의 할당 시 값이 복사됨변수 간의 할당 시 참조가 복사되어 같은 객체를 참조
불면(Immutable), 값 수정 불가능가변(Mutable), 속성 추가/수정 가능

자료형 관련 함수

  • typeof(변수) : 변수 자료형 확인
  • 형 변환 함수
    • parseInt(문자) : 문자 → 정수
    • parseFloat(문자) : 문자 → 실수
    • Number(문자) : 문자 → 숫자
    • String(숫자) : 숫자 → 문자
    • 숫자.toString() : 숫자 → 문자
  • Template Literal(템플릿 리터럴) : 백틱(backtick) 문자(`)로 둘라싸인 문자열
    • 안에는 ${expression} 형식으로 표현식 삽입 가능
      → 파이썬의 f-string처럼 표현 가능
    • 예시 : 숫자 2개 입력받아 형변환하여 합 구하기
      let n1, n2;
n1 = Number(prompt('숫자1을 입력하세요.'));
n2 = Number(prompt('숫자2를 입력하세요.'));
document.write(`${n1}과 ${n2}의 합은 ${n1+n2}입니다.`);

isNaN() 함수
isNaN() 함수는 주어진 값이 NaN인지 여부를 판별하는 함수

  • 숫자, 문자열인 숫자, null은 숫자로 변환될 수 있으므로 false 반환
  • NaN자체, 숫자 외 포함된 문자열, undefined는 숫자로 변환될 수 없으므로 true 반환
isNaN(NaN); //true
isNaN(10); // false
isNaN("Hello"); // true
isNaN("123"); // false
isNaN(undefined); // true
isNaN(null); // false

◉ 연산자

  • 산술 연산자 : +(더하기), -(빼기), /(나누기), *(곱하기), %(나머지), ++(피연산자 1증가), --(피연산자 1감소)
    • 몫 연산자가 따로 없음 → 나눈 값을 정수로 변환하여 구하기!
  • 할당 연산자 : =(대입), +=, -=, *=, /=, %=
  • 연결 연산자 : +(문자열 합치기)
  • 비교 연산자 : ==, ===, !=, !==, <, <=, >, >=
    • 동등 연산자 와 일치 연산자
      • ==, !=(동등 연산자) : 자동 형변환해서 비교
      • ===, !==(일치 연산자) : 정확한 값 비교 (자료형까지 비교)
      • ex.
        10 == ‘10’ ⇒ true
        10 === ‘10’ ⇒ false
    • 문자열 비교 : 문자들의 아스키(ASCII)값 비교
  • 논리 연산자 : &&(AND연산자), ||(OR연산자), !(NOT연산자)

◉ 조건문

IF 문

if문

if(조건식) {
	참일 때 실행문;
}

if~else문

if(조건식) {
	참일 때 실행문;
} else {
	거짓일 때 실행문;
}

if~elif~else문

if(조건식1) {
	조건식1이 참일 때 실행문;
} else if (조건식2) {
	이전 조건식이 거짓이고, 조건식2가 참일 때 실행문;
} else {
	이전 조건식들이 모두 거짓일 때 실행문;
}

한 줄 조건문

삼항 조건 연산자 ? 이용

조건식 ? 참일때 실행문 : 거짓일때 실행문 ;

단축 평가 - && 이용

조건식 && 참일때 실행문;

SWITCH문

조건대상과 값을 비교

switch (조건대상) {
  case 값1 :
    조건대상이 값1일 때 실행문;
    break;
  case 값2 :
    조건대상이 값2일 때 실행문;
    break;
  default :
    일치하는 값이 없을 때 기본으로 실행하는 실행문;
}

조건식으로 사용

switch (true) {
  case 조건식1 :
    조건식1이 참일 때 실행문;
    break;
  case 조건식2 :
    조건식2 참일 때 실행문;
    break;
  default :
    조건식들이 모두 거짓일 때 실행문;
}

예시 : 나이에 따른 버스요금 계산기

사용자에게 나이를 입력받고,
공백이거나 숫자가 아니면 '숫자를 입력해주세요'를 출력,
0보다 작거나 120보다 많으면 '유효한 나이를 입력해주세요'를 출력하고,
그 외 나이를 잘 입력했다면
7세 미만이거나 65세 이상이면 버스요금은 0원,
청소년(7세 이상 20세 이하)의 버스요금은 720원,
그 외의 성인은 버스요금은 1200원 으로 버스요금 출력

<body>
  <h1 id = "notice"><h1>
  <script>
    const notice = document.getElementById('notice');
    let age = Number(prompt('나이를 입력하세요.'));
    let fare;
    if (isNaN(age) || age === null) {
      notice.innerText = '숫자를입력해 주세요';
    } else if ((age < 0) || (age > 120)) {
      notice.innerText = '유효한 나이를 입력해주세요.';
    } else {
      if ((age >= 65) || (age < 7)) {
        fare = 0;
      } else if ((age >= 7) && (age<=20)) {
        fare = 720;
      } else {
        fare = 1200;
      }
      notice.innerText = `요금은 ${fare}원 입니다.`;
    }
  </script>
</body>

◉ 반복문

FOR문

for (초기값; 조건식; 증감식) {
  조건식이 참일 동안 반복할 실행문;
}
for (변수 of 배열) {
  배열안의 요소만큼 반복할 실행문;
}

WHILE문

while(조건식) {
  조건이 참일 때 반복할 실행문;
}
do {
  일단 한번 실행하고 조건이 참일 때 반복할 실행문;
} while(조건식)

break문 과 continue문

  • break문
    • 주로 switch 문이나 반복문(for, while, do-while)에서 사용
    • switch 문에서 break는 해당 case 블록을 실행한 후 switch 문을 빠져나가는 역할
    • 반복문에서 break는 반복을 중단하고 반복문을 빠져나가는 역할
    • 반복문안에서 break를 만나면 그 밑의 코드도 실행 안하고 다음 반복이 남아있든 말든 아예 반복문 자체를 빠져나옴
  • continue문
    • 주로 반복문에서 사용
    • 현재 반복을 중지하고 다음 반복으로 넘어가는 역할
    • 반복문안에서 continue를 만나면 continue밑의 코드를 건너 띄고 다음 반복을 위해 처음부터 다시 실행
profile
MINJEE
개발, 분석 배운 내용 정리하기!
이전 포스트

[JavaScript] 자바스크립트

다음 포스트

[JavaScript] 배열

0개의 댓글