프론트엔드(46)
-
[javascript] 이벤트와 이벤트 객체
모든 객체object는 고유의 Method()와 Property를 가지고 있다. document.getElimentById('choice').textContent = new Date(); //객체.메서드().프로퍼티 이벤트 The Event interface represents an event which takes place in the DOM. … Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. https://developer.mozilla.org/en-US/docs/Web/API/Event 쉽게 말해 정적인 상황..
2022.02.21 -
자바스크립트 응용편
카운트다운 타이머 1. 남은 시간을 계산하는 함수 var countdown = function (due) { var now = new Date(); var rest = due.getTime() - now.getTime(); var sec = Math.floor(rest / 1000 % 60); var min = Math.floor(rest / 1000 / 60) % 60; var hours = Math.floor(rest / 1000 / 60 / 60) % 24; var days = Math.floor(rest / 1000 / 60 / 60 / 24); var count = [days, hours, min, sec]; return count; } var goal = new Date(); goal.setH..
2021.05.03 -
자바스크립트 기본문법 2 (입력과 데이터 가공: 이벤트, 객체)
이벤트 document.getElementById('form').onsubmit=function(){ console.log('clicked'); } 이벤트에 대입하는 함수의 () 안에는 매개변수가 없고, {} 안에 return 명령어도 없음. => 매개변수와 반환 값이 없는 함수도 존재한다. * onsubmit 이벤트는 전송버튼이 아닌 부모요소 form 에서 발생한다 입력 내용 가져오기 document.getElementById('form').onsubmit=function(){ var search = document.getElementById('form').word1.value; document.getElementById('output').textContent=search+' 검색중...'; retur..
2021.04.23 -
[Javascript] switch문과 if 문
복수의 if 조건문은 switch 문으로 바꿀 수 있다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 값과 일치하는 case문이 없으면 default문이 실행된다. break가 없으면 이어지는 case문을 실행한다. let arg = prompt("값을 입력해주세요."); switch (arg) { case '0': case '1': alert( '0이나 1을 입력하셨습니다.' ); break; case '2': alert( '2를 입력하셨습니다.' ); break; case 3: alert( '이 코드는 절대..
2021.04.16 -
자바스크립트에서 =, ==, ===의 차이점
정의 = : 대입 연산자 왼쪽의 값을 오른쪽에 대입한다. == : 비교 연산자 두개의 operand를 같은 타입으로 변환 후 비교한다. to compare the identity of two operands even though, they are not of a similar type. === : 비교 연산자(stricter) 타입(형식)이 다른 경우 false를 반환한다. ex) 2 === "2" return false checks that two values are the same or not. 예시 = JavaScript Operators a = 2, b = 5, calculate c = a + b, and display c: Output: a = 2, b = 5, calculate c = a + ..
2021.04.14 -
Directives지시문: v-on
v-on v-on:이벤트 타입 = @이벤트타입 +1 +1 methods: 함수를 사용했을 때 인사 methods 내에서 function 생략 가능 v-on: 내에서 매개변수 생략 가능(매개변수가 없는 경우) 마우스이벤트 click, mouseover, dblclick title click over dblClick 이벤트 수정자 v-on:이벤트.수정자 {{a}} 응용 filter filter {{f}}
2021.03.02