Elice SW engineer - TIL day 06

Circlewee·2022년 4월 11일

Elice SW 2 TIL

목록 보기

5/31

Javascript를 작성하는 법

script tag

<!DOCTYPE html>
<html lang="en">
  <head>
	...
  </head>
  <body>
    <h1>Script tag</h1>
    <script>
      document.write(1 + 1);
    </script>
  </body>
</html>

html문서 내부의 head나 body중 아무 곳에나 <script>를 작성하여 사용할 수 있다.

onclick등 event가 발생했을 때 처리하는 script

<!DOCTYPE html>
<html lang="en">
  <head>
	...
  </head>
  <body>
    <!-- 방법 2 -->
    <h1>Event</h1>
    <input type="button" value="hi"
      onclick="
      	alert('event!');
      "
    />
  </body>
</html>

onclick이벤트를 js로 작성하므로써 이벤트를 처리한다.

external JS

<!DOCTYPE html>
<html lang="en">
  <head>
	...
  </head>
  <body>
    <!-- 방법 3 -->
    <script src='example.js'></script>
  </body>
</html>

// example.js
const value = 1 + 2;
document.write(value);

외부 JS파일을 작성해서 html파일 내부에 명시해준다.

Variable

<html>
  <head>
    ...
  </head>
  <body>
    <h2>변수</h2>
    <script>
      let a = 1;
      let b = 2;
      console.log(a + b);
    </script>
    <h2>변수는 왜 쓰는가?</h2>
    <article>변수는 데이터에 이름을 붙인것</article>
    <script>
      let 가격 = 10000;
      let 부가가치세율 = 0.1;
      let 부가가치세 = 가격 * 부가가치세율;
      console.log(부가가치세);
    </script>
  </body>
</html>

변수는 데이터에 이름을 붙인 것
변수의 이름은 단순하게 적는 것보다 변수에 저장된 값이 의미하는 것을 자세히 명시해주는 것이 좋다.

Datatype

<html>
  <body>
    <h1>숫자</h1>
    <script>
      document.write(1); // number
      document.write(1.1); // float
      document.write([1, 2, 3]); // array
      document.write({name: 'circlewee', age: 26});	// object
    </script>
    <h1>문자열 String</h1>
    <script>
      document.write('Hello world');
      document.write('Hello \	// 만약 \을 입력하지 으면 오류
      world');
      console.log(`Hello
      world`); // 주로 개발시 사용, 줄바꿈도 그대로 적용
      document.write('asdkfjqipgiujdklsa;jdkjgklxz;cjvk'.length);
      document.write(1 + 1); // 산술 연산
      document.write('1' + '1'); // 결합 연산
    </script>
  </body>
</html>

JS에는 primitive type과 reference type이 존재한다.
1. primitive type: 원시 타입, 값이 변수에 바로 저장된다. 따라서 변수가 가진 메모리 공간을 사용한다.
number, String, boolean, undefined, null이 해당
2. reference type: 참조 타입, 값이 저장된 메모리의 주소를 가리킨다. 크기가 고정되어 있지 않고 참조시 저장된 주소값을 사용한다.

const a = [1, 2, 3];
const b = [1, 2, 3];
console.log(a === b); // false, a와 b는 다른 주소를 가리키기 때문

flow-control

<html>
  <head>
    ...
  </head>
  <body>
    <h1>Boolean</h1>
    <script>
      console.log(true);
      console.log(false);
    </script>
    <h1>Comparison Operator</h1>
    <script>
      console.log(1 === 1);	// true
      console.log(2 === 1); // false
      console.log(2 > 1); // true
      console.log(2 < 1); // false
    </script>
    <h1>Conditional state</h1>
    <script>
      let input_id = prompt('ID');
      let id = 'circlewee';
      if (input_id === id) {
        alert('hello!');
      } else {
        alert('wrong id');
      }
    </script>
  </body>
</html>

Boolean type & 조건문 예시

const a = 1;
const b = 0;
const c = -1;
const arr = [1, 2, 3];

if (a) {console.log(true);} else {console.log(false);}	// true
if (b) {console.log(true);} else {console.log(false);}	// false
if (c) {console.log(true);} else {console.log(false);}  // true
if (arr) {console.log(true);} else {console.log(false);}  // true

조건문의 조건에 특정 값이 들어간 변수를 사용해도 된다. 경우에 따라 이것을 truthy와 falsy라고 말한다.

JS에서의 객체 선택

<input
  type="button"
  value="night"
  onclick="
    if (this.value === 'night') {
      document.querySelector('body').style.backgroundColor = 'black'
      document.querySelector('body').style.color = 'white'
      this.value = 'day';
    } else if (this.value === 'day') {
      document.querySelector('body').style.backgroundColor = 'white'
      document.querySelector('body').style.color = 'black'
      this.value = 'night';
    }
  "
/>