블록체인 기술사업 교육 7일차

조건문

- if(조건문) {실행문} else if {실행문} else {실행문}

- if의 조건문에 bool 형태가 아닌 데이터가 들어오면 해당 데이터가 강제로 bool 형태로 변경하여 데이터의 값이 있으면 true, 없으면 false로 인식

- switch(변수){case 상수: 실행문 break; case 상수: 실행문 break; default: 실행문} 

- if는 앞선 조건이 만족되면 뒷 조건들은 무시하지만 switch는 break를 설정하지 않으면 뒷 조건들도 실행

 

기본 출력 메소드

- console.log()  = 웹 브라우저의 콘솔창에 출력

※ console.log()로 콘솔창에 데이터를 출력할 때 ``과 ${}을 이용하면 반복문, 조건문, 함수에서 이용되는 요소들을 간편하게 호출하여 텍스트 데이터에 입력할 수 있음 (파이썬의 f-string과 비슷)

ex) let name = 'Mike'

console.log(`이름은 : ${name}`) => 콘솔 창에 [이름은 : Mike] 출력

- alert() = 대화상자를 통해 출력

- prompt()  = 대화상자를 통해 출력값 입력받음

- document.getElementByID().innerHTML =  getElementByID()로 HTML 요소를 선택하여 해당 요소가 입력될 경우 출력될 텍스트 설정 (getElementByID()이외에 getElementsByTagName()도 사용가능)

- document.write()  = 웹 페이지 화면에 출력

 

반복문

- for() {초기식; 표현식; (증감문)}

- while(조건) {반복 실행문}

- do{반복 실행문} while(조건)

// 10px부터 35px까지 5px 단위로 출력 

for (var size = 10; size <= 35; size += 5) {
        document.write(
          "<span style='font-size:" + size + "px'>" + size + "px" + "</span>"
        );
      }

var size = 10;
while (size < 35) {
        document.write(
          "<span style='font-size:" + size + "px'>" + size + "px" + "</span>"
        );
        size += 5;
      }
      
var size = 10;
do {
        document.write(
          "<span style='font-size:" + size + "px'>" + size + "px" + "</span>"
        );
        size += 5;
      } while (size <= 35);

객체(Object)

- 키(key)와 값(value)으로 구성된 프로퍼티(Property)와 메서드(Method)의 정렬되지 않은 집합

- 프로퍼티(Property) = 객체의 고유한 속성

- 메서드(Method) = 함수

- 객체 선언 시 객체명 첫글자는 대문자로 입력하는 추세 

- JSON(JavaScript Object Notation) = Javascript에서 객체를 만들 때 사용하는 표현식

- this = 실행중인 코드가 속해있는 객체

※ 객체 내에서 키에 대한 값으로 함수를 정의할 때 화살표 함수를 사용하면 this가 적용이 안됨 (선언식을 이용할 것!)

ex) var person1 = {name: 'Kim', greeting: function() {alert('My name is' + this.name);}} => this.name = "Kim" (O)

      var person1 = {name: 'Kim', greeting: () => {alert('My name is' + this.name);}} => this.name = undefined (X)

 

객체 프로퍼티 접근

ex) const Person = {name: "Tom", age: 30}

프로퍼티 조회

- .을 활용 => Person.name => "Tom"

- []를 활용 => Person[name] => "Tom"

프로퍼티 추가

- 객체 내에서 중복되지 않는 키에 대한 값을 정의 

ex) Person.hobby = "soccer"  => Person = {name: "Tom", age: 30, hobby : "soccer"}

      Person[hobby] = "soccer"  => Person = {name: "Tom", age: 30, hobby : "soccer"}

프로퍼티 수정

- .과 []를 활용하여 기존 객체의 키에 대한 값을 새롭게 정의

ex) Person.name = "John" => Person = {name: "John", age: 30}

      Person[name] = "John" => Person = {name: "John", age: 30}

프로퍼티 삭제

- delete 연산자 이용

ex) delete Person.age

=> Person = {name: "Tom"}

 

생성자(Constructor)

- 생성자(constructor) = new 키워드와 함께 객체를 생성하고 초기화하는 함수

- 인스턴스(instance) = 생성자 함수를 통해 생성된 객체

- 생성자 선언 시 생성자명 첫글자는 대문자로 입력하는 추세

- 생성자 내에 메소드 생성 시에도 this를 사용하여 정의 

ex) function Person(name) {this.name = name;} => const person1 = new Person('Gary');

Person = 생성자, person1 = 인스턴스

 

DOM (Document Object Model, 문서 객체 모델)

- XML이나 HTML 문서의 태그들을 웹 브라우저의 메모리에 올려 JavaScript로 사용하기 위해 만들어진 웹 문서

- 종류로 Core DOM(모든 문서 타입), HTML DOM(HTML 타입), XML DOM(XML 타입)이 존재

- 웹 페이지는 일종의 문서(document) 개념 

- JavaScript로 HTML DOM을 이용하여 HTML 요소나 속성을 추가, 제거, 변경시킬 수 있음

- 모든 HTML 요소는 HTML DOM을 통해 접근 가능

 

document

- 웹 페이지 그 자체를 의미하는 객체이자 DOM 트리의 최상위 객체

- 특정 HTML 요소를 선택할 수 있는 여러 메소드들이 존재

- HTML 요선 선택 메소드의 결과값을 이용하여 특정 태그의 CSS 요소 추가 가능

ex) document.getElementById('A').style.color = 'gold'; => id가 A인 태그의 글자색 금색으로 설정

      document.getElementsByClassName('A')[1].style.textAlign = 'center';

      => 클래스명이 A인 태그중 인덱스 번호 1인 태그의 텍스트를 가운데 정렬 설정

 

HTML 요소 선택 메소드

- getElementsByTagName(태그명) = 해당 태그명을 가진 요소 모두 선택

- getElementsByClassName(클래스명) = 해당 클래스명을 가진 요소 모두 선택

- getElementsByName(속성값) = 해당 name 속성값을 가진 요소 모두 선택

- getElementById(아이디명) = 해당 아이디명을 가진 요소 선택 (elements가 아닌 element는 ID만)

- querySelector(선택자) = 해당 선택자로 선택되는 요소 중 맨 앞 순서 선택

- querySelectorAll(선택자) = 해당 선택자로 선택되는 요소 모두 선택

※ 선택자(Selector)로 id명, class명, tag명 입력 가능

 

HTML 태그값 추출

- innerHTML = 해당 HTML 내용 전체 추출

- innerText = 해당 HTML 요소 내부의 텍스트만 추출

- textContent = 해당 HTML 요소 내부의 텍스트만이 아닌 요소 내부의 또 다른 요소의 텍스트까지 모두 추출

 

ex) const aTag = document.getElementById('aTag');
  aTag.innerHTML = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 및  '<a href="H">링크</a>' 텍스트 출력 
  aTag.innerText = '<a href="H">링크</a>'; => 웹 페이지에 하이퍼링크 생성 X, '링크' 텍스트 출력

 

HTML 요소 생성/수정 메소드

- createElement() = 요소 생성

- appendChild() = 선택한 요소에 자식 요소 추가 

ex) const h3 document.createElement("h3") = <h3></h3> 생성     

      h3.innerHTML = 'B';     

      document.body.appendChild(h3) = <h3>B</h3>

 

- 요소명.remove() = 해당 요소 제거

- 요소명.replace(a, b) = 해당 요소에서 b를 a로 변경

 

window

- 웹 브라우저의 창을 나타내는 객체

 

객체 속성

- closed = 창이 닫혀 있는지 여부 나타내는 true/false 반환
- localStorage = 웹 브라우저에 key : value 쌍 저장 (만료 날짜 없는 데이터 저장)
- location = 현재 웹페이지의 정보를 가져오거나 수정하는데 사용

※ location.href = 지정한 주소로 이동
- name = 창이름 설정하거나 반환
- self = 현재 창 반환
- status = 창의 상태표시줄에있는 텍스트를 설정하거나 반환
- top = 최상위 브라우저 창을 반환

 

메서드

- alert() = 메시지와 확인 버튼이 있는 경고 상자 표시

- confirm() = 메시지와 확인 및 취소 버튼이 있는 대화상자 표시
- getComputedStyle() 요소에 적용된 현재 계산 된 CSS 스타일 가져오기

 

- setInterval() = 지정된 간격(밀리 초)으로 함수를 호출하거나 표현식을 평가
- setTimeout() = 지정된 밀리 초 후에 함수를 호출하거나 표현식을 평가
- clearInterval() = setInterval()로 설정된 타이머 지우기
- clearTimeout() = setTimeout()로 설정된 타이머 지우기

 

- open() = 새 브라우저 창 열기

- close() = 현재창 닫기

- stop() = 창 로드 정지

 

- moveBy() = 현재 위치를 기준으로 창을 이동
- moveTo() = 창을 지정된 위치로 이동