웹개발 종합반
1. 2주차
1-2. 자바스크립트
❔ 브라우저가 알아들을 수 있는 언어(브라우저 표준 언어)function hey(){ //함수 하나 만들기<head><script></...></...>
alert('안녕!');
}<body><button onclick="hey()">영화 기록하기</button></body>1-3. javascript 기초 문법 배우기
1) console.log('문장') 화면에 미리 찍어보기(F12)
2) 변수 선언: let a
a = 'Bob' // 문자열은 작은 따옴표
str1+str2 가능(대한+민국 = 대한민국)
3) 리스트 선언: let a = []
a[0], a.length ...
4) 딕셔너리 선언: let a_dict = {}
let a = {'name':'영수','age':27}
a['name'] // 영수
1-4. Javascript & JQuery 연습하기 (1)
Javascript를 JQuery이용해 간단하게 코드 짜기가 가능
css = class
Javascript = id 를 이용하여 바꾼다.
<head>
<script>
function checkResult() {
let a = '사과'
$('#q1').text(a)
$('#q1').css('color', 'red' )
alert(a) //알람띄우기
}
</script>
</head>
<body>
<div id="q1">테스트</div>
</body>1-5,6. Javascript & JQuery 연습하기 (2)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> //jQuery사용시 필요
<script>
function checkResult() {
//1 반복문
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
//2 조건문
let age = 24
if (age > 20) {
console.log('성인입니다')
}
}
//3 append
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
// ``<==백틱임 주의!!!
let temp_html = `<p>사과</p>`
$('#q1').append(temp_html) //html를 붙임
})
}
</script>
</head>1-7. 서버-클라이언트 통신 이해하기
1) HTTP 통신
클라이언트의 요청이 있을 때 서버가 응답하는 단방향 통신
JSON, Image, HTML 등 다양한 파일을 전송, 전달 가능
응답후 connetion이 끊어지는 것이 일반적
2) socket 통신
양방향 통신
3) JSON
자료형 Dictionary와 유사
4) GET, POST
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
GET → 일반적으로 데이터 조회(Read)시 사용
url뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value¶m2=value2
POST → 일반적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)시 사용
1-9. Fetch 시작하기 (1)
fetch("여기에 URL을 입력") url로부터 data받기
.then(res => res.json()) 받은데이터 json화 시킴
.then(data => { json화된 데이터를 data에 넣기
console.log(data)
})
1-10. Fetch 시작하기 (2)
<script>
function q1() {
fetch("서울시url")
.then((response) => response.json())
.then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
});
})
}
</script>1-12,13,14. Fetch 퀴즈, 숙제
https://rnjswo9578.github.io/Week/
