Notice
Recent Posts
Link
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
관리 메뉴

공부기록용

Part1. 2)자바스크립트 기본 본문

📚강의록📚/모던 자바스크립트

Part1. 2)자바스크립트 기본

과부하가즈아 2024. 1. 10. 19:29

🔴<script> 태그 / src속성

🔴엄격 모드 'use Strict'

🔴nullish 병합 연산자 '??'

🔴반복문의 break, continue

자바스크립트 사용하기

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  
  <body>
    <script>
      alert('안녕')
    </script>
  </body>
  
</html>

 

<script> 태그를 이용하면 자바스크립트 프로그램을 HTML 문서 대부분의 위치에 삽입할 수 있다. 
<script> 태그엔 자바스크립트 코드가 들어간다. 브라우저는 이 태그를 만나면 안의 코드를 자동으로 처리한다.

src 속성

  • 외부 스크립트 
    • 자바스크립트 코드의 양이 많은 경우엔, 파일로 소분하여 저장할 수 있다. 분해해 놓은 각 파일은 src 속성을 사용해 HTML에 삽입합니다. (절대경로, 상대경로, url가능)
      • HTML에 복수의 script를 삽입할 수 도 있음(script를 여러개 사용하면 됨)
        ->그러나 HTML 안에 직접 스크립트를 작성하는 방식은 대개 스크립트가 아주 간단할 때만 사용합니다. 
        스크립트가 길어지면 별개의 분리된 파일로 만들어 저장하는 것이 좋습니다.
    • src 속성이 있으면 태그 내부의 코드는 무시되기 때문에 <script> 태그는 src 속성과 내부 코드를 동시에 가지지 못한다.  
<!-- ❌ -->
<script src="file.js">
	alert(1); // src 속성이 사용되었으므로 이 코드는 무시됩니다.
</script>


<!-- ⭕, 복수의 script를 삽입 -->
<script src="file.js"></script>
<script>
	alert(1);
</script>

파일분리

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="hello.js"></script>
    <script src="javascript.js"></script>
  </body>
</html>
// hello.js
alert('안녕!')

// javascript.js
alert('자바스크립트!')
❓HTML에서 <script> 태그가 head에도 쓰이고 body에도 쓰이고 해서 차이가 알고 싶었당❓

 

https://realzzu.tistory.com/155

엄격 모드 'use Strict'

function exampleNonStrict() {
    nonStrictVar = 20; // No error, 암묵적으로 전역 변수로 처리
}

exampleNonStrict();
console.log(nonStrictVar); // 20

엄격 모드를 사용하지 않은 위 코드는 nonStrictVar 변수를 미리 선언하지 않고 사용해도 에러가 발생하지 않았다. 이렇게 되면 변수 nonStrictVar는 암묵적으로 전역 변수로 처리되며, 이는 코드의 예상치 못한 동작을 일으킬 수 있는 위험성을 내포하게 된다.

 

이러한 위험성을 방지하기 위해 엄격 모드를 사용하면

"use strict"  // 📌가장 상단에 사용📌

function exampleStrict() {
    strictVar = 10; // ReferenceError: strictVar is not defined
}

exampleStrict();

 

엄격 모드에서는 ReferenceError가 발생한다. 이는 엄격 모드에서는 변수를 명시적으로 선언하지 않으면 암묵적으로 전역 변수로 처리하는 것을 방지하기 위함이다. 

'use strict';

// 엄격 모드가 이 파일 전체에 적용됩니다.


특정 함수 내에서만 엄격 모드를 활성화

function myFunction() {
    "use strict";
    
    // 엄격 모드가 이 함수 내에만 적용됩니다.
}
 

자바스크립트 모듈의 전체 내용은 자동적으로 엄격 모드가 되며, 따라서 엄격 모드를 시작하기 위한 문은 필요 없다.

function myStrictFunction() {
    // 모듈이기 때문에 기본적으로 엄격 모드가 적용됩니다.
}

export default myStrictFunction;

 

https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-strict-mode/#use-strict-2

prompt

브라우저에서 제공하는 prompt 함수는 두 개의 인수를 받는다. 함수가 실행되면 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창을 띄워준다.

result = prompt(title, [default]);
  • title: 사용자에게 보여줄 문자열
  • default: 입력 필드의 초깃값(선택값)
    • 입력을 취소한 경우는 null이 반환
    • 선택사항이지만 빈값으로 값을 넣어주기
let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

let name = prompt('이름을 입력해주세요', '')  // default 빈 값으로 처리

alert(`당신의 이름은 ${name}입니다.`)

confirm

confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여준다. 사용자가 확인 버튼을 누르면 true, 그 외의 경우는 false를 반환한다.

result = confirm(question);
let isBoss = confirm("당신이 주인인가요?");
// 확인을 누르면 let isBoss = true;
// 취소를 누르면 let isBoss = false;

alert( isBoss );

nullish 병합 연산자 '??'

a가 null도 아니고 undefined도 아니면 a, 그 외의 경우는 b

a ?? b
or연산자인  ||과의 차이
 

 

  • ||는 첫 번째 truthy 값을 반환
  • ??는 첫 번째 정의된(defined) 값을 반환
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

 

💡 nullish 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있다.💡

반복문의 break, continue

 

break를 사용하면 언제든 원하는 때에 반복문을 빠져나올 수 있다. 

let sum = 0;

while (true) {

  let value = +prompt("숫자를 입력하세요.", '');

  if (!value) break; // (*)

  sum += value;

}
alert( '합계: ' + sum );

continue는 전체 반복문을 멈추지 않습니다. 대신에 현재 실행 중인 이터레이션을 멈추고 반복문이 다음 이터레이션을 강제로 실행시키도록 한다(조건을 통과할 때). continue는 현재 반복을 종료시키고 다음 반복으로 넘어가고 싶을 때 사용할 수 있다.

for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

소수구하기

let n = 10;

nextPrime:
for (let i = 2; i <= n; i++) { // 각 i에 대하여 반복문을 돌림

  for (let j = 2; j < i; j++) { // 제수(나눗수)를 찾음
    if (i % j == 0) continue nextPrime; // 소수가 아니므로 다음 i로 넘어감
  }

  alert( i ); // 소수
}

 

 

 

🔗참고자료🔗

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C#

https://ko.javascript.info/

Comments