Javascript / JQuery / Fetch

코코코오딩

by 그레이슈27 2023. 6. 20. 22:18

Javascript란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.

웹서버는 'HTML + CSS + Javascript'를 주는데,

<html>

<head>

</head>

<style>

</style>

Javascript 작성.

ex1) 함수

function hey() {

console.log('hello!') //개발자 확인용 / alert('hello!')//경고 창을 띄워주는 함수

}

ex2) 기본연산

let a = 2 or '문자도'

let b = 3 or ' 가능' (변수 대입 : 3을 b라는 변수에 넣는다)

console.log(a+b) or log(a[0])

ex3) 자료형-리스트

let a = ['사과', '수박','딸기', '감']

console.log(a+b) or log(a[0])

ex4) 자료형-딕셔너리

let a = {'name':'영수', 'age':27}

console.log(a['age'])

ex5) 자료형-리스트와 딕셔너리의 조합

let a = [

{'name':'영수', 'age':27} ,

{'name':'철수', 'age':15} ,

{'name':'영희', 'age':20}

]

console.log(a[0]['name'])

ex6) 특정 문자로 문자열 나누기.

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta

result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail

result2[1] // com

(간단하게) myemail.split('@')[1].split('.')[0] // gmail

</script>

</html>

JQuery

JQuery란?

편리한 Javascript를 미리 작성해 둔 라이브러리. 전문 개발자들이 짜둔 코드를 가져와서 사용하는 것임으로 쓰기 전에 반드시 "임포트" 필요!)

jQuery Get Started (w3schools.com)

<head>

jQuery 삽입

</script>

</head>

css에서 선택자로 class를 썼다면, jQuery에서는 id값을 통해 html태그를 지정할 수 있다.

function checkResult(){

let island = ['하와이', '발리', '몰디브', '바하마']

$('#q1).text(a[1])

// 데이터가 많을 경우 반복문 활용!

$('#q1).empty()

island.forEach((a) => {

let temp_html = `<p>${a} 변수</p>`

$('#q1').append(temp_html)

})

// 조건문 활용!

if (조건) { //조건에 맞다면, } else { //아니라면, } // 반복문 + 조건문 동시 활용! let ages = [20, 15, 12, 25, 33, 40]

ages.forEach((a) => { if (a > 20) { console.log ('Adult') } else { console.log ('Child') } })

let HNL = {'island' : '하와이', 'year' : 2025}

$('#q2).text(b['island'])

let dream = [

{'island' : '하와이', 'year' : 2025}

{'island' : '발리', 'year' : 2024}

]

$('#q3).text(dream[1]['island'])

// $('#q3).empty()

dream.forEach((a) => {

let dstn = a['island']

let year = a['year']

let temp_html = `<p>${dstn}에는 ${year}에 가겠다.</p>`

$('#q3').append(temp_html)

</script>

<body>

</div>

</div>

<div>

</div>

서버-클라이언트 통신 JSON

1) 서버 -> 클라이언트

JSON은, Key : Value

2) 클라이언트 -> 서버 : GET 요청

데이터 조회 (Read)를 요청할 때

ex1) https://movie.naver.com/movie/bi/mi/basic.nhn?code=16xxxxx

서버 주소 : https://movie.naver.com/movie/bi/mi/basic.nhn

영화 정보 : code=16xxxxx

ex2) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8 // google.com의 search 창구에서 아래 정보를 전달한다는 뜻. q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)

Fetch

Fetch 코드 해설fetch("여기에 url을 입력") // 이 url로 웹 통신을 요청! (url만 있으면 GET 요청) .then(res => res.json( )) // 통신 요청을 받은 데이터는 res라는 이름으로 json화 한다. .then(data => { // json 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다 console.log(data) // 개발자 도구에 찍어보기 })

ex1) 반복문으로 區 데이터 출력하기.

fetch("http://~~~")

.then(response => response.json( ))

.then(data => {

let mise_list = response['RealtimeCityAir']['row'];

mise_list.forEach((a) => {

let mise = mise_list[a]

console.log(mise)

})

ex2) 區 데이터에서 區이름, 미세먼지 수치 골라서 출력하기.

fetch("http://~~~")

.then(response => response.json( ))

.then(data => {

let mise_list = response['RealtimeCityAir']['row'];

mise_list.forEach((a) => {

let mise = mise_list[a]

let gu_name = mise["MSRSTE_NM"];

let gu_mise = mise["IDEX_MVL"];

console.log(gu_name, gu_mise)

})

ex3)

function q1 {

fetch("http://~~~")

.then((response) => response.json( ))

.then((data) => data['RealtimeCityAir']['row'])

.then((data) => {

// console.log(data)

$('#names-q1').empty()

data.forEach(element => {

let sector = element.MSRSTE_NM

let mise = element.IDEX_MVL

// console.log(sector, ":", mise)

let temp_html = `<li>${sector} : ${mise}</li>

if (mise > 40) {

temp_html ='<li class = "red"> & {sector} : $(mise)</li>'

}

$('#names-q1').append(temp_html)

});

})

}

</script>

'코코코오딩' 카테고리의 다른 글

[웹개발, Spring] 1-1. 설치 및 프로젝트 생성 (0)	2024.01.31
Python // 설치, 기초 문법, 라이브러리 (0)	2023.06.21
SQL (0)	2023.06.12
[웹개발 종합반 1주차] HTML, CSS (0)	2023.05.02