영벨롭 개발 일지

[이벤트와 이벤트 리스너] 이벤트는 말 그대로 요소 또는 윈도우창에서 실행되는 특정 사건을 의미합니다. 이벤트 리스너는 해당 이벤트에 대해 대기하고 있다가, 이벤트가 발생하면 이벤트 리스너가 실행됩니다. const el = document.querySelector(요소 선택자); el.addEventListener(이벤트, function () { 실행코드 }); const el = document.querySelector(요소 선택자); function function_name(){ 실행코드 }; el.addEventListener(이벤트, function_name); const el = document.querySelector(요소 선택자); el.on이벤트이름 = function () { 실행 코드..

[ Math 객체 ] Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해놓은 자바스크립트 표준 내장 객체입니다. Math 객체는 생성자가 따로 존재하지 않아 instance를 따로 생성하지 않고 바로 사용할 수 있습니다. 자주 사용하는 메서드는 다음과 같습니다. Math.min() Math.max() Math.random() Math.round() Math.ceil() Math.floor() [ 최솟값 & 최댓값 ] Math.min()과 Math.max() 는 인수로 받은 수 중 가장 작은 값과 가장 큰 값을 반환합니다. 만약 인수가 주어지지 않으면 각각 Infinity, -Infinity를 반환합니다. 또한 만약 인수중에 비교할 수 없는 값이 주어지면 NaN을 반환합니다. const m..

오늘은 웹 페이지에 시간을 나타내볼게요. 먼저 index.html과 clock.js 파일을 만든 뒤, html 문서의 내부에 다음과 같이 작성해주세요. 00:00:00 1. setInterval & setTimeout (1) setInterval(함수, 주기(ms)) setInterval 인자로 들어가는 함수를 주기마다 반복해주는 함수입니다. //콘솔창에 5초에 한 번 씩 "hello" 출력 function test(){ console.log("hello"); } setInterval(test, 5000); //함수에 인자가 필요할 때 function test2(str){ console.log(str); } setInterval(function(){ test("hello"); }, 5000); (2) c..

오늘은 form 에 이름을 입력하고 나면 웹 페이지에서 form 은 사라지고 Hello 이름이 표시되는 과정을 공부하겠습니다. 코드를 작성하고 나서 웹 페이지에 다음과 같이 나타나면 성공입니다! 1. HTML, CSS, JS 파일 만들고 연결하기 우선 각 파일들을 생성하고 연결해야겠죠? index.html, app.js, style.css 파일을 만들고 연결하겠습니다. 2. HTML 작성하기 부터 작성할까요? id는 login-form 으로 하겠습니다. "text" 타입의 태그를 작성할 건데 속성으로 최대 길이 15, 필수 입력, 안내 문구 What is your name?을 설정하겠습니다. 입력란이 있으면 서버로 제출할 수 있는 버튼도 있어야 겠죠? Log In 이름의 버튼도 같이 만들어 줍니다. 다음..

1. JavaScript의 실행 환경 브라우저와 Node.js 환경에는 자바스크립트 엔진을 내장하고 있기 때문에 자바스크립트는 브라우저 환경 또는 Node.js 환경에서 실행할 수 있습니다. 그렇다면 브라우저와 Node.js 환경의 차이점은 무엇일까요? 브라우저 Node.js 주된 목적 HTML, CSS, JS를 실행해 웹 페이지를 브라우저 화면에 렌더링하는 것 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것 DOM API 제공함 제공하지 않음 파일 시스템 지원하지 않음 지원함 [추가 지식] * DOM(Document Object Model) API: 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합 * 파일 시스템: 파일을 생성하고 수정할 수 있는 시스템 * 브라우저는 Web API인 FI..

JavaScript의 데이터 타입(Data Type) 1. 원시 타입(Primitive data type) : 변경 불가능한 불변 데이터입니다. Boolean 타입: 논리 요소를 나타냅니다. 값: true/false Null 타입: false랑은 다른 의미로, 변수가 비어있음을 나타냅니다. 값: null Undefined 타입: 생성 후 아무런 값을 할당받지 않은 변수가 갖는 타입입니다. 값: undefined Number 타입: 숫자를 나타내는 데이터 타입입니다. 2^53-1 부터 2^53-1까지 나타낼 수 있습니다. 값: 숫자 Number 타입은 정수, 실수, 2진수, 8진수, 16진수를 모두 표현할 수 있습니다. 2진수는 0b, 8진수는 0o, 16진수는 0x를 수 앞에 붙입니다. 숫자 타입은 추가..