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

Java Script 실습1

사전작업

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

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step04_js_dom
    • 파일 생성 : index.html
    • 파일 생성 : main.js

JavaScript 형식

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>
  • main.js 에 다음 내용 작성
1
console.log("new file!")
  • step04_js_dom 폴더에서 index.html을 오픈
  • 페이지가 출력된다.
  • html 페이지에서 우클릭 → 검사
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

Event

  • 이벤트를 감지하고 출력하는 코드를 작성해본다.
  • index.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 defer src="./main.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const boxEl = document.querySelector(".box");
console.log(boxEl);

boxEl.addEventListener('click', function() {
    console.log('Click!');
    boxEl.classList.add('active');

    /*
    const hasActive = boxEl.classList.contains('active');
    console.log(hasActive);
    */
   // let hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);

   // boxEl.classList.remove('active');
   // hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);
});
  • 1을 마우스로 클릭하면 다음과 같이 출력된다.
  • Click이라는 이벤트를 감지하고 표시한다.

Untitled

div class

  • 파일 생성

  • PROJECT 아래에 생성

    • 파일 생성 : main2.js

  • index.html 에 다음 내용 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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 defer src="./main2.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
});
  • 다음과 같이 시스템 로그가 출력되었다.

Untitled

JS 구조 파악

  • 다음 코드와 실행 결과로 구조를 파악해보자.
  • main2.js 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    // div 클래스면을 box order-1
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
    console.log(boxE1.textContent);
    boxE1.textContent = "안녕";
    console.log(boxE1.textContent);
});
  • index.html 의 1 2 3 4를 건드리지 않았음에도 다음과 같이 출력되었다.
  • 이를 통해 페이지에 최종적으로 영향을 미치는 것은 JS임을 알 수 있다.

Untitled

Java Script 실습1

https://kmk3593.github.io/2022/06/08/javaScript_practice_1/

Author

minkuen

Posted on

2022-06-08

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

×