본문 바로가기
LEARN/JAVASCRIPT

[JS] 웹과 JavaScript

by 아이엠제니 2022. 3. 15.

 

 

1. 수업소개

2. 수업의 목적

Javascript의 역할

자바스크립트의 가장 중요한 역할은 사용자와 상호작용할 수 있게 하는 것

 

 

 

3. HTML과 JS의 만남 : script 태그

JavaSciprt는 HTML 위에서 동작하는 언어

script 태그 안에는 Javascript 코드를 쓸 수 있음

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>JavaScript</h1>
    <script>
      document.write("hello world");
    </script>
    <h1>html</h1>
    hello world
  </body>
</html>

다른 게 없어 보이지만, 다르다.

 

  <body>
    <h1>JavaScript</h1>
    <script>
      document.write(1 + 1);
    </script>
    <h1>html</h1>
    1+1
  </body>

자바스크립트는 동적이다.

 

 

 

4. HTML과 JS의 만남 : 이벤트 (event)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="hi" onclick="alert('hi')" />
  </body>
</html>

hi 버튼을 클릭했을 때, 경고창이 뜬다.

 

  • onclick에는 자바스크립트 언어가 와야 한다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <input type="button" value="hi" onclick="alert('hi')" />
    <input type="text" onchange="alert('changed')" />
    <input type="text" onkeydown="alert('key down!')" />
  </body>
</html>

입력 후 빠져나왔을 때 / 키를 눌렀을 때

 

https://www.w3schools.com/js/js_events.asp

 

 

 

5. HTML과 JS의 만남 : 콘솔

크롬

오른쪽 마우스 버튼 클릭-검사 또는 ctrl+shift+I 단축키

 

 

 

6. 데이터 타입(문자열과 숫자)

  • 문자열 String
    • " " or ' '
    • 문자열 뒤에 .length 입력하면 문자 길이를 알 수 있음
    • str.toUpperCase() : str 안에 들어있는 모든 문자열의 문자들이 대문자로 바뀜
    • str.indexOf('ht')를 하면 str 안에 있는 hi라는 문자열을 찾아서 몇 번째에 있는지 알려줌
  • 숫자 Number
    • + 이항 연산자 or 산술 연산자

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

 

 

 

7. 변수와 대입연산자

x = 1;
y = 2;
x + y; // 3
  • 변수: 바뀔 수 있는 수
  • = 대입연산자: 왼쪽에 잇는 변수에 오른쪽에 있는 값을 대입한다

 

 

 

8. 웹브라우저 제어

Javascript를 이용해서 웹 브라우저를 제어할 수 있다.

 

 

 

9. CSS 기초 (style 속성)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <h2 style="background-color: coral; color: powderblue">JavaScript</h2>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi
      laudantium delectus blanditiis consequatur, dolores saepe provident,
      dignissimos id voluptates eaque esse natus officia quos iste reiciendis
      possimus, iure a ipsa. Lorem ipsum dolor, sit amet consectetur adipisicing
      elit. Commodi laudantium delectus blanditiis consequatur, dolores saepe
      provident, dignissimos id voluptates eaque esse natus officia quos iste
      reiciendis possimus, iure a ipsa. Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Commodi laudantium delectus blanditiis consequatur,
      dolores saepe provident, dignissimos id voluptates eaque esse natus
      officia quos iste reiciendis possimus, iure a ipsa.
    </p>
  </body>
</html>

JavaScript 부분 폰트 컬러 및 배경 컬러 변경

 

 

10. CSS기초 (style 태그)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
    <style>
      .js {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <h2 style="background-color: coral; color: powderblue">JavaScript</h2>
    <p>
      <span class="js">Lorem</span> ipsum dolor, sit amet consectetur
      adipisicing elit. Commodi laudantium delectus blanditiis consequatur,
      dolores saepe provident, dignissimos id voluptates eaque esse natus
      officia quos iste reiciendis possimus, iure a ipsa.
      <span class="js">Lorem</span> ipsum dolor, sit amet consectetur
      adipisicing elit. Commodi laudantium delectus blanditiis consequatur,
      dolores saepe provident, dignissimos id voluptates eaque esse natus
      officia quos iste reiciendis possimus, iure a ipsa.
      <span class="js">Lorem</span>
      ipsum dolor, sit amet consectetur adipisicing elit. Commodi laudantium
      delectus blanditiis consequatur, dolores saepe provident, dignissimos id
      voluptates eaque esse natus officia quos iste reiciendis possimus, iure a
      ipsa.
    </p>
  </body>
</html>

Lorem 단어 굵게

span 태그랑 class 이용해서.

 

 

 

 

11. CSS기초 (선택자)

class는 그룹핑

id는 식별

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
    <style>
      .js {
        font-weight: bold;
        color: red;
      }
      #first {
        color: green;
      }
      span {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <h2 style="background-color: coral; color: powderblue">JavaScript</h2>
    <p>
      <span id="first" class="js">Lorem</span> ipsum <span>dolor</span>, sit
      amet consectetur adipisicing elit. Commodi laudantium delectus blanditiis
      consequatur, dolores saepe provident, dignissimos id voluptates eaque esse
      natus officia quos iste reiciendis possimus, iure a ipsa.
      <span class="js">Lorem</span> ipsum <span>dolor</span>, sit amet
      consectetur adipisicing elit. Commodi laudantium delectus blanditiis
      consequatur, dolores saepe provident, dignissimos id voluptates eaque esse
      natus officia quos iste reiciendis possimus, iure a ipsa.
      <span class="js">Lorem</span>
      ipsum <span>dolor</span>, sit amet consectetur adipisicing elit. Commodi
      laudantium delectus blanditiis consequatur, dolores saepe provident,
      dignissimos id voluptates eaque esse natus officia quos iste reiciendis
      possimus, iure a ipsa.
    </p>
  </body>
</html>

id > class > tag

 

 

 

12. 제어할 태그 선택하기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <input
      type="button"
      value="night"
      onclick="
    document.querySelector('body').style.backgroundColor = 'black'; 
    document.querySelector('body').style.color = 'white'; "
    />

    <input
      type="button"
      value="day"
      onclick="
    document.querySelector('body').style.backgroundColor = 'white'; 
    document.querySelector('body').style.color = 'black'; "
    />
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
    <h2>JavaScript</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      accusantium quibusdam voluptatem consequuntur asperiores, dolores quam
      odio, illo necessitatibus quos et delectus aut. Blanditiis culpa ratione
      quibusdam, repellat ad iusto? Lorem ipsum dolor sit amet consectetur
      adipisicing elit. Exercitationem accusantium quibusdam voluptatem
      consequuntur asperiores, dolores quam odio, illo necessitatibus quos et
      delectus aut. Blanditiis culpa ratione quibusdam, repellat ad iusto?
    </p>
  </body>
</html>

 

 

마우스 버튼 올렸을 때, 배경 회색으로 바꾸기

    <input
      type="button"
      value="night"
      onmouseover="
  document.querySelector('body').style.backgroundColor = 'gray'; 
  document.querySelector('body').style.color = 'white'; "
    />

 

 

 

 

 

 

부스트코스 [자바스크립트의 시작] 강의 공부 기록

 

 

 

300x250

'LEARN > JAVASCRIPT' 카테고리의 다른 글

[JS] JavaScript 객체 기본  (0) 2022.03.20
[JS] JavaScript 활용  (0) 2022.03.19
[JS] JavaScript 객체 소개  (0) 2022.03.18
[JS] Javascript 함수  (0) 2022.03.17
[JS] Javascript 제어문  (0) 2022.03.16

관련글

티스토리툴바