본문 바로가기
Education

[제주코딩베이스캠프] 웹개발 30분 요약 - 7. 30분 요약시리즈 - JS 1부

all.silver__ 2020. 8. 22. 14:36
반응형

학습 리스트

  1. 환경 세팅 - Atom
  2. 변수 선언
  3. 산술 연산
  4. 논리 연산
  5. 비교 연산
  6. 함수
  7. 내장 함수
  8. 날짜
  9. 배열
패키지
emmet(자동완성 패키지), open-in-browser(코드를 html로 바로 열어주는 패키지)

 

 

1.  환경 세팅

Atom을 설치 및 실행한 후 두 패키지를 설치하였다.

코드를 작성한 후 ctrl+shift+Q를 누르면 브라우저로 바로 실행된다고 했는데, 나의 경우 되지 않았다. 왜인가 싶어 open-in-browsers의 설정에 들어가보니 브라우저 단축키가 ctrl+alt+o로 되어 있었다. 눌러보니 잘 실행된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{color: red;}
  </style>
</head>
<body>
  <p id="one">hello world</p>
  <script>
  //document: "one"이라는 id를 가져오겠다
  //.innerHTML: 거기에 HTML을 넣겠다
    document.getElementById('one').innerHTML = 'paul<strong>lab</strong>';
    document.write('hello world write');
    //경고창
    window.alert('hello world alert')
    // 개발자도구 > console
    console.log('hello world console')
  </script>
</body>
</html>

window.alert('hello world alert')
console.log('hello world conosle')

HTML에서 JavaScript 코드를 추가하는 위치
코드는 순차적으로 읽히기 때문에 body의 태그들 뒤에 둔다. 만약 <p>태그가 뒤에 두면 빨간색 글자의 "hello world"만 뜨게 된다.

 

2. 변수 선언

var 변수하나 = 100;
변수하나 = 200;
document.write(변수하나 + 변수하나);

연산도 가능. 하지만 '홑따옴표'를 붙여 문자열로 바꾸게 되면 

변수하나 = '200';

 

타입을 아는 방법

document.wirte(typeof(변수하나));

 

type

  • number: 숫자
  • string: 문자열
  • boolean: true/false
  • array: 여러가지 자료형을 저장하는 배열
  • function: 함수를 담는 변수

document.write(name[0]);

 

3. 산술 연산

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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 //x = x * 3
    document.write('x는 : ', x, '<br>', 'y는 : ',y);
  </script>
</body>
</html>

 

4. 비교 연산자

  • ==: 값만 같은지 확인
  • ===: 값+type이 같은지 확인
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var x, y, z;
    x = 3;
    y = 5;
    z = '3';
    document.write('1: ', x > y);  //false
    document.write('<br>');
    document.write('2: ', x >= y);  //false
    document.write('<br>');
    document.write('3: ', x < y);  //true
    document.write('<br>');
    document.write('4: ', x <= y);  //true
    document.write('<br>');
    document.write('5: ', x == z);  //true (값만 같으면 됨)
    document.write('<br>');
    document.write('6: ', x != y);  //true
    document.write('<br>');
    document.write('7: ', x === z);  //false (값과 type이 같아야 함)
    document.write('<br>');
  </script>
</body>
</html>

 

5. 논리 연산

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var x, y;
    x = true;
    y = false;
    document.write('1: ', x && y);  // and : * //false
    document.write('<br>');
    document.write('2: ', x || y);  // or : + //true
    document.write('<br>');
    document.write('3: ', y < x);  // not : 반대 //true
  </script>
</body>
</html>

 

6. 함수

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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>

 

7. 내장 함수

  • .을 찍어 사용할 수 있는 함수들 (ex) .length, .indexOf, ...
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    var txt = 'paullab CEO leehojun';
    var num = 10;
    document.write(txt.length);  // 20
    document.write('<br>');
    document.write(txt.indexOf('CEO')); //8: 0~7, C의 인덱스=8
    document.write('<br>');
    document.write(txt.slice(0, 7));  //paullab (0~7)
    document.write('<br>');
    document.write(txt.replace('CEO', 'CTR'));  //paullab CTR leehojun
    document.write('<br>');
    document.write(txt.toUpperCase());  //PAULLAB CEO LEEHOJUN
    document.write('<br>');
    document.write(txt.toLowerCase());  //paullab ceo leehojun
    document.write('<br>');
    document.write(num.toFixed(6));  //소숫점 6자리까지
    document.write('<br>');
    document.write(num.toString()+num.toString());  //숫자->문자열
    document.write('<br>');
    document.write(Math.PI);  //3.141592653589793   //MATH: 수학적인 부분 지원
    document.write('<br>');
    document.write(Math.max(10, 20, 30));  //30
    document.write('<br>');
    document.write(Math.random()*10);  //random: 0~1 중 난수
    document.write('<br>');

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

 

8. 날짜

<!DOCTYPE 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="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var date = new Date();
    //2020-08-22 (토) 17:03
    document.write(date);
    document.write('<br>');
    document.write(date.getMonth());  //7 (0부터 시작하므로 +1 해야 함)
    document.write('<br>');
    document.write(date.getDay());  //6 (요일. 0:일, 1:월, 2:화, ..., 6:토)
    document.write('<br>');
    document.write(date.getDate());  //22
    document.write('<br>');
    document.write(date.getHours());  //17
    document.write('<br>');
  </script>
</body>
</html>

 

9. 배열

여러 값을를 순서있게 저장하고 싶을 때 사용한다.

<!DOCTYPE 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="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>
    var l = [10, 20, 30, 40];
    document.write(l[2]);
    document.write('<br>');  //30
  </script>
</body>
</html>

 

 

반응형

'Education' 카테고리의 다른 글

[제주코딩베이스캠프] 웹개발 30분 요약 - 9. Python - f string 용법  (0) 2020.08.23
[제주코딩베이스캠프] 웹개발 30분 요약 - 8. 30분 요약시리즈 - JS 2부  (0) 2020.08.22
[부스트 코딩 뉴비 챌린지 2020] FINAL 미션 02 : N의 약수로 N을 구하는 프로그램  (0) 2020.08.21
[부스트 코딩 뉴비 챌린지 2020] week6_LIVE 강의  (0) 2020.08.21
[제주코딩베이스캠프] 웹개발 30분 요약 - 6. 30분 요약시리즈 - CSS  (0) 2020.08.19

'Education' Related Articles

티스토리툴바