[1일차] 자바스크립트1

이나겸·2022년 3월 23일

JavaScript 개발일지

1. 학습내용

구글 애널리틱스

URL : http://analytics.google.com

구글에서 서비스하는 웹 사이트 분석 도구
무료로 자신이 운영하는 웹 사이트에 javascript 코드로 적용 가능
누가, 언제, 어떻게 내 웹 사이트에 방문하는지 수준 높은 인사이트 제공
개인 블로그나 쇼핑몰, 회사 홈페이지에도 적용 가능

자바스크립트

1. F12(개발자도구) - Console 사용

Math.random()을 이용하여 랜덤한 숫자 추출하기 (1 ~ 100 사이의 수)

Math.random() * 100;

크롬에서 알림창으로 문자열 출력하기

alert('안녕');

크롬에서 [확인] / [취소] 선택할 수 있는 알림창에 문자열 출력하기
[확인]을 누르면 F12(개발자도구) - Console에서 true를 반환하고, [취소]를 누르면 false를 반환한다.

confirm('진짜?');

크롬에서 [확인] / [취소] 선택과 문자열을 입력할 수 있는 알림창
문자를 입력하고 확인을 누르면 입력한 문자가 반환되고, 입력하지 않고 취소하면 null이 반환된다.

prompt('아이디?');

크롬에서 알림창으로 1에서 100사이의 랜덤한 숫자를 출력하려면 어떻게 해야할까?

alert(Math.random()*100));

크롬에서 알림창을 여러개 만들려면 어떻게 해야할까?
alert를 연달아 계속 작성하면 작성한만큼 알림창이 켜진다.

alert(1); alert(2);

반복문을 사용해서 알림창을 여러개 호출할 수 없을까?
알림창에는 알림창을 호출한 만큼의 숫자가 입력되어 있도록 해본다.

for (let i=1; i<=10; i++)
	alert(i);

2. VSCode에서 실습

Console에서 실습했던 알림창 여러개 불러오기

<html>
    <body>
        <script>
            alert('1');
            alert('2');
            alert('3');
        </script>
    </body>
</html>

html 페이지에 출력시키기

<html>
    <body>
        <script>
            document.write('1+1 = ');
            document.write(1+1);
            document.write('<br>');
            const num = Math.random()*100;
            document.write(Math.floor(num));
            document.write('<br>');
            document.write(num.toFixed(1));
            document.write('<br>');
        </script>
        <input type = "button" value = "hello" onclick = "alert('안녕');">
    </body>
</html>

Number

<html>
    <body>
        <h1>Number</h1>
        <script>
            console.log(1);
            console.log(1.2);
            console.log('1 + 1 = ', 1+1);
            console.log('5 - 3 = ', 5-3);
            console.log('1 * 1 = ', 1*1);
            console.log('4 / 4 = ', 4/4);
            console.log('3 % 2 = ', 3%2);

            console.log('Math.random : ', Math.random());
            console.log('Math.Pi : ', Math.PI);
            console.log('Math.floor(1.9) : ', Math.floor(1.9)); // 내림
            console.log('Math.round(1.9) : ', Math.round(1.9)); // 반올림
            console.log('toFixed : ', (Math.random()*100).toFixed(0));
            //toFixed 소수점 자리 자르기
        </script>
    </body>
</html>

문자열(string)

<h1>문자열(String)</h1>
<script>
	console.log("hello world");
	console.log(`hello
	world`);
</script>

`(backtick)으로 입력하면 두 줄에 걸쳐서 console.log를 작성해도 오류가 안난다.
length로 문자열 길이 출력하기

console.log('hello world'.length);

replace로 문자열 치환하기

console.log('hell world'.replace('hell', 'hello'));

'문자열' + '문자열

console.log('hello ' + 'world');
console.log('1'+'1');

variable

var과 let 둘 다 변수 선언 시 사용할 수 있음.

<!DOCTYPE html>
<html>
    <body>
        <h1>Variable</h1>
        <script>
            var a = 1;
            a = 2;
            console.log(a);

            let b = 1;
            b = 2;
            console.log(b);
        </script>
    </body>
</html>

document.querySelect

대상을 타겟팅한다.
F12(개발자도구) - Console

document.querySelector('#container');

대상을 타겟팅해서 backgroundColor 변경하기

버튼을 만들어서 클릭하면 backgorundColor 변경하기

<input type = 'button' value = 'night mode' onclick = "document.querySelector('body').style.backgroundColor='black'">
<input type = 'button' value = 'day mode' onclick = "document.querySelector('body').style.backgroundColor='white'">