JavaScript

이정수·2024년 10월 1일

프로그래밍언어학습

목록 보기

1/1

JavaScript
。특정 HTML 태그를 선택 및 제어하여 동적인 효과를 부여함으로써 웹 브라우저와 상호작용을 가능하게하는 스크립트언어
▶ ECMAScript를 구현

。 JS는 Client-Side-Script로서 웹 브라우저의 JS 엔진에 의해 해석 및 구동

스크립트언어 ( Scripting Language )
。프로그램을 제어하는 스크립트 역할을 수행하는 언어
▶ 프로그램을 개발하는 프로그래밍 언어가 아닌 , 프로그램 내부 구성요소 중 하나로서 기능

。소스코드를 컴파일하지 않고도 실행이 가능

。기술의 발달로 근래에는 스크립트언어만으로 프로그래밍이 가능해짐

ES : ( ECMAScript ) :
。ECMA International의 ECMA-262 표준을 따르는 스크립트언어
▶ JavaScript는 해당 표준을 구현한 Script 언어

크롬브라우저-개발자도구를 통해 HTML문서에 정의된 JS코드 실행 시 발생하는 오류를 확인 가능
。또한 콘솔에 직접 JS코드를 입력하여 테스트가 가능

템플릿 리터럴 : ES6 버전 이후 console.log(`${변수}`); 으로 백틱(`)을 이용해 감싸면 변수를 문자열 내에 호출해서 사용이 가능.

// : 한줄 주석처리

/* */ : 여러줄 주석처리

HTML 문서에서 JavaScript 활용

인라인 : HTML태그의 onclick="JS코드" 속성에 JavaScript 코드 정의

<button>버튼</button>
。버튼을 클릭 시 alert() 함수 실행

내부 스크립트 : HTML문서의 <script> 태그 내부에 JavaScript 코드를 정의
 <script>
    alert("JavaScript is loading.")
 </script>
。해당 구문을 입력 시 JS코드의 alert()함수가 실행되면서 웹페이지 진입 시 표시됨

외부 스크립트 : JavaScript 코드를 별도파일에 정의 후 HTML 문서와 연결
。.js파일 생성 후 <script src="js파일경로">를 지정

。.js 파일
  alert("JavaScript is loading")
。html 문서
    <script src="/practice.js"></script>

변수

。호이스팅 : scope 범위에서 변수선언의 경우 코드가 어디에 위치하든 항상 scope 범위 최상단에서 선언된것처럼 적용됨.

。typeof() : 변수의 자료형을 알 수 있음.

。JS에서 변수 선언 시 변하는 값은 let , 변하지 않는 값은 const
▶ 모든 변수는 const로 생성 후 변경의 여지가 생길 경우 let으로 변경.

let :
。let으로 선언한 변수는 다시 let으로 재선언이 불가능
▶ 변수의 값만 수정이 가능하다.

const :
。상수로서, 변경이 불가능!
。상수명은 대문자로 선언.

var :
。한번 선언된 변수의 재선언이 가능.
▶ 현재는 사용하지 않는 변수선언 방식

。호이스팅이 가능.
▶ var는 변수를 선언하기 이전 구문에서 사용이 가능하지만 값은 되지 않음.
。ex)
console.log(name1);
var name1="이정수"
 // name1은 호이스팅에 의해 변수선언 이전에서 사용이 가능하지만 할당단계를 거치지 않았으므로 undefined 도출.
//////////////////////////////
var name1;
console.log(name1);
name1="이정수"
  // 이정수 도출!
▶ 호이스팅을 let , const에 적용 시 오류가 발생.

변수 주의사항

변수 명명법 (nomenclature) :

CamelCase :
。단어가 합쳐진 부분마다 맨 처음 글자를 대문자로 표기
=> 컴퓨터가 띄어쓰기를 인식하지 못해서 탄생한 표기법.
。 두 개 이상 단어가 모인 합성어에서 사용.

lowCamelCase :
。첫 문자는 소문자로 시작하고, 단어사이는 대문자로 구분

snake_case :
。단어가 합쳐진 부분마다 중간에 _를 붙이는 방법.

Boolean type 인 경우 :
。var isEarthFlat 으로 질문형식으로 생성.

변수명 주의사항 :
。문자, 숫자, $ , _만 사용 가능.
。첫 글자는 숫자가 될 수 없다.
。예약어(ex:name)는 사용이 불가능하다.
。상수( const )는 대문자로 선언
。변수명은 읽기 쉽고 이해가 수월하도록 선언

문자형 + 숫자형 => 문자형으로 변환.

let , const에 호이스팅적용 시 오류가 발생하는 이유?
。let , const자체는 호이스팅이 가능한 변수지만 TDZ 때문에 오류가 발생.
。Temporal Dead Zone :
코드를 예측가능하게하고, 잠재적인 버그를 제거하기 위해 사용하는 영역으로서 변수에 값을 할당하기 이전에는 사용이 불가능.
변수 생성과정 :
선언단계 => 초기화 단계 => 할당 단계

let :
。선언단계, 초기화단계, 할당단계가 각각 구분되어 진행.

const :
。선언단계, 초기화단계, 할당단계가 동시에 진행됨.
。값을 할당하지 않으면 오류가 발생하므로 값까지 할당해야한다.
  const age3; // 오류 발생
  const age3 = 27; // 동작
var :
선언단계와 초기화 단계를 동시에 진행된 후 할당단계를 가진다.
=> 할당 단계 전에 호출 시 undefined 도출.
번수 범위( Scope ) :
。모든 코드블록 내 로컬변수는 코드블록 내에서만 유효하며 코드블록 외부에서는 유효하지않음.
함수 스코프 : var
。 var 형식은 function 내부에서 선언 시 밖에서 사용이 불가능하지만, if문 내부에서 선언 시 밖에서도 사용이 가능.

블록 스코프 : let , const
。해당 형식은 코드블록 내부에서 선언 시 밖에서 사용이 불가능.
ex) 함수, for문, if문, while문, try/catch문
  const age=30;
if (age>19){
  var txt='성인';
}
console.log(txt); 
  // var형식은 if문 내에서 선언되었는데 밖에서 사용이 가능
const age=30;
if (age>19){
  let txt='성인';
}
console.log(txt); 
  // let과 const로 선언 시 txt를 참조 불가능!

명시적 형변환
。사용자의 의도를 가지고 형변환을 수행.

String() : 문자형으로 형변환

Number() : 숫자형으로 형변환

Boolean() : 불린형으로 형변환

대입연산자

+= , -= , *= , /= , %=

동등연산자
== : 동등연산자
。변수의 type과 관계없이 값만 비교.
=== : 일치연산자
。변수의 값과 type을 모두 비교.
연산자 실습
  <html lang="ko">
<head>
  <title>연산자예제</title>
  <link rel="stylesheet" href="./practice2_1.css">
</head>
<body>
  <h2>The += Operator</h2>
  <p id="demo"></p>
  <script>
    var x = parseInt(prompt("입력하세요"));
    x += 20;
    document.getElementById("demo").innerHTML = x;
  </script>
</body>
</html>
。prompt를 통해 5 입력 시, 25가 page상에서 출력.

alert("문구") :
。"문구"로 입력된 경고창이 표시되며 확인버튼을 누를 경우 닫힌다.
。확인 버튼만 존재.

prompt("문구") :
。입력을 받는 함수
=> 사용자에게 값을 입력받는 용도로 사용됨.
。prompt("제목","안내") : prompt는 인수를 2개 받을 수 있으며, 첫번째는 제목, 두번쨰는 안내 용도의 default값이 입력됨.
const a1 = prompt("title","guide")

confirm("문구") :
。확인을 받는 함수
=> True, False로 결과를 받음.

해당 구문들의 단점 :
。창이 떠 있는 동안에는 버튼을 누를 때 까지 script가 일시정지됨.
。위치, 모양등의 스타일링이 불가능
=> HTML, CSS로 제작한 Modal창을 사용해서 보완.

함수선언문
。함수는 한번에 한 작업에 집중하는게 좋다.
function 함수명(매개변수){내용}
function sayHello(name='이정수'){ // name에 값이 없으면 "이정수"가 할당.
let k = "반갑습니다." // 지역변수
alert('안녕하세요.' + name + k);
}
sayHello();
함수 네이밍 :
。 읽기 쉽고, 어떤 동작인지 알 수 있게 명명하는것이 좋음.
。ex) showError , getName , createUserData.. etc

함수선언문 :
。함수가 뒤에 있어도 사용이 가능.
  sayHello();
function sayHello(){
    console.log("Hello.");
};
함수표현식 :
。함수선언문과 기능적으로 동일하나 함수가 우선 선언된 이후 사용이 가능.
  let sayHello = function(){
    console.log("hello.");
};
  sayHello();
생성자 함수
。객체틀( 붕어빵틀 )을 설정하여 여러 객체( 붕어빵 )를 생성 시 유용하게 사용됨.
。생성자 함수의 함수명 첫글자는 대문자로 선언.
function User(name,age){
  this.name=name;
  this.age=age;
  this.sayName = function(){
    console.log(this.name);
  }
}
let user1 = new User("이정수",27);
user1.sayName();
。값으로 이정수가 도출!

객체 ( Object ) :
。JavaScript에서 중괄호 ( { } )로 감싸진 하나 이상의 key : value 쌍등의 변수를 포함하는 배열 형식.
▶ JSON과 유사
Object Literal : 여러가지 변수를 포함한 객체를 중괄호 { } 를 통해 표현하는 방식.
let user2 = {
  name : "이정수",
  age : 27,
  sayName : function(){
    console.log(name);
  },
}
user2.sayName()
。값으로 이정수가 도출!
Computed property :
。let a = "age";, [a] : 30일때 대괄호를 묶어서 선언하는 경우, a : 30으로 적용되는게 아닌, 변수 a의 할당된 값이 들어간 age : 30이 적용됨.
let a = "age";
const user = {
  name : "이정수",
  [a] : 30,
}
console.log(user.age);
。값으로 30이 도출.
객체메소드 :

Object.assign({ 초기값 }, 객체 ) : 객체 복제
。const user1 = user;처럼 user를 참조하는게 아닌, 객체를 복제하는 역할을 수행.
const user = {
  a:1,
}
const user2 = Object.assign(
  {b:function(){
  console.log("안녕하세요.")
}},user);
user2.b();
。초기값 b:function에 객체 user이 복제되면서 "안녕하세요"를 출력.
。key가 동일하면 override됨.

Object.keys(객체) : 객체의 키를 배열로 반환.

Object.values(객체) : 객체의 값을 배열로 반환

Object.entries(객체) : 객체를 키, 값을 배열로 반환

Object.fromEntries(배열) : 키,값 배열을 객체로 반환
const user1 = Object.fromEntries([["a" , 1] ,["b" , function(){
  console.log("안녕하세요.");
}]]);
user1.b();
。"안녕하세요" 출력.

심볼 : Symbol("문자열")
。객체의 Property key로 사용됨.
Property : 객체 내부의 속성을 의미.
Property key : property 값에 접근 시 사용하는 key
。 Symbol 함수 사용 시 매번 고유한 Symbol이 생성됨.
。동일한 값으로 심볼 생성 후 동등,일치연산자로 비교해도 전부 false가 도출.
const a = Symbol("id");
const b = Symbol("id");
console.log(a==b);
console.log(a===b);
// 일치,동등연산자가 모두 false를 지시.
심볼을 사용하는 이유?
。객체의 propery key를 고유하게 설정하여 property key의 충돌을 방지.
。특정 객체에 원본데이터를 수정하지 않고도 속성을 추가할 수 있다.

전역심볼 : Symbol.for("문자열")
。심볼은 key가 존재하지않는데, 여러 모듈이 특정 심볼을 참조하여 공유하기위해 전달받은 문자열 값을 key로 가지는 Symbol을 찾아 반환.
。탐색 실패 시, 해당 문자열 값을 키로 가지는 Symbol을 새로 생성하여 전역 심볼 레지스트리에 저장후 반환.

전역 심볼 레지스트리 :
。심볼들이 저장되는 전역공간.
。여러 모듈이 하나의 심볼을 공유하기 위한 용도로 존재.

property key (심볼형) :
。객체 생성 시 key를 심볼로 생성할 경우, Object.keys(객체)를 통해 key 조회 시 해당 심볼형 key의 출력을 건너뛴다.
const id1 = Symbol("id");
const user = {
  name1 : "이정수",
  [id1] : "MyId", // property key(심볼형)
};
console.log(Object.keys(user));
console.log(Object.getOwnPropertySymbols(user));
for(let i=0;i<2;i++){
  console.log(Reflect.ownKeys(user)[i])
}
숨겨진 Property Key를 지시하는 함수

Object.getOwnPropertySymbols(객체) :
。객체의 숨겨진 property key를 return.

Reflect.ownKeys(객체)[index] :
。Property key 관계없이 객체의 해당 index의 key를 return.

수학 관련 메소드
。 Math.PI : 파이
。 Math.ceil() : 올림
。 Math.floor() : 내림
。 Math.round() : 반올림
。 toFixed(자릿수) : 소수점 자릿수 설정
。 isNaN(변수) : 변수가 NaN 인지 판단.
。 parseInt(변수,진수설정값)
。 parseFloat(변수,진수설정값)
。 Math.random() : 0~1사이의 무작위 숫자를 생성.
。 Math.max() , Math.min() , // Math.abs()
。 Math.pow(n,m) : n의 m승값을 도출.
。 Math.sqrt(n) : n의 제곱근값을 도출.

문자열 관련 메소드

문자열.length : 문자열 길이

문자열.toUpperCase() : 모든 문자열을 대문자로

문자열.toLowerCase() : 모든 문자열을 소문자로

문자열.indexOf(인수) : 문자열에서 인수가 몇번째 index에 위치하는지 값 반환.

문자열.slice(n,m) :
。문자열에서 n(시작점)과 m(끝점)사이의 문자열을 반환.
。m이 공란이면 끝까지 , 음수이면 문자열 끝에서부터 count.

문자열.substring(n,m) : 문자열에서 n과 m 사이의 문자열을 반환 ( n과 m은 서로 반전되어도됨.)

문자열.substr(n,m) : 문자열 n에서부터 시작해서 m개의 문자열을 반환.

문자열.repeat(n) : 문자열을 n번 반복.

배열 : array
。복수의 data를 하나의 변수로 저장.
。GIS에서 배열 활용 시 만약 GIS Web에서 모든 feature( point, line, polygon )들을 포함하는 layer를 input시 해당 feautre들을 array에 저장.
。data의 type에 상관없이 모두 저장이 가능.
var arr1 = ["apple",120,true,null]

배열 메소드

배열.push(인수) :
배열 뒤에 인수 삽입

배열.pop() :
뒷 요소 삭제

배열.unshift(인수) :
배열 앞에 인수 삽입

배열.shift() :
앞 요소 삭제

배열.splice(n,m,x) :
n번째 요소부터 m개의 특정 요소를 삭제 후 x의 요소를 대신 넣어서 반환.

배열.slice(n,m) :
n부터 m까지 반환

배열.concat(배열1,배열2,....) :
배열들을 합쳐서 새 배열로 반환.

배열.indexOf(n,m) :
배열에서 m번째 요소에서부터 요소 n이 위치한 index를 반환

배열.indexOf(n) :
배열 끝에서부터 요소 n이 위치한 index 반환

배열.includes(요소) :
배열안에 요소가 있는지 확인 후 True / False 반환

배열.find(function) :
。해당 요소 존재 여부 판단 후 존재할 경우 첫번째 해당 요소를 반환.
  let arr = [1,2,3,4,5];
const result1 = arr.find((a)=>{
  return a%2 ==0;
})
console.log(result1)
。2를 반환.

배열.findindex(function) :
。해당 요소의 index 반환
。indexOf와 유사하지만, 복잡한 연산을 수행하기 위해 매개변수로 function을 받는다.
。조건을 만족하는 첫번째 요소의 index를 반환하며 요소가 없는 경우 undefined를 반환.
let arr = [1,2,3,4,5];
const result1 = arr.findIndex((a)=>{
  return a%2 ==0;
})
console.log(result1)
。1을 반환. => arr[1] = 2

배열.filter(function) :
함수 조건에 맞는 요소값들을 배열로 return
let arr = [1,2,3,4,5,6];
const result = arr.filter((item)=>{
  return item %2 ==0;
})
console.log(result); // [2,4,6] 출력.
배열.reverse() :
배열을 역순으로 재정렬.

배열.forEach(Callback함수) :
。배열의 각 요소에 대하여 순회하면서 콜백함수에 구현된 기능을 수행
。배열.map(람다식)과 유사한 기능을 제공.
▶ map과 달리 반환값은 존재하지 않는다.
let arr1 = [27,8,5,13];
let sum=0;
arr1.forEach((num)=>{
  sum += num;
})
console.log(sum);
배열.map(Callback함수) :
。배열요소를 람다식으로 전달하면서 순회하는 중간연산( Intermediate Operation )
。람다식의 매개변수를 배열의 요소로 받은 후 순회하면서 콜백함수에서 구현된 기능을 수행.
▶ 실무에서 자주사용.

。Callback함수의 반환값은 새로운 배열의 요소로 포함되어 반환됨.
const kv = {
  const todos = [
    { id : 1 , description : "Learn AWS" },
    { id : 2 , description : "Learn Cloud" },
    { id : 3 , description : "Learn DevOps"}
  ]
  func : ()=>{
    kv.todos.map((todo)=>{
      console.log(property.id);
    })
  }
}
kv.func()
배열.forEach(Callback함수) , 배열.map(Callback함수) 의 차이?
。forEach()와 map()은 둘다 배열의 요소에 대하여 매개변수에 구현된 Callback함수를 처리하는 Method.
▶ forEach()의 경우 반환값이 존재하지 않으므로, 배열요소에 대한 Console 출력, DOM 조작을 위해 사용.
▶ map()의 경우 배열의 각 요소를 처리하여 새 배열로 반환하므로 반환값을 활용 가능.

배열.join(구분자) :
배열을 구분자로 합쳐서 문자열로 제작.

배열.split(구분자) :
문자열을 구분자를 기준으로 구분하여 배열로 제작.

배열.sort(함수) :
。배열 오름차순 정렬.
。인수는 정렬로직을 담은 함수를 받는다.
。정렬 logic은 Lodash library에서 공부.
let arr1 = [27,8,5,13];
function fn(a,b){
  return a-b; 
  // 값이 양수일 경우, a가 크므로 b를 a의 앞으로 배정.
}
arr1.sort(fn);
console.log(arr1);
。return b-a 설정 시 역순 정렬.

배열.reduce(함수,초기값) :
。초기값을 설정하여 누적된 배열 또는 누적값을 구할때 주로 사용.
=> return은 누적계산값으로 설정.
=> 누적계산값 = 초기값에서 현재값이 누적된 값
。함수 :
(누적계산값 , 현재값) => {return 계산값};
let arr = [1,2,3,4,5,6,7,8];
// 배열.reduce(함수,초기값)
const result = arr.reduce((cumulv,curv)=>{ // (누적계산값,현재값)
  return cumulv+curv;
},100);
console.log(result);
배열 실습
let userList = [
  new User("Mike",30),
  new User("Tom",10),
  new User("Jane",27),
  new User("Sue",26),
  new User("Harry",42),
  new User("Steve",60),
];
// 실습 1. 객체를 활용해 30세 이상인 사람의 이름만 특정 배열로 추출.
let resultList = userList.reduce((cumulv,curv)=>{
  if(curv.age>=30){
    cumulv.unshift(curv.name); 
    // cumulv는 누적값으로서 초기값 []를 지칭.
  }
  return cumulv;
},[]);
console.log(resultList);
//실습 2. 30세 이상인 사람의 나이의 합
let sumAge = userList.reduce((cumulv,curv)=>{
  if(curv.age>=30){
    cumulv+=curv.age;
  }
  return cumulv;
  // cumulv는 누적값으로서 초기값 0을 지칭
},0)
console.log(sumAge);
// 함수선언문
function User(name,age){
  this.name = name;
  this.age = age;
};
결과 :

구조분해할당 ( Destructuring assignment ) :
。배열 또는 객체를 분해한 값을 변수에 담을 수 있게하는 표현식.

배열구조분해
。배열 => 변수
let pr1 = ['안','녕','하'];
let [x,y,z]=pr1;
console.log(x,y,z);
let str = "Mike-Tom-Jane";
[x,y,z]=str.split("-");
console.log(x,y,z);
[x=3,y=3,z=3]=[1,2]
console.log(x,y,z);
객체구조분해
。객체 => 변수
let user = {
  name:"이정수",
  age:30,
};
let {name,age,gender="남자"}=user;
console.log(name,age,gender);
결과 : 이정수 30 남자

arguments
。함수에 input된 모든 매개변수를 갖고 함수내에서만 사용가능한 Array 형태의 지역변수.
。arguments.length 또는 arguments[index]로 사용이 가능.
。 함수는 input되는 매개변수의 갯수제한이 없음.
function practice(num){
  console.log(arguments.length);
  console.log(arguments[0]);
};
practice(1,2,3);
결과 : 3 1

나머지 매개변수( Rest Parameter ) ...변수명 : function 함수명(...매개변수명){}
。정해지지 않은 갯수의 매개변수를 배열로 표현.
=> 인수를 몇개를 넣든 제약이 없고 매개변수명으로 배열로 반환됨.
。인수 중 맨 마지막에 위치.
function practice(...num){
  console.log(num.length);
  console.log(num[0]);
};
practice(1,2,3);
결과 : 3 1
실습 :

함수에 전달된 모든 수를 모두 더할 경우
function sum(...num){
  let sumNum = num.reduce((cumulv,curv)=>{
    cumulv+=curv;
    return cumulv;
  },0)
  return sumNum; 
};
console.log(sum(1,2,3,4,5,6,7,8,9));
결과 : 45

생성자 함수 적용 시
。변수에 나머지 매개변수로 복수 입력이 될 경우 해당 변수는 배열로 값이 입력됨.
const user1 = new User('Mike',30,'html','css');
console.log(user1);
function User(name,age,...skill){
  this.name=name;
  this.age=age;
  this.skill=skill;
};
。나머지 매개변수 skill은 배열로 return됨.

전개구문 (Spread syntax)

전개구문 : 배열

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [0,...arr1,...arr2,7,8,9];

전개구문 : 객체

let user1 = {
  name:"lee",
  age:27,
}
let user2 = {
  ...user1,
}
user2.name="kim";
console.log(user1.name,user2.name);

。 lee kim 도출.

전개구문 : forEach

let arr1=[1,2,3];
let arr2=[4,5,6];
arr2.reverse().forEach((num)=>{
  arr1.unshift(num)
})
console.log(arr1);

。[ 4,5,6,1,2,3 ] 도출.

실습

객체 입력 작업 시

let user = {name:'mike'};
let info = {age:30};
let fe = ["JS","React"];
let lang = ["Korean","English"];
user=Object.assign({},
  user,
  info,
  {skills : [],}
  );
fe.forEach((i)=>{
  user.skills.push(i);
});
lang.forEach((i)=>{
  user.skills.push(i);
});
console.log(user);

전개 구문 사용 시

let user = {name:'mike'};
let info = {age:30};
let fe = ["JS","React"];
let lang = ["Korean","English"];
user = {
  ...user,
  ...info,
  skills : [
    ...fe,
    ...lang
  ]
};
console.log(user);

。전개구문이 훨씬 더 간단하다!

클로저 ( Closure ) :
。function과 lexical evironment의 조합
。내부함수가 상위함수의 변수를 참조.
const add = makeAdder(3);
console.log(add(2));
function makeAdder(x){
  return function(y){
    // 상위함수 makeAdder의 변수 x에 접근.
    return x+y;
  }
}
// makeAdder Lexical 환경 : x=3
// 익명함수 Lexical 환경 : y=2
어휘적환경 : lexical evironment :
。실행 scope 범위 내 변수와 function을 property로 저장하는 객체.
。코드 block, function , script를 실행하기 앞서 생성.

setTimeout(함수, 시간, 함수의 인수) :
。설정된 시간이 지난 후 함수를 실행.
。시간 : 3000인 경우 3초를 의미.

clearTimeout(setTimeout개체명) :
。함수의 예정된 작업을 없애는 역할.
// setTimeout
function st(name){
  console.log(name);
}
const tid = setTimeout(st,3000,"이정수"); 
// 3초 후 이정수 출력
// clearTimeout
clearTimeout(tid);
// 이정수 출력을 cancel.
setInterval(함수, 시간, 함수의 인수) :
。설정 시간 간격으로 함수를 반복
。취소시에는 clearInterval() 활용.
// setInterval
let num=0;
const tid = setInterval((name)=>{
  console.log(`${name}님이 접속한지 ${num++}초가 지났습니다.`);
  if (num>5){
    clearInterval(tid);
  }
},1000,"이정수");

call, apply , bind :
。함수를 통해 객체를 this로 지정하여 활용 시 사용하는 메소드
。함수 호출 방식과는 관계없이 특정 객체에 this 지정이 가능.

함수.call(this로 사용할 객체, 함수매개변수1, 함수매개변수2..)
。모든 함수에서 call을 사용이 가능.
。this를 특정 값으로 지정이 가능.
// 함수.call(객체, 함수 매개변수1,함수 매개변수2)
const user1 = {
  name : "이정수",
  age : 27,
};
function update(name,age){
  this.name = name;
  this.age = age;
}
update.call(user1,"김정수",28);
console.log(user1);
。{ name: '김정수', age: 28 }

함수.apply(this로 사용할 객체, [힘수 매개변수])
。모든 함수에서 apply를 사용이 가능.
。call과 다른점은 매개변수를 배열로 전달 받음.
// 함수.apply(객체, [함수 매개변수 배열])
const user1 = {
  name : "이정수",
  age : 27,
};
function update(name,age){
  this.name = name;
  this.age = age;
}
update.apply(user1,["김정수",28]);
console.log(user1);
함수.bind(this로 사용할 객체)
。전달받은 객체를 항상 this로 받는 함수 변수가 생성됨.
// 함수.bind(객체)
const user1 = {
  name : "이정수",
  age : 27,
};
function update(name,age){
  this.name = name;
  this.age = age;
}
// 전달받은 객체를 항상 this로 지정하는 함수참조 변수 생성.
const userUpdate = update.bind(user1); 
userUpdate("김정수",28);
console.log(user1);

상속 :
。JS의 모든 객체는 최소 하나 이상의 다른 객체로부터 상속을 받는다.
。동일한 이름의 key를 상속 시 자식객체의 key의 값을 적용.

__proto__를 활용한 상속
자식객체.__proto__ = 부모객체
const parent = {
  wheels : 4,
  sound : ()=>{
    console.log("부릉부릉");
  },
  color : "blue",
};
const child = {
  color : "red",
}
// 객체 child는 객체 parent를 상속.
child.__proto__ = parent;
child.sound();
console.log(child.color);
。출력 : 부릉부릉 red

생성자 함수를 활용한 상속
생성자함수.prototype.key=value
。자식객체.contructor : 생성자함수로 생성한 객체는 constructor property가 존재하며, 이는 생성자함수를 의미.
。prototype에 key,value를 정의하는 것 이므로, 객체.hasOwnProperty('key')로 검사하면 전부 true로 도출.
//함수표현식
const car = function(color){
  this.color = color;
};
car.prototype.name = "k5";
car.prototype.drive = function(){console.log("부릉부릉");};
// 생성자함수에서 필요한 매개변수만 전달
const car1 = new car("red");
car1.drive();
for(i in car1){
  if(car1.hasOwnProperty(i)){
    console.log(`o ${car1[i]}`);
  }else{
    console.log(`o ${car1[i]}`); }
};
// instanceof
console.log(car1 instanceof car);
// 객체.constructor
console.log(car1.constructor === car);
prototype : __proto__
。객체 생성자 함수에 의해 생성된 객체들이 공유하는 속성 및 메소드를 저장하는 객체.
=> 상속되는 정보를 제공하는 객체

자식객체 instanceof 부모객체 :
。자식객체가 부모객체의 자식객체인지 확인하는 역할.

객체.hasOwnProperty('key')
。객체에 해당 키를 가지는 property가 존재하는지 확인하는 메소드
。객체 내에 hasOwnProperty라는 key를 가지는 함수 생성 시 해당 함수를 먼저 실행.
=> 해당 key를 가지는 함수가 없는 경우, __proto__( prototype )에서 hasOwnProperty()를 호출
// 객체.hasOwnProperty('key');
const user1 = {
  name : "이정수",
};
console.log(user1.hasOwnProperty('name'));
const user2 = {
  name : "이정수",
  hasOwnProperty: function(name1){
    console.log(name1);
  },
};
user2.hasOwnProperty('name')
。true , name 도출.
상속된 객체의 고유 property와 부모 객체로부터 상속받은 __proto__를 구분하는 역할로도 활용 가능.
const parent = {
  wheels : 4,
  sound : ()=>{
    console.log("부릉부릉");
  },
  color : "blue",
};
const child = {
  color : "red",
}
child.__proto__ = parent;
for(i in child){
  if (child.hasOwnProperty(i)){
    console.log(`o ${child[i]}`);
  }
  else{
    console.log(`x ${child[i]}`);
  }
}
。자식객체의 고유 property는 color만 존재하므로. 객체.hasOwnProperty('key')를 통해 true를 반환.

클래스 Class
。 class 내부에서 정의된 생성자 메소드(constructor(매개변수))로 객체를 생성하는 방식은 기존의 생성자 함수와 동일
=> 생성자 함수의 정의된 메소드는 객체 내부에 지정되지만 Class 내에서 정의된 각 메소드는 객체 생성 시 해당 객체의 prototype에 속함.
。생성자 함수로 객체 생성 시 for문을 이용하여 인덱싱하면 prototype에 존재하는 property를 도출하지만 class로 객체 생성 시 도출하지 않는다.
// 생성자함수로 객체 생성
const User1 = function (name,age){
  this.name = name;
  this.age = age;
  this.showName = function(){
    console.log(this.name);
  }
}
// Class로 객체 생성
class User2{
  constructor(name,age){
    this.name=name;
    this.age=age;
  }
  showName(){
    console.log(this.name);
  }
}
const mike = new User1('Mike',20);
const tom = new User2("Tom",19);
// mike는 객체 내부에 showName 메소드 존재
// tom은 객체 prototype에 showName 메소드 존재.
Class의 상속
。extends : class 자식클래스 extends 부모클래스 {}
class 상속 시 이용하는 keyword
。super : 부모 class의 객체를 지칭.
。super(부모생성자의 매개변수) :
자식생성자는 부모 class의 객체 생성자 함수를 반드시 호출!
。메소드 오버라이딩( Method Overriding ) :
상속받는 자식객체에 부모객체와 동일한 이름의 메소드 존재 시 부모객체의 메소드에 자식객체의 메소드가 overriding.
=> 부모객체의 메소드를 사용할 경우 super.메소드()로 사용.
class car {
  constructor(color){
    this.color=color;
    this.wheels = 4;
  }
  drive(){
    console.log("drive...");
  }
  stop(){
    console.log("STOP");
  }
}
class BWM extends car{
  constructor(color){
    // super() 로 부모 class의 constructor에 인자를 전달하여 부모 객체 생성 후 부모 객체를 상속.
    super(color);
    this.navigation=1;
  };
  stop(){
    // 메소드 오버라이딩 발생
    // super.stop()을 통해 부모의 메소드 호출.
    super.stop();
  };
}
// class의 method는 prototype에 저장되므로, prototype.stop()
BWM.prototype.stop();

Promise :
서버에서 데이터를 요청하거나 파일을 읽는 비동기 작업의 결과( 성공 or 실패 )를 지시하는 객체.
。콜백지옥을 방지하기위해서 사용.
callback hell : 깊이가 깊어지면서 callback을 사용하는것.

new Promise(함수)로 생성된 객체는 property로 state , result를 갖는다.
Promise의 매개변수로 받는 함수의 경우 resolve( 성공한 경우 ), reject( 실패한 경우 ) 변수를 매개변수로 갖는다.
Promise의 state , result의 상태 변화
new Promise((resolve,reject)=>{}) 일 때,
。성공한 경우 : resolve(문자열)를 통해 state => fulfilled , result => 문자열로 설정됨.
。실패한 경우 : reject(new Error("해당error객체.message에 설정될 문자열"))을 통해 Error 객체를 생성 후 반영하여 state => rejected , result => Error객체.message로 설정됨.

생성된 Promise 객체는 default로 state => pending(대기) , result => undefined 상태.

Promise의 매개변수 resolve( 성공한 경우 )에 값이 input된 경우, state => fulfilled , result => resolve설정값 상태가 된다.

Promise의 매개변수 reject ( 실패한 경우 )에 error가 발생한 경우, state => rejected , result => reject설정값 상태가 된다.
ex 1) resolve 인 경우
const pr = new Promise((resolve,reject)=>{ 
// resolve : 성공한 경우 , reject : 실패한 경우
setTimeout((name)=>{
  console.log(name)
  resolve("OK");
},3000,"이정수")
})
。해당 Promise 객체는 state : pending(대기) , result : undefined 상태에서 3초 후 state : fulfilled , result : "OK" 상태가 됨.
ex 2)
const pr = new Promise((resolve,reject)=>{
  setTimeout((message)=>{
    console.log(message);
    reject(new Error("error1234"));
  },3000,"에러 발생")
})
pr.catch(error=>{
  console.error(`promise에서 reject되어 ${error.message} 발생`)
})
。해당 Promise 객체는 3초 후 3초 후 state : rejected , result : "error1234" 상태가 됨.
。reject를 통해 생성된 Error 객체의 경우 catch를 통해 처리한다.
。Promise에서 reject()가 선언되어 Error 객체가 생성된 경우, catch 또는 then으로 처리한다.
Promise 관련
。.then() , .catch() , .finally() 내부에 선언된 콜백함수는 매개변수를 Promise에 따른 Result 또는 error객체로 받아올 수 있다.
▶ 성공한 경우, function(result)가 실행
▶ 실패한 경우, function(error)가 실행됨.
Callback Method( .then() , .catch() , .finally() )

Promise객체.then(콜백함수) :
。Promise에서 성공 시 내부구문에 정의된 콜백함수를 실행시키는 역할을 수행.
▶ 매개변수로 Promise 결과를 받는다. Promise객체.catch((result)=>{ console.log(result) })

。resolve 혹은 reject에 따른 결과가 도출될 경우 대응하는 역할을 수행한다.
。Promise에서 error가 발생한 경우 .catch(콜백함수)로 전달.
const pr = new Promise((resolve,reject)=>{
  setTimeout((name)=>{
    reject(new Error(name))
  },3000,"Error 발생")
})
pr.then(
  function(result){
    console.log(`${result}, 성공됨`);
  },
  function(error){
    console.log('실패했습니다.');
  }
)
。Promise의 reject()를 통해 Error 객체를 생성하게 되고, pr.then()의 function(error)을 통해 해당 Promise의 결과를 처리하게된다.
。Promise의 resolve()이 선언이 될 경우, pr.then()의 function(result)을 통해 해당 Promise 결과를 처리하게된다.

Promise객체.catch(콜백함수) :
。then과 기능은 동일함!
▶ 보통 then과 함께 사용하면서 , Promise에서 성공할 경우 then에 정의된 콜백함수를, 실패할 경우 catch에서 정의된 콜백함수를 실행하도록 분리하여 가독성이 좋도록 작성한다.
▶ 매개변수로 Error객체 를 받는다. Promise객체.catch((error)=>{ console.log(error) })

Promise객체.finally(콜백함수)
。결과에 관련없이 결과가 완료된 경우 마지막에 실행됨.
const pr = new Promise((resolve,reject)=>{
  setTimeout((name)=>{
    reject(new Error(name))
  },3000,"Error 발생")
})
pr.then(
  function(result){
    console.log(`${result}, 성공됨`);
  }
  ).catch(
    function(error){
      console.log("실패됨");
    },
  ).finally(
    function(){
      console.log("모든 작업 끝.")
    }
  )
callback 함수 :
。다른 함수의 매개변수로써 이용되는 함수
。어떤 이벤트를 통해 호출이 되는 함수
。함수의 매개변수에 함수를 정의하면서 밖에서 안으로 차례로 실행됨.
。해당 함수보다는 Promise를 사용하는것을 권장한다.
。callback hell : callback 함수를 사용하면서 깊이가 깊어지는것.
const function1 = function(){
  setTimeout(()=>{
    console.log("실행 시작")
    console.log("1번 실행 완료");
  },1000)
};
const function2 = function(){
  setTimeout(()=>{
    console.log("2번 실행 완료")
  },3000)
};
const function3 = function(){
  setTimeout(()=>{
    console.log("실행 마지막")
    console.log("3번 실행 완료")
  },4000)
};
function1(
  function2(
    function3(
    )
  )
)
// 차례대로 함수의 매개변수로 함수로 실행됨.
Promise로 대체한 경우.
。console.time("문자열") ~ console.timeEnd("문자열") : 시간을 재는 역할.
。프로미스 체이닝( Promise Chaining ) : Promise가 연결된 것
// Promise 를 사용하는 경우.
const f1 = ()=>{
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = (message)=>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("2번 주문 완료")
    },3000);
  });
};
const f3 = (message) =>{
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");  
    },2000);
  });
};
// promise가 연결된 것을 프로미스 체이닝(Promises chaining) 이라고 한다.
console.time('시작');
f1()
.then((res)=>f2(res))
.then((res)=>f3(res))
.then((res)=>console.log(res))
.catch(console.log)
.finally(()=>{
  console.timeEnd('시작'); // console.time() ~ console.timeEnd() : 시간을 재는 역할.
})
Promise.all([Promise 배열]) :
。Promise를 동시에 사용하는 경우로서 모든 메세지를 배열로 받는다.
。Promise에서 하나라도 reject()가 존재하는 경우, error를 도출.
Promise.all([f1(),f2(),f3()]).then(res => { 
// f1,f2,f3의 작업이 모두 완료되어야 then 작업이 실행됨!
  console.log(res);                         
  // 각 메세지가 가장 delay가 긴 3초후에 배열로 전달됨!
})
Promise.race([Promise 배열]) :
。동시에 Promise를 사용하는 경우 가장 빠른 한 메세지를 받는다.
Promise.race([f1(),f2(),f3()]).then(res => {
  console.log(res);                        
})
Error 객체 :
new Error("error객체.message 문자열")
。오류 발생 시 반환되는 개체

error property

code
。발생한 오류의 유형을 문자열로 표현

message
。발생한 오류의 유형을 사람이 읽을 수 있는 문자열로 표현

name
。오류의 이름

async / await :
。promise의 then보다 가독성있게 코드를 작성할 수 있다.
。then에서 catch, finally를 사용한다면, async, await은 try ~ catch문을 사용.

async : 항상 promise를 반환하는 함수.
。return 값이 Promise이므로, then을 사용이 가능.
async function getName(){
  return Promise.resolve("이정수");
}
getName().then((result)=>{
  console.log(result);
})
await : async 함수 내부에서 사용이 가능한 함수
。변수 = await Promise인 경우, promise가 resolve되었을 때 값이 변수에 저장됨.
。변수 await 값 인 경우, 그 값이 변수에 저장됨.
async function getName(name){
  return new Promise((resolve,reject)=>{
    setTimeout((name)=>{
      resolve(name);
    },1000,name)
  });
};
async function showName(){
  // Promise를 return하는 async인 getName함수를 통해 Promise의 resolve("값")의 값을 result에 전달.
  const result = await getName("이정수");
  console.log(result);
}
console.log("시작");
showName();
。Promise를 return하는 async인 getName함수를 통해 Promise의 resolve("값")의 값을 result에 전달.

for await( i of [promise배열] ){}
。Promise의 resolve("값")의 값이 변수에 담겨나온다.
。await을 사용하므로, async 함수 내에서 시행.
const pr1 = Promise.resolve("성공1");
const pr2 = Promise.resolve("성공2");
const func = async()=>{
  for await(i of [pr1,pr2]){
    console.log(i);
  }
};
func();
Promise.all([Promise 배열]),try~catch문 활용한 예제
const f1 = async function(){
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("1번 주문 완료");
    },1000);
  });
};
const f2 = async function(message){
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("2번 주문 완료")
    },3000);
  });
};
const f3 = async function(message){
  console.log(message);
  return new Promise((res,rej)=>{
    setTimeout(()=>{
      res("3번 주문 완료");  
    },2000);
  });
};
async function order(){
  try{
    const result = await Promise.all([f1(),f2(),f3()]);
    console.log(result);
  }catch(error){
    console.log(error.message);
  }
  console.log("끝");
}
order();

Generator :
함수 실행을 임의로 중간에 멈췄다가 다시 재개 할 수 있는 기능을 지닌 함수
=> 다른 작업을 우선 수행한 후 다시 돌아와서 NEXT() 할 경우, 진행이 멈춘 부분에서부터 이어서 실행.
。 function* : 함수에 generator을 선언.
。 yield : generator 내부에서 함수의 실행을 중단하는 중단점 역할을 수행.
。 generator객체.next() : 중단점에서 generator에서 가까운 yield문 까지 실행한 후, 해당 yield의 value와 함수코드가 끝났는지의 여부를 return.
{ value: 1, done: false }
const num1 = yield , 객체.next(2)를 적용 할 경우 num1값에 2가 적용된다.
。 generator객체.return() : 해당 메소드 사용 시 { value: undefined, done: true }이 return되면서, 이후 next()를 통해 generator을 호출해도 동일하게 { value: undefined, done: true }를 반환.
 function* generator(){
  try{
    console.log("0");
    yield 1;
    console.log("1");
    yield 2;
    console.log("2");
    yield 3;
    console.log("3");
    return "finish";
  }catch(e){
    console.log(e);
  }
}
const gen1 = generator();
let k1 = gen1.next();
console.log(k1);
let k2 = gen1.next();
console.log(k2);
let k3 = gen1.next();
console.log(k3);
let k4 = gen1.next();
console.log(k4);
let k5 = gen1.next();
console.log(k5);
。value는 해당 yield의 value값으로 설정됨.
。함수 실행이 모두 완료된 경우, value는 return값으로 설정되고, done:true로 설정됨.
const gen1 = generator();
let k1 = gen1.next();
console.log(k1);
let k2 = gen1.return();
console.log(k2);
let k3 = gen1.next();
console.log(k3);
。return() 이후로 항상 동일하게 { value: undefined, done: true } 값을 반환한다.

ex : next()를 통해 generator에 인수를 전달하는 경우
function* fn(){
  const num1 = yield " 첫째 숫자 입력. ";
  console.log(num1);
  const num2 = yield " 둘째 숫자 입력. ";
  console.log(num2);
  return num1 + num2;
}
const a = fn();
console.log(a.next());
console.log(a.next(2));
console.log(a.next(4)); // 최종적으로 value에는 2와 4를 더합 값이 도출.
ex : 다른 generator에서 호출
function* gen1(){
  yield "W";
  yield "o";
  yield "r";
  yield "l";
  yield "d";
}
function* gen2(){
  yield "Hello,";
  yield* gen1();
  yield "!";
}
console.log(...gen2())
ex. 필요한 순간에 값을 생성하는 generator 생성
。generator은 값을 미리 생성하지 않으며, 필요한 순간에 값 생성을 지정이 가능.
function* gen(){
  let index = 0;
  while(true){
    yield index++;
  }
}
const gen1 = gen();
let k1 = gen1.next();
console.log(k1);
let k2 = gen1.next();
console.log(k2);
let k3 = gen1.next();
console.log(k3);
。next()을 무한정 지시하여 값 생성이 가능.
Iterator이면서, iterable(반복) 속성이 존재.
。iterable 속성 활용 시 조건 : iterator을 반환하는 Symbol.iterator 메소드가 존재해야한다.
ex) 배열은 Symbol.iterator 메소드가 존재 및 해당 메소드는 iterator를 반환하므로. 배열은 iterable하다.
。iterator은 `iterator객체.next()를 사용 가능.
// 배열은 iterable한 특징이 존재!
const arr = [1,2,3,4,5];
const iterator1 = arr[Symbol.iterator](); 
// Symbol.iterator 메소드
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());

window 객체 : 브라우저 전체 담당
Documnet 객체 : 웹사이트 담당
JavaScript :
。BOM, DOM요소를 조작하여 화면을 동적으로 그리는 역할을 수행.

BOM ( Browser Object Model ) : 브라우저 객체 모델
。JavaScript가 Browser와 소통하기 위해 생성된 모델.
▶ JS는 BOM을 통해 브라우저의 정보에 접근하거나, 여러 기능을 제어할 수 있음.
。웹 페이지 내용을 제외한 웹 브라우저 창에 포함된 모든 객체요소.
。image 또는 브라우저창의 window.innerWidth, window.innerHeight등을 이용하여 접속하는 기종의 viewport에 맞게 조정 후 표시할 contents들을 설정하여 반응형 web application 구축 시 중요하게 사용됨.
window :
。브라우저의 Window를 의미하며, 창을 제어하는 다양한 메서드를 제공하는 객체.
。자바스크립트의 최상위 객체 / 전역 객체 / 모든 객체가 소속된 객체

。window.innerWidth :
브라우저창의 현재 width값을 반환.

。window.location :
원본경로, 원본(html)이름, port, protocol 정보를 반환.

。window.btoa("문자열") : Binary to ACSII
브라우저의 내장함수로 문자열을 Base64 format으로 Encoding

。window.atob("Base64") :
。Base64 format의 데이터를 문자열로 변환.

<body> <div class="container-fluid" style="width:500px;border:1px black solid"></div> <script> if (window.innerWidth > 500 ){ console.log("larger than 500px") } else{ console.log("smaller than 500px") } </script> </body> </html>

。브라우저창이 500px 이하이면 "smaller than 500px"출력.
=> 브라우저창의 window.innerWidth, window.innerHeight등을 이용하여 접속하는 기종의 viewport에 맞게 조정 후 표시할 contents들을 설정하여 반응형 web application 구축 시 중요하게 사용됨.
DOM ( Document Object Model ) : 문서객체모델
。Browser가 HTML문서를 해석 시 생성하는 Tree구조의 객체 모델.
▶ HTML요소를 동적으로 제어하여 JavaScript 객체처럼 조작할 수 있는 Model
DOM tree : HTML Element를 Javascript객체처럼 사용 시 객체를 트리구조로 표현.

。HTML과 Javascript를 연결하는 역할로서 JavaScript를 통해 각 HTML Element에 접근.
。 Browser가 HTML문서를 통해 Page를 로드하는 과정에서 HTML태그를 각각 하나의 객체로 제작.
。UI에서 사용자의 상호작용에 따라서 HTML 코드를 변경이 가능.

태그요소.innerHTML = "문자열" :
。HTML 문서 상의 Id로 얻어온 특정 태그요소의 내부 내용을 지정.

태그요소객체.className = "문자열" :
。HTML 문서 상의 HTML 요소 객체의 class 이름 지정.
<body>
  <p id="domP">ID의 경우</p>
  <script>
    var htmlElement1 = document.querySelector("#domP");
    htmlElement1.innerHTML = "안녕하세요?";
  </script>
</body>
DOM 관련 실습
JS를 통해 태그요소 참조하기.
document :
。HTML Page를 지시하는 객체.
。document로 태그요소를 가져오는 메소드 사용 시 , 복수의 태그요소를 return받는 경우, HTMLCollection이라는 array로 return.
document.createElement(html태그요소이름) : JS코드를 이용하여 HTML요소객체를 생성하여 return.

HTMLCollection : DOM Collection
。HTML문서 내부에서 선택한 태그요소만을 문서내에서 정렬된 순서대로 모아둔 배열.
。index로 접근가능 / length 프로퍼티를 가짐. / iterable하여 for of로 순회 가능
NodeList :
。HTML문서 내부에서 선택한 태그요소, 텍스트, 주석, 속성 등의 모든 노드를 정렬된 순서로 모아둔 집합
。forEach를 사용 가능.

특정 HTML태그요소를 JS로 객체로서 가져오는 method.

id를 이용해 HTML태그요소를 객체로 return
document.getElementById("id명")
。id는 html page에서 오직 한개의 태그요소만 사용이 가능하므로, 해당 메소드를 통해 해당 태그요소에 접근이 가능.

class를 이용해 HTML태그요소를 객체로 return
document.getElementsByClassName("class명")
。class의 경우, 여러 태그요소에서 사용이 가능하므로, 해당 메소드를 통해서 해당 class를 가지는 태그요소들에 대하여 접근이 가능.
。복수의 태그요소를 가져오는 경우, HTMLCollection으로 반환받는다.

태그이름를 이용해 HTML태그요소를 객체로 return
document.getElementsByTagName("태그이름")
。해당 메소드를 통해서 해당 태그요소들에 접근이 가능.
。복수의 태그요소를 가져오는 경우, HTMLCollection으로 반환받는다.

<body> <p id="domP">ID의 경우</p> <p class="domPP">Class의 첫번째 경우</p> <p class="domPP">Class의 두번째 경우</p> <p class="domPP">Class의 세번째 경우</p> <h3>태그이름의 경우</h3> <script> // html태그 요소를 id를 통해 가져올 경우 console.log(document.getElementById("domP")) // html태그 요소를 class를 통해 가져올 경우 console.log(document.getElementsByClassName("domPP")) // html태그 요소를 tag이름을 통해 가져올 경우 console.log(document.getElementsByTagName("h3")) </script> </body>

。개발자도구의 콘솔을 확인 시 id를 통해 가져온 태그요소와 class를 통해 가져온 3개의 태그요소의 array로 구성된 HTMLCollection과 태그이름을 통해 가져온 태그요소가 존재.

html태그요소를 querySelector를 이용해 가져오기
document.querySelector("css선택자")
。css선택자를 활용했던것과 동일하게 #id명 , .class명 , 태그이름으로 가져올 수 있다.
。동일 class를 가지는 복수의 태그 존재 시, <body>태그 위에서 해당 class를 가지는 첫번째 태그를 return.
。return되는 요소가 복수인 경우, 태그요소.querySelectorAll("css선택자")를 통해 NodeList로서 가져오기.

<body> <p id="domP">ID의 경우</p> <p class="domPP">Class의 첫번째 경우</p> <p class="domPP">Class의 두번째 경우</p> <p class="domPP">Class의 세번째 경우</p> <h3>태그이름의 경우</h3> <script> // html태그 요소를 querySelector를 통해 가져올 경우 console.log(document.querySelector("#domP")); console.log(document.querySelectorAll(".domPP")); console.log(document.querySelector("h3")); </script> </body>

。위 과정과 동일하나, 태그요소.querySelectorAll("css선택자")를 통해 복수의 태그요소를 가져온 경우, NodeList로 반환됨!
JS를 통해 태그요소 수정하기
。Javascript로 특정 태그요소를 선택 후 상호작용을 수행 가능.
document.querySelector("#Id명").style :
。해당 태그요소의 CSS 정보를 가져온다.
단일 html 태그요소의 스타일링 추가하기
。JS코드를 통해 HTML Page의 태그요소를 가져온 후 태그요소.style = "css코드"를 작성 시 HTML 태그요소의 스타일링 정보를 수정 가능.
<body>
  <p id="domP">ID의 경우</p>
  <p class="domPP">Class의 첫번째 경우</p>
  <p class="domPP">Class의 두번째 경우</p>
  <p class="domPP">Class의 세번째 경우</p>
  <h3>태그이름의 경우</h3>
  <script>
    // id를 통해 가져온 html태그 요소를 빨간색으로 수정.
    document.getElementById("domP").style = "color:red";
  </script>
</body>
복수의 html 태그요소의 스타일링 추가하기
。JS코드를 통해 HTML Page의 태그요소를 가져온 후 반복문을 통해서 태그요소[i].style = "css코드"를 작성하여 HTMLCollection의 인덱스의 태그요소 스타일링 정보를 수정.
<body>
  <p id="domP">ID의 경우</p>
  <p class="domPP">Class의 첫번째 경우</p>
  <p class="domPP">Class의 두번째 경우</p>
  <p class="domPP">Class의 세번째 경우</p>
  <h3>태그이름의 경우</h3>
  <script>
    // class를 통해 가져온 html태그 요소들을 전부 빨간색으로 수정.
    var htmlCollection = document.getElementsByClassName("domPP");
    for(let i=0 ; i < htmlCollection.length;i++){
      htmlCollection[i].style="color:red";
    }
  </script>
</body>
。동일한 class를 가지는 태그요소에 스타일링 정보가 전부 반영됨.
  <body>
  <p id="domP">ID의 경우</p>
  <p class="domPP">Class의 첫번째 경우</p>
  <p class="domPP">Class의 두번째 경우</p>
  <p class="domPP">Class의 세번째 경우</p>
  <h3>태그이름의 경우</h3>
  <script>
    // querySelectorAll(".class명")을 통해서 가져온 NodeList의 html태그 요소들을 전부 빨간색으로 수정.
    var htmlCollection = document.querySelectorAll(".domPP");
    htmlCollection.forEach((tagElement)=>{
      tagElement.style="color:red";
    })
  </script>
</body>
querySelectorAll(".클래스명") 을 통해 태그요소들을 NodeList로 반환 받아서 forEach로도 변경이 가능!

CSS 코드
。CSS코드 공부한거

태그요소.style = "color:red" :
。해당 태그요소의 색상을 변경.

태그요소.style = "display:none" :
。해당 태그요소를 숨김.

태그요소.style.backgroundColor="wheat" :
。글자의 backgroundcolor를 변경.

function을 활용하여 태그요소의 내용을 변경하거나 태그요소 내부에 태그요소를 추가하기.
태그요소.innerText = "text" :
。HTML 문서 상의 특정 태그요소의 내부 내용에 텍스트를 지정.
태그요소.innerHTML = "text or tag" :
。HTML 문서 상의 태그요소의 내부 내용에 텍스트 또는 tag를 지정.
<body>
  <h3>입력하기</h3>
  <p id="domp"></p>
  <script>    
    studentList = {
      'ron' : 'male',
      'jeongsu' : 'male',
      'rachel' : 'femalㄷ',
    }
    function checkStudent(studentName){
      var htmlElement = document.querySelector("#domp");
      if (studentList[studentName]){
        if (studentList[studentName]=='male'){
          htmlElement.innerHTML = "<hr><b>남자입니다.</b>";
        }else{
          htmlElement.innerHTML="<hr><b>여자입니다.</b>";
        }
      }else{
        htmlElement.innerHTML= "포함되지 않습니다.."
      }
    }
  </script>
</body>
。콘솔창에 다음처럼 입력시 html 문서 내 특정 태그요소의 내부 내용에 태그요소.innerHTML을 통해 <hr><b>남자입니다.</b>가 입력되면서, tag와 text가 반영.

。태그요소.innerText를 통해 <hr><b>여자입니다.</b>가 입력되면서 text가 반영.
JS를 통해 <input>를 통해 입력된 태그요소의 값 가져오기
태그요소.value :
。값을 입력받는 <input>태그요소에 id를 통해 접근하여 입력된 value를 return.
。document.querySelector(#id명).value
onclick="JS함수명()" :
。태그요소의 event를 통해 해당 정의된 JS코드를 실행하는 속성.
=> 보통 JS의 함수를 정의하여 많이 사용.
。<button>버튼</button>
<input>태그에 값을 입력 시 버튼을 눌러 html 문서의 태그요소에 해당 값을 반영하기.
<body>
  <div class="container" style="margin-top:20px">
    <h3>JS를 통해 값 가져오기.</h3>
    <label for="input1">입력칸</label>
    <br>
    <input type="text" id="input1" name="value1">
    <button onclick="getValueAndTest()">제출</button>
    <p id="display1"></p>
  </div>
  <script>
    studentList = {
      'ron' : 'male',
      'jeongsu' : 'male',
      'rachel' : 'female',
    };
    function checkStudentGender(studentName){
      var tagElement1 = document.querySelector("#display1");
      if (studentList[studentName]){
        console.log()
        if(studentList[studentName]=='male'){
        let string1 = `<hr><b>${studentName} is student` + " and he is male.</b>";
        tagElement1.innerHTML=string1;
        }else{
          let string1 = `<hr><b>${studentName} is student` + " and she is female.</b>";
          tagElement1.innerHTML=string1;
        }
      }else{
        let string1 = "<hr><b>not student.</b>"
        tagElement1.innerHTML=string1;
      }
    };
    function getValueAndTest(){
      var v1 = document.querySelector("#input1").value;
      checkStudentGender(v1);
    };
  </script>
</body>
。다음처럼 <input> 태그에 값을 입력 후 버튼을 누를 경우, <button>의 onclick속성을 통해 JS의 함수 getValueAndTest()가 실행되며, 해당 함수에서는 input태그요소.value를 통해 input에 입력된 값을 가져오고, 이를 함수 checkStudentGender()에 매개변수로 전달하여 실행되고 , 태그요소.innerHTML을 통해 text와 태그가 문자열로서 전달되어 HTML페이지에 정의된다.
ex) 계산기 기능 만들어보기.
<body>
  <h3>사칙연산 계산기 2024/10/10</h3><br>
  <hr>
  <div>
    <label for="input1">첫번째 수 :</label>
    <input type="text" class="input" id="input1" name="inputValue1" style="width:50px">
    <select id="calT">
      <option value="+" selected>+</option>
      <option value="-" >-</option>
      <option value="*" >*</option>
      <option value="/" >/</option>
    </select>
    <label for="input2">두번째 수 :</label>
    <input type="text" class="input" id="input2" name="inputValue2" style="width:50px">
    <strong>=</strong>
    <span id="output"></span>
    <br><button onclick="buttonAction()" style="margin-top:5px">연산</button>
  </div>
  <script>
    function calculator(firstValue,secondValue,calType){
      let outputElement = document.querySelector("#output");
      if (calType=="+"){
        var value = addition(firstValue,secondValue)
      }else if(calType=="-"){
        var value = differential(firstValue,secondValue)
      }else if(calType=="*"){
        var value = multiply(firstValue,secondValue);
      }else{
        var value = divide(firstValue,secondValue);
      };
      outputElement.innerHTML = `<b>${value}</b>`;
    }
    function buttonAction(){
      var values = document.querySelectorAll(".input");
      var calType = document.querySelector("#calT").value;
      calculator(Number(values[0].value),Number(values[1].value),calType);
    }
    var addition = (a,b)=>{
      return a+b;
    } 
    var differential = (a,b)=>{
      return a-b;
    }
    var multiply = (a,b)=>{
      return a*b;
    }
    var divide = (a,b)=>{
      return a/b;
    }
  </script>
</body>
。동일한 class를 가지는 <input> 태그요소를 text로 2개 생성 및 연산자를 <option>을 통해 선택하는 <select>를 생성.
。이후 복수의 <input>의 값은 document.querySelectorAll(".class명")을 통해 NodeList로 가져온 후 인덱싱하여 정수로 캐스팅을 통해 값을 할당.

숙제

1번

Create a basic portfolio site using Bootstrap (and of course HTML duh!!) . Site should have multiple pages.

Home page - showing your photo, some basic info about you that'll impress anyone who visits the page

About page - will show little bit history about you, your family, maybe place where you were born

Background page - This page will include things such as educational details and details of your work experiences. (Use tables, cards, modals, etc. )

Contact page - This page will show all ways anyone can contact you. Email, Facebook, Twitter, etc.

2번

Create a super cool calculator that will take input as numbers and then add different buttons to it doing different operations such as

Basic arithmetic operations

Trigonometric Operations

Calculate area, volume, etc.
Use tables to give it more boxy feel, use bootstrap and javascript to make it responsive.

DOM : HTML요소를 JavaScript 객체처럼 조작할 수 있는 Model

。const options = opt_options || {}; : opt_options가 false값( null, undefined, false, 0, NaN, 빈 문자열("") )인 경우, 오른쪽 return.

。document.createElement(DOM요소이름) : JS코드를 이용하여 HTML element 객체를 생성하여 return.

。DOM요소.innerHTML = "문자열" : HTML 문서 상의 HTML 요소 객체의 내부 내용을 지정.

。DOM요소.className = "문자열" : HTML 문서 상의 HTML 요소 객체의 class 이름 지정.
handleRotateNorth() {
    this.getMap().getView().setRotation(0);
  }
}
。해당 Map 객체에서 View 객체를 가져온 후 rotation을 0으로 설정(=진북으로 설정)하는 함수

。element.appendChild(button) : DOM tree 상에서 DOM요소인 element의 하위요소로 DOM요소 button을 추가
super({
      element: element,
      target: options.target,
    });
。super() : Javascript에서 부모 class( ol.control.Control )의 생성자를 호출하여 인수를 전달.
。해당 super는 부모 class 생성자에 DOM요소를 인수로 전달.

DOM요소.addEventListener('이벤트', callback 함수, false)
。지정한 유형의 이벤트(ex:'click')를 DOM요소가 수신할 때마다 호출할 함수를 설정

event 종류

'click' : 사용자가 버튼을 클릭 시 실행될 event

'touchstart' : 터치디바이스에서 버튼 터치 시 실행될 event

특정method.bind(this) :
。현재 class의 instance에 binding하여 method 내부에서 올바른 this가 정의되도록 설정.

jQuery :
。HTML의 요소들을 Javascript를 이용해 쉽게 조작하고 편리하게 사용할 수 있게 만든 Library로서로 js를 미리 정의하여 활용.
jQuery cdn
<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
jQuery를 활용하여 사용하는 방법
。$('#elementID') : HTML Page 내 특정 ID의 element를 객체로서 참조.

Bootstrap Modal Bootstrap-modal
$('#ModalelementID').modal('메소드')

메소드
。Modal객체.modal('show') : Modal 표시.
。Modal객체.modal('hide') : Modal 숨기기.

submit()
。HTML의 <form>을 jquery를 이용해 submit() 함수를 사용하여 제출하는 역할을 수행.
$('#FormelementID').sumbit(function(evt){코드})

submit 관련 event

evt.preventDefault() :
。<a href="url">를 눌렀을때 해당 href 링크로 이동하지 않게 할 경우 사용.
。<form> 내부에 정의된 <button type="submit">을 누를경우, 해당 페이지가 새로고침되는 기능을 제한.

Browser에서 제공하는 객체
navigator :
。사용자의 Browser의 환경에 대한 정보를 제공하는 Javascript 객체.
▶ browser에서만 사용이 가능한 객체.

。Browser가 Service Worker를 포함한다면, navigator 객체에도 Service Worker를 포함.

navigator.geolocation :
。geolocation API에 대한 Access를 제공하여 Web application이 User Device의 위도,경도 좌표를 검색할 수 있는 객체.

geolocation Method

navigator.geolocation.getCurrentPosition(Success Callback, Error Callback, option)
。현재 User Device의 위치를 검색.

Success Callback의 매개변수 : position
。위도, 경도에 대한 좌표정보를 제공.

(position)=>{ position.coords.latitude // 위도 position.coords.longitude // 경도 }

Error Callback의 매개변수 : error
。error.PERMISSION_DENIED : User가 지리적 위치 요청을 거부

。error.UNAVAILABLE : 위치정보를 사용 불가능

。error.TIMEOUT : User 위치를 정시하기위한 요청

navigator.geolocation.watchPosition(성공콜백함수 , 실패콜백함수, option)
。User Device를 지속적으로 관측하면서 위치 변경시마다 callback 기능 호출.

。navigator.geolocation.ClearWatch(watchPosition객체) :
주어진 watchPosition객체의 위치 관측을 중단.
ex)

const watchId = navigator.geolocation.watchPosition( (position) => { console.log('Updated Latitude:', position.coords.latitude); console.log('Updated Longitude:', position.coords.longitude); }, (error) => { console.error('Error:', error.message); } ); navigator.geolocation.clearWatch(watchId);

navigator.serviceWorker
。JavaScript상에서 Web Application에서 해당 브라우저의 Service Worker를 관리하기 위한 Interface를 제공하는 객체.

navigatior.serviceWorker.register('script파일주소') :
。Service Worker Script를 Browser에 등록하여 초기화를 수행.
。.then().catch((err)=>{})를통해 promise를 활용 가능.
▶ 해당 Script는 background에서 실행되며, 사용자 상호작용 없이 작업을 수행.
window :
。Javascript에서 정의된 Client-side Browser 환경의 전역객체 (global object)
▶ 최상위 객체이므로, 어디서든 접근이 가능하므로 전역객체라고 한다.

。Browser 상에서 실행되는 모든 JS요소들의 최상위 root object 역할을 수행.
▶ Browser 내부에서 정의된 모든 전역 변수와 함수는 window 객체를 상속받은 property나 method.

。Browser의 window로서 기능
。window 관련 다양한 method를 이용하여 browser의 window을 조작 가능.
(ex. window.close(), window.open() )

。window 관련 다양한 property를 활용하여 window의 상태를 확인 가능.
(ex. window.innerWidth , window.innerHeight)

window Browser Access 기능
。document
。getElementById
。querySelector

window property
。window.location : 현재 URL에 대한 세부정보를 제공하고 탐색을 허용
。window.navigator : 브라우저 및 장치 정보를 제공.
。window.history : 브라우저의 기록스택을 조회,
。window.screen : 사용자 화면에 대한 정보(ex. 해상도)를 제공.

window method
。window.alert("경고메세지") : alert box를 표시
。window.confirm("경고메세지") : confirm 상자를 표시 후 사용자 선택에 따라 true / false 반환.
。window.prompt(message,defaultValue) : 사용자 입력을 위한 대화상자 표시.

。window.setTimeout(callback함수, 지연시간) : 지정된 지연 후 함수를 실행.
。window.setInterval(callback함수, 지연시간) : 지정된 간격으로 함수를 반복 실행.

。window.open(url, name, specs) : 새 브라우저 tab 또는 창을 open.
。window.close() : window.open()으로 열린 경우 현재 window를 닫음.

window eventHandler :
window.addEventListener('이벤트', callback 함수(evt), false)로 활용.
。"load" : 이미지를 포함한 전체 페이지가 완전히 로드 시 실행.
。"resize" : Browser의 창 크기가 조정 시 실행.
。"scroll": 사용자가 Page를 scroll시 실행.
。"beforeinstallprompt" : 사용자가 PWA를 Mobile Device에 설치하기 이전에 prompt를 제공하기위한 window객체에 발생하는 이벤트.

FileReader :
var reader = new FileReader()
。브라우저 내에서 입력되는 파일을 Read하기위해 사용하는 객체
▶ 브라우저를 통해 입력되는 파일의 경우 <input type="file"> html element를 통해 upload 혹은 drag-drop으로 선택

。주로 File이나 Blob 객체를 이용한 데이터를 읽고 처리하여 컴퓨터에 저장하는것이 가능.
▶ 주로 이미지, 오디오, 영상등의 데이터를 다룰 때 사용.

。해당 객체를 이용하여 파일 내용을 text , resource url 등의 형태로 read.
。read가 완료된 데이터는 fileReader객체.result property를 통해 접근이 가능.

FileReader Property

fileReader객체.result :
。File Read가 완료된 데이터를 접근

FileReader Method

fileReader객체.readAsText(파일,encoding) :
。Blob 또는 File 객체를 Text로서 read할 때 사용하며 결과를 문자열로 반환
。사용할 인코딩을 사전에 지정이 가능.

fileReader객체.readAsDataURL(파일)
。Blob 또는 File 객체를 Base64로 encoding된 Resource URL로 반환.
▶ 주로 이미지, 오디오, 동영상 등을 웹에서 미리보기 용도로 사용 시 유용.

fileReader객체.readAsArrayBuffer(파일) :
。Blob 또는 File객체를 Bindary 데이터 형태로 read.

FileReader 관련 이벤트
。fileReader.addEventListener('이벤트', callback 함수(evt), false)

。event객체.target : 이벤트( Read ) 작업을 수행한 FileReader 객체를 지시.
▶ event객체.target.result : File에서 Read된 data를 지시하며 이는 binary data를 포함하는 ArrayBuffer이 된다.

onload :
。FileReader API가 실행되어 File의 Read가 완료된 경우 호출.
。fileReader.onload=callback함수로 등록이 가능.

onerror
。File Read 중 오류 발생시 호출

onprogress
。File read 진행상황을 나타냄.

onloadstart
。파일 읽기가 시작될 때 호출

onloadend
。파일 읽기가 종료될 때 호출。파일 읽기가 종료될 때 호출

File , Blob : Web application에서 파일 업로드, 미리보기, 다운로드 등을 수행 시 활용.

대형이진객체 ( Blob : Binary Large Object ) :
new Blob(data, { type : "mime 유형" })
。원시 바이너리 데이터를 나타내는 객체로서 이미지, 비디오, 오디오, 텍스트와 같은 데이터를 쉽게 읽거나 전송하여 저장할 수 있다.
▶ 미디어 파일을 포함한 대량의 데이터를 표현 가능.

。Blob 객체 내부 데이터는 생성 후 수정이 불가능.

Blob 생성자 속성

data :
。해당 Blob객체를 구성하는 부분의 배열. ( string, ArrayBuffer, TypedArray , Blob )

type :
。Blob의 MIME 유형 ( image/png, text/plain 등 )

Blob Method :

blob객체.slice(start,end,contentType)
。원본 Blob의 일부를 포함하는 새 Blob을 생성

파일 객체 ( File ) :
new File( , 파일이름 , { type : "mime 유형" })
。기존 Blob에서 확장하여 이름, 수정날짜 등의 메타데이터를 포함하여 기능을 확장한 Blob
。<input type="file">을 통해 사용자가 선택한 파일을 나타내는데 사용.

File property

file객체.name : 파일 이름 (example.txt)

file객체.lastModified : 파일이 마지막으로 수정된 timestamp

file객체.type : 파일의 MIME 유형

file객체.size : 파일의 크기 (byte)

Blob과 File의 차이

Image
new Image()
。보통 html의 <img> element는 DOM을 통해 다루는 것 이외에도 Image() class 를 통해 동적으로 image를 다룰 수 있음.
▶ 보통 <img src="url">에서 url을 변수를 통해 동적으로 제어할 경우 사용하거나 img가 load됬을때 이벤트(load)를 활용 시 사용.

Image propery

Image객체.src : 이미지객체의 url
▶ image객체.src = "url"

Image객체.name : 이미지의 name

Image객체.border : 이미지의 테두리 값

Image객체.complete : 이미지 load 완료 여부 (T/F)

Image객체.height : 이미지의 높이

Image객체.width : 이미지의 가로크기

Image객체.hspace : 이미지의 수평여백

Image객체.vspace : 이미지의 수직여백

Image객체.length : 이미지의 갯수

Image객체.lowsrc : lowsrc로 설정한 이미지의 URL

Image event
Image객체.addEventListener('이벤트', callback 함수(evt), false)

load : 이미지가 로드 시 호출.

onload : Image의 Load가 완료된 경우 호출.

canvas요소.getContext('렌더링 방식',{alpha : false})
。HTML의 <canvas> 요소를 이용하여 JS에서 Graphic Rendering Context 객체를 표현하는데 사용.
▶ 2D, 3D의 graphic을 <canvas>에 그릴 수 있음.

。Dom객체는 document.getElementById('<canvas> ID')로 JS의 변수로 호출.

。생성자 매개변수 {alpha : false}는 투명도 비활성화를 의미.
렌더링 방식
2D Context :
canvas요소.getContext('2d')
。2D Graphic을 표현할 수 있는 CanvasRenderingContext2D를 반환.
2D Context 관련 Method

2DContext객체.translate(x,y)
。캔버스의 원점을 이동

2DContext객체.rotate(angle)
。캔버스를 회전

2DContext객체.scale(x,y)
。캔버스를 확대 또는 축소

2D Context 그리기 관련 Method

2DContext객체.fillRect(x, y, width, height)
。<canvas>의 2DContext 객체에 사각형을 그리는 Method.
。2DContext.fillStyle="색상" : 해당 2D Context의 도형의 색상을 지정.

2DContext객체.strokeRect(x, y, width, height)
。윤곽선만 그려진 사각형을 그리는 Method.

2DContext객체.clearRect(x, y, width, height)
。해당 영역의 내용을 지우는 Method .

2D Context Path 관련 Method
。path는 점들의 집합으로서 서로 연결되면서 도형을 생성 가능.
。먼저 beginPath() Method를 실행한 후 moveTo(x,y)를 지정하여 시작위치를 설정 후 그림을 그린 후 fill() 또는 closePath()로 종료.
▶ 펜을 이용하여 그리는 방식이라고 이해하면 됨
▶ fill() 사용 시 stroke()를 제외한 도형은 자동으로 close.

2DContext객체.beginPath() :
。새로운 Path를 시작.

2DContext객체.moveTo(x,y)
。path의 펜을 들어서 지정된 위치로 이동하여 시작위치를 설정.

2DContext객체.lineTo(x,y)
。현재 위치에서 지정 위치까지의 직선을 그린다.

2DContext객체.arc(x, y, radius, startAngle, endAngle, counterclockwise)
。원 또는 호를 표현.
ex) 반원 : ctx.arc(100, 100, 50, 0, Math.PI, false);

2DContext객체.closePath()
。현재 path를 종료.

2DContext객체.fill()
。path를 채우는 역할을 수행.

2DContext객체.stroke()
。path의 윤곽선을 표현하는 역할을 수행.

2D Context Text 관련 Method

2DContext객체.fillText("텍스트내용", x,y)
。지정 위치에서 Text를 표현
。2DContext객체.font("글자크기 폰트")로 Context의 font를 임의로 지정 가능.
ctx.font = "20px Arial"

2DContext객체.measureText("텍스트내용")
。Text의 크기를 반환.
2D Context Image 관련 Method
2DContext객체.drawImage(Image객체, dx , dy , width , height)
。이미지를 캔버스에 표현.
。활용 례
const img = new Image();
img.src = "image.jpg";
img.onload = () => {
    ctx.drawImage(img, 0, 0, 100, 100);
};
.

2DContext객체.createImageData(width,height)
。빈 ImageData 객체를 생성

2DContext객체.(이미지데이터, dx, dy)
。이미지 데이터를 캔버스에 그린다.
2D Context 관련 Property

2DContext객체.fillStyle = "색상"
。도형 내부를 채울 Style을 설정

2DContext객체.strokeStyle = "색상"
。윤곽선의 Style을 설정.

2DContext객체.lineWidth = 5
。윤관선의 두께를 설정

2DContext객체.lineCap = "round"
。선 끝의 Style을 설정 ( "butt", "round", "square" )

2DContext객체.font = "16px Arial"
。Text의 style을 지정.

2DContext객체.textAlign = "left"
。Text의 정렬방식 설정. ( "left" , "center", "right", "start", "end" )

2DContext객체.textBaseline = "left"
。Text의 기준선 설정. ( "top" , "middle" , "bottom", "alphabetic" , "hanging" )

2DContext객체.globalAlpha = 0.1
。전체 투명도 설정 ([0.0,1.0])
WebGL Context :
canvas요소.getContext("webgl")
。GPU를 활용하여 3D graphic을 표현할 수 있는 Context를 반환.
。WebGL을 지원하는 브라우저에서만 사용이 가능.

Date()
。Javascript에서 날짜와 시간을 처리하는데 사용되는 객체
▶ 특정 시점의 객체를 생성하여 객체의 날짜를 가져오거나, 특정 날짜를 설정하여 날짜간의 차이를 계산할 수 있다.

현재 시점 기준의 Date객체 생성 : const today = new Date()

특정 시점 기준 Date 객체 설정 :
。현재 시점 기준 Date() 객체를 생성하여 아래 Method를 통해 특정시점으로 설정.
。또는 Date()의 생성자에 입력하여 특정시점의 Date 객체를 생성할 수 있다.

Date객체의 날짜 및 시간을 설정하는 Method

date객체.setFullYear(4자리연도) : Date객체를 입력된 4자리연도로 설정

date객체.setMonth(월) : Date객체를 입력된 월 ( 0 = 1월 )로 설정

date객체.setDate(일) : Date객체를 입력된 일로 설정

date객체.setHours(시간) : Date객체를 입력된 시간으로 설정

date객체.setFullYear(분) : Date객체를 입력된 분으로 설정

Date객체의 날짜 및 시간을 가져오는 Method

date객체.getFullYear();
。현재 시점에서의 4자리 숫자의 연도를 가져오는 Method.

date객체.getMonth();
。현재 시점에서의 월 정보를 가져온다.
▶ 0 = 1월부터 시작.

date객체.getDate();
。현재 시점에서의 일 정보를 가져온다.

date객체.getDay();
。현재 시점에서의 요일 정보를 가져온다.
▶ 0 = 일요일부터 시작.

date객체.getHour();
。현재 시 정보를 가져온다.

date객체.getMinutes();
。현재 분 정보를 가져온다.

날짜 포맷팅
。Date 객체를 다음 Method를 통해 특정 문자열의 Date Format으로 표현 가능.

date객체.toDateString() : "Tue Feb 20 2024"

date객체.toTimeString() : "12:45:30 GMT+0900 (KST)"

date객체.toLocaleDateString() : "2024. 2. 20." (로컬 날짜 형식)

date객체.toLocaleTimeString() : "오후 12:45:30" (로컬 시간 형식)

이정수

공부기록 블로그

JavaScript

프로그래밍언어학습

0개의 댓글