본문 바로가기
[js] 자바스크립트로 끝말잇기 구현하기 자바스크립트를 이용하여, 끝말잇기를 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 순수 자바스크립트 화면 결과(Result 클릭)
[js] 자바스크립트로 구구단 구현하기(순수 자바스크립트/ vue.js) 자바스크립트를 이용하여, 구구단을 구현하는 예제입니다. 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 구현 방법 1. 순수 자바스크립트 2. vue.js 화면 결과 1. 순수 자바스크립트 2. vue.js 간단한 구현 내용으로 vue.js cdn을 설치하였습니다. 구구단 {{ num1 }} 곱하기 {{ num2 }} 는? //focus() 처리를 위하여 ref 사용 결과 {{result}} parseInt() String을 Number 타입으로 바꾸는 함수 입니다. 타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다. parseIng() 예제 parseInt("10"); // 10 parseInt("-10") // -10 parseInt("10.5")..
[js] 자바스크립트로 검색 기능 구현하기 form 에서 자주 사용하는 기능, 검색을 구현하는 법입니다. 화면 결과 html, css 수도: Australia Canberra Argentina Buenos Aires Austria Vienna Bahamas Nassau Belgium Brussels Canada Ottawa Chile Santiago China Beijing Cuba Havana Czechia Prague Denmark Copenhagen Ecuador Quito Egypt Cairo Finland Helsinki France Paris Germany Berlin Greece Athens Hungary Budapest India New Delhi script 코드 1) indexOf() function filter() { let ..
[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력 평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는 JSONPlaceholder 사용법을 알아보겠니다. 사이트 이동 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Fake online REST API for testing and prototyping When to use JSONPlaceholder is a free online REST API that you can use ..
[js] 자바스크립트 map(), filter() 사용법(ft. 배열) 배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. 결과를 "return ..." 리턴 값으로 추출합니다. 단, 실행문이 한 개만 반환될 경우, return 키워드와 {} 를 생략할 수 있습니다. 예시 cosnt a = numbers.map(number => { return number number < 3) map 함수 구문 array.map(callbackFunction(current value, index, array), thisArg) currentV..
[js/jQuery] input 값의 데이터를 ajax json 형식으로 전송 (ft. 이벤트페이지 ) 고객이 응모하는 이벤트 페이지를 제작할 때, 고객의 정보 및 개인정보 활용동의 체크 등의 데이터를 입력받는 부분이 필요합니다. 그리고 응모한 데이터를 넘기는 작업도 필요합니다. 이럴때 필요한 이벤트 페이지용, 개인정보 입력 후, 자바스크립트를 이용하여 유효성 검사를 한 후 ajax의 json type으로 데이터를 넘겨주는 작업을 하겠습니다. 구현내용: · UI: html 태그를 사용 · getElementById 를 이용한 객체 접근 방식 사용 · 올드한 방법인, form을 이용한 객체 접근 방식 사용 · 자바스크립트를 이용한 유효성 검사 · ajax json 타입으로 데이터 전송 유의사항: · ajax url 연결 안 됨 · 주소검색은 api 연결 안 됨 · 먼저 제이쿼리 스크립트 연결 getEleme..
[js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기 팝업창 코드 .box { text-align: center; margin-bottom: 10px; } .bgColor { width: 200px; height: 200px; margin: 0 auto; background-color: #f9b514; } 한번에 보기
[js] 자바스크립트 모달창(팝업창) 구현 자바스크립트를 이용하여 모달창(팝업창)을 만들겠습니다. 요즘에는 제이쿼리를 사용하지 않고, 순수한 자바스크립트, 바닐라 js를 이용한 기능 구현을 많이 합니다. 모달창 띄우기 구현내용 · 버튼 클릭시 모달창 open · 모달창을 제외한 배경(background)는 어두운 검은 배경 · X 버튼 클릭시 모달창 close · 검은 배경 클릭시 모달창 close 모달창(팝업창, 다이얼로그)창 띄우기 예제 html, javascript 모달창 open Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur quam nobis quis corrupti amet maxime neque, optio, in illo, voluptatibus cons..
[js] DOM과 BOM의 차이점 자바스크립트의 기본 DOM 과 BOM 에 대하여 알아보겠습니다. DOM(Document Object Model, 문서 객체 구조) 브라우저들은 사용자가 띄운 웹문서를 그 구성과 내용에 맞게 객체화하여 각 요소별(텍스트, 버튼, 이미지 등)으로 구조화 합니다. 이 요소들은 상,하위 구조나 병렬구조로 체계화 되는데 이 웹문서(document)에 대한 모든 내용을 담고있는 객체를 DOM 이라고 합니다. document는 window의 document (html 문서) 입니다. document object model(돔 객체)는 html과 javascript를 연결해주는 통역사 같은 역할입니다. 웹페이지 구조는 이 모든 태그들을 감싸고 있으며, 그내부는 다시 와 로 나누에 집니다. 태그에는 의 구조로 나뉘고, ..
[js] let vs const vs var (ft. var의 문제점, 호이스팅) 변수선언 방식인 let, const, var에 대한 차이점과 var의 문제점, hoisting에 대해 알아봅니다. variable, 변수는 프로그래밍 언어에서 우리가 처리해야 하는 데이터를 담을 수 있도록 도와주는, 즉 데이터를 담고 있는 값을 의미합니다. ES6에서 기존의 변수 var를 보완하기 위하여 나온 변수 선언 방식이 let과 const입니다. 더 이상 var 키워드는 사용하지 않는 것을 추천합니다. var의 문제점 ES6 이전에 사용해왔던 더 이상 사용하지 않는 변수 선언 방식입니다. 왜 더이상 사용하면 안 될까요? 변수는 선언하고 나서 값을 할당하는 것이 정상입니다. 하지만 var를 사용할 때는 이상하게도 선언하기 전에 변수의 값을 할당해도 작동이 됩니다. 예제 - var : 호이스팅 발생 ..
[js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를..
[js] input option 값 출력하기(ft. onchange onfocus) 홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용 -> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜 onchange, innerHTML 이용 · 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때) -> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때 1. 아래 label값이 탐구 1/탐구 2로 자동 리셋 2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋 if( value == "" ..
[js] 자바스크립트 회원가입 유효성 검사(ft. form input 정규식) 회원가입 페이지의 유효성 검사에 대하여 알아보겠습니다. 유효성 검사 회원가입 양식을 작성할 때, 필수요소를 빼먹거나, 비밀번호나 전화번호 등이 정보를 잘못 입력했을 경우, 유효성 검사를 통하여 사용자가 회원가입 정보를 잘못 입력하는 경우를 사전에 방지해주고, 비밀번호 재확인을 통하여 사용자로 하여금 본인이 입력한 데이터를 보다 정확하게 인지 시켜줍니다. 최근에 개인정보를 입력하는 사용자와 개인정보 데이터를 보관, 관리하는 개발자 입장에서 최대한 오류를 줄이기 위하여 좀 더 쉽게 정보를 입력하고, 관리하는 방법으로 폼들이 변화되고 있습니다. 최근 사용하는 폼 유형으로 회원가입 폼을 html으로 마크업 해보고, javascript를 이용하여 유효성 검사를 하겠습니다. (사용자 데이터를 처리하는 php 작업은..
[js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기 자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용 버튼 클릭시마다 화면 배경 색상 바꾸기 예제 색상 변경 function colorChange() { var color = ["#FC5C7D", "#6A82FB", "#38ef7d", "#fffbd5", "#b20a2c", "#CAC531"]; var num = Math.floor(Math.random() * color.length); //Math.random()이용하여 배열의 데이터 개수(length) 이용하여 배열의 인덱스, 변수 num이 랜덤으로 나옴 var..
[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) 자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다음, 이전) · 다음버튼 클릭 시 다음 이미지 순서대로 나타남 · 이전버튼 클릭 시 이전 이미지 순서대로 나타남 · 마지막 8번째 이미지 다음 버튼 클릭 시 return문을 사용하여 강제 종료 · 처음 1번째 이미지 이전버튼 클릭 시 return문을 사용하여 강제 종료 클릭시마다 이미지 변경 예제1 · click 이벤트를 onclick를 이용하여 구현 · 각자 저장되어있는 이미지 8장 사용 -> 이미지 사용이 번거로우신 분들은 예제2번으로 이동해주세요 html 이전 다음 css *{margin: 0;p..
[js/jQuery] 응용편_카운트업 숫자 올라가는 효과 구현. 숫자 자동 증가 자바스크립트, 제이쿼리의 setInterval, clearInterval 메서드를 이용하여 웹페이지에서 많이 사용되는 숫자 카운트업을 구현하겠습니다. 이전 카운트업 구현하기 포스트는 맛보기용 기초였고, 오늘은 실전편이라고 생각하시면 됩니다. 이전 포스트가 궁금하신 분은 아래 링크로 이동해주세요. https://goddino.tistory.com/20 [js/jQuery] 카운트업 숫자 올라가는 효과 구현하기 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. 이 효과를 javascript, jQuery를 이용하여 간단하게 구현하도록 해보겠습니다. 아래 소스를 확인해 주세요. 1. html 99 2. css .n goddino.tistory.com setInterval() / clear..
[js] 홈페이지 배너 팝업창 띄우기, 창닫기 홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에 띄울 배너를 만들어야겠지요? 저는 아래의 이벤트 배너를 사용하겠습니다. (사이즈: 500X500 px) window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 ..
반응형