웹개발 종합반 - 2주차

su·2023년 4월 27일
CSShtml기초스파르타코딩클럽웹공부
0

웹공부

목록 보기
2/4
post-thumbnail

Javascript

Javascript란?

  • 브라우저가 알아들을 수 있는 프로그래밍 언어

Javascript 기초

<script>
	function 함수명 () {
		alert ('안녕!'); //안내창을 뜨게 하는 명령어
	}
</script>

버튼 클릭 시 나오게 하고 싶다면

<button onclick = "함수명()">내용</button>

화면에 미리 찍어보기
(브라우저의 검사 - 콘솔에서 확인 가능)

<script>
	function 함수명() {
    	console.log(내용)
    }
</script>

Javascript 기본

변수(let으로 선언) & 기본연산

<script>
// 고정될 값이라면 const, 변하는 값이라면 let
let a = 2
a = 'bob'
</script>
  • 변수는 값을 저장하는 박스로 처음 변수 저장 시, let 붙이기
  • 한 번 선언했으면 다시 선언하지 않고 값 대입

사칙연산 & 문자열 더하기

<script>
let a = 2
let b = 3
console.log(a+b) // 5
</script>
<script>
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국
</script>

리스트 & 딕셔너리

  • 리스트: 순서를 지켜 가지고 있는 형태 (0부터 count)
<script>
let a_list = []
// or
let a = ['하나', '둘', '셋', '넷']
</script>
<script>
console.log(a[1]) // 둘
console.log(a[0]) // 하나
console.log(a.length) // 4 : 리스트 길이 구하기
</script>
  • 딕셔너리: 키(key) - 밸류(value) 값의 묶음
<script>
let a_dict = {}
// or
let a = {'name' : '하이', 'age' : 25}
</script>
<script>
console.log(a)
console.log(a['name']) // 하이
console.log(a['age']) // 25
</script>

리스트와 딕셔너리의 조합

<script>
let a = [
	{'name' : '두준', 'age' : 33},
    {'name' : '요섭', 'age' : 32},
    {'name' : '기광', 'age' : 32},
    {'name' : '동운', 'age' : 31},
]
console.log(a[0]['name']) // 두준
console.log(a[1]['age']) // 32
</script>

리스트 & 딕셔너리가 필요한 이유

  • 정보가 많아지면 알아보기 힘드므로 딕셔너리를 활용해 정보를 필요한 묶음으로 표현 가능
  • 위의 묶음에 순서를 나타내기 위해 리스트를 사용하면 보기 편함

→ 보기에도 깔끔하고, 다루기 쉽고, 추가되는 데이터도 간단하게 대응 가능

추가 기본 함수들

나눗셈의 나머지

<script>
let a = 10
let b = 7
a % b = 3
</script>

특정 문자로 문자열 나누기

<script>
let email = 'high@light.com'
let result = email.split('@') // ['high', 'light.com']
result[0] // high
result[1] // light.com
let result2 = result[1].split('.') // ['light', 'com']
result2[0] // light
result2[1] // com
email.split('@')[1].split('.')[0] // light → 로 간단하게 가능
</script>

Javascript & jQuery 연습 - 1

JQuery

  • 움직이게 만들기 위해 웹을 조작하기 위해 사용
  • Javascript만 사용하면 복잡하니 jQuery도 함께 사용하는 것

HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리

  • Javascript만 사용하기에는 코드가 복잡하고 브라우저 사이의 호환성 문제도 있어 jQuery 라이브러리가 등장하게 됨
Javascript.ver
document.getElementById("element").style.display = "none";
jQuery.ver
$("#element").hide();

jQuery 사용하기

jQuery CDN 부분을 참고하여 임포트 함

<head>
	<script src = "jQuery CDN"></script>
</head>
  • jQuery를 사용할 때에도 CSS 처럼 마찬가지로 지정해 주어야 함
  • jQuery에서는 id 값을 통해 특정 버튼 / 인풋박스 / div 등을 지정함

text 값 바꾸기

<script>
	function checkResult() {
    	let a = "하이"
        $('#d1').text(a)
    }
</script>
<head>
	<div id = "d1">Test</div>
</head>
  • $("아이디값") 으로 html 태그 지정해주기
  • 지정한 다음, 바꿔줄 명령어 적기 (text(a)로 글자 값으로 a 지정)

리스트 사용

<script>
let a = ['두준', '요섭', '기광', '동운']
// 리스트 두 번째 값으로 바꿔 넣으려면?
$('#d1').text(a[1])
</script>

딕셔너리 사용

<script>
let b = {
	'name' : '두준',
    'age' : 33
}
// d2 아이디 값에 딕셔너리의 키 값(이름)으로 바꾸기
$("#d2").text(b['name'])
</script>

리스트 & 딕셔너리 사용

<script>
let c = [
	{'name':'두준', 'age' : 33},
    {'name':'요섭', 'age' : 32},
    {'name':'기광', 'age' : 32},
    {'name':'동운', 'age' : 31}
]
// d3 아이디 값에 리스트에서 원하는 딕셔너리의 키 값 넣기
$("#d3").text(c[3]['age'])
</script>

Javascript & jQuery 연습 - 2

반복문

<script>
let members = ['두준', '요섭', '기광', '동운']
members.forEach((a) => {
	console.log(a)
})
// members의 각 요소를 보되, 이름은 a로 지정 (이름 상관없음)
</script>

조건문

<script>
// 20살 이상이면 성인, 이하면 청소년
let age = 21
if (age > 20) {
	console.log("성인")
} else {
	console.log("청소년")
}
</script>

반복문 + 조건문

<script>
let ages = [33, 19, 32, 16, 32, 31, 18]
ages.forEach((a) => {
	if (a > 20) {
    	console.log("성인")
    } else {
    	console.log("청소년")
    }
})
</script>

jQuery 연습

checkResult() 함수 안에 적어보기

<script>
function checkResult() {
	$("#d1").empty() // 맨 처음에 있던 요소는 지워주기
	let members = ['두준', '요섭', '기광', '동운']
    members.forEach((a) => {
    	let temp_html = `<p>${a}</p>`
        $("#d1').append(temp_html)
    })
}
</script>

서버-클라이언트 통신

서버 → 클라이언트: "JSON" 이해하기

  • JSON: Key : Value로 이루어짐 (딕셔너리 자료형과 매우 유사)

클라이언트 → 서버: GET 요청 이해하기

  • 클라이언트가 요청 할 때도, "타입" 이 존재
  • GET → 데이터 조회(Read) 요청 시
  • POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 시

GET 사용하기

"https://movie.daum.net/moviedb/main?movieId=161806"
위 링크는 "?" 로 쪼개지게 됨
"?"를 기준으로 앞은 <서버주소>, 뒷 부분이 [영화 번호]

  • GET 방식으로 데이터를 전달하는 방법
    ?: 여기서부터 전달할 데이터가 작성됨
    &: 전달할 데이터가 더 있음

Fetch 시작하기

Fetch 기본 골격

<script>
// 이 URL로 웹 통신 요청. 괄호 안에 다른 내용이 없다면 GET
fetch("여기에 URL") 
	// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 함
	.then(res => res.json()) 
    // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용
    .then(data => {
    	let rows = data['key값']['key값']
        rows.forEach((a) = > {
        	// 개발자 도구에 찍어보기
        	console.log(a['key값'],a['key값']) 
        })
	})
</script>
  • GET 요청은 url 뒤에 붙여 데이터를 가져감
  • POST 요청은, data : {} 에 넣어 데이터를 가져감

성공하면, response 값에 서버의 결과 값을 담아 함수 실행

Fetch 연습하기

<script>
function fun1() {
	fetch("여기에 URL").then(res => res.json()).then(data => {
    	$("#id값").empty()
    	let rows = data['key값']['key값']
        rows.forEach((a) = > {
        	let 변수1 = a['key값1']
            let 변수2 = a['key값2']
        	let temp_html = `<li>${변수1} : ${변수2}</li>`
            $(#"id값").append(temp_html)
        })
	})
}
</script>

변수 값에 따라(ex.변수2 > 30) 글씨 색을 다르게 주고 싶다면?

<style>
.fontc {
	color: 색상명;
}
</style>
<script>
function fun1() {
	fetch("여기에 URL").then(res => res.json()).then(data => {
    	$("#id값").empty()
    	let rows = data['key값']['key값']
        rows.forEach((a) = > {
        	let 변수1 = a['key값1']
            let 변수2 = a['key값2']
        	let temp_html = ``
            
            if (변수 2 > 30) {
            	temp_html = `<li class='fontc'>${변수1} : ${변수2}</li>`
            } else {
            	temp_html = `<li>${변수1} : ${변수2}</li>`
            }
            $(#"id값").append(temp_html)
        })
	})
}
</script>
profile
su
(❁´◡`❁)
이전 포스트

웹개발 종합반 - 1주차

다음 포스트

웹개발 종합반 - 3주차

0개의 댓글