[TIL] 생활코딩 WEB2-JS (21.08.12)

KwangYong·2021년 8월 12일

WEB2-JS

객체

        coworkers.showAll = function() {
            
        }
        var showAll = function(){ 

        }
        function showAll() {

        }
  • 함수 생성하는 방식
    <H2>Property & Method</H2>
    <script>
        coworkers.showAll = function() {
            for(var key in this){
            document.write(key+' : '+this[key]+'<br>');
        }
    }
    coworkers.showAll();
    </script>
  • 객체의 변수로 함수를 지정할 수 있다.

  • 객체에 소속된 함수를 '메소드'

  • 객체에 소속된 변수를 '프로퍼티'

  • 객체 생성과 동시에 프로퍼티에 메소드를 정의한다.

var Links = {
    setColor: function (color){
  • 객체의 프로퍼티들을 구분하기위해 ","를 사용함.

파일로 쪼개서 정리정돈하기

js를 부분을 따로 파일로 만들어서 각 html에 적용시킨다. -> 중복성 제거, 재사용성 증가

<script src="color.js"> </script>

파일이 많아지면 그만큼 브라우저의 접속량이 늘어서 좋지 않다.
하지만 일단 한 번 접속한 파일은 컴퓨터에 브라우저가 미리 저장해놓는다. (cache)
다음 접속에선 네트워크를 통하지 않고 다운로드 받은 파일을 불러온다.
네트워크 트래픽도 사용자 입장에선 줄고, 서버 입장에선 비용도 절감할 수 있다.
그래서 실질적으로 파일로 쪼개서 저장하는 게, 코딩을 정리정돈하면서 작성할 수도 있고
웹페이지에 자신이 만든 무언가를 빠르게 로딩할 수 있다.

라이브러리와 프레임워크

라이브러리는 내 의지로 내가 필요한것을 가져올 수 있다. 프레임워크는 특정 틀이 정해져있어서 시키는 대로 해야한다.

라이브러리 中 jQuery
CDN (content delivery network): 자기들의 서버에 보관해놓고 우리는 그것을 script src를 통해서 가져갈 수 있는 방식 -> jQuery를 직접 다운로드하지않아도 jQuery를 쓸 수 있다.
구글 CDN 주소를 HEAD태그 안에 붙여넣었다.
그리고 js파일을 jQuery 문법으로 바꿨다.

$('a').css('color', color);
//모든 a태그를 다음의 css로 변경한다.
profile
바른 자세로 코딩합니다 👦🏻💻

0개의 댓글