Java Script 변수타입 및 기본예제 따라하기

 

JavaScript 기본

복습겸 몰랐던 거 정리 

 

자바스크립트는 유연한 동적 프로그래밍 언어

 

변수 타입

1. var

변수 이름 앞에 써주는 타입

같은 변수를 한번 더 선언해도 오류가 나지않는다(선언하기 전에 값을 할당도 가능)

 

2. let

다른 프로그래밍 언어에서 사용하는 것처럼 사용할 수 있는 변수 (var처럼 이상한 거 못함)

 

*var는 가급적 쓰지말자

1)var hoisting (호이스팅)

: 어디에 선언했는 지 상관없이 항상 선언을 제일 위로 끌어올리는 것

-> 변수 선언 전에 값을 할당하는 것이 가능해짐

 

2) block scope 이 불가능

{   } 블럭 안에 선언한 변수는 글로벌 변수외엔 블럭 밖에서 접근할 수 없는데

var로 선언하게 되면 밖에서도 접근이 가능하다.

 

=> 규모있는 프로젝트에선 큰 단점이 된다.

es6부터 let을 제공하므로 let을 쓰자

 

3. const

상수 취급(immutable data type)

->보안성, 다양한 스레드가 동시에 값을 변경하는 것을 방지, 실수 방지

 

4. function

함수지만 이것도 데이터 타입 중 하나,

변수에 할당이 가능하고 함수를 파라미터로 전달하거나 리턴하는 것이 가능하다.

=>frist class function이라고 함

 

5. Number

숫자타입은 int, float, double, long 이렇게 안나누고 Number로 퉁침

ex) let a= 5.5;  -> a의 타입은 Number

 

특이한 것

1) Infinity : 양수를 0으로 나눴을 경우

2) -Infinity : 음수를 0으로 나눴을 경우

3) NaN : 숫자가 아닌 것을 숫자로 나눴을 경우

 

6. bigInt 

최근에 추가된 타입, 자바 스크립트는 -2**53~2**53 까지 지원하는데

숫자 뒤에 n만 붙여주면 더 큰 값을 표현하는 bigint타입으로 표현할 수 있다

ex) const bigInt = 123456789123456789123456789123456789123456789n;

 

7. string 

한글자나 문자열이나 모두 string

` ` 백틱을 이용해서 잘 표현하자 

ex)

let name = "댕댕";

const hello = `hi ${name}!`;

-> hi 댕댕!

 

8. boolean

1)false : 0, null, undefined(아무런 값이 할당되지 않은 것), NaN, ' '(빈문자열)

2)true : 나머지

ex) const test =3<1;  => false

 

9. Symbol

주어진 문자열에 관계없이 고유한 식별자를 만들 때 사용

ex)

cosnt symbol1 = Symbol('id');

cosnt symbol2 = Symbol('id');

symbol1 === symbol2 => false;

 

주어진 문자열에 맞는 심볼 만들기

cosnt symbol1 = Symbol.for('id');

cosnt symbol2 = Symbol.for('id');

symbol1 === symbol2 => true;

 

출력시

symbol1.description으로 문자열로 변환해서 출력한다

안그럼 에러

 

10. Object 

일상적인 개념을 박스형태로 묶은 것

const person = {name: '홍길동', age: 20};

person.age = 30;

 

 

 

기타

 

a와 b는 같은가

a === b

 

a와 b는 다른가

a!==b

!(a===b)

 

 

자바 스크립트는 dynamic typing 언어

runtime 때 할당 된 값에 따라서 타입이 변경될 수 있다.

ex)

let text = 'hello'          ---> string

text = 5                       ---> number

text = '7'+5 -> '75'     ---> string 

text = '8'/'2'  -> 4       --->number

 

=>그래서 type script가 나왔다

타입을 더 얹었다고 함.......=> 타입에 더 엄격해졌다는 말인듯

 

 

 

닥스의 기본예제 따라하기

 

index.html  </body>바로 위에 작성

<!--자바 스크립트 연결-->
<script src="scripts/main.js"></script>

 

main.js 파일을 하나 만들고 작성

let myHeading = document.querySelector('h1'); //본문 제목에 대한 참조
myHeading.textContent = 'Hello World!'; //속성 값 변경

 

h1 태그 컨텐츠가 바뀜

 

 

document.querySelector('html').onclick = function () {
    alert("클릭 ㄴㄴ");
};

//이 두줄과 같다
//let myHTML = document.querySelector('html');
//myHTML.onclick = function() {};

아무곳이나 클릭시

 

 

사용자 이름을 입력 받고 브라우저에 저장해서 다음에 또 보여주기

버튼을 누르면 이름을 다시 바꿀 수 있음

 

<script> 바로 위쪽에 버튼 추가 

<button>Change user</button>

 

스크립트에 추가

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

function setUserName() {
    //프롬프트 창을 띄워서 이름 입력받기
    let myName = prompt('이름이 무엇이오? Please enter your name');

    //localStorage API를 사용해서 브라우저에 데이터 저장하려고 함
    //name이라는 데이터 항목을 생성하고 myName에 저장
    if (!myName || myName === null) {
        setUserName();
    } else {
        localStorage.setItem('name', myName);
        myHeading.innerHTML = '환영합니다! ' + myName;
    }

}

if (!localStorage.getItem('name')) {
    setUserName();
} else {
    let storedName = localStorage.getItem('name');
    myHeading.innerHTML = '또 왔넴 ' + storedName;
}

myButton.onclick = function () {
    setUserName();
}

 

이름을 입력하지 않았을 시 null이 나오기 때문에 null일 경우 체크를 해줘야함

 

이름을 입력하지 않고 취소를 누르거나 확인을 누르면

setUserName이 계속 호출돼서 프롬프트가 계속 나옴

 

 

제대로 입력했을 시

 

새로고침 시