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

22639 단어 JavaScript개발일지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'">
  • 원래 배경색 : royalblue
  • night mode 클릭
  • day mode 클릭

2. 학습소감

간단한 자바스크립트 문법을 가지고 여러가지를 실습해 볼 수 있었다.
아직까지는 어려웠던 점이나 해결하지 못한 것은 없으나,
여태까지 배운 것들을 복합적으로 사용할 수 있도록 복습이 필요하다고 생각되었다.

Kubernetes 기반 EKS 환경 구성, 웹 서비스 구축
웹기초 - CSS

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage