처음 접하고 눈 앞이 깜깜했던 자바스크립트..
시작하기 앞서 꼭꼭 이해하고 넘어가야 할 것들 적어보려한다.
#JS와 HTML의 연결
- html의
<head>안에<script>태그로 연결할 수 있다.
ex1)
<head>
<script src='main.js'></script>
</head>-> JS를 삽입하는 방법에 대해서는 더 자세한 이해가 필요하지만, 우선은 이와 같은 방식으로 자바스크립트를 확인해 볼 수 있다.
#Comment : 주석달기
- 앞으로 코드를 이해하고 우리의 코드를 읽게 될 모두를 위해 주석은 필수다!!
//Javascript에서 한 줄 주석은 이렇게
alert(hi!); //코드 바로 옆에도 사용 가능
/* 코드 블럭을 주석처리하는 등 여러 줄을
한 번에 주석 처리할때는 이렇게
*/- Single Comment :
// (code)- 코드 위에 쓰거나 코드 옆에 쓸 수 있다.
- Multiple Comment :
/* (code) */단축키
Window : 한 줄Ctrl+/, 여러 줄 :Ctrl+Shift+/
Mac :Cmd+/,Ctrl+Option+/
#use strict
- 'use strict'를 스크립트의 최상단에 적어두면, error를 바로 알 수 있다. (이 위에는 주석만 사용가능)
-> JS를 시작하기 전에 첫 줄에 'use strict' 입력!
#console
- console은 디버깅을 위한 객체로 콘솔창에 여러 정보를 출력할 수 있다.
- 이때 datatype에 따라 처리하는 방식이 달라진다.
-> 아직 디버깅도 뭔지도 모르는 수준이라console.log()의 괄호 안에 값을 넣으면 출력이 된다는 것만 이해하기로 했다..😂
-> dev tool안의 console 창에서 확인 가능하다.
# .log()
console.log();괄호 안의 값이 출력된다.- 마지막에
;을 잊지 말자
-> JS에서 줄바꿈이 일반적으로;으로 인식되기도 하지만 혹시 모를 error가 뜨지 않도록;을 사용하자!!
#Datatype
우리가 자바스크립트 안에 작성하는 data들은 8개의 type으로 나뉜다.(최근에 추가된 bigInt까지!) 그리고 각각의 type에 따라 처리되는 방식이 정해진다.
-> number: 숫자
-> string: 문자열
-> boolean: true 또는 false 값만 갖는 것
-> nul: 의도적으로 값이 없는 것
-> undefined: 값이 아직 정해지지 않은 것
-> symbol: 고유식별자
-> bigInt: 엄청 큰 수
#Dynamic typing
이때 JS의 변수는 type이 계속해서 변할 수 있는데, 이처럼 변수의 타입이 계속해서 수정된다는 의미로 dynamically typed language라 불린다.
ex) 다음의 값을 콘솔창에서 확인해보면 string에서 number로, number에서 string으로 바뀌는 것을 알 수 있다.
let text = 'hello';
console.log(text.charAt(0)); //h
console.log(`value: ${text}, type: ${typeof text}`)
text = 1;
console.log(`value: ${text}, type: ${typeof text}`)
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`)
text = '8' / '2';
console.log(`value: ${text}, type: ${typeof text}`)
