Posted Updated  minkuen frontEnd / javascript4 minutes read (About 541 words)

Java Script 실습01

Java Script란?

  • 1단계 : HTML 문서란 document 객체로 변환하여 로딩
  • 2단계 : document 객체 기반으로 화면에 보여짐
  • 중간에서 JAVA Script는 이 객체의 정보에 접근하여 관리가 가능

Untitled

JAVA Script 탄생배경

Untitled

데이터 - 값의 종류 및 변환

  • const = 상수. 변하지 않는다
  • 정수 = int
  • 실수 = double
  • 문자 = char
  • 문자열 = string

Untitled

Java Script 사용해보기

  • VSCord에서 다음 코드 작성
  • 를 이용한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("휴먼교육센터");
        console.log("휴먼교육센터");
        document.write("후먼교육센터")
    </script>
</head>
<body>
    
</body>
</html>
  • 해당 html 파일을 열어본다.
  • 작성한 코드가 반영된다. 다른 코드도 같은 방식으로 진행하자

Untitled

데이터 - 참조형 변수

Untitled

데이터 - 배열변수

Untitled

데이터 - 배열 변수 초기화

Untitled

데이터 - list 관리

Untitled

  • splice 까지 실습한 코드이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let nums = new Array();
        nums.push(3);
        nums.push(13);
        nums.push(25);
        console.log(nums);  // 배열의 형태로 3,13,25
        
        let n1 = nums.pop(); // 가장 위에 있는 25 제거
        console.log("nums : ", nums);
        console.log("n1 : ", n1);

        let num2 = new Array(2,3,"hello", 7);
        console.log(num2);      // 배열
        console.log(num2[2]);   // "hello"
        let num3 = new Array(2, 3, "hello", 7, new Array(2,3,4));
        console.log(num3[4]);   // [2, 3, 4]
        console.log(num3[4][1]);    // 3

        num2.splice(2);         // 3~4번째가 삭제
        console.log(num2);
        num2.splice(2,1);       // 3번째에서 1개만 삭제 
        console.log(num2);
        num2.splice(2,1, "HUMAN");// 3번째에서 1개 삭제 후 HUMAN 삽입
        num2.splice(2,0, "COMP");
        // 3번째에서 0개 삭제 후 COMP 삽입
        

    </script>
</head>
<body>
</body>
</html>
  • 해당 html의 console 창이다

Untitled

데이터 - object 객체

Untitled

  • 객체에 관해 실습해보았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
     var exam = {"kor":90, "eng":80, "math":70}
     console.log(exam);
     console.log(exam.kor + exam.math);
     // 자바 스크립트는 배열변수 내에 여러 타입을 담을 수 있다
     var ar = [3, 4, 5, 6, exam, [7,8,9]];

     console.log(ar[1]);     // 4
     console.log(ar[4]);     // {"kor":90, "eng":80, "math":70}
     console.log(ar[4][0]);  // undifined
     console.log(ar[4]["kor"]);  // 90
     console.log(ar[4].math);    // 70
     console.log(ar[5]);     // [7,8,9]
     console.log(ar[5][1]);  // 8
 </script>

  • 결과는 다음과 같다

Untitled

Untitled

Java Script 실습01

https://kmk3593.github.io/2022/06/16/javascript_practice_01/

Author

minkuen

Posted on

2022-06-16

Updated on

2022-07-01

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.
Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×