[JavaScript] JavaScript_03

1. Console

console.log(console)
/*
console{
    ...
    log: ƒ log()
    ...
    }
*/

• console도 여러 가지 함수를 가지고 있는 하나의 object
• log() 는 console 객체에 들어있는 하나의 function

 

2. Function

: 특정한 작업을 수행하도록 작성된 별개의 코드 블럭

• 필요할 때마다 호출 가능

// function 생성
function sayHello(name, age){
    console.log('Hello!', name, "You are", age, "years old.");
}

sayHello("Lora", 20);

function upgradeSayHello(name, age){
    // `(백틱)을 사용하면 문자열 안에 변수 삽입 가능
    return `Hello ${name}! You are ${age} years old.`;
}

const greetings = upgradeSayHello("Lora", 20);
console.log(greetings);

const calculator = {
    plus: function(a, b){
        return a + b;
    },
    minus: function(a, b){
        return a - b;
    },
    multiply: function(a, b){
        return a * b;
    },
    divide: function(a, b){
        return a / b;
    },
    power: function(a, b){
        return a ** b;
    },
}
const result = calculator.power(4, 2);
console.log(result);

• argument(인자): 함수를 호출할때 전달되는 실제 값 → 값(value)
• parameter(매개변수): 함수의 정의 부분에 나열되어 있는 변수 → 변수(variable)
  • 인자로 전달된 값을 함수 내부에서 사용할 수 있게 해줌
• return: 값을 함수 호출자에게 반환

 

3. DOM function

<DOM(Document Object Model)>

: 모든 요소와 요소의 속성, 텍스트를 각각의 객체로 만들고 이들을 부자 관계를 표현할 수 있는 트리 구조로 구성한 것

• 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여

  메모리에 적재하는데 이를 DOM이라 한다.

• window 객체의 document 프로퍼티를 통해서 사용 가능

• window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미

• 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영됨

 

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

console.dir(title);
title.innerHTML = "Hi! From JS";
title.style.color = "purple";
document.title = "I own you know";

const firstChild = document.querySelector("#title");

<document>

• getElementById() : ID값을 기준으로 요소 선택
• querySelector() : CSS 선택자로 요소를 선택
  • id로 선택하고 싶은 경우 #, class로 선택하고 싶은 경우 . 을 사용, 태그로 선택하고 싶은 경우 태그 이름
  • 선택자에 해당하는 첫번째 요소만 선택
• querySelectorAll() : CSS 선택자로 요소를 선택
  • 선택되는 모든 요소를 담아 Array로 반환

 

<element>

• innerHTML : 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정
  • 해당 요소의 태그, 텍스트까지 전부 반환됨
• innerText : 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 가져오거나 설정
  • 스타일이 적용된 요소라면 텍스트에 스타일이 적용되어 반환됨

 

---

 

참고 자료

• https://academy.nomadcoders.co/p/javascript-basics-for-absolute-beginners-kr

바닐라 JS로 크롬 앱 만들기

• http://tcpschool.com/javascript/js_function_basic

코딩교육 티씨피스쿨

• https://www.codingfactory.net/10410

JavaScript / Object / document.querySelector() - 특정 CSS 선택자를 가진 첫 번째 요소를 선택하는 메서드

• https://goddaehee.tistory.com/237

[JavaScript (13)] Javascript Dom(Document Object Model, 문서 객체 모델)