티스토리 뷰
22-12-29 JS기본- 네트워킹시 json 형변환 , 이벤트 핸들러, 이벤트 모델, BOM, DOM , 태그선택, 태그의 속성 제어하기
JadeStone 2022. 12. 29. 20:36
# 이 내용은 반드시 암기해야함.
*다른 서버와 데이터를 주고받는 통신을 하게되는 때가 있다.
*문자열로 다른 서버와 데이터를 주고받을 수 있지만 객체로는 주고 받을 수 없다.
이 때 JSON의 형식으로 문자열로 바꿔줘서 보내줘야함.
( JSON 은 자바스크립트의 객체는 아니고 객체처럼 표현하는 표기법임)
-문자열로 형변환해서 데이터를 보내주고, 받은 문자열로된 데이터는 JSON 으로 다시 형변환해서 사용한다고 생각하면 됨.
*제이슨을 -> 문자열로
JSON.stringify(data);
문자열을 -> 제이슨으로
JSON.parse(문자열);
이 때 키, 값이 전부 " "로 묶여 있어야한다. 안그러면 에러가 발생. 꼭 쌍따옴표(" ") 로 묶어줘야됨.
여기를 보면 오른 쪽 아래에 쌍따옴표로 키와 값을 묶어주지 않아서 왼쪽에서 에러가 발생했음.
그래서 key, value 를 각각 쌍따옴표(" ")로 묶어줬더니 아래와 같이 에러 없이 잘 처리되었다.
이점 꼭 기억해둬야한다.
<body>
<script>
var data = [
{id: 'aaa123', title: 'aaa', content:'a...'},
{id: 'bbb123', title: 'bbb', content:'b...'},
{id: 'ccc123', title: 'ccc', content:'c...'},
];
//console.log(data);
//JS객체를 JSON문자열로 형변환
var str = JSON.stringify(data);
console.log(str);
//JSON문자열을 JS객체로 형변환
var obj = JSON.parse(str);
console.log(obj);
//단, 문자열을 객체로 변경할 때는 엄격한 규칙이 있습니다.
//key, value가 "" 처리어야 합니다.
var result = JSON.parse('{"id": "aaa123"}');
console.log(result);
</script>
</body>결과
<자바스크립트 이벤트핸들러>
*이벤트 -> 사용자의 동작
핸들러 -> 사용자의 동작을 제어하는 함수
*인라인 이벤트 모델, 기본 이벤트 모델, 표준 이벤트 모델
이 세가지 방법을 다 알고있으면 좋음.
핸들링 하기 위해서는 먼저 이벤트 종류들을 먼저 알아야함.
*이름을 보면 어떤 이벤트를 다루는지 대부분 다 알수있음.
* click, keyup, change(값이 변경되었을 때) , load -> 이정도만 알고있기.
focus ( input이나 textarea 같은데 사용됨) 이거도 종종 사용됨.
*이벤트 앞에 on 이라는 키워드가 붙음
onclick , onfocus, onchange 이런식으로.
#인라인 이벤트 모델
* 위에 사진을 보면 중간에처럼
태그 안에 onclick="console.log('출력')" 처럼 모든 자바스크립트 문법을 쓸 수 있음.
자바스크립트 문법이 길어지면 이렇게 쓰기 어렵기 떄문에
아래처럼
선언적 함수를 작성해놓고 호출해서 사용한다.
코드
<body>
<button onclick="aaa();">인라인이벤트</button>
<!-- 태그자체는 객체. 인라인에서 this 키워드를 넣으면 태그 나 자신(태그-객체)을 가리킴-->
<button onclick="bbb(this);">1</button>
<button onclick="bbb(this);">2</button>
<button onclick="bbb(this);">3</button>
<script>
//인라인이벤트 - 함수의 선언은 script에 하고, 태그에서 연결
function aaa(){
alert(1);
}
function bbb(a){
//this가 태그에서 사용되면 태그 자기 자신을 가르킵니다.
// console.log(a);
a.innerHTML = 'hello';
}
</script>
</body>결과
1, 2 ,3 버튼을 누르면 값이 hello로 바뀐다.
*익명함수로 연결하는 방식.
*태그를 JS(script 태그) 내에 얻어와서 script내에서
태그에 익명함수를 걸어서 실행.
* document.getElementByld(" 가져오고싶은 태그의 ID ");
이렇게 해서 가져오고싶은 태그를 가져온다.
* 기본이벤트를 사용할 때는
script 태그가 취득할 태그보다 아래 쪽에 위치해야함.
이유는 스크립트 내에서 태그를 불러오려고 하는데
스크립트 태그가 불러오려는 태그보다 위에 위치해 있으면
태그를 호출할 때 취특하고자 하는 태그는 존재 하지 않는 상태이기 때문에
없는 값을 호출 한다고 에러 발생.
아래 사진 참고.
스크립트 태그를 아래에 위치해놓으면 제대로 동작됨.
코드
<body>
<button id="btn">기본이벤트</button>
<script>
//취득할 태그보다 아래에 있어야 합니다.
var a = document.getElementById("btn");
a.onclick = function(){
console.log('기본이벤트');
console.log(this);//자기자신
console.log(a); //태그자신
}
</script>
</body>결과
하지만 이벤트 태그 사용시 취득할 태그보다 script 태그를 위에 선언하더라도
제대로 동작하게 하는 방법이 있음.
바로 onload 이벤트 사용 하는 법.
아래에서 마저 확인.
# onload 이벤트 사용시 스크립트를 위에 작성할수 있음.
* 주의점 : onload는 화면별로 1개만 사용할 수 있다는 점 잘 기억해두자.
* 사용법을 주의해서 알아두자.
---------------------------------------------------------------------------------------------------------
<body>
<script>
//화면 로딩이 완료된 이후에 실행 - onload는 화면별로 1개만 사용할 수 있습니다.
window.onload = function(){
var a = document.getElementById("btn");
a.onclick = function(){
console.log('기본 이벤트');
}
}
</script>
<button id="btn">기본이벤트</button>
</body>결과
*표준 이벤트의 장점은
동일한 이벤트를 여러개 사용 가능합니다. (이벤트 체이닝이 가능)
*사용 예시
-addEventListener("이벤트명", 함수) 이렇게 사용하는데.
(이 때, 함수자리에다가 함수() 이렇게 소괄호를 붙이지 않고 함수이름만 쓴다는 점 주의하자.)
또한
선언해 놓은 함수명을 적지 않고
addEventListener("이벤트명", function(){});
이렇게 함수를 호출하지 않고 함수를 바로 선언해서 사용 가능.
코드
<body>
<button id="btn">표준이벤트</button>
<script>
//표준이벤트 - 는 동일한 이벤트를 체이닝할 수 있음.
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log("표준이벤트");
});
btn.addEventListener("click", function () {
console.log("표준이벤트2");
});
//1st
// function aaa(){
// console.log("표준이벤트")
// }
</script>
</body>결과
######### this 키워드 #########
*자바에서의 this랑은 개념이 조금 다르니까 주의해서 기억해두자.
<script>
//함수에서의 this -> window라는 최상위 객체
//이벤트에서의 this -> 태그자신
var a = 1; //전역변수 a는 window에 선언됨
function aaa(){
var a = 10; //지역변수
console.log(a); //지역변수 접근
console.log(this); //window
console.log(this.a); //전역변수에 접근
}
aaa();
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
console.log(this); //태그 자기자신
});
</script>aaa() 함수에 구현부를 보면 a 변수 하나가 10의 값을 가진채 선언되어 있다.
이는 선언됨과 동시에 window라는 JS 의 최상위 객체에 값이 담긴다.
그래서 아래에서
this.a 을 출력하면
window 객체의 a라는 변수의 값인 10이 호출됨.
결과
*BOM은 브라우저 객체 모델이라 하며, 내장객체들을 의미함.
*BOM(Browser Object Model) 안에 DOM이 들어감.
*DOM, document Object Model 객체는 문서 객체 모델이라 하며 화면을 핸들링하는 다양한 방법을 제공해줌.
*DOM 은 너무너무 중요. 모르면 자바스크립트를 모른다고 봐도 무방.
*DOM 객체, 즉 document.함수 로 요소에 접근하는 방법들은 아주 중요하니 아래에서 나오는 내용들을 잘 숙지하도록 하자.
* 노드, 엘리멘트, 태그는 다 같은 말이다.
* 아래에 메서드들은 반환값이 여러개이기 때문에 배열의 형식으로 값을 반환 해줌.
* getElementsByTagName() 은 자주 사용하지는 않는다.
★getElementById() 에서는 ID 는 고유한 값으로 하나이기 때문에 반환이 1개라서
중간에 Elements 즉 s 가 붙지 않았다.
★ 위에 3개의 함수들은 반환하는 값이 1개이더라도 배열로 반환을 해준다.
따라서 반환받는 값이 배열이라는 것을 인지하고 배열[인덱스] 이렇게 해당하는 태그를 호출해서 사용하도록 하자.
코드
<body>
<button id = "btn">버튼</button>
<input type="checkbox" name ="inter" value="1">java
<input type="checkbox" name ="inter" value="2">js
<input type="checkbox" name ="inter" value="3">css
<input type="checkbox" name ="inter" value="4">html
<script>
//element == node == 태그
var btn = document.getElementById("btn")
var inter = document.getElementsByName("inter");//name이 inter인 태그
btn.onclick = function(){
for(var i = 0; i<inter.length; i++){
console.log(inter[i]);
}
}
</script>
<hr>
<button id = "btn2">버튼</button>
<input type="radio" name="aaa" class="hello" value="1">프로그램
<input type="radio" name="aaa" class="hello" value="2">디자인
<input type="radio" name="aaa" class="hello" value="3">네트워크
<input type="radio" name="aaa" class="hello" value="4">보안
<script>
var btn2 = document.getElementById("btn2");
var hello = document.getElementsByClassName("hello"); //class명이 hello인 태그 - 반환이 배열
btn2.onclick = function(){
for(var i = 0; i < hello.length; i++){
console.log(hello[i]);
}
}
</script>
<br>
<button id="btn3">버튼</button>
<ul id="bye">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
<script>
var btn3 = document.getElementById("btn3");
//document는 한페이지 전체에서 값을 찾아옴.
var bye = document.getElementById("bye");//id가 bye인 태그
var li = bye.getElementsByTagName("li");//bye인 태그에서 탐색
btn3.onclick = function(){
for(var i = 0; i<li.length; i++){
console.log(li[i]);
}
}
</script>
</body>
#document는 페이지 (한 화면) 전체에서 값을 찾음.
아래사진에서 보면
document.getElementsByTagName("태그");
한 페이지 전체에서의 해당하는 태그를 다 배열에 담아서 반환해줌.
그런데 내가 원하는 범위내에서만 해당하는 태그를 가져올 수도 있음.
범위를 감싸고 있는 태그에 선택자를 준다.
아래에서 범위를 감싸고 있는 ul 태그에 id = "bye" 를 주었다.
그리고 나서
var bye 라는 변수에 태그를 담아주었다.
( var bye = document.getElementById("btn3"); )
그리고 나서
bye.getElementsByTagName("태그"); 하면
bye를 id값으로 갖는 ul태그의 범위 내에 있는
li 태그들만 배열에 담겨서 반환이 됨.
#지금까지 살펴본 방법들을 아래에 2개로 다 할 수 있음.
* css의 선택자를 선택하는 방법과 동일.
*document.querySelector( "이 안에 css 문법이 들어감 " )
*querySelector() 은 단일 선택자이기 때문에
querySelector(" css 문 ") 여기에 css 문 자리에 .box2 > ul > li 로 지정해주면
맨 위에있는 <li>안녕<li> 태그 하나만 반환이 됨.
*querySelectorAll() 은 querySelector과 다르게 반환하는 값이 여러개이기 때문에 배열로 값을 반환해줌.
-배열로 반환해주기 때문에 반복문을 돌려서 값을 가져와야한다. 아래 코드 참고.
코드
<body>
<button id = "btn">쿼리셀렉터확인</button>
<ul class = "box">
<li>hi</li>
<li>bye</li>
<li>good afternoon</li>
</ul>
<script>
var btn = document.querySelector("#btn") //css선택자로 얻습니다.
// var li = document.querySelector(".box > li");//li태그를 얻습니다(단일)
// console.log(li);
var lis = document.querySelectorAll(".box li");
btn.onclick = function(){
for(var i = 0; i <lis.length; i++){
console.log(lis[i]);
}
}
</script>
</body>-결과
# 태그의 속성 제어하기 - 엄청 중요함. 꼭 알고있어야함!
-태그사이의 값에 접근하려면
.innerHTML 을 통해서 접근하면 됨.
- 태그의 속성은 . 속성명으로 접근합니다.
-코드
<body>
<h3>태그의 속성 제어하기</h3>
<input type="text" value="" id="input" required>
<div class="msg"></div>
<button type="button" id="btn">확인</button>
<script>
//태그의 속성은 = .속성명으로 접근합니다.
var input = document.getElementById("input");
// console.log(input.type);//type속성
// console.log(input.id);//id속성 -> id속성은 웬만해서는 바꾸는거 아님.
// console.log(input.value); //value속성
// console.log(input.required); //required속성
// input.value = "변경";
//태그의 사이값을 HTML형식으로 얻음 innerHTML
var btn = document.getElementById("btn");
// console.log(btn.innerHTML);
var msg = document.querySelector(".msg")
//버튼을 누르면 사용자가 입력한 value가지고와서 msg태그사이에 출력.
btn.addEventListener("click", function(){
var a = input.value;
msg.innerHTML = a;
})
</script>
</body>결과
#실습1
결과
#실습2
<기억하기>
* 노드 , 엘리먼트 , 태그는 다 같은 말이다!
'JavaScript' 카테고리의 다른 글
- Total
- Today
- Yesterday
- 데이터베이스 수업
- api 활용
- 강남 중앙정보처리학원
- 가비지 콜렉팅
- 자바
- 국비지원 학원 수업 내용
- output 스트림
- 국비학원
- 강남역 12번 춣구
- 조건문
- 배열의 정렬
- nasted class
- 박문석 선생님
- JS ES6 문법
- 자바 api
- 다중 반복문
- 자바#자바수강기록
- 자바수업
- interface #자바
- 중앙정보처리학원
- 박인욱 강사님
- FOR문
- 내포 클래스
- input 스트림
- 국비학원 수업
- 자바스크립트 ES6 문법
- 알람 시계 문제
- 배열과 탐색
- 오코노라멘
- 배열 삭제
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |