JavaScript - 백틱, function, DOM

String type

백틱 “``” : 큰따옴표나 작은 따옴표 모두 string을 의미함 하지만 함수 내부에서 사용할때 flexible한 것은 백틱

function sayHello(name, age) {
  console.log("Hello" + name + "you are" + age + "years old");
}
sayHello("Sujin", 26);

function sayHello(name, age) {
  console.log(`Hello ${name} you are ${age} years old`);
}
sayHello("Sujin", 26);

function

function sayHello(name, age) {
  return `Hello ${name} you are ${age} years old`;
}

const greetSujin = sayHello("Sujin", 26);
console.log(greetSujin);

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

How HTML work with JS

<!DOCTYPE html>
<html>
    <head>
        <title>Something</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
        <h1 id="title">This works!</h1>
        <script src="index.js"></script>
    </body>
</html>

const title = document.getElementById("title");
console.log(title);

DOM (Document Object Module)

DOM: Document Object Module (JS는 html에 있는 모든 요소를 가져와서 그 내용을 객체화 시킴)
HTML을 DOM의 형태로 변경가능

const title = document.getElementById("title");
title.innerHTML = "Hi! from JS";

Modifying the DOM with JS

  • Javascript로 HTML 을 manupulating할 수 있음
const title = document.getElementById("title");
title.innerHTML = "Hi! from JS";
title.style.color = "red";
console.dir(title);
document.title = "I won";
console.dif(document);
  • ctrl + shift + j : check Console
  • console.dir : javascript 객체 표현볍이 console에 나옴
const title = document.querySelector("#title");
  • querySelector: Returns the first element that is a descendant of node that matches selectors.
  • #id : # 뒤에는 id
  • .class : . 뒤에는 class
const title = document.querySelector("#title");
function handleResize() {
  console.log("I have been resized");
}
window.addEventListener("resize", handleResize); // events are called when window is resized
window.addEventListener("resize", handleResize()); // call imediately
  • handleResize : // events are called when window is resized
  • handleResize() : // call imediately
const title = document.querySelector("#title");
function handleResize(event) {
  console.log(event);
}
window.addEventListener("resize", handleResize);
  • 자바 스크립트에서는 이벤트를 다루는 함수를 만들때마다 자바스크립트는 자동적으로 event object 를 함수에 붙이게 됩니다.
const title = document.querySelector("#title");
function handleClick() {
  title.style.color = "blue";
}
window.addEventListener("click", handleClick);

JS Events

JS Event

You May Also Enjoy