html
<body>
<main class="large">
<h1>URL에?id=(ID)&name=(이름)&age=(나이)를<br>추가해서 실행해 주세요.</h1>
<table>
<tr><th>ID</th><td class="id"></td></tr>
<tr><th>name</th><td class="name"></td></tr>
<tr><th>age</th><td class="age"></td></tr>
</table>
</main>
</body>
Javascript
//URL + ? + URI
//URI 값을 찾아와서 화면에 출력하기
//URL 값 가져와(location.search) URI를 분리해(split("")) ID, name, age로 한번더 분리(split("")) 저장할 변수 선언 -> 정규표현식사용법 알기
//.filter 사용법
//forEach로 반복하여 값을 한번 더 쪼개고 저장할 변수 선언
// 쪼갠값을 kew와 value 값으로 따로 저장할 변수 선언및 할당 -> decodeURIComponent() 인코딩된 텍스트를 디코딩 시켜준다.
//출력될공간 정의
const hashes = {}; //쪼갠 값들이 매칭될 수 있게 설정해서 넣을수 있는 객체 타입 선언
const parameters = location.search.split(/&|\?/).filter((value) => { return value.includes("=") }); //& 와 ? 를 기준으로 나누고, 그 값에서 =을 포함한 값안 상수에 넣어라.
parameters.forEach((parameter) => {
const parameterList = parameter.split("=");
const key = parameterList[0];
const value = decodeURIComponent(parameterList[1]); //디코딩메서드
hashes[key] = value;
});
if(hashes["id"] !== null) {
document.querySelector(".id").innerHTML = hashes["id"];
}
if(hashes["name"] !== null) {
document.querySelector(".name").innerHTML = hashes["name"];
}
if(hashes["age"] !== null) {
document.querySelector(".age").innerHTML = hashes["age"];
}'Javascript > GMA(2302~)' 카테고리의 다른 글
| 230607 자바스크립트 옵션태그활용 , forEach( ), 배열객체 출력하기 (0) | 2023.06.07 |
|---|---|
| 230602 자바스크립트 배열객체 forEach로 출력하기 (0) | 2023.06.02 |
| 230530 자바스크립트 예제 - 텍스트입력시 몇글자 인지 확인하기(Keydown 이벤트 / .value / .length) (0) | 2023.05.30 |
| 230530 자바스크립트 예제 - 버튼클릭시 색상변경 (*setProperty / Math.random / hsl) (0) | 2023.05.30 |
| 230502 자바스크립트 캔버스 웹브라우저 안에서 움직이는 도형 만들기 (0) | 2023.05.18 |
