[Node.JS] Javascript 기본 -3

14382 단어 node.jsnode.js

# jQuery ?!

전부터 Javascript 사용할때 간편하게 jQuery를 주로 사용하기도했고, React가 많이 활성화되면서 jQuery사용량이 줄었지만, 아직 사용하고 있어, jQuery에 대해 자세하게 짧게 정리해 볼까한다.

jQuery CDN 에서 해당하는 라이브러리 사용


[ 바닐라코딩 - javascript ]

  let num = 1;
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelector("#num").innerHTML = num;
  });
  document.querySelector("#plus").addEventListener("click", function () {
    num++;
    document.querySelector("#num").innerHTML = num;
  });

[ jQuery 변환 ]

    <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"
    ></script>

    <script>
      let num = 1;
      $(document).ready(function(){
      $('#num').html(num);

      $('#plus').click(function(){
        num++;
        $('#num').html(num);
      })
    })
    </script>

# jQuery 사용하는 이유?

jQuery 프로토타입 => fn 프로토타입을 사용하여, jQuery 라이브러리를 만들수 있다.
$ => var $ = function(){}

function $(selector){
	var click = function(callback){
    	callback();
    }
    return {
    click : click
    }
}

$('#abc').click(function(){
	console.log('클릭되었습니다.')
})

# 유용한 jQuery datepicker 라이브러리

jQuery 캘린더


# javascript - es6

es6 browser support

const = 고정변수
let = 재할당가능 변수, 블락{} 내부에서 사용

`` : 빽틱으로 `''+''+arr`+ 제거 
const arr = 'hi?'
console.log(`${arr} 좋은아침`)   // 'hi? 좋은아침'

# arrow function!

const = ( ) => { }

var function1 = function(a,b){
  return a+b;
}

const function1 = (a,b) => a+b
const [a,b,c] = [1,2,3]
console.log(b); // 2

# 스프레드 연산자 ...

const arr = [1,2];
const arr1 = [3,4,5];
const arr2 = [...arr, ...arr1];

console.log(arr2) // 결과 [1,2,3,4,5]

function abc(a, ...b){
  console.log(arguments[0]) // 'node.js'
  console.log(b[0]) // '챌린지'
}
abc('node.js','챌린지',5) 

arguments[ ] 결과적인 총 배열에서 원하는 인자를 가져올수있다.



20210224 - day 4

[ 10.jQuery ][ 11.ES6 ]
[ 01.node.js란 ] - 가독성을 위해 다음 블로깅에 내용포함
[ 챌린지 NODE강의 링크 ]   ->   Node.JS 강의

좋은 웹페이지 즐겨찾기