Devlog
article thumbnail
Published 2022. 3. 15. 23:38
[JS] 2022 30분 요약 강좌(1) 강의/etc

위 글은 제주코딩베이스캠프의 30분 요약 강좌를 보고 작성한 정리글로 자세한 내용은 영상을 통해 확인하시길 권장합니다.

https://www.inflearn.com/course/%EC%A0%9C%EC%A3%BC%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-30%EB%B6%84%EC%9A%94%EC%95%BD/dashboard

 

[무료] 2022 30분 요약 강좌 시즌 1 : HTML, CSS, Linux, Bootstrap, Python, JS, jQuery&Ajax - 인프런 | 강의

이 강좌는 코딩을 처음 하시는 분들에게는 빠르게 훑을 수 있는 강의가 될 것입니다. 이미 코딩을 하시는 분들에게는 복습을 빠르게 할 수 있는 강의가 될 것입니다. 이 강의를 통해 자신감을 얻

www.inflearn.com

 

 

개발 환경: VSCode (강의 속 개발 환경과는 상이함)

VSCode 내에서 html 파일 웹 브라우저 실행 단축 키: option + b (open in browser 확장 프로그램 설치해야 함)

 

 

 

 

기본 출력 방법

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <h1 id = 'one'>hello world</h1>
        <script>
            document.getElementById('one').innerHTML = 'paullab'
        </script>
    </body>
</html>

document ➡️ 이 문서 전체에서

getElementById('one') ➡️ 내가 아이디(one)를 가져올건데 

innerHTML ➡️ HTML로 쓰겠음(넣겠음)

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <p id = 'one'>hello world</p>
        <script>
            document.getElementById('one').innerHTML = 'paul<strong>lab</strong>'
        </script>
    </body>
</html>

strong 효과 적용

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <p id = 'one'>hello world</p>
        <script>
            document.getElementById('one').innerHTML = 'paullab';
            document.write('hello world write');
        </script>
    </body>
</html>

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <p id = 'one'>hello world</p>
        <script>
            document.getElementById('one').innerHTML = 'paullab';
            document.write('hello world write');

            window.alert('hello world alert');
        </script>
    </body>
</html>

경고창 띄우기

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
    </head>
    <body>
        <p id = 'one'>hello world</p>
        <script>
            document.getElementById('one').innerHTML = 'paullab';
            document.write('hello world write');

            window.alert('hello world alert');
            console.log('hello world console');
        </script>
    </body>
</html>

개발자 도구 콘솔창에 출력

 

 

스크립트의 위치는 body 밑, 위, head에도 있을 수도 있으나 브라우저에 보여주는게 다를 수도 있음

➡️ 다르게 보여지는 이유: 순차적으로 읽기 때문

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <p id = 'one'>hello world</p>
        <script>
            document.getElementById('one').innerHTML = 'paullab';
            document.write('hello world write');

            window.alert('hello world alert');
            console.log('hello world console');
        </script>
    </body>
</html>

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Documment</title>
        <style>
            p{
                color: red;
            }
        </style>
    </head>
    <body>
        <script>
            document.getElementById('one').innerHTML = 'paullab';
            document.write('hello world write');

            window.alert('hello world alert');
            console.log('hello world console');
        </script>
        <p id = 'one'>hello world</p>
        
    </body>
</html>

id를 읽어와야 하는데 아직 id를 못 읽어온 상태

같은 코드지만 스크립트 위치에 따라 다른 결과가 나올 수 있다는 것을 확인

 

강의에서는 body 마지막에 script를 작성할 계획

 

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var a = 100
            document.write(a);
        </script>
    </body>
</html>

변수: 어떠한 것을 저장하는 변하는 수

 

 

변수에는 타입이 있음

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var a = 100;
            a=200;
            document.write(a+a);
        </script>
    </body>
</html>

연산 가능

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var a = '100';
            a='200';
            document.write(a+a);
        </script>
    </body>
</html>

문자열+문자열 = 문자열(이어 붙이기)

''(작은 따옴표)를 붙이면 문자열로 변해서 String이 됨

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var a = '100';
            a='200';
            document.write(a+a);
            document.write('<br>');
            document.write(typeof(a));
        </script>
    </body>
</html>

타입 반환

 

타입 종류

  • 숫자: Number
  • 문자열: String
  • True/False: Boolean
  • 여러가지 자료형을 저장하는 배열: Array
  • 함수를 담는 변수: Function

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var a = '100';
            a='200';
            var name = 'bori sister'
            document.write(a+a);
            document.write('<br>');
            document.write(typeof(a));
            document.write('<br>');
            document.write(name[0]);
        </script>
    </body>
</html>

[인덱스]: 인덱스(몇 번째)안에 있는 것을 호출하겠음

 

 

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z=7;
            document.write(x+y);
            document.write('<br>');
            document.write(x-y);
            document.write('<br>');
            document.write(y/x);
            document.write('<br>');
            document.write(y%x);
            document.write('<br>');
            document.write(x*y);
            document.write('<br>');
            document.write(x**y);
            document.write('<br>');
        </script>
    </body>
</html>

사칙연산

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z=7;
            document.write(x+y);
            document.write('<br>');
            document.write(x-y);
            document.write('<br>');
            document.write(y/x);
            document.write('<br>');
            document.write(y%x);
            document.write('<br>');
            document.write(x*y);
            document.write('<br>');
            document.write(x**y);
            document.write('<br>');

            x++;
            y--;
            document.write('x는: ', x, ' y는: ', y);
            document.write('<br>');
        </script>
    </body>
</html>

증감연산

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z=7;
            document.write(x+y);
            document.write('<br>');
            document.write(x-y);
            document.write('<br>');
            document.write(y/x);
            document.write('<br>');
            document.write(y%x);
            document.write('<br>');
            document.write(x*y);
            document.write('<br>');
            document.write(x**y);
            document.write('<br>');

            x++;
            y--;

            x*=3
            document.write('x는: ', x, ' y는: ', y);
            document.write('<br>');

            
        </script>
    </body>
</html>

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z=7;
            document.write(x>y);
            document.write('<br>');
            document.write(x>=y);
            document.write('<br>');
            document.write(x<y);
            document.write('<br>');
            document.write(x<=y);
            document.write('<br>');
            document.write(x==y);
            document.write('<br>');
            document.write(x!=y);
            document.write('<br>');
            document.write(x===y);
            document.write('<br>');
            
        </script>
    </body>
</html>

 

 

 

만약 문자열과 비교한다면? (x==z)

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z='3';
            document.write(x>y);
            document.write('<br>');
            document.write(x>=y);
            document.write('<br>');
            document.write(x<y);
            document.write('<br>');
            document.write(x<=y);
            document.write('<br>');
            document.write(x==y);
            document.write('<br>');
            document.write(x!=y);
            document.write('<br>');
            document.write(x===y);
            document.write('<br>');
            document.write(x==z);
            
        </script>
    </body>
</html>

문자열 3과 숫자 3을 비교했을 때 true (마지막)

 

 

 

여기서 x===z를 한다면?

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=3;
            y=5;
            z='3';
            document.write(x>y);
            document.write('<br>');
            document.write(x>=y);
            document.write('<br>');
            document.write(x<y);
            document.write('<br>');
            document.write(x<=y);
            document.write('<br>');
            document.write(x==y);
            document.write('<br>');
            document.write(x!=y);
            document.write('<br>');
            document.write(x===y);
            document.write('<br>');
            document.write(x==z);
            document.write('<br>');
            document.write(x===z);
            
        </script>
    </body>
</html>

false 출력

 

등호가 2개 (==)라면 타입을 안보기 때문에 값만 같으면 되며 등호가 3개(===)라면 타입까지 확인함

 

 

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var x,y,z;

            x=true;
            y=false;
            document.write(x&&y);
            document.write('<br>');
            document.write(x||y);
            document.write('<br>');
            document.write(!y);
            document.write('<br>');
            
        </script>
    </body>
</html>

true ➡️ 1

false ➡️ 0

 

  • &&(and): *
  • ||(or): +
  • !(not): 반대

 

 

 

함수의 기본 형태

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            function f(){
                
            }
            
        </script>
    </body>
</html>

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            function f(x,y){
                var z;
                z =  x+y;
                return z
            }
            document.write(f(3,6));
        </script>
    </body>
</html>

document.write(f(3,6)) ➡️ 3,6이 function f의 매개변수로 들어감

z(9)가 반환

 

document.write(f(3,6)) = document.write(9) 

 

 

이는 css를 조합하여 버튼을 눌렀을 때 크기가 변한다던지 아니면 스페이스를 눌렀을 때 미사일이 발사한다든지(...) 등 효과를 구현할 수 있음

 

 

 

 

자바스크립트 String의 내장함수 사용하기

 

.(점)을 찍어서 사용할 수 있는 것: 내장함수 (멤버 접근 함수)

String에서 사용할 수 있는 내장함수와 Number에서 사용할 수 있는 내장함수는 다름

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister'
            document.write(txt.length)
            document.write(f(3,6));
        </script>
    </body>
</html>

.length

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            document.write(txt.length);
            document.write('<br>');
            document.write(txt.indexOf('bori'));
            document.write('<br>');
        </script>
    </body>
</html>

.indexOf()

bori라는 단어가 0번째에 있음

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            document.write(txt.length);
            document.write('<br>');
            document.write(txt.indexOf('bori'));
            document.write('<br>');
            document.write(txt.slice(0,5));
            document.write('<br>');
        </script>
    </body>
</html>

.slice()

인덱스의 n~m사이를 잘라서 출력

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            document.write(txt.length);
            document.write('<br>');
            document.write(txt.indexOf('bori'));
            document.write('<br>');
            document.write(txt.slice(0,5));
            document.write('<br>');
            document.write(txt.replace('sister','cute'));
            document.write('<br>');
        </script>
    </body>
</html>

.replace()

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            document.write(txt.length);
            document.write('<br>');
            document.write(txt.indexOf('bori'));
            document.write('<br>');
            document.write(txt.slice(0,5));
            document.write('<br>');
            document.write(txt.replace('sister','cute'));
            document.write('<br>');
            document.write(txt.toUpperCase());
            document.write('<br>');
        </script>
    </body>
</html>

.toUpperCase()

.toUpperCase(): 대문자로 변경

.toLowerCase(): 소문자로 변경

 

 

 

 

 

자바스크립트 Number의 내장함수 사용하기

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            var num = 10;
            document.write(num.toFixed(6));
            document.write('<br>');
        </script>
    </body>
</html>

.toFixied()

n개의 자리수에 맞춰 출력

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            var num = 10;
            document.write(num.toFixed(6));
            document.write('<br>');
            document.write(num.toString());
            document.write('<br>');
        </script>
    </body>
</html>

.toString()

숫자를 문자열로 변환

 

 

 

 

Math는 수학적인 것을 지원

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            var num = 10;
            document.write(Math.PI);
            document.write('<br>');
        </script>
    </body>
</html>

Math.PI 

원주율 출력

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            var num = 10;
            document.write(Math.PI);
            document.write('<br>');
            document.write(Math.max(10,20,30));
            document.write('<br>');
        </script>
    </body>
</html>

Math.max()

최대값 구하기

 

 

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
            var txt = 'bori sister';
            var num = 10;
            document.write(Math.PI);
            document.write('<br>');
            document.write(Math.max(10,20,30));
            document.write('<br>');
            document.write(Math.random());
            document.write('<br>');
        </script>
    </body>
</html>

Math.random()

0에서 1 사이의 랜덤 값 출력

 

 

 

 

 

자바스크립트 날짜 다루기

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
           var date = new Date();
           document.write(date);
        </script>
    </body>
</html>

이미 정의된 날짜 출력

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
           var date = new Date();
           document.write(date);
           document.write('<br>');
           document.write(date.getMonth());
           document.write('<br>');
           document.write(date.getDay());
           document.write('<br>');
           document.write(date.getHours());
           document.write('<br>');
        </script>
    </body>
</html>

현재 월/요일/시 출력

.getMonth(): 현재 월 출력

.getDay(): 현재 요일 출력

 

월과 일은 0부터 시작하기 때문에 +1을 해서 생각해야함

따라서 2(+1) ➡️ 3월 , 0(일요일) ➡️ 화요일

.getHour(): 현재 시 출력

 

 

 

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name = "viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>Document</title>
    </head>
    <body>
        <script>
           var date = new Date();
           document.write(date);
           document.write('<br>');
           document.write(date.getDate());
        </script>
    </body>
</html>

일자 출력

 

 

 

'강의 > etc' 카테고리의 다른 글

[Spring/JPA] 환경설정  (0) 2022.04.19
[Spring/JPA] 강의소개 및 JPA 소개  (1) 2022.03.30
[SwiftUI fundamental Tutorial] Redux  (0) 2021.10.16
[SwiftUI fundamental Tutorial] LazyVGrid  (0) 2021.10.07
[SwiftUI fundamental Tutorial] Menu  (0) 2021.10.07
profile

Devlog

@덩이

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바