06. JavaScript

JinStory77·2023년 5월 15일
0

프런트엔드_공부

목록 보기
6/11

1. JavaScript

1) 데이터

자료(data), 1, 2, A, b, 한글, 영문소문자나 대문자로 존재한다.

2) 변수

a = 100; 정수형 데이터 100을 변수 a에 저장합니다.

3) 메모리

주소값 = pointer(C언어) = address value => RAM, ROM

4) 데이터형

정수형(4byte), 실수형(8byte), 문자(1character), 문자열(String)...

  • bit: 0 또는 1
  • btye: 1character = 한개의문자
  • word: 문자열 => JIN => '의미'있는 문자이거나 문자열
  • field: 6개의 항목, 국어, 영어, 수학, 총점, 평균, 석차 ...
  • record: 성적 처리(국어, 영어, 수학, 총점, 평균, 석차, n개의 레코드가 존재
  • file: 성적 처리 파일
  • 데이터베이스

5. 연산자

산술, 관계, 논리연산 순으로 실행 된다.

  • 산술: 가감승제산
  • 관계(비교): >, >=, < <=, ==, !=
  • 논리연산: and, or, not

6. 함수(function)

자주 반복되는 기능(동작, 행동)을 구현하는 것이다.

아래 두 코드는 같은 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>마우스 올려 보세요</h3>
	<hr>
	<img src="../images/apple.png" alt="이미지"
		onmouseover="this.src='../images/banana.png'"
		onmouseout="this.src='../images/apple.png'">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
	function over(obj) {
		obj.src = "../images/banana.png";
	}

	function out(obj) {
		obj.src = "../images/apple.png"
	}
</script>
<meta charset="UTF-8">
</head>
<body>
	<h3>마우스 올려 보세요</h3>
	<hr>
	<img src="../images/apple.png" alt="이미지" 
		onmouseover="over(this)"
		onmouseout="out(this)">
</body>
</html>

2. 자바스크립트 식별자

  • 자바스크립트 프로그램의 변수, 상수(리터럴), 함수의 이름

  • 식별자 만드는 규칙

    • 첫 번째 문자 : 알파벳(A-Z, a-z), 언더스코어(_), $ 문자만 사용 가능
    • 두 번째 이상 문자 : 알파벳, 언더스코어(_), 0-9, $ 사용 가능
    • 대소문자는 구분되어 다루어짐
      • myHome과 myhome은 다른 식별자임
    • 자바스크립트 예약어 사용 불가
      • false, for, if, null 등 자바스크립트 예약어 사용 불가

3. 자바스크립트 문장

  • 자바스크립트 프로그램의 기본 단위
  • 문장과 문장을 구분하기 위해 세미콜론(;) 사용

  • 주석문 (//, /* */)

4. 데이터 타입

  1. 숫자 타입 : 정수, 실수
  2. 논리 타입 : 참, 거짓
  3. 문자열 타입
  4. 객체 레퍼런트 타입 : 객체를 가리킴, C언어의 포인터와 유사
  5. null : 값이 없음을 표시하는 특수 키워드, Null과 NULL은 서로 다름
    ❗자바스크립트에는 문자 타입 없음. 기본이 문자열로 표현

5_1. 변수

1) 변수 선언 : 변수 이름을 정하고, 저장 공간 할당

(1) var 키워드로 선언하는 방법

(2) var 없이 선언

2) 자바스크립트에는 변수 타입 없음

  • 변수 타입 선언하지 않음

  • 변수에 저장되는 값에 대한 제약 없음

5_2. 지역변수와 전역변수

1) 지역변수

  • 함수 내에 var 키워드로 선언
  • 선언된 함수 내에서만 사용 가능

2) 전역변수

  • 함수 밖에 선언되거나 함수 내에 var 키워드 없이 선언된 변수
  • 프로그램 전역에서 사용 가능

- this

  • 지역변수와 전역변수의 이름이 같을때 전역변수에 접근하기 위해 this.전역변수

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <h3>지역변수와 전역변수</h3>
    <hr>
    <script>

        var x = 100; // 전역변수

        function f() {
            var x = 1; // 지역변수

            document.write("지역변수 x=" + x);
            document.write("<br>");
            document.write("전역변수 x=" + this.x); // this는 전역변수를 가르킴
        }

        f()
    </script>

</body>

</html>

6_1. 자바스크립트의 상수(literal)

데이터 값 그 자체

  • 상수의 종류

2진수

  • 2진법, 컴퓨터가 사용
  • 0 : false => 연산에 참여하지 않음, 1 : true => 연산에 참여

10진수

  • 사람이 사용

8진수

  • 2의3승 개념으로 3자리(3bit의 묶음)

16진수

  • 컴퓨터가 사람에게 표시해줄 때 사용
  • 2의4승 개념으로 4자리(4bit의 묶음)

예시)

  1. 10진수 156

  2. 2진수로 변환
    - 10011100
    128 |64 | 32 | 16 | 8 | 4 | 2 | 1
    1 | 0 | 0 | 1 | 1 | 1 | 0 | 0

  3. 8진수로 변환(3bit)
    - 234

  4. 16진수로 변환
    - 9c

지수부, 가수부

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>
<script>
    var n = 156;
    var m = 0234;
    var k = 0x9C;

    let exp = 1234E+04;
    let exp2 = 1234E-04;

    document.write("10진수는 = " + n + "<br>");
    document.write("8진수는 = " + m + "<br>");
    document.write("16진수는 = " + k + "<br>" + "<hr>");

    document.write("지수형 + " + exp + "<br>");
    document.write("지수형 + " + exp2 + "<br>");
</script>

<body>

</body>

</html>

6_2. ES6 이후 변수 선언 방식이 let과 const로 바뀜

1) let

  • 변수 재선언은 불가능하지만 재할당은 가능

2) const

  • 변수 재선언, 변수 재할당 모두 불가능

6_3. 문자열 상수

  • 이중 인용 부호("")와 단일 인용 부호('') 모두 사용
  • 문자열 내에 문자열

  • "문자를 그대로 사용하고자 하는 경우 \" 로 사용

7. 자바스크립트의 식과 연산

연산자 우선 순위표

1) 산술 연산

5가지 : +, -, *, /, %(나머지)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        var x = 32; // total은 113
        var total = x / 10; // div는 3.2
        var mod = x % 2; // x를 2로 나눈 나머지, 0

        document.write("x : " + x + "<br><br>");
        document.write("100 + x*2/4 - 3 = " + total + "<br>");
        document.write("x/10 = " + div + "<br>");
        document.write("x%2 = " + mod + "<br>");
    </script>

</body>

</html>

2) 증감 연산자

++, --

3) 대입 연산자

오른쪽 식의 결과를 왼쪽 변수에 대입

4) 비교 연산자

두 값을 비교하여 true나 false의 결과를 내는 연산

5) 논리 연산자

&&(AND), ||(OR), !(NOT)

6) 조건 연산자

condition ? expT : expF

  • condition이 true이면 전체 결과는 expT의 계산값
  • false이면 expF의 계산 값

8. 비트 연산

  • 비트들끼리의 비트 논리 연산
  • 비트 시프트 연산

1) 비트 논리 연산

2) 비트 시프트 연산

시프트 : 저장 공간에서 비트들의 오른쪽 / 왼쪽으로 이동

9. 문자열 연산

1) 문자열 연결

[순서에 유의해야함]

2) 문자열 비교

  • 비교 연산자(!=, ==, <, >, <=, >=)는 문자열 비교에 사용
  • 사전 순으로 비교 결과 리턴

🎀문자 꾸미기

var s = "This is a test.";
document.write("Big: " + s.big() + "<br>");
document.write("Small: " + s.small() + "<br>");
document.write("Bold: " + s.bold() + "<br>");
document.write("Italic: " + s.italics() + "<br>");
document.write("Fixed: " + s.fixed() + "<br>");
document.write("Strike: " + s.strike() + "<br>");
document.write("Fontcolor: " + s.fontcolor("green") + "<br>");
document.write("Fontsize: " + s.fontsize(6) + "<br>");
document.write("Subscript: " + s.sub() + "<br>");
document.write("Superscript: " + s.sup() + "<br>");
document.write("Link: " + s.link("http://www.google.com") + "<br>");

10. if, if-else

조건이 참이면 실행문을 실행하며 앞의 실행문이 거짓일 경우 참인 실행문이 나올때까지 진행

<html>
  <head></head>
  <body>
    <h3>과일 판매하기</h3>
    <hr />
    <script>
      var fruits = prompt("과일을 입력하세요.", "사과");
      var input = prompt("물건을 몇개 살 것인지 입력하세요.", 100);
      var count = parseInt(input);

      switch (fruits) {
        case "바나나":
          price = 200;
          price *= count;
          document.writeln(fruits + "는" + price + "입니다.");
          break;
        case "사과":
          price = 300;
          price *= count;
          document.writeln(fruits + "는" + price + "입니다.");
          break;
        case "체리":
          price = 300;
          price *= count;
          document.writeln(fruits + "는" + price + "입니다.");
          break;
        default:
          document.write("팔지 않습니다.");
          price = 0;
      }
    </script>
  </body>
</html>

11. switch

값에 따라 서로 다른 코드를 실행할 때 적합

1) case의 '값'

case의 값은 상수(리터럴)만 가능

case의 값으로 변수나 식은 사용 불가

2) break

switch문은 break를 만날때까지 아래로 코드는 계속 실행 

<html>
  <head> </head>
  <body>
    <script>
      var price = 0;
      var coffee = prompt("무슨 커피 드릴까요?", " "); 
      switch (coffee) {
        case "espresso":    // espresso나 에스프레소 의 경우 모두 실행
        case "에스프레소":
          price = 2000;
          break;
        case "카푸치노":
          price = 3000;
          break;
        case "카페라떼":
          price = 3500;
          break;
        default:
          document.write(coffee + "는 없습니다.");
      }
      if (price != 0) document.write(coffee + "는" + price + "원입니다.");
    </script>
  </body>
</html>

12. 반복문

1) for 문

<html>
  <head> </head>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      color: skyblue;
    }
  </style>
  <body>
    <h3>경고창 띄우기</h3>
    <hr />

    <script>
      var input = prompt("경고창을 몇개 띄울것인지 정하시오", 100);
      var count = parseInt(input);

      for (var i = 1; i <= count; i++) {
        document.write(i + "경고창<br>");
        alert(i + "번째 경고창");
      }
    </script>
  </body>
</html>

2) while 문

3) do-while 문

<html>
  <head> </head>
  <style></style>
  <body>
    <script>
      var n = prompt("0보다 큰 정수를 입력하세요", 0);
      n = parseInt(n);

      var i = 1;

      do {
        alert("ALRAM ");
        document.write("ALRAM ");
        i++;
      } while (i <= n);
    </script>
  </body>
</html>

4) break

가장 안쪽 반복문 하나만 벗어나도록 제어

5) continue

반복 코드 실행 중단, 다음 반복으로 점프

<html>
  <head></head>
  <style></style>
  <body align="center">
    <script>
      var sum = 0;

      for(i = 1; i <= 100; i++) {

        if(i % 3 ==0)
        continue; // 다음 반복으로 점프(i++ 코드로)
        document.write(i + " ");
        sum += i;
      }
      document.write("합은 " + sum);
    </script>
  </body>
</html>

13. 함수

  • 목적을 가지고 작성된 코드 블록
  • 데이터 전달받아 처리한 후 결과를 돌려주는 코드 블록

1) 반환값(return value)과 전달인자값(arguments)

1. 반환값 o | 전달인자값 o

      var su1 = 0, su2 = 0, addsum;

      function adder(su1, su2) {
        var sum = 0;
        sum = su1 + su2;
        return sum;
      }

      var n = prompt("0보다 큰 정수를 입력하세요", 0);
      su1 = parseInt(n); // 문자열 n을 숫자로 바꿈
      var m = prompt("0보다 큰 정수를 입력하세요", 0);
      su2 = parseInt(m); // 문자열 n을 숫자로 바꿈

      addsum = adder(su1, su2);
      document.write("합은 " + addsum);

2. 반환값 o | 전달인자값 x

      var su1 = 0, su2 = 0, addsum;

      function adder(su1, su2) {
        var sum = 0;
        sum = su1 + su2;
        return sum;
      }

3. 반환값 x | 전달인자값 o

      var su1 = 0, su2 = 0;

      function adder(su1, su2) {
        var sum = 0;
        sum = su1 + su2;

        document.write("합은 " + sum);
      }

      var n = prompt("0보다 큰 정수를 입력하세요", 0);
      su1 = parseInt(n); // 문자열 n을 숫자로 바꿈
      var m = prompt("0보다 큰 정수를 입력하세요", 0);
      su2 = parseInt(m); // 문자열 m을 숫자로 바꿈

      adder(su1, su2);

54. 반환값 x | 전달인자값 x

      var su1 = 0, su2 = 0, addsome = 0;

      function adder(su1, su2) {
        var n = prompt("0보다 큰 정수를 입력하세요", 0);
        su1 = parseInt(n); // 문자열 n을 숫자로 바꿈
        var m = prompt("0보다 큰 정수를 입력하세요", 0);
        su2 = parseInt(m); // 문자열 m을 숫자로 바꿈

        document.write("합은 " + (su1 + su2));
      }
      adder(su1, su2);

2) 함수의 구성

<html>
  <head></head>
  <style></style>
  <body>
    <script>
      var su1 = 0,
        su2 = 0,
        addsum;

      function adder(su1, su2) {
        var sum = 0;
        sum = su1 + su2;
        return sum;
      }

      var n = prompt("0보다 큰 정수를 입력하세요", 0);
      su1 = parseInt(n); // 문자열 n을 숫자로 바꿈
      var m = prompt("0보다 큰 정수를 입력하세요", 0);
      su2 = parseInt(m); // 문자열 n을 숫자로 바꿈

      addsum = adder(su1, su2);
      document.write("합은 " + addsum);
    </script>
  </body>
</html>

3) 자바스크립트의 전역 함수

대표적인 자바스크립트의 전역 함수
eval(),parseInt, isNaN()

별그리기

<html>
  <head>
    <script>
      function start(n) {
        var m = parseInt(n);
        if (isNaN(m)) {
          alert("잘못입력하셨습니다.");
          return;
        }

        for (var i = 1; i <= n; i++) {

          for (var j = 0; j < i; j++) {
            document.write("*");
          }
          document.write("<br>");
        }
      }
    </script>
  </head>
  <style></style>
  <body>
    <script>
      var n = prompt("별의 갯수를 입력하세요.", " ");
      start(n);
    </script>
  </body>
</html>

2초마다 표시하기

<html>
  <head></head>
  <style></style>
  <body align="center">
    <script type="text/javascript">
      var num = 2;

      var time = setInterval(function () {
        document.write("<h1>" + num + "초가 지났습니다." + "</h1>");
        num += 2;
      }, 2000);

      setTimeout(function () {
        clearInterval(time);
      }, 10500);
    </script>
  </body>
</html>
profile
JinStory77
Let's smile for future 🤩
이전 포스트

05. CSS3 고급

다음 포스트

07. 자바스크립트 객체와 배열

0개의 댓글