1. Javascript ; 웹페이지에 동적인 기능을 구현하는 데에 사용되는 언어
- 변수 선언 let
let name = 'bob';
console.log(name); //bob
- 반복문 foreach (for아님)
let ages = [15,39,28];
ages.foreach(a => {console.log(a)});
//15
//39
//28
2. JQuery ; 자바스크립트 라이브러리, 생산성 ↑
1) import 하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>제이쿼리 사용할 때는 id 붙이기
2) onclick
<script>
function hey(){$('#title').text('쥬라기월드');}
</script><button onclick='hey()' type="button" class="btn btn-outline-light">영화 기록하기</button>onclick= 'function명' --> 버튼을 클릭했을 때 function() 실행
3) empty, append
<script>
function checkResult() {
let people = [
{ name: "서영", age: 24 },
{ name: "현아", age: 30 },
{ name: "영환", age: 12 },
{ name: "서연", age: 15 },
{ name: "지용", age: 18 },
{ name: "예지", age: 36 },
];
$("#q2").empty(); //지우기
people.forEach((a) => {
let name = a['name'];
let age = a['age'];
let temp_html = `<p>${name}는 ${age}살입니다.</p>`; // `` 안에 만들고 싶은 태그 넣기
$("#q2").append(temp_html); //붙이기
});
}
</script>
4) toggle
<script>
function openclose(){$('#mypostingbox').toggle();}
</script><div id="mypostingbox" class="mypostingbox">"mypostingbox"와 같이 id를 설정하여 사용한다.
5) input값의 value를 가져와서 활용하기
function makeCard(){
//input값의 value를 가져옴
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
//카드 붙이기
let temp_html = `<div class="col">
<div class="card h-100">
<img
src="${image}"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
3. Fetch ; JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메소드
1) 기본 골격
fetch("api 주소").then(res => res.json()).then(data => { console.log(data) })
2) document ready - 문서가 준비되었을 때 함수 실행
$(document).ready(function () { alert('안녕!'); })
ex.
-head 부분
<head>
<script>
$(document).ready(function () {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul")
.then((res) => res.json())
.then((data) => {
let temp = data["temp"]; //temp 값을 변수에 저장
$('#temp').text(temp); //span태그에 temp값으로 text를 씀
});
});
</script>
</head>
-body 부분
<li>
<a href="#" class="nav-link px-2 text-white"> 현재 기온 : <span id="temp"> </span>도</a>
</li>
날씨 api 서버에 요청을 보낸다. 기온 값을 받으면 (document ready) "현재 기온 : " 옆에 text 표시
'TIL' 카테고리의 다른 글
| 5일차) 미니 프로젝트 발표회 참석 (0) | 2024.11.08 |
|---|---|
| (조금 늦은...;;) 스타터 노트 (1) | 2024.11.08 |
| 4일차) 웹개발 종합반 5주차 깃허브를 통한 web배포 (1) | 2024.11.07 |
| 3일차) 웹개발 종합반 4주차 파이어베이스 (0) | 2024.11.06 |
| 1일차) 웹개발 종합반 1-2주차 html, css (0) | 2024.11.04 |
댓글