본문 바로가기

Langauge/JavaScript

 (23)
[JavaScript] 객관식문제 만들기 타이머만들기 및 객체배열을 사용한 객관식문제를 만들어 본다. 1. 타이머함수 만들기 1. 이벤트 소스 잡기 const timer_div = document.querySelector("div#timer"); 2. 변수 초기화하기 let time = 600; // 타이머 시간을 10분으로 지정함. 초단위로 600초(== 10분) 3. 타이머 함수 만들기 분과 초를 나타내는 함수로, 언제든지 호출 가능한 함수를 생성한다. 10분부터 시작하여 -1 씩 감소한다. minute = parseInt(time / 60); // time = 600 을 기준으로 할때, parseInt() 로 소수부는 없애고, 분단위(time / 60) 즉, 정수만 가져온다. second = time % 60; // time = 600 을..
[JavaScript] 타이머 만들기 1. 타이머 시작 1. 이벤트 소스 잡기 타이머를 보여줄 장소인 이벤트 소스를 잡는다. 다음과 같이 두가지 방식이 있으며, 두번째 방식으로 사용할 것이다. querySelector 변수명은 아무거나 상관없다. const timer = document.getElementById("timer"); const timer_div = document.querySelector("div#timer"); const timer_div = document.querySelector("div#timer"); 2. 변수 초기화하기 시작할 타이머 시간을 초기화시킨다. 초단위 기준이다. 10분부터 시작하는 것으로 지정했다. 600초는 10분과 같다. let time = 600; 3. 타이머 함수 만들기 분과 초를 나타내는 함수로,..
[JavaScript] 시계 만들기 1. 3초마다 경고창 띄우는 함수 생성하기 1. 경고창 만들기 함수 생성하는 방법은 다음과 같이 두가지 방식이 있으며, 첫번째 방식으로 사용할 것이다. ① 1번째 방식 function 함수명() { alert(); } ② 2번째 방식 const 함수명 = function() { alert(); } 2. 3초마다 경고창 띄우는 함수 생성하기 문서가 로딩되어진 후 func_timebomb_1_loop() 함수가 호출되어진다. function func_timebomb_1_loop() { // func_timebomb_1_loop 은 함수명이다. func_timebomb_1(); // 펑펑펑~~ setTimeout(func_timebomb_1_loop, 3000); } function func_timebomb_..
[JavaScript] class 를 사용한 객체 배열 ES6(ECMAScript 6)에서 나온 class 를 사용하여 객체를 만들고 select 태그를 이용해 선택한 인물의 이미지 및 정보가 화면에 나타내기 1. class 를 사용하여 객체 생성하기 JavaScript Classes 는 ES6(ECMAScript 6) 이다. >> 문법 3. 세터 - set xxx(value) { this.속성명 = value; } 자바와 같이 변수명(속성명) 을 재설정한다. throw new Error() 와 alert() 는 사용자가 정의하는 오류를 발생시킨다. F12 콘솔창에 오류메시지가 나타나며, 다음과 같은 차이가 있다. throw new Error() : 오류메시지를 띄워주고 멈춘다. alert() : 오류메시지를 띄워주고 다음으로 넘어간다. 4. 게터 - get..
[JavaScript] 객체 배열 1. 배열 생성하기 photo:"iyou.jpg" : 아래의 이미지파일은 같은 경로 안이므로 파일명만 입력해주었다. special:"가수 겸 탤런트 팬들이 많음" : 속성값 안에 태그와 같이 넣어줄 수 있다. const arrPerson = [{name:"아이유", photo:"iyou.jpg", age:28, address:"서울시 강동구", special:"가수 겸 탤런트 팬들이 많음"}, {name:"김태희", photo:"kimth.jpg", age:27, address:"서울시 강서구", special:"탤런트 팬들이 많음"}, {name:"박보영", photo:"parkby.jpg", age:26, address:"서울시 강남구", special:"탤런트 및 영화배우 팬들이 많음"}]; /* ..
[JavaScript] 배열(5) - 계산서 만들기 및 window.onload, alert(), console.log() 1. window.onload / alert() / console.log() 알아보기 1. window.onload = function() : window.onload = function() { } 은 웹브라우저에 페이지 로딩이 끝나면 자동적으로 발생되어지는 함수 이다. 즉, body 태그 안에 내용이 실행되고 해당 함수가 실행되어지는 것이다. 태그 안에 태그를 작성하는 경우에 필수적으로 입력해주어야 한다!! window.onload = function() { } 2. alert() : alert() 는 주로 메시지를 띄우는 대화상자 입니다. 경고창 메시지를 띄울 때도 자주 사용한다. alert('alert 는 주로 메시지를 띄우는 대화상자 입니다.'); 3. console.log() : console...
[JavaScript] 배열(4) - ES6 에 새로 도입된 배열의 메소드 1. 태그 vs. 노드 vs. 엘리먼트 태그 - 태그만을 지칭한다. 노드 - 각각을 노드라고 한다. (* 총점2 ==>Text 노드라고 한다.) , 총점2 , 엘리먼트 - 태그와 text를 묶어서 엘리먼트라고 한다. 총점2 총점2 최저가격: - 최고가격: 검색 2. NodeList(노드리스트) 사과 딸기 수박 참외 const li_list_1 = document.querySelectorAll("div#div_fruit > ul:first-child > li"); NodeList(4) [li, li, li, li] 와 같은 형태로 콘솔창(F12) 에 출력된다. li_list_1 은 4개의 li 태그를 가지고 있는 NodeList(배열과 비슷한 구조)이다. 사과 딸기 수박 참외 ----------------..
[JavaScript] 배열(3) - 배열명.map() 메소드, == 와 === 차이점, children 1. 배열명.map(function(item, index, array){ }) : 반복문을 돌며, 배열 안의 요소들을 1대1로 짝지어 새로운 배열을 만들어 주는 것이다. item - 현재 처리중인 배열의 각 요소(배열값). 배열은 모두 string 타입이다. index - 처리중인 배열요소의 인덱스번호. 생략가능하다(선택가능). array - forEach()가 적용되고 있는 해당 배열 즉, 자기자신. 생략가능하다(선택가능). ※ 화살표함수(Arrow function)란 ? 배열명.map(function(item, index, array){ }); 에서 위의 코드를 function 키워드 대신 화살표(=>)를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 1. function 대신 화살표(=>)..

티스토리툴바