[DAY - 9] 외부파일, console.group, var, let, const

외부파일
console.group
var
let
const
use strict

1) 외부파일

js파일을 만들어 놓은 후 html에서 불러올 수 있다.

document.write("안녕하세요<br>");
document.write("<h2>연습중</h2>");
document.write("<h3>제목3</h3>")
document.write('<img src="url" alt="대체텍스트">');

위 내용을 main.js 파일로 저장한 뒤

    <style>
        h2 { font-size: 50px; color: red; }
        h3 { background: yellow; }
    </style>
</head>
<body>
    <script src="main.js"></script>
</body>

html에서 불러오면 body부분에 나타나게 된다. 또한 css style도 적용 가능하다.

2) console.group

console.group을 사용해 여러 개의 console.log를 그룹화할 수 있다.

console.log('안녕하세요');

console.group('메세지1');
    console.log('안녕하세요1');
    console.log('안녕하세요2');
    console.log('안녕하세요3');
console.groupEnd();

console.log();
// 자동 개행식으로 비어있는 공간이 들어감

console.group('메세지2');
    console.log('안녕히가세요1');
    console.log('안녕히가세요2');
    console.log('안녕히가세요3');
console.groupEnd();

안녕하세요
메세지1
  안녕하세요1
  안녕하세요2
  안녕하세요3

메세지2
  안녕히가세요1
  안녕히가세요2
  안녕히가세요3

안녕하세요3 밑 빈 공간은 console.log(); 때문에 생겼다.

3) var, let

변수를 선언하고 값을 할당한 뒤 출력할 수 있다.

var myNum1;
let myNum2;

myNum1,2 와 같이 원하는 변수 이름을 넣어 선언하고

var myNum1;
myNum1 = 100;
let myNum2;
myNum2 = 200;

값을 넣은 뒤

var myNum1;
myNum1 = 100;
console.log(myNum1);
let myNum2;
myNum2 = 200;
console.log(myNum2);

출력을 하면 아래와 같이 결과가 나오게 된다.

100
200

4) const

var : 재할당 O, 재선언 O

let : 재할당 O. 재선언 X

const : 재할당 X, 재선언 X

const는 상수 개념이라 재할당과 재선언이 안되며 선언과 동시에 할당을 해야 한다.

const myNum3 = 300

var myNum1;
myNum1 = 100;
console.log(myNum1);
let myNum2;
myNum2 = 200;
console.log(myNum2);
const myNum3 = 300;
console.log(myNum3);

100
200
300

5) 나열해서 할당하기

    <script>
        let title = '신상명세서';
        let name = '홍길동';
        let age = 20;
        let addr = '서울특별시';
        let tel = '010-1234-5678';

        document.write('<h2>'+title+'</h2>');
        document.write('<p>이름 : '+name+'</p>');
        document.write('<p>나이 : '+age+'</p>');
        document.write('<p>주소 : '+addr+'</p>');
        document.write('<p>전화 : '+tel+'</p>');
    </script>

이름, 나이 주소 등을 하나씩 할당할 수도 있지만 한 번에도 가능하다.

    <script>
        let title = '신상명세서' , name = '홍길동' , age = 20 , addr = '서울특별시' , tel = '010-1234-5678';

        document.write('<h2>'+title+'</h2>');
        document.write('<p>이름 : '+name+'</p>');
        document.write('<p>나이 : '+age+'</p>');
        document.write('<p>주소 : '+addr+'</p>');
        document.write('<p>전화 : '+tel+'</p>');
    </script>

1) 외부파일

2) console.group

3) var, let

4) const

5) 나열해서 할당하기

티스토리툴바