본문 바로가기

javascript

(32)
es6 filter, includes, from 사용 HTML apple orange banana strawberry JS 모던 자바스크립트(javascript) 개발을 위한 ES6 강좌 내용 中 실습 예제 1 풀어보 실습 예제 1 풀어보기실습 예제 1 풀어보기
email.js 사용 메일폼 보낼때 사용 폼 양식 폼 라벨 메시지 보내는사람 이메일 메시지 타이틀 메시지 내용
메서드 체인 메서드가 객체를 반환하게 되면, 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출
콜백함수 일반적인 함수 호출 방법 function sum( num1, num2 ){ return num1 + num2; } console.log( sum( 1, 200 )); //complete 201 콜백 함수는 함수로써 다른 함수에 전달되며, 이는 외부 함수 내에서 일종의 루틴 또는 동작을 완성하기 위해 호출 function greeting( name ){ console.log( "반갑습니다." + name ); } //콜백 함수는 함수로써 다른 함수에 전달되며, 이는 외부 함수 내에서 일종의 루틴 또는 동작을 완성하기 위해 호출 function processUserInput( callback ){ var name = prompt( "이름을 입력해주세요." ); callback( name ); } proces..
javascript class 및 super ES6class ES6 super
룰렛 이벤트 룰렛이벤트 HTML SCSS main{ width:100%; $pW: 720; max-width:720px; margin:0 auto; .roulette_area{ display: table; text-align: center; width:100%; .roulette_box{ display:table-cell; vertical-align: middle; .roulette_center{ position: relative; width:100%; padding-bottom:100%; margin:pImg( 100, $pW ) 0 0 pImg( 30, $pW ); .btn_start{ display:block; width:pImg( 290, $pW ); margin:pImg( 180, $pW ) 0 0 pImg..
swiper 프로그래스바 슬라이드 swiper 프로그래스바 슬라이드HTML 1 2 3 4 / CSS *{ margin:0; padding:0; } html, body { position: relative; overflow: hidden; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .slide_list li{ display:block; float: left; width:100%; height: 100%; text-align: center;} .slide_list li p{ padding-top:20%; font..
초성으로 맞추는 단어 퍼즐 초성으로 맞추는 단어 퍼즐 HTML 초성으로 알아보는 단어 퍼즐 결과 확인 방갑습니다. 초성 타입 a입니다. 초성 타입 b입니다. 초성 타입 c입니다. 다시 하기 CSS #wrap{ max-width:720px; margin:0 auto;} .wrap_inner{ padding-top:50px;} .intro_box{ padding: 20px;} .intro_box h2{ font-size:34px; text-align: center; padding-bottom:20px;} .intro_box input{ display:block; width:250px; height:35px; margin:0 auto 30px;} .intro_box .btn_result{ display:block; width:250px..