라벨이 JS인 게시물 표시

[JS] map, filter

🔹 기본 개념 정리 map : 배열의 각 요소를 변형하여 새로운 배열을 반환 filter : 조건을 만족하는 요소만 남겨 새로운 배열을 반환 🟢 React에서 map 활용 예제 ✅ 리스트 렌더링 import React from "react"; const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"]; function FruitList() { return ( {fruits.map((fruit, index) => ( {fruit} ))} ); } export default FruitList; 📌 설명 : map 을 사용해 fruits 배열의 데이터를 <li> 태그로 변환하여 렌더링함. ✅ 객체 배열에서 map 사용 const users = [ { id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Charlie" }, ]; function UserList() { return ( {users.map((user) => ( {user.name} ))} ); } export default UserList; 📌 설명 : key 속성은 React에서 필수이며, id 를 키 값으로 사용. 🔵 React에서 filter 활용 예제 ✅ 특정 조건의 데이터만 필터링 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; function EvenNumbers() { const evenNumbers = numbers.filter((num) => num % 2 === 0); r...

[JS] Video 태그 제어 방법

기본적인 제어 방법과 유용할 것 같은 옵션들 https://www.w3schools.com/tags/ref_av_dom.asp

[JS] History API : 스크롤 복원

if ( 'scrollRestoration' in history ) {   // Back off, browser, I got this...   history . scrollRestoration = 'manual' ; } https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

[jQuery] 로또 번호 생성기

1. 게임 횟수 추가 2. 본인 게임 회차 추가 3. 고정 번호 추가

[JS] Keycode 출력 사이트

http://keycode.info/ 대박

[JS] 문항 합계 구하기 - 배열

<div> <table id="question"> <tr> <th>1번 문항</th> <td><input type="radio" name="question1" id="qone1" value="1" /></td> <td><input type="radio" name="question1" id="qone2" value="2" /></td> <td><input type="radio" name="question1" id="qone3" value="3" /></td> <td><input type="radio" name="question1" id="qone4" value="4" /></td> </tr> <tr> <th>2번 문항</th> <td><input type="radio" name="question2" id="qtwo1" value="1" /></td> <td><input type="radio" name="question2" id="qtwo2" value="2" /></td> <td><input type="radio" name...

[JS] 금액 콤마

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ko"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <style type="text/css"> *{margin:0;padding:0;} </style> </head> <body> <div class="set po1"> <input type="text" name="item01" id="item01" readonly="readonly" value="1" /> <a href="#" class="btn_act1">+</a> <a href="#" class="btn_act2">-</a> </div> <div class="set po2"> <input type="text" name="item02" id=...

[JS] 홀수, 짝수 구하기

var  cosNumlength = $("#ul > li").length; if(cosNumlength%2 == 0){     짝수 } else {     홀수 }

[JS]도메인 체크

// 곧바로 현재 페이지 주소 출력 document.writeln(location.href); // 변수에 넣어서 출력 var s = location.href; document.writeln(s); // 도메인 document.location.href.match(/http[s]*:\/\/([a-zA-Z0-9\-\.]*)/)[1] var link =  document.location.href; console.log(link); // 파라미터 var para = document.location.href.split("?"); console.log(para); //ex $(window).load(function(){ var url =  document.location.href; if(url.indexOf('#')!=-1){ var urlSplit = url.split('#'), para = '.' +urlSplit[1].split('=')[1], listLink = $('ul.tab-js > li > a'+para); listLink.trigger("click"); } });

[JS] 모바일 사이트로 이동 스크립트

<script language="javascript" type="text/javascript"> //<![CDATA[ var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', ' LG', 'MOT', 'SAMSUNG', 'SonyEricsson'); for (var word in mobileKeyWords){ if (navigator.userAgent.match(mobileKeyWords[word]) !=null){ location.href = "m.com "; break; } } //]]> </script>

[JS] 모바일 플리킹

이것 때문에 계속 머리 아프다... 일단 처리는 되었지만 괜찮은 예제가 있어서 적어 놓음. 언제 분석 해야지 [출처] http://dohoons.com/test/flick/ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flick Navigation</title> <link href="/test/flick/common.css" rel="stylesheet" type="text/css"></link> <style type="text/css"> h1 { font-size:16px; font-weight:bold; } h2 { margin-top:10px; text-align:center; } #touchSlider { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; } #touchSlider ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; } #touchSlider ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; } #touchSlider2 { width:200px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; } #touchSlider2 ul { width:99999px; height:150px; position:absolute; top:0; left:0; ov...

[JS] 페이지 레이어 팝업

딱히 이걸 뭐라고 해야 하는 지 모르겠다; 퀵매뉴 처럼 옆에 붙어 있다가 누르면 나와서 페이지 전체에 보여주는 팝업이다. 처음에는 fixed로 옆에 붙어서 따라다니다가 레이어를 펼치면 absolute로 성격을 바꾸고 기존 wrap는 숨긴다. 와이드 모니터를 사용하는 사람들에게는...유용할듯? <style type="text/css"> .layOutAd{position:fixed;top:0;left:50%;z-index:9999;min-width:100%;min-height:100%;margin-left:638px;} .layOutAd .layOutWrap{position:relative;min-width:100%;min-height:100%;} .layOutAd .layOutWrap #layBtnAd{display:block;width:64px;height:234px;position:absolute;top:50%;cursor:pointer;text-indent:-9999px;} .layOutAd .layOutWrap .off{left:-64px;margin-top:-117px;background:url("오프이미지") no-repeat 0 0;} .layOutAd .layOutWrap .on{left:0;margin-top:-117px;background:url("온이미지") no-repeat 0 0;} </style> <script type="text/javascript"> jQuery( document ).ready(function(){ jQuery("#layBtnAd").live("click", function(){ layOutLeft(); }); }); function layOutLeft(){ var layBtnClass = jQuery("#...

[JS] image On/Off

가장 많이 보고 사용했던 소스인듯 갑자기 사용하고 싶을때 종종 사용함. // 이미지 오버   function imageOver(imgs) { imgs.src = imgs.src.replace("off.gif", "on.gif"); } function imageOut(imgs) { imgs.src = imgs.src.replace("on.gif", "off.gif"); } onmouseover="imageOver(this)" onmouseout="imageOut(this)"

[JS] input onfocus

onfocus="this.style.backgroundImage='none', this.style.backgroundColor='#fff';" onclick="if(this.value=='강아지')this.value='';" onblur="if(this.value =='') this.value='강아지';"  

[JS, HTML5, JQuery] 유용한 정보

[ Javascript 관련 ]  http://blog.naver.com/seogi1004/110110498345  - JS Tip & Tech (1), OOP 기초  http://blog.naver.com/seogi1004/110110870056  - JS Tip & Tech (2), 프로토타입  http://blog.naver.com/seogi1004/110111378492  - JS Tip & Tech (3), 상속  http://blog.naver.com/seogi1004/110111856643  - JS Tip & Tech (4), 콜백 함수  http://blog.naver.com/seogi1004/110112955634  - JS Tip & Tech (5), 프레임워크 구현  http://blog.naver.com/seogi1004/110117013902  - JS Tip & Tech (6), 프레임워크 구현 심화  http://blog.naver.com/seogi1004/110120770472  - JS Tip & Tech (7), 클로저  [ HTML5 관련 ]  http://blog.naver.com/seogi1004/110095812775  - HTML5 Tip & Tech (1), 기초  http://blog.naver.com/seogi1004/110096142093  - HTML5 Tip & Tech (2), Drag & Drop  http://blog.naver.com/seogi1004/110096740941  - HTML5 Tip & Tech (3), Web Database  http://blog.naver.com/seogi1004/110098886402 ...

[JS] Scroll Layer : 신현석

페이지 스크롤에 따라서 부드럽게 움직이는 레이어를 만드는 스크립트이다. 쇼핑몰이나 웹사이트에서 사이트 오른쪽에 스크롤을 따라다니는 탑버튼이나 퀵메뉴, 윙배너 구현에 사용할 수 있다. IE6, IE7, IE8, FF3.6, Opera10.50, Safari4에서 테스트 되었다. IE의 쿽스모드와 표준모드 양쪽에서 작동한다. 코드 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>SmoothMovingLayer Demo</title> <script type="text/javascript"> //<![CDATA[ function initMoving(target, position, topLimit, btmLimit) { if (!target) return false; var obj = target; obj.initTop = position; obj.topLimit = topLimit; obj.bottomLimit = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - btmLimit - obj.offsetHeight; obj.style.position = "absolute"; obj.top = obj.initTop; obj.left = obj.initLeft; if (typeof(window.pageYOffset) == "number") { //WebKit obj.ge...

[JS] Tab : 신현석

탭으로 구성되어 있어서 탭을 누를때마다 선택적으로 다른 컨텐츠를 보여주는 효과. tab역할을 하는 <a>에 class="tab" 지정합니다. tab역할을 하는 <a>의 href에는 클릭시 나타나는 컨텐츠의 id를 지정합니다. initTabMenu()에 tab을 포함하는 엘리먼트의 id를 지정합니다. 지정된 id안에서 class가 tab인 모든 <a>에 기능을 부여합니다. tab이 이미지일경우 "_on.gif" 이미지를 마우스를 올리거나 클릭했을 때에 보여줍니다. Script // Tab Content function initTabMenu(tabContainerID) { var tabContainer = document.getElementById(tabContainerID); var tabAnchor = tabContainer.getElementsByTagName("a"); var i = 0; for(i=0; i<tabAnchor.length; i++) { if (tabAnchor.item(i).className == "tab") thismenu = tabAnchor.item(i); else continue; thismenu.container = tabContainer; thismenu.targetEl = document.getElementById(tabAnchor.item(i).href.split("#")[1]); thismenu.targetEl.style.display = "none"; thismenu.imgEl = thismenu.getElementsByTagName("img").item(0); thismenu.onclick = function tabMenuClick() { currentmenu = this.contai...