링크 시 매개변수(parameter)파라미터 값 넘기기
2021. 12. 21. 16:47ㆍStudy/JavaScript
귤 = 매개변수
링크 시 매개변수(parameter)파라미터 값 넘기기
페이지 이동 시 JavaScript를 이용하여 parameter값을 전달받을 수 있다.
매개변수 1개 일 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>매개변수 1개일 때</title>
</head>
<body>
<div id="imgs">링크된 페이지</div>
<script>
// 넘어온 값 ex2.html?num=1
var key, value; // 전역변수 선언
function getParams() {
// 현재 페이지의 url // ex2.html?num=1
var url = decodeURIComponent(location.href);
// url이 encodeURIComponent 로 인코딩 되었을때는 다시 디코딩 해준다.
url = decodeURIComponent(url); // ex2.html?num=1
var params='';
// url에서 '?' 문자 이후의 파라미터 문자열까지 자르기
params = url.substring( url.indexOf('?')+1, url.length ); // params = "num=1"
// 'abcdefg'.substring(2,40);=> 'cdef'
key = params.split("=")[0]; // key='num'
value = params.split("=")[1]; // value='1'
key = Number(value); // key=1
//console.log(key);
//console.log(typeof(key));
}
getParams(); //함수호출
var imgs = document.getElementById('imgs');
if(key==1){
imgs.style.background = 'red';
}else if(key==2){
imgs.style.background = 'blue';
}else if(key==3){
imgs.style.background = 'green';
}
</script>
</body>
</html>
매개변수 2개 일 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>매개변수 2개 일 때</title>
<script>
//ex2.html?num=1&name=홍길동
function getParams() {
// 파라미터가 담길 배열
var param = new Array();
// 현재 페이지의 url
var url = decodeURIComponent(location.href);
// url이 encodeURIComponent 로 인코딩 되었을때는 다시 디코딩 해준다.
url = decodeURIComponent(url); // ex2.html?num=1&name=홍길동
var params='';
// url에서 '?' 문자 이후의 파라미터 문자열까지 자르기
params = url.substring( url.indexOf('?')+1, url.length );
// 'abcdefg'.substring(2,40);=> 'cdef'
// params = "num=1&name=홍길동"
// 파라미터 구분자("&") 로 분리
params = params.split("&"); // params[0]='num=1' , params[1]='name=홍길동'
//params[0] => 'num=100' , params[1] => 'name=홍길동'
// params 배열을 다시 "=" 구분자로 분리하여 param 배열에 key = value 로 담는다.
var size = params.length; //배열의 개수 2개
var key, value;
for(var i=0 ; i < size ; i++) {
key = params[i].split("=")[0]; //key =[num, name];
value = params[i].split("=")[1]; //value = [1, 홍길동];
param[key] = value; // param['num'] = '100'; param['name'] = 홍길동;
}
console.log(param['num']);
console.log(param['name']);
}
getParams(); //함수호출
</script>
</head>
<body>
링크된 페이지
</body>
</html>
const obj = {
0: "bFleta: 16.61",
1: "pCHERRY: 8.53",
}
const newObj = Object.values(obj).reduce((acc, cur_ => {
const [key, value] = cur.splite(": ");
acc[key] = Number(value);
return acc;
}, {});
console.log(newObj); // { bFleta: 16.62, pCHERRY: 8.53 }
'Study > JavaScript' 카테고리의 다른 글
| 해상도별 이미지 교체 window resize (0) | 2022.01.11 |
|---|---|
| 클릭 시 Video 주소 바꾸기 (0) | 2021.12.23 |
| Mobile 홈 화면 전체 화면 모드 (0) | 2021.12.21 |
| 스마트폰 접속시 모바일페이지로 접속 (0) | 2021.12.21 |
| 숫자 천 단위마다 콤마(,) 찍기 (0) | 2021.12.17 |
