front-end/JavaScript
-
setTimeout와 setInterval (5초 뒤 삭제되는 알림창)front-end/JavaScript 2023. 8. 23. 22:33
1. setTimeout 이란 작성된 코드를 일정 시간 이후 실행시켜 줍니다. setTimeout(function(){ 코드 }, 시간); 시간의 경우 ms 단위 1000ms = 1초 setTimeout(function(){ console.log('반갑습니다') }, 1000); 2. setInterval 이란 작성된 코드를 일정 시간마다 반복적으로 실행을 해줍니다. setInterval(function(){ 코드 }, 시간); setInterval(function(){console.log('HI')}, 3000); 3. 콜백 함수의 기능 addEventListener()과 같이 setTimeout()도 콜백 함수를 요구를 한다. 다른 곳에 만든 함수를 이용해도 작동을 합니다. setTimeout(함수,..
-
JS input, change 이벤트의 차이점front-end/JavaScript 2023. 8. 21. 21:06
1. input 태그에서 발생하는 이벤트 input 이벤트 즉시 반응 다양한 변경에 반응 change 이벤트 포커스가 다른 곳으로 옮길 경우 발생 document.getElementById('ID').addEventListener('input', function(){ console.log('글자입력중') }); - 글자를 한글자씩 변화가 생기면 console.log에서 실행이 된다. document.getElementById('ID').addEventListener('change', function(){ console.log('글자입력됨') }); - 글자를 입력후 input 창에서 벗어나면 실행이 된다. - 용도는 무엇일까? input 이벤트의 경우 실시간 검색 필터링 효과 글자 제한 수 확인 실시간 ..
-
JS if else 조건문front-end/JavaScript 2023. 8. 21. 20:32
1. if문이란 특정 조건을 만족시(참의 경우) 실행하는 조건문 if 문 이외 else if문으로 다양한 참의 조건을 만들 수 있다. else if의 갯수 제한은 없다. if (num < 1){ console.log('1보다 작다') } else if (num < 5) { console.log('5보다 작다') } else { console.log('5보다 크다') } 2. 조건식 중 거짓으로 취급하는 값 false undefined null 0 NaN ("") if (null){ console.log('나올까') } else { console.log('말까') } // 말까 - 비교 연산자 사용 가능 ==, === 같다 != 다른지 크다 작다 = 크거나 작거나
-
Map, Filter 함수front-end/JavaScript 2023. 8. 10. 09:06
1. map() 함수 배열의 내장 함수 반복 되는 컴포넌트를 렌더링 하기 위해 사용 주어진 함수를 호출한 결과를 모아서 새로운 배열을 생성한다. 배열이름.map(콜백함수) let teacherList = ['AAA', 'BBB', 'CCC', 'DDD'] let teacherRender = teacherList.map(item => {item}) // 일반적인 case console.log(teacherList[0]+"님") // map 함수 let newList = teacherList.map(item => item+'님') console.log(newList) 2. Filter 함수 배열의 각 요소에 대해서 주어진 함수의 결과 값이 ture인 요소들만 모아서 새로운 배열로 반환하는 함수 find의 경..
-
JS function 문법과 매개변수(parameter), addEventListenerfront-end/JavaScript 2023. 8. 9. 22:26
1. function(함수)의 사용하는 이유 재사용성 가독성 모듈화 function 작명(){ 코드내용 } 2. 매개변수(parameter)란 변수의 한 가지 종류이며, 함수 등에서 input의 데이터에 해당된다. 하나의 속성값 또는 object가 될 수 있다. 알림창입니다. function 알림창(작동내용){ document.getElementById('alert').style.display = 작동내용; } 위 코드 창을 열기 닫기를 하는 2가지를 만들 수가 있다. 열기 닫기 알림창('block'); // 창 열기 // document.getElementById('alert').style.display = 'block'; 알림창('none'); // 창 닫기 // document.getElementB..
-
javascript 변수(var, let, const 차이점)front-end/JavaScript 2023. 8. 8. 21:51
1. java와 javascript의 차이점 Java int age = 20; char alpha = 'a'; double avg = 78.4; 강력한 자료형 javascript var age = 20; var alpha = 'a'; avg = 35.5; 2. var / let / const 차이점 - Var 변수 재선언이 가능하다. 변수 재할당이 가능하다. 호이스팅시 변수값이 초기화 된다. 전역 범위를 가지고 있다. 단 함수 내에서 선언시 함수 범위로 지정이 된다. var a = 1; var a = 2; //가능 var b = 1; b = 2; //가능 // 함수 범위 내에서만 사용 가능 function helloFunction() { var hello = "hello"; } console.log(he..
-
javascript의 개요front-end/JavaScript 2023. 8. 7. 23:15
1. javascript란? 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어 Front-end (리액트, next js) Back-end(NODE JS) 모바일 애플리케이션, dataBase(MongoDB, Realm) 머신러닝/ 딥러닝(Tensor Flow.js) AR/VR(AR.js) 2. javascript의 특징 모든 웹 브라우저에서 동작이 가능하다. 웹 브라우저에서 실행 결과를 즉시 확인힌다. 다양한 용도의 프로그램 개발이 가능하다. 다양한 자바스크립트 공개 API가 많다. 다양한 라이브러리와 프레임워크가 있다. 3. HTML의 조작과 변경 html 조작과 변경으로 얻는 이점 탭, 모델 등 웹페이지 UI를 만들 수 있다. 유저가 입력한 데이터를 검사하는 것이 가능하다. 유저가..