3. Javascript 선행

개요

• javascript 사용을 위한 기본 환경 설정

  • 바탕화면에 JSBasic 폴더를 생성하여 VS Code에 서 열어준다.
  • index.html 파일을 생성하고, html의 기본 구조를 만든다. (!⇥ )
  • title 태그 하단에 <script> 태그를 만들고 src=”main.js”를 추가한다.
  • main.js 파일을 생성한다.
  • index.html 파일

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>JS선행학습</title>
      <script src="./main.js"></script>
    </head>
    <body></body>
  </html>
  

  • main.js 파일

  console.log("Hello!");
  

  • live server 를 구동하여 크롬 브라우저에서 확인한다.
  • 브라우저에서 F12 키를 눌러서 개발자도구를 실행하고, Console 탭을 클릭하여 결과를 확인한다.
  • 결과 화면

  

<aside> 💡 클론 코딩을 하기 위한 최소한의 Javascript만 학습한다.

• 스타벅스 사이트 클론 코딩에 꼭 필요한 내용을 공부한다.

</aside>

• 표기법

  • dash-case(kebab-case)
  • snake_case
  • camelCase
  • PascalCase

• dash-case(kebab-case):

  • 예) the-quick-brown-fox-jumps-over-the-lazy-dog
  • HTML, CSS 등에 사용된다.

• sname_case

  • 예) the_quick_brown_fox_jumps_over_the_lazy_dog
  • HTML, CSS 등에 사용된다.

• camelCase

  • 예) theQukcBrownFoxJumpsOverTheLazyDog
  • Java, Javascript 등에 사용된다
  • 첫번 째 단어의 첫번 째 글자를 소문자로 시작한다.

• PascalCase

  • 예) TheQukcBrownFoxJumpsOverTheLazyDog
  • 첫번 째 단어의 첫번 째 글자를 대문자로 시작한다.

• Zero-based Numbering

  • 0에서 부터 번호 시작
  • 특수한 경우를 제외하고 0부터 숫자를 시작한다.
  • Zero-based Numbering 예제

  let fruits = ["Apple", "Banana", "Cherry"];
  
  console.log(fruits[0]); // 'Apple'
  console.log(fruits[1]); // 'Banana'
  console.log(fruits[2]); // 'Cherry'
  
  console.log(new Date("2023-12-31").getDay()); // 0: 일요일
  console.log(new Date("2024-01-01").getDay()); // 1: 월요일
  console.log(new Date("2024-01-02").getDay()); // 2: 화요일
  

  

  브라우저의 개발자도구(F12) 결과 화면 출력

  

  2014년 1월 달력

• 주석

// 한줄 주석
/* 여러 줄 주석 */
/* 
	여러 
  줄 
  주석
*/

• 편집기에서 주석 단축키(⌘ + /, 또는 ⌃ + / 를 이용하여 주석 작성한다. )

데이터 종류

• 데이터의 종류(자료형)

  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Object
  • Array

• String

  • 문자열을 나타낸다. (따옴표 안에 작성한다.)
  • String 코드 예제

  <!DOCTYPE html>
  <html lang="ko">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>JS선행학습</title>
      <script src="./string.js"></script>
    </head>
    <body></body>
  </html>
  

  // String(문자 데이터)
  // 따옴표를 사용한다.
  
  let myName = "HONG";  // myNam이라는 변수를 선언한다 
  let email = "[email protected]";
  let helloMessage = `Hello ${myName}!`; //백틱, 그레이브(역따옴표)를 
  		// 이용하여 보간법을 사용할 수 있다. 
  
  console.log(myName);
  console.log(email);
  console.log(helloMessage);
  

  

• Number(숫자 데이터)

  • 정수 및 부동소수점 숫자를 나타냅니다.

  // Number(숫자 데이터)
  // 정수 및 부동소수점 숫자를 나타낸다.
  let number = 123;
  let opacity = 0.57;
  
  console.log(number);
  console.log(opacity);
  

  

• Boolean 데이터(불린 데이터)

  • true, false 두 가지 값안을 갖는다.

  // Boolean(불린 데이터)
  // true, false 두 가지 값밖에 없는 논리 데이터
  
  let checked = true; // 참
  let isShow = false; // 거짓
  
  console.log(checked);
  console.log(isShow);
  

  

• Undefined: 값이 할당되지 않는 상태

  • undefined 예제

  let undef; // 변수 이름이 선언되면서 값이 설정되지 않음: undefined
  let obj = { abc: 123 }; // object(객체) 
  		// 객체 데이터는 중괄호를 열고 닫아서 생성한다. 
  		// 속성값은 속성: 데이터, 형식을 갖는다. 
  
  console.log(undef); // undefined
  console.log(obj.abc); // 123  // 속성은 오브젝트이름.속성 을 이용한다. 
  console.log(obj.xyz); // undefined // obj에는 xyz 속성이 없다.(할당되지 않은상태)