본문 바로가기

분류 전체보기407

프론트엔드3-8. [javascript] setInterval과 setTimeout setInterval(func( ){자바스크립트 코드}, 일정 시간 간격) 지속적으로 일정한 시간 간격으로 함수를 호출해 코드를 실행 setTimeout(func(){자바스크립트 코드}, 일정 시간 간격) 단 한 번 일정한 시간 간격으로 함수를 호출해 코드를 실행 setInterval( ) setTimeout( ) 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 떄 사용 코드를 바로 실행하지 않고 일정시간 기다린 후 실행 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 반복주기를 밀리초(ms)단위로 받는다. 첫 번쨰 인자로 실행할 코드를 담고 있는 함수를 받고 두 번째 인자로 지연시간을 밀리초(ms)단위로 받는다. clearInterval( )메서드로 중지한다. clea.. 2022. 2. 10.
프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen) popup창을 띄우고 widnow객체의 함수로 동작하게 해본다. 1. popup html 작성 2. popup을 띄울 main winodw 창 1. 팝업창을 띄우는 생성 1) HTML 파일 팝업창 띄우기 2) js 구현 window.open( "URL(파일명)", "새 창 이름", "새 창 옵션" ) 새로운 창(새 탭)을 연다 새창을 표시하려면 window객체의 open( )함수를 생성해서 사용한다. 파일명을 적을때 만약 폴더가 다른 곳에 있으면 폴더 경로도 적어줘야 한다. 저기서 "w"는 이름이 아니고 창을 한 개만 띄게 해준다.(창을 재사용) "w"가 없으면 button을 누를때마다 팝업창이 무한대로 생성된다. 새 창 옵션에는 width, height, left, top, resizeable 등이 있.. 2022. 2. 10.
프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델) BOM(Browser Object Model) 웹브라우저와 관련된 객체의 집합 객체 모델 종류: window(최상위), location, navigator, history, screen, document DOM(Document Ojbect Model)으로 통합해서 말하기도 한다. 정확히는 자바스크립트가 아닌 웹브라우저가 제공하는 기능이다. 브라우저 창이 열리면 가장 먼저 Window 객체가 만들어지고 그 하위에 브라우저 각 요소에 해당하는 객체가 만들어진다. 자주 쓰이는 브라우저 내장 객체 window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체 브라우저 창 안에 존재하는 모든 요소의 최상위 객체 Document 웹 문서에서 태그를 만나면 만들어지는 객체로 HTML 문서정보를 가지고 있다. Hist.. 2022. 2. 9.
프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제 Date객체와 날짜 날짜와 시간을 표시하는 객체 Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용할 수 있다. Date 객체엔 '날짜만' 혹은 '시간만' 저장하는ㄴ것은 불가능 하고, 항상 날짜와 시간이 함께 저장된다. 월(Month), 요일(week)은 0부터 시작한다. (1월:0, 일요일:0) 객체 생성하기 new Date( ) : 인수없이 호출하면 현재 날짜와 시간이 저장된 Date 객체 반환 new Date(milliseconds) : UTC를 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환 예제) 날짜(년, 월, 일, 요일)와 시간(시 분 초) new Date(year, month, date,.. 2022. 2. 9.
프론트엔드3-4. JavaScript의 내장객체 String, Math, Array 1. String 1) length, indexOf, search indexOf와 search는 찾는 문자열이 없으면 -1 반환 더보기 더보기 2) 문자열 일부구하기 slice(index, index), substring(index, index), substr(index, count) 3) 문자열 변경하기 replace("기존문자열", "바꿀문자열"), toUpperCase( )와 toLowerCase( ) 4) 문자열 연결하기, 아스키 코드 찾기 txt1.concat(txt2), txt.charAt(인덱스), txt.charCodeAt(인덱스) 5) 자바스크립트는 배열형 변수에 [ ]하지 않아도 된다. 2. Math 더보기 더보기 첫번째 데이터는 x에 두번째 데이터는 y에 (연산된 결과가 양수이면 왼쪽.. 2022. 2. 9.
프론트엔트3-3. login form 만들기 / 이메일 분리하기 1. div와 ul을 이용해서 login form을 만들기 1. submit버튼을 이용하기 1) HTML 파일 로그인 아이디 비밀번호 submit버튼을 누르게 되면 원래는 바로 action이 실행되는데 onsubmit을 사용하게 되면 지정된 함수가 실행된다. submit 버튼의 실행 처음 이벤트가 발생되는 곳 -> type="submit" value="로그인" onsubmit으로 이동 return의 값이 true일 때면 action으로 이동(action이 실행된다.) false이면 현재 페이지 유지(아무일도 일어나지 않음) 여기서 true의 의미(아이디 비밀번호 둘 다 있을 때)와 false의 의미(아이디나 비밀 번호 둘 중 하나 없어도) 2) CSS 파일 더보기 2)-1 가운데 정렬 2)-2 main .. 2022. 2. 9.