JavaScript 데이터 유지 - JavaScript deiteo yuji

Question

※ 2022년 03월 14일 내용이 너무 빈약하여 수정하였습니다. ※

Q. 뒤로 가기해도 데이터 위치 유지 해주세요

쇼핑몰 프로젝트 진행 중.

목차 Show

※ 2022년 03월 14일 내용이 너무 빈약하여 수정하였습니다. ※
Q. 뒤로 가기해도 데이터 위치 유지 해주세요
필요한 툴
변수의 선언
변수의 초기화
변수의 재지정
변수 이름에 대한 규칙
변수의 종류
불리언(Booleans)
지정되지 않은 타입
당신의 실력을 시험해 보세요!

상품 리스트 클릭후 뒤로 가기 시 해당 상품으로 포커싱이 되게 해 달라는 요청이 있어 작업하게 되었다.

해당 방법외에도 여러 가지 방법이 있으니 이 코드가 정답이 아니라는것을 유의하길 바란다. 책임회피 해버리기~

처음에는 localstorage를 사용해서 구현하였는데, 브라우저를 종료시켜도 데이터가 남아있는 경우가 있어

sessionstorage를 사용하여 구현하였다.

localstorage : 로컬에서 직접 삭제하기 전까지는 데이터가 남아있음

sessionstorage : 세션을 종료하기 전까지는 (ex_ 브라우저 창 닫기) 데이터가 남아있음

아이디어는 다음과 같다.

1. 뒤로 가기 이벤트가 아닐 시 async 요청 후 sessionstorage에 상품 리스트 데이터와 start값 저장

더보기 요청시(또는 페이지네이션) start값이 필요하므로 상품 리스트 데이터와 start값을 같이 저장해준다.

2. 상품 리스트에서 상품 클릭 시 상품 위치 값을 sessionstorage에 저장

3. 클릭된 상품에서 뒤로 가기로 상품 리스트에 왔을 시 async 요청을 하지 않고 sessionstorage 데이터 호출

클릭된 상품에서 뒤로 가기 이벤트 발생 시 sessionstroage에 체크 (true)
sessionstorage에서 상품 데이터를 가져와서 렌더링하고 상품 위치 값을 가져와서 포커싱

4. sessionstroage에서 렌더링이 끝났으면 sessionstroage에 체크 (false)

  // product-list component
  
  isBack = false;
  localBackItems = [];
  isMore = false;
  start = 0;
  products = [];
  
  getBackDatas(){
    // 뒤로가기로 해서 온건지 확인
    this.isBack = JSON.parse(sessionStorage.getItem('isMainBack'));
    //sessionstroage에서 데이터 가져오기
    let backItems = JSON.parse(sessionStorage.getItem('backMainItems'));
    //start값
    let index = parseInt(sessionStorage.getItem('backMainIndex'));
    //뒤로가기시 포커싱 되어야할 상품 위치
    //뒤로가기로 해서 온것이아니라면 그냥 0값을주어 최상단으로 위치한다.
    let scroll = parseInt(sessionStorage.getItem('mainScrollY')) ? JSON.parse(sessionStorage.getItem('mainScrollY')) : 0;
    //뒤로가기로 해서 왔을경우 sessionstroage값을 렌더링 후 해당 위치로 포커싱
    if(this.isBack && !this.isMore){
      this.products = backItems;
      this.localBackItems = backItems;
      this.goTab(scroll)
    }
    // 더보기 버튼 눌렀을경우 start값 적용해서 기존의 async요청
    // start는 데이터 Get요청할때 어디서부터 가져오는지를 뜻한다. 
    else if(this.isMore){
      this.start = index;
      this.getrProducts();
    }
    //뒤로가기로 해서 온것이 아닐경우 기존의 async요청
    else{
    //더보기시 데이터를 적재하는 방식으로 구현해서 home을 클리어해주어야함.
    //products는 getrProducts를 요청했을때 받아온 상품목록 데이터이다
      this.products=[];
      this.getrProducts();
    }
    //이부분이 없으면 새로고침을해도 sessionstroage데이터를 가져옴
    sessionStorage.setItem('isMainBack',JSON.stringify(false));
 }
 
  // 상품을 클릭했을때 이 함수를 콜한다.
  // 상품위치를 저장하는 함수이다.
  scroll:nubmer
  @HostListener("window:scroll",['$event'])
  onScroll(){
    this.scroll = window.pageYOffset
    sessionStorage.setItem('mainScrollY',JSON.stringify(this.scroll));
  }

???: 아니 뒤로가기 이벤트는 어떻게 감지함? 그걸 빼먹으면 어떡함!

바로 밑에 준비되어있다.

  // product-detail component
  // Angular에서 사용되는 HostListener이다.
  // import { HostListener} from '@angular/core'; 로 import해주어야함
  // 뒤로가기 이벤트 발생시 sessionstroage에 체크한다.
  
  @HostListener('window:popstate',['$event'])
  onBack(e:Event){
    sessionStorage.setItem('isMainBack',JSON.stringify(true));
  }

Angular에서는 HostListener를 사용하여 쉽게 뒤로가기 이벤트를 감지할수있다.

Angular가 아닌 자바스크립트에서는

//product-detail component

window.onpageshow = function(e){
	if(e.persisted){
    	//뒤로가기 눌렀을때 로직실행
    	sessionStorage.setItem('isMainBack',JSON.stringify(true));
      }
 }

이런식으로 사용하면 될것같다.

※ 결과보기 클릭 시 정상 작동 X (※ 홈페이지에 코드 넣고 크롬에서 확인하면 정상 출력)

localStorage 예제 - 저장 후 불러오기

결과보기 (지원 브라우저 경우 결과값: Homzzang.com)

window.localStorage 정의

웹 브라우저에 키/값 쌍을 저장 가능.
※ localStorage 속성은 window 객체의 속성 중 하나. 따라서, 앞에 window 안 붙여도 됨.
1.
localStorage 객체는 만료 날짜가 없는 데이터를 저장.
브라우저 닫아도 데이터 삭제 안 되며 다음 (날・주・연도)에 사용 가능.
2.

localStorage 속성은 읽기 전용.
cf.
sessionStorage 속성 : 세션 데이터 저장. (※ 브라우저 탭 닫으면 데이터 손실 됨)
3.
IE8 이상 주요 최신 브라우저 모두 지원.

window.localStorage 구문

window.localStorage
데이터를 localStorage에 저장
localStorage.setItem("key", "value");
localStorage에서 데이터 읽기
var host = localStorage.getItem("key");
localStorage에서 데이터 제거
localStorage.removeItem("key");
[반환값]
스토리지 객체.

localStorage 예제 - 클릭 횟수

※ 브라우저 닫아다 다시 열어도 이어서 클릭 횟수 증가
클릭
결과보기

localStorage 예제 - 토글 효과 지속

bo_list
toggle
결과보기

취미생활 님 (200525) https://sir.kr/qa/360619

앞선 두 수업을 듣고, 자바스크립트에 대해(웹 기술에서 어떻게 사용되는지, 큰 범위에서의 특징) 알아보았다. 이번 수업에서는 기본중에 기본인 자바스크립트의 주된 구성중 하나인 변수가 어떻게 이루어져 있는지 알아볼 것이다.

알아야 할 것기본적인 컴퓨터 지식, 기본적인 HTML, CSS, JS의 이해목표자바스크립트 변수에 대해 익혀보기

필요한 툴

이번 수업에서 컨텐츠에 대한 이해도를 테스트하고자, 코드를 입력하라는 요청을 받게 될 것이다. 만약 데스크탑 브라우저를 사용한다면, 코드를 실행하기 가장 좋은 프로그램은 브라우저의 자바스크립트 콘솔창일 것이다.(도구의 사용법에 대해 알고자 한다면 What are browser developer tools (en-US) 를 참고하자)

변수란?

변수란, 숫자(합계나 계산에 사용되는) 또는 문자열(문장의 일부로 사용되는)과 같은 값의 컨테이너입니다. 그러나 변수에 대한 한 가지 특별한 점은 포함된 값이 변경될 수 있다는 것입니다. 간단한 예를 살펴 보겠습니다:

<button>Press me</button>

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

이 예제에서 버튼을 누르면 몇 줄의 코드가 실행됩니다. 첫 번째 줄은 독자가 이름을 입력하도록 요청한 화면에 상자를 띄운 다음, 변수에 값을 저장합니다. 두 번째 줄은 변수 값에서 가져온, 이름이 포함된 환영 메시지가 표시됩니다.

왜 변수가 유용한 지 이해하려면, 변수를 사용하지 않고 이 예제를 작성하는 방법에 대해 생각해 봅시다. 그러면 아마 이런 식으로 끝날 것입니다.

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

우리가 사용하고있는 구문을 완전히 이해하지는 못했지만, 아이디어를 얻을 수 있어야 합니다-변수를 사용할 수 없다면, 입력된 이름을 검사하는 거대한 코드 블록을 구현해야합니다. 그런 다음 해당 이름에 대한 각각의 메시지를 출력해야 합니다. 이것은 분명히 비효율적입니다 (코드는 네 가지 선택만으로도 훨씬 더 커집니다). 그리고 가능한 모든 선택 사항(모든 이름들)을 저장할 수 없어 작동하지 않을 수도 있습니다.

변수는 이해하기 쉽습니다. 자바 스크립트에 대해 더 많이 배우면, 변수들은 자연스럽게 느껴질 것입니다.

변수에 대한 또 다른 특별한 점은 문자열과 숫자뿐 아니라 무엇이든 포함 할 수 있다는 것입니다. 변수에는 복잡한 데이터와 놀랄만 한 기능을 수행하는 함수(Function)까지 포함될 수 있습니다. 당신은 이것에 대해 점점 더 많이 배울 것입니다.

변수는 값을 포함하고 있습니다. 이것은 중요한 차이점입니다. 변수는 값 자체가 아닙니다. 변수는 값을 위한 컨테이너입니다. 당신은 변수란 물건들을 저장할 수있는 작은 골판지 상자와 같다고 생각할 수 있습니다.

변수의 선언

변수를 사용하기 위해서, 먼저 변수를 선언해야 합니다 - 보다 정확히는, 변수를 선언한다고 부른다. 이를 위해 키워드 var를 입력하고, 당신이 원하는 변수 이름을 입력합니다.

var myName;
var myAge;

여기서 우리는 myName과 myAge라는 두 개의 변수를 생성합니다. 웹 브라우저의 콘솔 또는 아래 콘솔에서 두행을 입력해 보십시오 (원하는 경우, 콘솔을 별도의 탭이나 창에서 열 수 있음). 그 후, 자신이 명명한 변수를 만들어 보십시오.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript console</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html {
        background-color: #0C323D;
        color: #809089;
        font-family: monospace;
      }

      body {
        max-width: 700px;
      }

      p {
        margin: 0;
        width: 1%;
        padding: 0 1%;
        font-size: 16px;
        line-height: 1.5;
        float: left;
      }

      .input p {
        margin-right: 1%;
      }

      .output p {
        width: 100%;
      }

      .input input {
        width: 96%;
        float: left;
        border: none;
        font-size: 16px;
        line-height: 1.5;
        font-family: monospace;
        padding: 0;
        background: #0C323D;
        color: #809089;
      }

      div {
        clear: both;
      }

    </style>

</head>
<body>

</body>

<script>
var geval = eval;
function createInput() {
var inputDiv = document.createElement('div');
var inputPara = document.createElement('p');
var inputForm = document.createElement('input');

      inputDiv.setAttribute('class','input');
      inputPara.textContent = '>';
      inputDiv.appendChild(inputPara);
      inputDiv.appendChild(inputForm);
      document.body.appendChild(inputDiv);

      inputForm.addEventListener('change', executeCode);
    }

    function executeCode(e) {
      try {
        var result = geval(e.target.value);
      } catch(e) {
        var result = 'error — ' + e.message;
      }

      var outputDiv = document.createElement('div');
      var outputPara = document.createElement('p');

      outputDiv.setAttribute('class','output');
      outputPara.textContent = 'Result: ' + result;
      outputDiv.appendChild(outputPara);
      document.body.appendChild(outputDiv);

      e.target.disabled = true;
      e.target.parentNode.style.opacity = '0.5';

      createInput()
    }

    createInput();

</script>
</html>

참고: JavaScript에서는 모든 코드 명령어가 세미콜론 (;)으로 끝나야합니다. 코드를 한 줄로 작성해도 올바르게 작동할 지라도, 여러 줄의 코드를 함께 작성하는 경우에는 그렇지 않습니다. 그것을 포함시키는 습관을 갖도록 노력하십시오.

변수 이름을 입력하여 변수의 값이 실행 환경에 존재하는지 테스트 할 수 있습니다.

myName;
myAge;

이 변수들은 값을 포함하고 있지 않은 빈 컨테이너 입니다. 변수 이름만 입력 할 경우

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

3 값을 반환하며 변수는 이 값(

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

4을 포함하게 됩니다. 만약 존재하지 않는(선언되지 않은) 변수는, 오류 메시지가 표시됩니다. 아래 변수를 입력하여 확인해 보세요.

scoobyDoo;

참고: 존재하지만 값을 포함하고 있지 않은 변수와, 존재하지 않은 변수를 혼돈하지 마십시오. 둘은 매우 다른 것들입니다.

변수의 초기화

변수를 선언한 후에는 값으로 초기화 할 수 있습니다. 변수 이름 다음에 등호(

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

5)와 그 뒤에 부여 할 값을 입력하여 이 작업을 수행 할 수 있습니다.

myName = 'Chris';
myAge = 37;

콘솔로 돌아가 코드들을 입력해 보세요. 각각의 경우 변수에 할당한 값은 콘솔을 통해 반환되어 확인 할 수 있습니다. 또한 단순히 변수 이름을 입력하여 변수 값을 반환 할 수 있습니다. 한번 해보세요.

myName;
myAge;

다음과 같이 변수를 선언하고 동시에 초기화 할 수 있습니다.

var myName = 'Chris';

아마도 변수의 선언과 초기화를 두줄로 나누어 하는것 보다 더 빠르기 때문에 대부분 이러한 방식을 자주 사용 하게 될 겁니다.

참고:

여러 줄 문자열로 JavaScript 프로그램을 작성할 때(write a multiline JavaScript), 변수를 선언하기 전에 해당 변수의 값을 초기화 할 수 있습니다. 이것이 가능한 이유는 JavaScript 에서 일반적으로 변수 선언문이 다른 코드 보다 먼저 실행되기 때문인데, 이 동작을 호이스팅이라고 합니다. 자세한 내용은 var 호이스팅 문서를 참고하세요.

변수의 재지정

변수에 값이 할당되면 다른 값을 지정하여 해당 값을 업데이트 할 수 있습니다. 콘솔에 다음 행을 입력해 보세요.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

0

변수 이름에 대한 규칙

변수를 원하는 대로 이름을 부여 할 수 있지만 제한이 있습니다. 일반적으로 라틴 문자(0-9, a-z, A-Z)와 밑줄 문자를 사용해야 합니다.

오류가 발생하거나 전 세계 타인이 이해하기 어려울 수 있으므로 다른 문자를 사용하면 안됩니다.
변수 이름의 시작부분에 밑줄(_)을 사용하지 마세요. JavaScript 구문에서 밑줄로 시작하는 것은 특별한 의미를 가지고 있으므로 혼란을 가져올수 있습니다.
변수 이름의 시작부분에 숫자를 사용하지 마세요. 허용되지 않으며 오류가 발생합니다.
안전한 명명법은 소위 "lower camel case"(소문자 낙타 문법) 입니다. 여러 단어를 하나로 묶고 첫 단어의 시작은 소문자를 사용하며 그다음 단어의 시작은 대문자로 사용합니다. 우리는 지금까지 이 문서에서 변수 이름에 이 방법을 사용해 왔습니다.
포함된 데이터를 쉽게 이해 할 수 있게 변수 이름을 직관적으로 부여 합니다. 단일 문자 / 숫자 또는 긴 구절을 사용하지 마세요.변수 이름을 직관적으로 만들어, 포함된 데이터를 표현 할 수 있습니다.

변수는 대소문자를 구분 합니다. -

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

6 와

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

7 는 다른 변수 입니다.

마지막으로 JavaScript 예약어를 변수 이름으로 사용하면 안됩니다. (예약어란 JavaScript의 실제 구문을 구성하는 단어를 의미 합니다.) 따라서 변수 이름으로

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

8,

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

9,

var myName;
var myAge;

0,

var myName;
var myAge;

1 와 같은 단어를 사용 할 수 없습니다. 브라우저는 이러한 단어를 다른 코드 아이템(예약어)로 인식하므로 오류가 발생 합니다.

참고: 다음 Lexical grammar — keywords 링크에서 예약어의 목록을 확인 할 수 있습니다.

바람직한 변수 이름의 예:

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

1

바람직하지 않은 변수 이름의 예:

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

2

위의 지침을 염두에 두고 몇가지 변수를 추가로 작성해 보세요.

변수의 종류

변수에 저장할 수 있는 몇가지 유형의 데이터(데이터 유형)가 있습니다. 이 섹션에서는 이를 간단히 설명하고 이후 자세히 살펴보겠습니다.

지금까지 우린 두가지 형태의 데이터 유형을 살펴 봤지만 다른 유형들도 있습니다.

숫자

30과 같은 숫자 (정수라고도 함) 나 2.456(부동소수점 또는 부동 소수점 숫자라고도 함) 같은 십진수 숫자를 변수에 저장할 수 있습니다. JavaScript는 일부 프로그래밍 언어처럼 숫자 유형에 따른 다른 데이터 유형을 가지고 있지 않습니다. 변수에 숫자 값 대입할 때, 따옴표 사용하지 않습니다.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

3

문자열

문자열은 텍스트의 조각입니다. 변수에 문자열 값을 대입할 때, 작은따옴표(')나 큰따옴표(")로 묶어야 합니다. 그렇지 않으면 JavaScript는 다른 변수 이름으로 해석하게 됩니다.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

4

불리언(Booleans)

불리언(Booleans)은

var myName;
var myAge;

2 이나

var myName;
var myAge;

3 라는 값을 가지는 참/거짓을 표현하는 데이터 유형입니다. 일반적으로 조건을 테스트하는 데 사용되며 그 다음 코드가 조건에 따라 실행됩니다. 예를 들어 다음과 같습니다.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

5

일반적으로 다음과 같은 방식으로 더 많이 사용됩니다.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

6

위의 코드는 "작다" 연산자(

var myName;
var myAge;

4) 를 사용하여 6이 3보다 작은지를 확인 합니다. 예상 한대로 6이 3보다 작지 않으므로

var myName;
var myAge;

3 를 반환 합니다! 나중에 이러한 연산자에 대해 더 많이 배우게 됩니다.

배열

배열은 대괄호로 묶이고 쉼표로 구분 된 여러 값을 포함하는 단일 객체입니다. 다음 코드를 콘솔에 입력해 보세요.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

7

이러한 배열이 정의되면 다음과 같은 구문을 사용하여 개별 값에 접근 할 수 있습니다. 다음 코드를 입력해 보세요.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

8

대괄호에는 반환할 값의 위치를 지정하는 인덱스 값이 들어 있습니다. 컴퓨터는 우리 사람처럼 1대신 0부터 숫자를 센다는 것을 알 수 있습니다.

앞으로 배열에 대해 더 많이 배우게 됩니다.

객체

프로그래밍에서 객체(Objects)는 실제 사물(real life object)을 모델링 하는 코드 구조입니다. 예를들어 주차장 객체는 주차장의 높이와 넓이 정보를 가지고 표현 할 수 있으며, 사람 객체는 이름, 키, 몸무게, 사용하는 언어등의 정보를 가지고 표현 할 수 있습니다.

콘솔에 다음 코드를 입력해 보세요.

const button = document.querySelector('button');

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

9

객체에 저장된 정보를 검색하기 위해서는 아래 구문을 사용합니다.

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

0

지금은 객체에 대해 더 자세하게 보지 않을 것입니다. - 앞으로 모듈에 있는 객체에 대해 더 많이 배울 수 있습니다.

지정되지 않은 타입

JavaScript는 "느슨한 유형의 언어(loosely typed language)" 입니다. 즉, 다른 언어와 달리 변수에 포함 할 데이터의 유형을 지정할 필요가 없습니다.(예: 숫자? 문자열?)

예를 들어, 변수를 선언하고 그 변수의 값을 따옴표로 묶은 값을 지정하면 브라우저는 변수의 값을 문자열로 인식합니다.

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

1

따옴표 안에 숫자가 포함되어 있어도 여전히 문자열로 인식되므로 주의해야 합니다:

let name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...