[React] Front-End

[WEB] CSS기초 / JavaScript 리팩토링, 배열, 반복문, 함수,객체

ddgoori 2019. 7. 31. 18:41

자바스크립트 간략 소개

 

- 웹페이지도 동적으로 사용자와 상호작용하길 바랬다. => 자바스크립트가 태어남

- HTML을 이용해서 웹을 만든 후에 => 자바스크립트를 사용해서 상호작용할 수 있게 만듬

- HTML이 정보라는 멈춰 있는 이미지를 그려놓은 것이라면, 자바스크립트는 그 그림을 움직이게 하는 역할

 

=> 자바스크립트는 사용자와 상호작용하는 언어

=> 자바스크립트는 HTML을 제어하는 언어

 

 

 

목표

 

- 문법을 배워 나가는 것이 아니라, 기능을 구현하는 과정에서 문법을 익히는 것

 

<script>

</script>

자바 스크립트가 올 것이다.

 

=> 자바스크립트 이벤트 검색 방법

Google:

javascript keydown event attribute

 

 

 

자바스크립트 데이터 타입

 

TypeResult

Undefined "undefined"
Null "object" (아래 참고)
Boolean "boolean"
Number "number"
BigInt "bigint"
String "string"
Symbol (ECMAScript 2015에서 추가) "symbol"
호스트 객체 (JS 환경에서 제공) 구현체마다 다름
Function 객체 (ECMA-262 표현으로는 [[Call]]을 구현하는 객체) "function"
다른 모든 객체 "object"

 

 

div

 

- 어떠한 의미도 기능도 없음.

- 다만, CSS 또는 JS를 통해서 어떤 정보를 제어하고 싶을때 감싸주는 역할을 하는 무색 무취의 태그

- 화면 전체를 쓰기 때문에 줄바꿈이 됨

- span은 줄바꿈이 안됨

 

<!doctype html>
<html>
<head>
  <title> ex3 - JS </title>
  <meta charset="utf-8">
</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 style="color:powderblue;background-color:coral">HTML이란 무엇인가?</h2>
<span style="font-weight:bold;"> HTML </span> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications
</body>
</html>

 

그러나 1억개의 스타일을 수정해야 한다면?

 

<style>

</style> 이용!

<!doctype html>
<html>
<head>
  <title> ex3 - JS </title>
  <meta charset="utf-8">
  <style>
    .js{
      font-weight: bold;
      color:blue;
    }
  </style>
</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 style="color:powderblue;background-color:coral">HTML이란 무엇인가?</h2>
<span class="js"> HTML </span> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications
</body>
</html>

 

 

선택자 id 와 class

 

<!doctype html>
<html>
<head>
  <title> ex3 - JS </title>
  <meta charset="utf-8">
  <style>
    .js{
      font-weight: bold;
      color:blue;
    }
    #first{
      color:green;
    }
    span{
      color:orange;
    }
  </style>
</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 style="color:powderblue;background-color:coral">HTML이란 무엇인가?</h2>
<span id="first" class="js"> HTML </span> is the standard markup <span>language</span> for <strong>creating <u>web</u> pages</strong> and <span class="js">web applications</span>
</body>
</html>

 

 

왜 아래처럼 id 의 green의 영향을 받았을까?

 

- class: 무언가를 그룹핑 한다.

- id: 한가지 대상을 식별한다. : id는 1번 등장했다면 다시 쓰면 안됨. 

=> id는 식별하는 것! Class는 그룹핑 하는 것

=> id 정확하게 타겟팅 하는 것

 

=> class로 광범위하게 지정하고

=> id를 통해 디테일하게 지정이 가능하다!

 

- 아래처럼 디자인 하는 것이 훨씬 효율적임!

 

 

 

 

우선순위

 

id -> class -> span

 

 

검색시 자바스크립트로 CSS 조정하는 방법 찾아야함!

 

 

 

 

프로그램, 프로그래밍, 프로그래머

 

- 프로그램: 순서

- 프로그래밍: 순서를 만드는 행위

- 프로그래머: 순서를 만드는 사람

 

- 자바스크립트: 웹브라우저의 여러 기능이 순서대로 실행 되도록 만든 언어

- HTML은 순서가 없음 -> 프로그래밍 언어 X

 

 

 

리팩토링

- 중복을 줄여 나가는 것

 

전

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

후

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

 

 

 

함수 활용

 

- 중복된 코드 없앨 수 있음

- 같은 함수 코드인지 확인하기 쉬움 => 코드들이 같은 로직을 가지고 있다는 것을 확신 가능

- 코드의 길이 용량이 급격하게 줄어듬

=> 수납상자 같은 느낌

 

극단적으로 생각해야함

- 반복적인 코드가 "1억번 등장한다" 가정 == 재사용 코드가 1억번 쓰인다면?

 

- 함수는 입력과 출력으로 이루어져있음 (입력: 인자, 파라미터, 매개변수)

 


  <script>
    function nightDayHandler(self) {
    var target = document.querySelector('body');
    if(self.value === 'night') {
      target.style.backgroundColor='black'; target.style.color='yellow';
      self.value = 'day';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length) {
        alist[i].style.color = 'powderblue';
        i = i+1;
      }
    } else {
      target.style.backgroundColor='white'; target.style.color='black';
      self.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length) {
        alist[i].style.color = 'blue';
        i = i+1;
      }
  }
}
</script>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <input type="button" value="night" onclick="
      nightDayHandler(this);
    ">

 

 

 

객체

 

- 객체는 정리정돈의 수단이다.

- 정리정돈을 하기 위해서 함수를 쓰지만, 함수나 변수가 많아지면 또 복잡해진다.

- 연관된 함수와 변수를 잘 그룹핑하기 위해서 사용하는 것 => 객체

- 함수만으로 처리하는 것이 우아하지 않을 때 사용하는 것 => 객체

 

https://www.youtube.com/watch?v=6lJEbSYA4B4&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=29

to be continued....

저작자표시 비영리 변경금지

'[React] Front-End' 카테고리의 다른 글

[WEB] HTTP / HTTP Cache / CloudFront  (0) 2019.09.01
[WEB] Ajax / fetch API  (0) 2019.08.17
[WEB] UI vs API  (0) 2019.08.17
[WEB] JavaScript : 객체 / js파일쪼개기 / 라이브러리와 프레임워크  (0) 2019.08.03
[WEB] 서버와 클라이언트 / 웹서버와 HTTP / 웹서버와 웹브라우저의 통신  (0) 2019.07.30

'[React] Front-End'의 다른글

  • 현재글[WEB] CSS기초 / JavaScript 리팩토링, 배열, 반복문, 함수,객체

관련글

댓글

티스토리툴바