#2.0 your First JS Project
자바스크립트 콘솔로 사용하기
ispect (마우스 우클릭- 검사) - console
alert("hi"); 입력
콘솔은 1줄 코드만 입력할 수 있다.
여러줄을 만드려면 Vue.js를 사용한다.
(Vue.js는 미리 다운로드한다
node.js를 먼저 다운로드 https://nodejs.org 설치완료후 설치확인
터미널창 실행 윈도우 + R 누른뒤 cmd 입력
node -v 입력
확인완료
바탕화면에서 설치할 폴더 만들기
- C:\Users\사용자
에서 vue폴더 생성
터미널창에서 설치할 폴더로 이동
cd c:\Users\사용자\vue 입력
npm install vue입력
설치화면 뜨면 성공
npm install -g @vue/cli입력
설치화면 뜨면 성공
vue -V 또는 vue --version 설치 확인)
document에 momentum 폴더 만들기
터미널창 실행
code 입력 (vue.js 실행됨)
폴더 추가
파일 추가
add.js파일
alert("hi");입력
브라우저 실행 (실행안됨 코드로만 뜬다)
style.css파일
body{
background-color: beige;
}브라우저 실행 (실행안됨 코드로만 뜬다)
index.html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>을 입력
html파일의 역할 css와 javascript의 실행을 하게 해줌
#2.1 Basic Data Types
콘솔에
숫자 정수 소수 입력가능
단순한 계산식 가능
문자열 입력할 때는 '' 또는 "" 안에 입력
문자열 합칠 때는 '' + '' 또는 "" + "" 입력
#2.2 Variables
console.log( );
괄호 안에 숫자 입력 또는 ""안에 문자열 입력
console.log(5 + 2);
console.log(5 * 2);
console.log(5 / 2);쉽게 수정하기 위해 variable을 사용
1) const(constant)를 사용한 방법
const는 변수를 변경하지 않을 때 값을 입력하는 방법이다.
const a = 5;
const b = 2;
const myName = "raley" //긴 이름의 변수를 구분할 때는 스페이스바가 아닌 대문자로 구분
console.log (a + b);
console.log (a * b);
console.log (a / b);
console.log ("hello " + "myName");2) let을 사용한 방법
let은 변수를 변경할 가능성이 있을 때 값을 입력하는 방법이다.
const a = 5;
const b = 2;
let myName = "raley" //긴 이름의 변수를 구분할 때는 스페이스바가 아닌 대문자로 구분
console.log (a + b);
console.log (a * b);
console.log (a / b);
console.log ("hello " + "myName");
myName = "Zana";
console.log ("your new name is " + "myName");const를 주로 쓰고
변수를 업데이트 해야하는 경우에만 let을 쓰도록 한다.
3) var를 사용한 방법
var a = 5;
var a = 2;
myName = "raley" ; //긴 이름의 변수를 구분할 때는 스페이스바가 아닌 대문자로 구분
console.log (a + b);
console.log (a * b);
console.log (a / b);
console.log ("hello " + "myName");var을 사용한 방법은 이제 잘 쓰이지 않는다.
실수로 a의 값을 업데이트 해도 보호받지 못하기 때문.
| "always const sometimes let never var" |
#2.3 Booleans
1) true
켜져있음을 의미
const amIFat = true;
console.log(amIFat);2) False
꺼져있음을 의미
const amIFat = false;
console.log(amIFat);3) null 과 undefined
null 은 변수에 아무것도 없음을 의미
undefined는 변수를 만들고 있지만 아무것도 정의되지 않은 것 (값이 들어가지 않음)
const amIFat = null;
let something;
console.log(something, amIFat);결과는 undefined null
'공부기록 > [강의노트] 바닐라 JS로 크롬 앱 만들기' 카테고리의 다른 글
| 바닐라 JS로 크롬 앱 만들기 #2.15~#2.16 (0) | 2022.04.14 |
|---|---|
| 바닐라 JS로 크롬 앱 만들기 #2.13~#2.15 (0) | 2022.04.13 |
| 바닐라 JS로 크롬 앱 만들기 #2.11~ #2.12 (0) | 2022.04.13 |
| 바닐라 JS로 크롬 앱 만들기 #2.5~#2.10 (0) | 2022.04.13 |
| 바닐라 JS로 크롬앱 만들기 #1 (0) | 2022.04.13 |
