JavaScript
1. 컴포넌트 선택 및 텍스트 변경
// myElement id값을 가진 컴포넌트를 선택
const myElement = document.querySelector('#myElement')
// 선택한 요소의 텍스트 내용을 변경
myElement.textContent = '새로운 내용'2. 버튼 이벤트 활용하여 함수 실행
<script>
function plus(){
const currentNumber = parseInt(myNumber.textContent);
myNumber.textContent = currentNumber + 1;
}
const myButton = document.querySelector('#myButton');
const myNumber = document.querySelector('#myNumber');
myButton.addEventListener('click', plus);
</script>jQuery
1. jQuery 를 사용하기 위해 import 필요
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>2. forEach 문 이외에 해당 요소의 값 변경
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty()
fruits.forEach((fruit)=>{
let temp_html = `<p>${fruit}</p>`
$('#q1').append(temp_html)
})
}* $('#q1').empty() : 해당 id값을 가진 요소의 값을 비운다.
* $('#q1').append(...) : 해당 id값을 가진 요소에 값을 추가한다.
- append() 추가 시 주의 : 백틱(``) 으로 묶어줘야한다. ( 백틱은 요소를 통째로 넣을 때 묶어주는 기호 )
* 백틱(``) 예시
let nameDict = {'name':'지웅', 'age':20}
let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`
console.log(profile)
Fetch로 요청 보내기
1. Fetch 기본 골격
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다* fetch(...) : 이 URL로 웹 통신 요청을 보냄 , 괄호 안에 URL만 있다면 GET(기본상태)로 보냄.
* .then() : 응답을 받은 뒤 (통신이 성공하면) 진행할것들
* res => res.json() : 통신 요청을 받은 데이터는 res 라는 이름을 붙여 사용 JSON 형태로 바꿔서 조작
'Flask > 웹개발' 카테고리의 다른 글
| [GPT] 웹개발 4주차 | Flask & DB (0) | 2023.10.15 |
|---|---|
| [GPT] 웹개발 3주차 | Python (0) | 2023.10.15 |
| [GPT] 웹개발 1주차 | HTML&CSS (0) | 2023.10.15 |