[JavaScript]기본형식 및 적용방법

적용 방법과 위치

1. 문서 내부태그: 내부에 스크립트 코드를 작성합니다.
   • 특징: 스크립트 코드는 HTML 요소에 접근 가능합니다.
2. 문서 내부태그: 내부에 스크립트 코드를 작성합니다.
   • 특징: 스크립트 코드는 HTML 요소에 접근 가능합니다.
3. 문서 외부태그: 를 사용하여 외부 파일에 작성된 스크립트 코드를 가져와 적용합니다.
   • 특징: 별도의 JavaScript 파일을 사용하여 코드를 모듈화할 수 있습니다.

기본 명령어

• 입력: prompt('입력제목','입력내용')
• 출력:
  • document.write('출력내용')
  • alert('출력내용')
  • console.log('출력내용')
• 확인: confirm('확인내용')

변수와 상수

• 변수 선언:
  • var: 중복해서 변수를 선언할 수 있습니다.
  • let: 중복해서 변수를 선언할 수 없습니다.
  • const: 고정된 값을 할당하는 변수를 선언합니다.

데이터 타입

• 숫자 데이터: 정수, 실수, 지수 등을 표현합니다. 예시: 10, 10.5, 1e+2
• 문자 데이터: 작은 따옴표나 큰 따옴표로 표현하며, 작은 따옴표를 주로 사용합니다.
• boolean 데이터: true 또는 false 값을 가집니다.
• undefined 데이터: 값이 지정되지 않은 변수를 나타냅니다.
• null 데이터: undefined와 유사하지만 변수를 빈 상태로 만들거나 값이 존재하지 않게 만듭니다.

이스케이프 시퀀스

• \n: 행(줄) 바꿈을 나타냅니다.
• \t: 탭 문자를 나타냅니다.
• \\: 역슬래시를 나타냅니다.
• \': 작은 따옴표를 나타냅니다.
• \": 큰 따옴표를 나타냅니다.

연산자

산술 연산자

• +: 더하기 연산을 수행합니다.
• -: 빼기 연산을 수행합니다.
• *: 곱하기 연산을 수행합니다.
• /: 나누기 연산을 수행하여 몫을 구합니다.
• %: 나누기 연산을 수행하여 나머지를 구합니다.
• ++: 피연산자를 1씩 증가시킵니다.
• --: 피연산자를 1씩 감소시킵니다.

대입 연산자

• =: 우측의 값을 좌측에 대입하여 저장합니다.
• +=: 우측의 값을 좌측의 값에 더하여 누적합니다. 예시: num += 1은 num = num + 1과 동일합니다.
• -=: 우측의 값을 좌측의 값에서 빼서 누적합니다. 예시: num -= 1은 num = num - 1과 동일합니다.
• *=: 우측의 값을 좌측의 값에 곱하여 누적합니다. 예시: num *= 1은 num = num * 1과 동일합니다.
• /=: 우측의 값을 좌측의 값으로 나누어 누적합니다. 예시: num /= 1은 num = num / 1과 동일합니다.
• %=: 우측의 값을 좌측의 값으로 나눈 나머지를 누적합니다. 예시: num %= 1은 num = num % 1과 동일합니다.비교 연산자
• >: A가 B보다 큰지를 비교합니다. a > b가 참이면 true, 거짓이면 false를 반환합니다.
• <: A가 B보다 작은지를 비교합니다. a < b가 참이면 true, 거짓이면 false를 반환합니다.
• >=: A가 B보다 크거나 같은지를 비교합니다. a >= b가 참이면 true, 거짓이면 false를 반환합니다.
• <=: A가 B보다 작거나 같은지를 비교합니다. a <= b가 참이면 true, 거짓이면 false를 반환합니다.
• ==: A가 B와 같은지를 비교합니다. a == b가 참이면 true, 거짓이면 false를 반환합니다.
• !=: A가 B와 같지 않은지를 비교합니다. a != b가 참이면 true, 거짓이면 false를 반환합니다.
• ===: A가 B와 데이터와 타입이 같은지를 비교합니다. a === b가 참이면 true, 거짓이면 false를 반환합니다.
• !==: A가 B와 데이터와 타입이 같지 않은지를 비교합니다. a !== b가 참이면 true, 거짓이면 false를 반환합니다.

논리 연산자

• && (AND 연산자): a && b에서 하나라도 false면 false를 반환합니다.
• || (OR 연산자): a || b에서 하나라도 true면 true를 반환합니다.
• ! (NOT 연산자): false를 true로, true를 false로 변경합니다.

if, else 조건문

• if와 else 조건문은 true 또는 false에 따라 실행되는 문장이 다른 구조의 순서 제어문입니다.
• 조건이 true일 경우 if 블록 안의 문장이 실행되고, 조건이 false일 경우 else 블록 안의 문장이 실행됩니다.

javascript

var age = 20;
if (age > 19) {
    document.write(age + "은 성인입니다.");
} else {
    alert("성인이 아닙니다.");
}

if, else if, else 조건문

• if, else if, else 조건문은 false일 때 다시 else if에서 true, false에 따라 문장이 실행되는 구조입니다.
• 여러 개의 조건을 체크하고자 할 때 사용됩니다. 조건은 위에서부터 순서대로 검사되며, 첫 번째로 true가 나오는 조건의 블록 안의 문장이 실행됩니다.

var age = 40;
if (age > 30) {
    document.write(age + "은 30대 이상입니다.");
} else if (age > 20) {
    document.write(age + "은 20대 이상입니다.");
} else {
    alert("성인이 아닙니다.");
}

switch 조건문

• switch 조건문은 조건값과 일치하는 case를 실행하는 구조입니다.
• 조건값과 각 case를 비교하여 일치하는 경우 해당 case 블록 안의 문장들이 실행됩니다.
• 일치하는 case가 없는 경우에는 default 블록 안의 문장들이 실행됩니다.
• 각 case 블록 안에서는 일련의 문장들이 실행되고, 마지막에는 break 문을 사용하여 switch 블록을 빠져나옵니다. 이를 통해 다음 case 블록을 실행하지 않고 조건문을 종료할 수 있습니다.

var fruit = "apple";
switch (fruit) {
  case "apple":
    console.log("사과를 선택했습니다.");
    break;
  case "banana":
    console.log("바나나를 선택했습니다.");
    break;
  case "orange":
    console.log("오렌지를 선택했습니다.");
    break;
  default:
    console.log("일치하는 과일이 없습니다.");
    break;
}

var subject='javascript';
switch(subject) {
 case 'html' :
 subject += '은 1학점입니다';
 break;
 case 'css' :
 subject += '은 2학점입니다';
 break;
 case 'javascript' :
 subject += '은 3학점입니다';
 break;
 default :
 subject = '해당과목이 없습니다.';
}
console.log(subject);

while 반복문

• while 반복문은 주어진 조건값에 따라 반복을 수행하는 구조입니다.
• 반복문 진입 전에 조건값을 확인하고, 조건값이 참(true)인 경우에 반복문 내의 문장들이 실행됩니다.
• 각 반복마다 조건값이 다시 확인되고, 조건값이 여전히 참인 경우 반복이 계속됩니다.
• 조건값이 거짓(false)이 되면 반복문이 종료되고, 다음 문장으로 실행이 이어집니다.
• 조건값을 true로 설정하면 무한 반복이 발생할 수 있으므로, 반복문 내에서 break 문을 사용하여 특정 조건에서 반복문을 종료시킬 수 있습니다.

var count = 0;
while (count < 5) {
  console.log("반복 횟수: " + count);
  count++;
}

var n =1;
var sum = 0;
while (n < 8) {
 sum+=n;
 n++;
}
console.log(sum);

for 반복문

• for 반복문은 정해진 횟수만큼 반복하는 구조입니다. 반복 횟수는 조건문의 참(true) 또는 거짓(false)에 의해 결정됩니다.
• for 반복문은 초기화, 조건식, 증감식으로 구성됩니다.
• 초기화는 반복문이 시작될 때 한 번만 실행되는 부분입니다. 보통 반복 변수의 초기값을 설정합니다.
• 조건식은 반복문이 실행될 때마다 확인되는 부분으로, 조건식이 참인 경우 반복이 계속되고, 거짓인 경우 반복문이 종료됩니다.
• 증감식은 반복문이 실행된 후에 반복 변수를 증가 또는 감소시키는 부분입니다. 보통 반복 변수의 값을 변경합니다.

for (var i = 0; i < 5; i++) {
  console.log("반복 횟수: " + i);
}

break 문

• break 문은 반복문의 실행을 중지하고 해당 반복문을 빠져나오는 역할을 합니다.
• break 문은 보통 반복문 내부에서 특정 조건이 충족되었을 때 실행되어 반복을 중지시킵니다.
• break 문이 실행되면 반복문의 실행 흐름은 break 문 다음의 코드로 이동합니다.
• break 문은 for, while, do-while 등의 반복문과 함께 사용될 수 있습니다.

for (var i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

continue 문

• continue 문은 반복문 내에서 실행을 중지하고 다음 반복으로 건너뛰는 역할을 합니다.
• continue 문이 실행되면 반복문의 실행 흐름은 continue 문 다음의 코드를 건너뛰고 다음 반복으로 이동합니다.
• continue 문은 보통 반복문 내부에서 특정 조건이 충족되었을 때 사용되어 특정 조건을 만족하는 경우의 실행을 건너뛰고 다음 반복을 시작합니다.
• continue 문은 for, while, do-while 등의 반복문과 함께 사용될 수 있습니다.

for (var i = 0; i < 5; i++) {
  if (i === 2) {
    continue;
  }
  console.log(i);
}

사용자 정의 함수

• 사용자 정의 함수는 프로그램에서 필요한 기능을 사용자가 직접 정의하여 사용하는 함수입니다.
• 사용자는 필요한 기능을 함수로 정의하고, 해당 함수를 필요한 곳에서 호출하여 사용할 수 있습니다.
• 사용자 정의 함수는 자바스크립트 코드의 재사용성과 모듈화를 촉진합니다.
• 사용자 정의 함수의 선언 방법은 function 키워드를 사용하여 함수 이름과 매개변수, 함수 내용을 정의합니다.
• 함수를 호출할 때는 함수 이름과 괄호를 사용하여 호출합니다.

선언적 함수

• 선언적 함수는 함수를 선언하는 방식 중 하나입니다.
• 함수의 이름과 매개변수, 함수 내용을 포함하는 형태로 함수를 선언합니다.
• 선언적 함수는 코드의 가독성과 유지보수성을 높일 수 있습니다.
• 선언적 함수는 함수를 선언하는 시점 이전에도 호출할 수 있습니다.

// 사용자 정의 함수
function addNumbers(a, b) {
  return a + b;
}

var result = addNumbers(3, 5);
console.log(result); // 8

// 선언적 함수
function greet(name) {
  console.log("안녕하세요, " + name + "님!");
}

greet("홍길동"); // 안녕하세요, 홍길동님!

익명 함수

• 익명 함수는 이름이 없는 함수로, 함수를 변수에 할당하여 사용하는 방식입니다.
• 익명 함수는 필요한 기능을 정의하고 변수에 할당하여 사용할 수 있습니다.
• 함수를 변수에 할당함으로써 해당 변수를 통해 함수를 호출하거나 다른 함수의 인수로 전달할 수 있습니다.
• 익명 함수는 주로 콜백 함수나 클로저 등의 개념과 함께 사용됩니다.
• 익명 함수의 선언 방법은 변수에 function 키워드를 사용하여 함수를 정의합니다.
• 변수에 할당된 익명 함수는 변수 이름을 통해 호출됩니다.

// 익명 함수
var greet = function(name) {
  console.log("안녕하세요, " + name + "님!");
};

greet("홍길동"); // 안녕하세요, 홍길동님!

// 익명 함수를 다른 함수의 인수로 사용
function performAction(action) {
  action();
}

performAction(function() {
  console.log("함수를 전달하여 동작 수행");
});

// 익명 함수를 변수에 할당하여 사용
var addNumbers = function(a, b) {
  return a + b;
};

var result = addNumbers(3, 5);
console.log(result); // 8

반환

• return은 함수에서 실행 결과를 돌려주는 명령어입니다.
• 함수 내부에서 return 키워드를 사용하여 값을 반환하면, 해당 값이 함수 호출자에게 돌려집니다.
• 반환된 값은 함수 호출문에서 변수에 할당하거나 다른 연산에 활용할 수 있습니다.
• 함수가 실행되면서 return 문이 실행되면 함수의 실행이 종료되고, 함수 외부의 코드가 다시 실행됩니다.
• 반환문이 실행되면 그 이후의 코드는 실행되지 않습니다.

// 반환 예제
function addNumbers(a, b) {
  var sum = a + b;
  return sum; // sum 값을 반환
}

var result = addNumbers(3, 5);
console.log(result); // 8

// 반환문 이후의 코드는 실행되지 않음
function showMessage(message) {
  console.log(message);
  return; // 반환문만 있고 반환값 없음
  console.log("이 코드는 실행되지 않음");
}

showMessage("안녕하세요"); // "안녕하세요" 출력

전역변수

• 전역변수는 프로그램 전체에 영향을 미치는 변수로, 어디서든지 자유롭게 사용할 수 있습니다.
• 전역변수는 함수 외부에서 선언되며, 프로그램이 실행되는 동안 유지됩니다.
• 전역변수는 한 번 선언되면 어디서든지 접근 가능하므로 주의가 필요합니다.
• 여러 함수에서 공통적으로 사용해야 하는 값이나 상태를 저장하기 위해 전역변수를 활용할 수 있습니다.

var globalVariable = "전역변수"; // 전역변수 선언

function myFunction() {
  console.log(globalVariable); // 전역변수 사용
}

myFunction(); // "전역변수" 출력

지역변수

• 지역변수는 특정 함수 내에서만 사용할 수 있는 변수입니다.
• 지역변수는 해당 함수 내에서 선언되며, 그 함수의 실행 범위 내에서만 유효합니다.
• 함수가 실행될 때마다 새로운 지역변수가 생성되고, 함수 실행이 종료되면 해당 변수는 소멸합니다.
• 지역변수는 함수 내부에서만 접근 가능하므로, 다른 함수나 전역에서는 사용할 수 없습니다

function myFunction() {
  var localVariable = "지역변수"; // 지역변수 선언
  console.log(localVariable); // 지역변수 사용
}

myFunction(); // "지역변수" 출력

console.log(localVariable); // 오류: localVariable은 함수 외부에서 접근 불가능

### 사용자 정의 함수

-   사용자 정의 함수는 프로그램에서 필요한 기능을 사용자가 직접 정의하여 사용하는 함수입니다.
-   사용자는 필요한 기능을 함수로 정의하고, 해당 함수를 필요한 곳에서 호출하여 사용할 수 있습니다.
-   사용자 정의 함수는 자바스크립트 코드의 재사용성과 모듈화를 촉진합니다.
-   사용자 정의 함수의 선언 방법은 function 키워드를 사용하여 함수 이름과 매개변수, 함수 내용을 정의합니다.
-   함수를 호출할 때는 함수 이름과 괄호를 사용하여 호출합니다.

### 선언적 함수

-   선언적 함수는 함수를 선언하는 방식 중 하나입니다.
-   함수의 이름과 매개변수, 함수 내용을 포함하는 형태로 함수를 선언합니다.
-   선언적 함수는 코드의 가독성과 유지보수성을 높일 수 있습니다.
-   선언적 함수는 함수를 선언하는 시점 이전에도 호출할 수 있습니다.