언어&프레임워크/JavaScript

JavaScript기본1(html에서의 연결, console출력, 변수도입)

밍풀 2022. 9. 15. 15:18

자바스크립트의 동작

html css js 중에서

js나 css를 열면 브라우저에 제대로 안열림

html을 열어 거기에 링크된 js와 css를 여는 것임 즉, 브라우저가 html을 열고 html은 js와 css를 가져오는 것임

 

html에서 css와 js 연결하기

일반적으로 자바스크립트는 맨위에서 가져오지 않음 주로 끝에서 가져옴

css는 head에서 js는 body에서

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <link rel="stylesheet" href="style.css"/>
 
    </head>
    <body>
        <script src="app.js"></script>
 
    </body>
</html>
 cs

 

기본테이터타입

integer 정수 

floar 소수

String 문자열 ; 큰따옴표 " " 안에 넣어야 인식됨

 

콘솔에 출력하기

 

변수 도입하기 

1
2
3
4
5
6
7
8
9
console.log(5+2);
console.log(5*2);
console.log(5/2);
 
const a = 5;//바뀌지않는 값, 상수의 의미 const + 변수이름 a
const b = 2;
console.log(a+b);
console.log(a*b);
console.log(a/b);
 cs

변수이름(Variable) 정할 때 주로 쓰는 방식

in 자바스크립트; camelCase(낙타 등 모양)

변수이름은 공백이 불가하기 때문에 공백필요시 다음단어 첫문자 대문자로 씀

ex) const veryLongVariable = 5;

 

in 파이썬 ; snake_case(뱀모양) 

공백 필요시 언더바 _ 씀

ex) very_long_variable = 5;

 

콘솔에 문자열 변수 출력

 

자바스크립트에서 변수 만드는 방법은 두가지 있음

1. const

constant 상수의 의미, 바뀔 수 없단 뜻, 마음대로 바꾸면 에러 뜨며 알려줌

2. let

후에 값을 바꾸기 가능, 코드의 의도를 알 수 있음, 밑에서 값이 바뀔 수 있다는 것, 업데이트 가능한 변수라는 것

 

const 와 let의 차이

그러나 많은 사람들이 const를 사용하고 변수를 업데이트 해야 할 경우 let으로 바꿔준 뒤 사용함

즉 기본적으로 const를 사용하고 필요시에만 let을 사용

 

+ ) 과거 자바스크립트에는 var라는 변수선언 방식만 존재 했음, 변경이 가능

지금도 브라우저가 var인식, 하지만 쓰지 말것