JavaScript 기본

😘 Javascript 프로젝트 생성

• 이전 자바스크립트 나무위키에서 봤듯이 자바스크립트는 인터프리티가 웹 브라우저 안에 생성되어있다. 따라서 우리가 javascript를 사용하기 위해서 따로 파이썬이나 자바처럼 다운로드 받을 필요 없이 웹 브라우저를 통해서 사용할 수 있다.

1. 첫 번째 방법

웹 브라우저 키고 개발자 도구 들어가 콘솔 창을 키면 사용이 가능하다.

하지만 이 방법은 javascript를 한 줄로 모든 것을 해결해야만 한다는 단점이 존재한다.

2. 두 번째 방법

직접 웹 브라우저를 만들어 실행시키는 방법이 있다.
웹 페이지를 구성하는 html파일을 생성, 이때 html에서 다음과 같은 구문을 통해 자바 스크립트 파일과 연동하여 사용할 수 있다.

<script src = "app.js"></script>

이때 body태그 제일 마지막에 적는 것이 일반적

• html에서 다음과 같은 구문을 통해 css 파일과 연동하여 사용할 수 있다.

<link rel = "stylesheet" href = "style.css">

이때 위의 구문은 head태그 제일 마지막에 적는 것이 일반적

순서

1. html파일 생성 - !tab으로 쉽게 html구조를 작성할 수 있다.
2. 방법 2의 구문 작성
3. css파일과, js파일 생성(style.css, app.js)

• css파일

body {
    background-color: bisque;
}

• js파일

alert("hi")

4. 웹페이지가 제대로 동작하는 지 확인
   

😊 Javascript 변수

변수란 무엇인가?

위키피디아의 사전적 정의

컴퓨터 프로그래밍에서 변수(變數, variable) 또는 스칼라(scalar)는 아직 알려지지 않거나 어느 정도까지만 알려져 있는 양이나 정보에 대한 상징적인 이름이다. 컴퓨터 소스 코드에서의 변수 이름은 일반적으로 데이터 저장 위치와 그 안의 내용물과 관련되어 있으며 이러한 것들은 프로그램 실행 도중에 변경될 수 있다.

쉽게 말하자면... 변수란?

1. 변수는 컴퓨터의 메모리에 존재하는 공간이다.
2. 그 공간은 정보를 저장하기 위해서 사용된다.
3. 공간을 찾기 쉽게 만들려고, 이름을 붙여서 사용한다.

그렇다면 javascript에서 변수 설정은 어떻게 하는가?

const name = "Minsu"
let age = 12 

위에 보는 것과 같이 javascript에서 변수 설정은 const, let 두 가지 방법이 있다.

const vs let

• const
  const는 절대 바뀌지 않는 변수를 뜻한다.
  java에서 final과 비슷한 기능을 한다고 보면 될 것 같다.
  
• let
  let은 바뀔 수 있는 변수를 뜻한다.

var은 무엇인가요??

var또한 let처럼 바뀔 수 있는 변수를 뜻한다. 하지만 이는 const,let이 있기 전에 만들어 진 것으로 var로 이루어진 변수는 언제 어디서든 업데이트할 수 있다. 따라서 보안성 측면에서 떨어지므로 데이터 보존성 측면에서 상당히 좋지 못하다.

결론: 쓰지마라

😉 javascript 데이터 타입

1. Boolean
   true, false

2. null

const a = null

-> 값이 주어졌지만 그 값이 비어있을 경우 null이라고 한다. 파이썬의 None과 비슷하다.

3. undefined

let b

-> 이처럼 변수에 메모리는 존재하지만 값이 부여되지 않았을 경우 undefined 자료형이다.

4. Array

1) 배열 정의

lst = [1,2,3,4,5]

2) 배열 항목 추가

lst.push(6) // lst = [1,2,3,4,5,6]

5.Object
1) 객체 설정

const player = {
  name:"nico",
  points: 10,
  fat : true
   
}

2) 객체 항목 참조
이때 player의 fat이란 항목을 참조하기 위해
1. player["fat"]
2. player.fat

둘 다 허용된다.

3) 객체 항목 추가, 수정
추가

player.height = 178

이라고 해주면 추가가 된다.

수정

player.fat = false

기존에 있던 항목에 다른 값을 부여하면 됨

객체 const player의 내용이 수정이 되는 이유

const player의 객체 그 자체의 값이 바뀌는 것이 아니라 player 안의 항목이 바뀌는 것이라 수정이 가능, 만약 player = null이라고 입력할 경우 오류 발생한다.