한국경제신문 with toss bank/FE

05. DOM의 기초DOM과 DOM 트리문서 객체 모델(DOM)자바스크립트 이용해 웹 문서에 접근하고 제어할 수 있도록 객체 사용해 웹 문서를 체계적으로 정리하는 방법웹 문서를 구조화한 DOM 트리(DOM tree)와 이벤트를 정리해 놓은 표준웹에서 자바스크립트 사용하는 이유어떤 조건이 주어지거나 사용자의 동작이 있을 때 웹 문서 전체 or 일부분이 동적으로 반응하게 하는 것-> 이렇게 하려면 웹문서의 모든 요소 따로 제어할 수 있어야 함 ex. 웹 문서에 텍스트와 이미지 들어 있다면웹 브라우저) 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 무엇인지 살펴봄이미지가 몇 개이고 이미지 파일 경로는 어떠한지 대체 텍스트는 무엇인지도 파악 -> 이미지별로 정리해서 인식텍스트와 이미지 요소를 브라우저..

04. 함수와 스코프함수 선언 & 실행함수 선언할 때는 `function` 예약어 사용함수 이름을 적은 후 안에 실행할 여러 명령어 묶음함수를 실행(호출)할 때는 함수 이름 뒤에 중괄호 () 붙임// 함수 선언fucntion 함수명() { 명령(들)}// 함수 실행함수명() 매개변수와 인수매개변수함수를 선언할 때 외부에서 값을 받는 변수함수 이름 옆의 괄호 안에 매개변수 이름을 넣어줌매개변수에 이름을 붙이는 방법 = 일반적인 변수 이름 붙이는 방법매개변수는 선언된 함수에서만 사용함수에 여러 개의 매개변수가 필요할 때에는 매개변수 사이에 쉼표(,)를 찍으면서 나열인수매개변수가 있는 함수를 실행할 때, 매개변수로 값을 넘겨주는 함수=> 매개변수와 인수 통틀어서 '인자'라고도 함 return문함수 안에서 실행..

09. 자바스크립트 객체 만들기객체 알아보기객체프로그래밍) 데이터를 저장하고 처리하는 기본 단위자바스크립트) 관련된 정보와 동작 함께 모아 놓은 것 내장 객체: 프로그래밍 할 때 자주 사용하는 요소들 -> 미리 정의해 놓은 객체문서 객체 모델(DOM): 웹 문서 자체(객체)/ 웹 문서에 포함된 것 각각 별도의 객체(이미지 객체, 링크 객체 등)브라우저 객체 모델: 웹 브라우저가 사용하는 정보 -> 객체로 지정사용자 정의 객체: 필요할 때마다 사용자가 만들어 사용하는 객체사용자 정의 객체객체: 여러 개의 프로퍼티로 구성프로퍼티: '키 : 값' 형태객체 만들 때 객체 이름 다음에 중괄호({}) 사용중괄호 사이에 '키 : 값' 형식으로 필요한 프로퍼티 나열키: 문자열, 숫자, 심벌프로퍼티: 쉼표(,) 넣어 구..

02. 변수와 자료형`console.log()` 함수콘솔 창에 괄호 안의 내용 표시자바스크립트 소스를 작성하면서 중간에 프로그램이 제대로 동작하는지 확인하는 용도괄호 안에 텍스트나 변수로 사용할 수 있음`document.write()` 함수괄호 안의 내용을 웹 브라우저 화면에 표시실제 웹 브라우저 화면에 내용을 표시할 때에는 DOM을 이용연결 연산자(+)를 사용할 수도 있고, 템플릿 리터럴을 사용할 수 있음변수프로그램에서 사용하기 위해 값을 담아놓는 바구니ex. 날씨 정보를 알려 주는 프로그램이라면 지역 or 날짜 같은 값일반적으로 프로그램 안에서 값이 달라질 수 있는 데이터But, 프로그램 안에서 계속 값이 바뀌지 않더라도 변수로 만들어서 사용(상수 변수)// 1. 변수 선언: 키워드 let, cons..

1. 문서 객체 모델 이해문서 객체 모델 생성되는 방식/ 노드 타입 살펴보기 웹 브라우저: 문서 객체 모델(DOM) 생성할 수 있음문서 객체 모델: 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조생성한 문서 객체 모델 ~> HTML 문서의 구성 요소를 객체로 인식문서 객체 모델이 생성되는 방식문서 객체 모델: 웹 브라우저) HTML 문서 해석 -> 객체로 변환 -> 웹 브라우저에 표시=> 웹 브라우저에 표시되는 HTML 문서는 내부적으로 문서 객체 모델을 해석해서 보이게 됨DOM 트리: 트리(tree) 구조 가짐노드(node): document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등 트리 형태로 구성-> 부모, 자식, 형제 관계 형성루트 노드(root node): DO..

1. 객체데이터를 저장하고 처리하는 기본 단위키(key)와 값(value)으로 구성된 속성의 집합키: 공백 들어갈 경우 따옴표 사용여러 개의 값을 가질 수 있고, 다른 자료형의 값도 가질 수 있음또 다른 객체 or 함수 들어갈 수 있음메서드(method): 객체에 정의된 함수ex. 배열, 숫자, 논리 데이터-> 한 객체의 속성으로 추가 const person = { name: ["Hong", "Gildong"], age: 20, isAdult = true printInfo: function() { console.log('printInfo'); }};{} 이용해 생성 => 리터럴(literal) 방식으로 객체 생성빈 객체: 속성 한 개도 없는 객체const person = {}..