JavaScript 내용정리

WEB/HTML+CSS+JS

JavaScript 내용정리 - 2

kite707 2021. 1. 2. 23:05

데이터 타입 - 문자열과 숫자

숫자(Number)

-연산 가능

+ : 더하기

- : 빼기

* : 곱하기

/ : 나누기

문자열(String)

-따옴표로 묶어줘야함

-str.length -> 글자수 리턴

-str.toUpperCase() -> 모두 대문자로 바꿔줌

-str.indexOf('찾을 문자') -> 찾고자 하는 문자가 몇번째 자리에 있는지 알려줌

예시

'Hello world'.indexOf('O') //대문자 O
// -1리턴 (값을 찾을 수 없기 때문)
'Hello world'.indexOf('o') //소문자 o
// 4리턴 (첫번째 자리를 0으로 해서 소문자o가 4번째 자리에 있기 때문)

아래 링크에서 더 많은 자료를 볼 수 있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

String 전역 객체는 문자열(문자의 나열)의 생성자입니다.문자열 리터럴은 다음과 같은 형식을 사용합니다. 'string text' "string text" "中文 español Deutsch English देवनागरी العربية português

developer.mozilla.org

변수 선언 방법

var 변수이름 = 값

웹 페이지 제어하기

강의를 시작하며 봤던 화면을 버튼을 누르면 다크모드/화이트모드로 변하도록 하는 웹 페이지를 직접 만들어보자. 시작 코드는 아래와 같다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WEB1 - JavaScript</title>
  </head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
      <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>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

처음에는 아래와 같이 아무 버튼이 없는 상태이다.

배운 것을 활용해 우선 버튼을 만들고 클릭을 했을 시 이벤트가 발생되도록 하자.

<!DOCTYPE html>
<html>
  <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="">
    <input type="button" value="day" onclick="">
      <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>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

그리고 제어할 태그를 선택하는 방법을 알아보기 위해 구글에 "javascript select tag by css selector"라고 입력한다.

그렇게 해서 찾은 링크

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector

Document.querySelector() - Web API | MDN

Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 참고: 탐색은 깊이우선depth-first 전위pre-order

developer.mozilla.org

또 element의 스타일을 바꾸기 위해 검색을 하자. 검색어는 "javascript element style" 이다.

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/style

element.style - Web API | MDN

HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 CSSStyleDeclaration 객체를 반환합니다 elt.s

developer.mozilla.org

이런 링크를 찾았다. 찾은 정보의 내용은 아래와 같다.

이제 버튼의 코드를 아래와 같이 바꾼다.

    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor='black';
    ">

그리고 이 버튼을 클릭하면

이렇게 검정색으로 바뀐다. 또 글자색을 바꿀 때는 .color하고 색을 입력한다. 그러면 아래와 같은 결과화면을 만들 수 있다.

<!DOCTYPE html>
<html>
  <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="">
      <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>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

위는 전체 코드이다. 이를 기반으로 day버튼도 화이트모드로 바뀌도록 해보자.

<!DOCTYPE html>
<html>
  <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>
        JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
      </p>
  </body>
</html>

위와 같이 같은 방식으로 입력하면 된다.

잘 작동하는것을 볼 수 있다.