이벤트 (Event) 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생 사용자가 마우스를 클릭 하였을 때, 키보드를 눌렀을 때 등과 같이 다양한 종류의 이벤트가 존재 JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생 할 경우 실행 >> 이벤트 핸들러 (Handler)또는 이벤트 리스너(Listener)라 하며 이 함수에 이벤트 발생시 실행해야 하는 코드 작성 이벤트 종류 - 마우스 이벤트 웹 초기에는 load, click등 소수의 이벤트만 사용 마우스 이벤트는 웹 어플리케이션에서 가장 많이 사용하는 이벤트 마우스 이벤트 핸들러에 전..

Web Browser와 WIndow 객체 Window 객체 Window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체이다. WIndow 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다. JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함.(Number 객체, setInterval() 함수 등) BOM(Browser Object Model)으로 불리기도 함 Window 객체 - alert, confirm, prompt window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open alert() : 브라우저의 알림 창 confirm() ; 브라우저의 확인/취소 선택 창 prompt() : 브라우저의 입력 창 Window 객체 - navigator na..

JavaSciprt 객체 객체(Object) 객체는 이름과 값으로 구성된 프로퍼티의 집합 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체 JavaScript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(Property)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 다라서 프로퍼티의 값으로 함수를 사용 가능 JavaScript 객체는 프로토타입(prototype)이라는 특별한 프로퍼티를 포함 객체(Object) - 생성 객체 리터럴 - 가장 일반적인 방법 - {}를 사용하여 객체를 생성. {}내에 1개 이상의 프로퍼티를 추가하여 객체를..

JavaScript 기본 문법 주석(comment) 주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다. JavaScript 주석은 한 줄 주석(Line Comment)과 블록 주석(Block Comment)이 있다. 한 줄 주석은 //code 로 표기하고, 블록 주석은 /* code */로 표기한다. 가능하면 블록 주석보다 라인 주석을 사용한다. 변수(variable) JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언 JavaScript는 동적타입(Dynamic / Weak Type)언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 (같은 변수에 여러 타입의 값을 할당 가능) 변수 이름은 함수..

JavaScript JavaScrip는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드 하여 실행한다. 웹 브라우저가 HTML문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. ECMAScript(European Computer Manufacturers Association) 1996년 3월 Netscape는 ‘Netscape Navigator 2.0’을 출시하면서 JavaScript를 지원 Microsoft사는 웹에 호환되는 Jscript를 개발해서 1996년 8월 Internet Explore 3.0에 포함하여 출시 N..

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없습니다. 그래서 조건문을 사용하기 위해서는 - JSX 밖에서 if문을 사용 - JSX 내에서 { } (표현식) 안에 조건부 연산자를 사용 조건부 연산자는 다음과 같이 사용합니다. // { 조건 ? 참 : 거짓 } { A > B ? "A is win" : "B is win" } - 앞부분에 조건을 입력합니다. - ? 뒤에는 참인 경우 실행 될 코드를 입력합니다. - : 뒤에는 거짓인 경우 실행 될 코드를 입력합니다. 조건부 연산자를 활용하여 flag가 true일 때 "Hello"를 보이게 할 수 있습니다. import React from "react"; const App = () => { const flag = true; return {flag ?..

날씨 정보를 가져오기 위해 API를 사용. openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on global and local weather models, satellites, radars and vast network of weather stations. how to obtain APIs (subscriptions with di openweathermap.org 회원가입 - API keys 클릭 (아래 Key는 유효하지..

페이지를 들어갈 때마다 랜덤하게 배경이 바뀌는 것을 구현 //bg.js const body = document.querySelector("body"); const IMG_NUMBER = 5; function paintImage(imgNumber) { const image = new Image(); image.src = `images/${imgNumber + 1}.jpg`; // 가져올 image경로 지정 image.classList.add("bgImage"); // image에 bgImage 클래스 추가 body.appendChild(image); // body의 자식에 image추가 } function genRandom() { const number = Math.floor(Math.random() * ..