Posted Updated  minkuen frontEnd / javascript3 minutes read (About 418 words)

Java Script 실습2

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step05_js
    • 파일 생성 : ch01_index.html

JavaScript 작성

  • ch01_index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <button type="button" onclick="document.getElementById"
        ('demo').innerHTML = Date()">
            버튼을 클릭하세요!
        </button>
        <p id="demo"></p>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch01_index.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_1_js.html

  • ch02_1_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script>
            document.getElementById('demo').innerHTML="자바스크립트";
        </script>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_1_js.html을 오픈
  • 페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

  • 파일 생성

  • step05_js 폴더 아래에 생성

    • 파일 생성 : ch02_2_js.html

  • 폴더, 파일 생성

  • step05_js 폴더 아래에 생성

    • 폴더 생성 : js
    • js 아래에 파일 생성 : myscript.js

  • ch02_2_js.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script src = "js/myscript.js"></script>
    </center>
</body>
</html>
  • myscript.js 에 다음 내용 작성
1
document.getElementById('demo').innerHTML="자바스크립트";
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.
  • html에 작성하지 않은 스크립트의 출력에 성공했다.

Untitled

버튼

  • ch02_2_js.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.getElementById('demo').innerHTML="자바스크립트";
    </script>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>
        <button type="button" onclick="myFunction()">
            버튼을 클릭하세요!
        </button>
    </center>
</body>
</html>
  • step05_js 폴더에서 ch02_2_js.html을 오픈
  • 페이지가 출력된다.

Untitled

Java Script 실습2

https://kmk3593.github.io/2022/06/09/javaScript_practice_2/

Author

minkuen

Posted on

2022-06-09

Updated on

2022-06-30

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

×