[새싹(SeSAC) 프론트엔드] day17 221108

 

함수

: 목적을 가지고 작성된 코드 '블록'

- 데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록 

 

 

 

function 함수이름 (arg1, arg2, ... , argn ) {    // 매개변수
    ....프로그램 코드....                                       // 실행문
    return                                                          // 결과를 리턴

 

(*) 실습 

[코드]

 

[결과]

 

 

**

function adder(a, b) {
  let sum;
  sum = a + b;
  console.log(`a : ${a}`);
  console.log(`b : ${b}`);
  console.log(sum);
  return sum;
}

let n = adder(24567);
document.write(`24567 + 98374는 ${n} <br>`);

 

 

 

 

 

 

 

(*) 구구단 만들기

[코드]

// prompt에 입력된 값은  '문자열'이라는 것을 잊지 말자! 


function gugudan(num) {
  for (let i = 1; i <= 9; i++) {
    let sum = 0;
    sum = num * i;
    document.write(`${num} X ${i} = ${sum} <br>`);
  }
  return;
}

let num = parseInt(prompt("원하는 구구단 숫자를 입력하세요"));

gugudan(num);

 

[결과]

 

 

화살표 함수 

: 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

let 함수이름 = (arg1, arg2, ..., argn) => {
    ...프로그램 코드 ...                                       // 실행문
    return                                                        // 결과를 리턴
}

 

(*)실습

[코드]

function adder1(a, b) {
  let sum = a + b;
  return sum;
}
console.log(`adder1 : ${adder1(1, 2)}`);

function adder2(a, b) {
  return a + b;
}

console.log(`adder2 : ${adder2(1, 2)}`);

let adder3 = (a, b) => {
  return a + b;
};

console.log(`adder3 : ${adder3(1, 2)}`);

[결과]

 

 

 

 

화살표 함수를 왜 쓸까 ?

 

1. 매개 변수가 없는 경우 

 - 중괄호 안에 코드가 한 줄인 경우 : 중괄호 생략이 가능 ; 소괄호는 생략 불가 

 

[코드]

let sum = () =>{
  console.log("안녕하세요");
}
sum();

let sum2 = () => console.log("반갑습니다");
sum2();

 

[결과]

 

2. 매개 변수가 1개인 경우 

- 소괄호 : 매개변수가 한 개인 경우

- 중괄호 : 코드가 한 줄인 경우 

➡️ 소괄호, 중괄호 생략 가능 

 

[코드]

let sum = (age) => {
  console.log(age);
};
sum(10);

let sum2 = age => console.log(age);
sum2(11);

[결과]

 

 

3. 매개 변수가 2개 이상인 경우

- 코드가 한줄인 경우 중괄호만 생략 가능 

let sum = (age, name ) => console.log(age, name);

sum(20,"율");

 

 

 

**화살표 함수는 실행코드가 한 줄인 경우 return을 생략할 수 있음

 

 

4. 코드가 여러 줄인 함수 

 - 중괄호로 코드를 묶어줘야 함

 - return 키워드를 이용하여 결과값을 반환해야 함 

 

 

 

(*)실습

[코드]

let sum = (num1, num2) => {
  let result = num1 + num2;
  return result;
}

console.log(sum(1,2));

 

[결과]

 

 

 

 

 

---

 

 

HTML DOM , Document

 

-BOM (Browser Object Model) 

 

HTML DOM 

- 그냥 간단하게 DOM 이라고 부름 

: 웹 페이지에 작성된 HTML태그마다 객체(DOM 객체) 생성 

 

* 목적

- HTML 태그가 출력된 모양이나 컨텐츠를 제어

- DOM 객체를 통해 각 태그의 CSS 스타일 시트 접근 및 변경

- HTML 태그에 의해 출력된 텍스트나 이미지 변경

 

* DOM 트리 

- HTML 태그의 포함 관계에 따라 DOM 객체의 트리(tree) 생성

- DOM 트리는 부모 자식 관계로 구성

 

* DOM 객체

- DOM 트리의 한 노드

- HTML 태그 당 하나의 DOM 객체를 생성

  : 각 노드는 DOM 노드 또는 DOM 엘리먼트 라고 부름

 

 

* DOM 트리의 특징 

- DOM 트리의 루트는 document 객체

- DOM 객체의 종류는 HTML 태그 종류만큼 있음 

  : HTML 태그 당 DOM 객체가 하나씩 생성 

- HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계로 구성

 

** 브라우저가 HTML태그를 화면에 그리는 과정 

- 브라우저가 DOM 트리의 틀(document 객체) 생성

- 브라우저가 HTML 태그를 읽고 DOM 트리에 DOM 객체 생성 

- 브라우저는 DOM 객체를 화면에 출력

- HTML 문서 로딩이 완료되면 DOM 트리 완성

- DOM 객체 변경시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신 

 

 

 

* DOM 객체의 요소

1. property

 : HTML 태그의 속성(attribute)반영

2. method 

 : DOM 객체의 멤버 함수, HTML 태그 제어 가능

3. collection

 : 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합

4. event listner 

 : HTML 태그에 작성된 이벤트 리스너 반영

 : 약 70여개의 이벤트 리스너를 가질 수 있음 

5. CSS 스타일 

: HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영

 - DOM 객체의 style property를 통해 HTML 태그의 모양을 제어 가능 

 

 

 

DOM 객체 사이의 관계
• DOM 객체들은 DOM 트리에서 부모, 자식, 형제 관계로 연결

• parentElement 프로퍼티

 -  부모객체

• children 프로퍼티
 - 직계 자식들의 컬렉션

• firstElementChild 프로퍼티

 - 첫번째직계자식

• lastElementChild 프로퍼티

 - 마지막직계자식

• sibling
- previousElementSibling 프로퍼티 : 왼쪽 sibling 객체

- nextElementSibling 프로퍼티 : 오른쪽 sibling 객체

 

[DOM 트리]

property	desciption
childElementCount	자식 DOM 객체 개수
firstElementChild	첫 번째 자식 객체
lastElementChild	마지막 자식 객체
nextElementSibling	다음 형제 객체(으론쪽)
parentElement	부모 객체
previousElementSiblig	이전 형제 객체(왼쪽)

 

(+)

https://developer.mozilla.org/en-US/docs/Web/API/Element/after

Element.after() - Web APIs | MDN

 

 

 

[크기와 위치]

property	description
offsetHeight	전체 높이
offsetWidth	전체 폭
offsetLeft	객체의 출력 위치, 수평
offsetTop	객체의 출력 위치, 수직

 

 

[주요 공통 method]

method	desctiption
addEventlistener()	새로운 이벤트 리스너 등록
appendChild()	마지막 자식 뒤에 새로운 자식 추가
click()	마우스를 클릭한 것과 동일한 작업 수행
focus()	키 입력을 받을 수 있도록 포커스 지정
setAttribute()	속성 추가
insertBefore()	지정된 자식 앞에 새 자식 추가
querySelector()	지정된 셀렉터와 일치하는 첫번째 자식 리턴
removeChild()	자식 삭제
replaceChild()	자식 대체
removeEventListener()	등록된 이벤트 리스너 제거

 

 

 

 

HTML 문서 전체를 대변하는 객체
property	method
HTML 문서의 전반적인 속성 내표	DOM 객체 검색 및 생성 HTML 문서 전반적 제어

 

function addId() {
  for (let i = 1; i <= 5; i++) {
    // let addNum = document.querySelector(".lottoBall div:nth-child(" + i + ")");
    let addNum2 = document.querySelector('.lottoBall').children;
    addNum.setAttribute("id", "no" + [i]);
  }
}

 

 

documnet 객체 접근 방법 

document : DOM객체가 아님

➡️ 연결된 시트가 없음 

documnet.style.color = "red; 
// 오류
// documnet에는 CSS3 스타일 시트가 연결되지 않았으므로 

 

 

(*) 실습

[코드]

let p = document.getElementById("firstP");
document.write(`
p.id = ${p.id}  <br>
p.tagNam = ${p.tagName} <br>
p.innerHTML = ${p.innerHTML} <br>
p.style.color = ${p.style.color} <br>
p.onclick = ${p.onclick} <br>
p.childElementCount = ${p.childElementCount} <br>
p.offsetWidth = ${p.offsetWidth}<br>
p.offsetHeight = ${p.offsetHeight} <br>
`);

 

[결과]

 

일반적으로 중복되는 코드는 따로 변수화 시켜서 빼줌 (재사용성을 높이기 위해) 

: 특정 태그를 사용할 일이 많다면 변수화를 시키는 것이 좋다. 

 

 

Javascript에서 하이픈- 이 있는 CSS property 사용시 

1. 하이픈- 삭제
2. 카멜스타일로 적용

 

 

(*) 실습

[코드]

p.style.color = "blue";
span.style.fontSize = "50px";

[결과]

 

 

**scipt태그는 자식으로만 들어갈 수 있음 

- head나 body태그 안에서만 제대로 동적함 

 

스타일 동적 변경

 

(*)실습

[코드]

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <h3>CSS스타일 동적 변경</h3>
    <hr />
    <p>이것은 <span id="mySpan">문장입니다</span></p>
    <input type="button" value="스타일 변경" onclick="change()" />

    <script src="js/dom2.js"></script>
  </body>
</html>

function change() {
  let span = document.querySelector("#mySpan");
  span.style.color = "green";
  span.style.fontSize = "30px";
  span.style.display = "block";
  span.style.width = "6em";
  span.style.border = "3px dotted magenta";
  span.style.margin = "20px";
}

 

[결과]

 

innerHTML 프로퍼티

(*)실습

[코드]

let p = document.getElementById("firstp");
let text = p.innerHTML;

console.log(text);

[결과]

 

 

innerHTML을 이용하여 HTML 컨텐츠 변경 

 

(*) 응용

[코드]

let p = document.querySelector("#firstP");

p.addEventListener("click", function () {
  //문자 그대로 HTML를 넣는 것. 
  p.innerHTML = "귀여운 강아지 <img src='../img/dog.jpeg'> 사진 보고 가세요 ";
});

 

[결과]

 

this

: 객체 자신을 가리키는 자바스크립트 키워드 

- DOM 객체에서 객체 자신을 가리키는 용도로 사용 

 

[코드]

function change(obj, size, color) {
  obj.style.color = color;
  obj.style.fontSize = size;
}

 

[결과]

 

 

DOM 트리에서 DOM 객체 찾기 

 

-특정값이 아닌 특정 항목(여러 개가 선택될 수 있는 것)을 검색할 때

해당 값을 담아둔 변수는 배열형태를 가짐 

 

1. 태그 이름으로 DOM 객체 찾기 

 

- document.getElementsByTagName() 

: 태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴

let divTags = documnet.getElementsByTagName("div");

let n = divTages.length

; 여러 개가 나올 수 있기 때문에 getElements 로 적어주기 

 

거의 안 씀.. 

 

(*)실습

[코드]

  <body>
    <div>hi</div>
    <div>hello</div>
    <div>nice to</div>
    <div>meet you</div>
    <script src="js/dom5.js"></script>
  </body>

let arr = document.getElementsByTagName("div");

console.log("arr의 길이는 : " + arr.length);

 

[결과]

 

 

 

2. class 속성으로 DOM 객체 찾기 

documnet.getElementsByClassName()

 

 

(*) 실습

[코드]

  <div class="hi"></div>
  <div class="hello"></div>
  <div class="nice"></div>

 

var hiClass = document.getElementsByClassName("hello");

console.log("class 값의 개수는 : " + hiClass.length);

 

[결과]

 

 

(*) 실습 2 

[코드]

let btn = document.querySelector("button");

btn.addEventListener("click", function () {
  let fruits = document.getElementsByTagName("span");
  // elements를 가져오면 배열 형태이기 때문에 그대로 써주지 못하고 for문 돌려야 함 
  for (let i = 0; i < fruits.length; i++) {
    fruits[i].style.color = "red";
    fruits[i].style.fontSize = "30px";
  }
});

 

[결과]

 

 

3-1. css 선택자로 DOM 객체 찾기 (querySelector())

 document.querySelector()

- 특정 id, class, name으로 제한하지 않고, css선택자를 사용하여 DOM 객체를 사용

- 선택자에 해당하는 첫 번째 요소만 리턴 : 동일한게 있다면 딱 하나만 찾음 

 

//id 값으로 요소를 찾음
document.querySelector(#id)

//class값으로 요소를 찾음
document.querySelector(.class)

 

(*) 실습

[코드]

<p class="no">Lorem Ipsum Dolor</p>
<p class="no">Lorem Ipsum Dolor</p>
<div>
  <p class="no">Lorem Ipsum Dolor</p>
  <p class="no">Lorem Ipsum Dolor</p>
</di>
<p class="no">Lorem Ipsum Dolor</p>

document.querySelector(".no").style.color = "red";
document.querySelector('div .no').style.color="blue";

 

[결과]

 

3-2. css 선택자로 DOM 객체 찾기 (querySelectorAll())

- 동일한 css 선택자를 가진 모든 DOM 객체들을 찾아 NodeList(=배열)로 리턴

- 콤마, 를 사용하여 여러 DOM 객체를 한번에 가져올 수 있음 

 

(*) 실습

[코드]

document.querySelector(".no").style.color = "red";
document.querySelector("section .no").style.color = "brown";

let pList = document.querySelectorAll("div .no");
pList[0].style.color = "red";
pList[1].style.color = "blue";
pList[2].style.color = "green";

[결과]

 

 

(*) 실습 - 반복문 이용하여 스타일 주기

[코드]

for(let i =0 ; i<pList.length ; i++){
  pList[i].style.fontSize = "30px"
}

[결과]

 

(*) 콤마를 이용하여 여러 개 (개수 제한 없음)

[코드]

    <p class="no">Lorem Ipsum Dolor</p>
    <p class="no">Lorem Ipsum Dolor</p>
    <div>
      <p class="no">Lorem Ipsum Dolor</p>
      <p class="no">Lorem Ipsum Dolor</p>
      <p class="no">Lorem Ipsum Dolor</p>
    </div>
    <section><p class="no">Lorem Ipsum Dolor</p></section>

    <p class="hi">Lorem Ipsum Dolor</p>
    <p id="hello">Lorem Ipsum Dolor</p>

let pArr = document.querySelectorAll('.hi, #hello');

for(let i = 0; i<pArr.length ; i++){
  pArr[i].style.fontSize = "20px"; 
  pArr[i].style.fontStyle = "italic"; 
}

 

[결과]

 

 

 

문서의 동적구성 

- DOM 객체 동적 생성

: 태그 이름의 DOM 객체 생성

documnet.createElement("태그이름") 

 

 

- DOM 트리에 삽입

 

// DOM 객체를 부모의 마지막 자식으로 삽입
부모.appendChild(DOM객체);

//DOM 객체를 부모의 자식 객체 중 기준 자식 앞에 삽입
부모.insertBefore(DOM객체, 기준자식) 

 

 

 

(*) 실습

[코드]

  <div id="hello">
    안녕하세요
  </div>

let newDIV = document.createElement("div");
let divHello = document.querySelector("#hello");
newDIV.innerHTML = "새로 생성된 DIV입니다.";

newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";

divHello.appendChild(newDIV);

 

[결과]

 

 

 

 

- DOM 객체 삭제

var remove = 부모.removeChild(삭제하고자_하는_자식객체); 

 

 

 

**a 에 자바스크립트 함수 삽입

 

a href = "javascript : createDIV()" 

: a 태그 클릭 시 함수 실행 

 

(*) 실습

[코드]

function createDIV() {
  let obj = document.getElementById("parent");
  let newDIV = document.createElement("div");
  newDIV.innerHTML = "새로 생성된 DIV입니다";
  newDIV.style.backgroundColor = "yellow";
  newDIV.setAttribute("id", "myDiv");
  newDIV.onclick = function () {
    let body = this.parentElement;
    body.removeChild(this);
  };
  obj.appendChild(newDIV);
}

[결과]

**노란색 영역 클릭시 한줄씩 삭제

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅(화)