바닐라 JS 2주 완성반 2일차+ 3일차 예습

#2.0

console.log는?

console.log는 내장함수(built-in function)이라 한다

내장함수란?

자바스크립트에서 자체적으로 제공하는 함수를 내장함수라고 한다. 이것은 이미 시스템에 정의되어 있기 때문에 사용자가 별도로 정의하지 않고 주어진 원칙에 따라 사용하며 되는 함수이다.

종류는

eval(), parseint(), parseFloat(), isFinite(), isNaN(), Number(), String(), escape(매개변수),
unescape(매개변수)가 있다.

함수의 정의

1. 함수의 이름
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수
3. 중괄호로 둘러쌓인 자바스크립트 실행문

함수 선언

function square(number){
    return number*number;
    }

함수 square는 number라는 하나의 매개변수를 갖는다. 이것은 인수(number)를 자체로 곱해서 반환하는 하나의 문장으로 되어있다

외부에 있는 데이터를 읽는 함수를 만드는법

function sayHello(potato){
  console.log("Hello",potato);
  }
  
sayHello("Nicolas");

sayHello안에 있는 "Nicolas"를 potato에 넣게 되면서 console.log의 potato자리에 Nicolas가 들어가게된다.

함수의 매개변수값이 2개 이상일 때

function sayHello(potato, tomato){
    console.log("Hello!",potato,tomato);
    }
    sayHello("Doyeon",만나서 반가워);

만약 함수의 매개변수의 값이 2개 이상일때는 그 수에 맞는 값을 넣어줘야한다

#2.1

""과 ``(백틱)의 차이

ES2015전에는 문자열을

console.log("Hello"+ name + "you are"+age);

이렇게 +로 변수와 String을 분리하고 연결해줬어야 됬는데

ES2015에서는 문자열을

function sayHello(name, age){
   return `Hello ${name} you are ${age} years old`
   }
const greet = sayHello("doYeon", 22);
console.log(greet);

이렇게 ``(백틱)안에 +를 사용하지 않고도 띄어쓰기가 가능해지고 변수도 지정한 순서대로 사용이 가능하다

하나의 예를 더 보자면

const calculator = {
  plus: function(){
  return a+b;
  }
  }
  
  const plus = calculator.plus(5,5);
  console.log(plus);

#2.2

자바스크립트로 HTML다루는 법

const title = document.getElementById("title")

id가 "title"라는 요소를 찾고 이것을 객체로 반환한다!
const title는 객체

이것을 DOM이라고 한다

DOM이란?

Document Object Model
HTML에 있는 요소들을 가져와서 객체로 바꿔준다.
(즉 javaScript로 HTML을 다룬다)

#2.3

위에있는

const title = document.getElementById("title")

로 할 수 있는 Event는 어떤게 있을까?

color 바꾸기

title.style.color = "red";

웹페이지 타이틀 바꾸기(이건 위의 title과 관련 없다)

document.title = "Hello World";

#2.4

이벤트란?

브라우저 환경에서 이벤트란 DOM 요소와 관련되어 발생하는 어떤 사건들을 의미합니다.

예를 들어 다음과 같은 상황들이 있을 수 있겠죠.

1. 버튼을 클릭 했을 때
2. 브라우저 창의 크기를 조절 했을 때
3. 웹페이지가 로드 됐을 때

function handleResize(){
  console.log("i have been resize")
  }
  window.addEventListener("resize", handleResize);

위의 코드는 window에 "resize"라는 이벤트를 줄때 함수 handleResize가 출력되게 하는 코드이다

윈도우에 이벤트를 넣으려변 위와같이 이벤트 다음에 인자(즉 함수 등)을 넣으면 된다

여기서 handleResize()로 적지 않은 이유는 그렇게 적을시 원하는 순서대로 출력되는 것이 아닌 바로 출력 되기 때문에 handleResize()가 아닌 handleResize로 적는다.

문자열을 클릭했을때 색이 바뀌는 법

const title = document.querySelector(".nav");

function handleClick(){
  title.style.color = "red";
  }
  
  title.addEventListener("click", handleClick);

document.querySelector로 nav라는 클래스를 가지고 있는 요소를 선택한 후 그 요소가 Click됬을 때 색상을 red로 바꾸게 해준다