웹개발 종합반 2주차는 Java script로 웹이 동작을 수행하게하는 방법을 공부한다.
말그대로 script를 주어 작업을 수행하게 하는데, head문에 작성하는 것이 일반적임.
JQuery, JQuery에 따라오는 .append , Fetch 문에 대해서도 함께 공부하였다.
Java script에서 사용하는 기본적인 용어들.
<head>
<script>
function //함수
console.log //콘솔에 로그를 띄워 개발 내용 확인 및 공유
a, b, c ... //변수
'문자열' //작은 따옴표 안 글자를 출력함
alert //경고창 띄우기
hey() //함수 설정
let a = //함수 세부 수행내용 ...
</script>
</head>
JQuery 는 $()로 사용하며 비교적 간단하게 원하는 바를 적용할 수 있도록 해준다.
$ = id를 주는 것(=class, 정의)
문자열, 꾸미기 등 여러가지 활용을 하니 앞으로 차근차근 익숙해져가기.
이 안에서 if else 문, forEach문을 사용하여 데이터를 보기 좋게 출력할 수 있다.
if else는 조건문 / forEach는 반복문을 통한 동작 수행
let people = [
{ 'name': '철수', 'age': 15 },
{ 'name': '영희', 'age': 25 }]
if ( a > 20 ) {
temp_html = `<p>${name}는 ${age}살이며, 성인입니다.</p>`
} else {
temp_html = `<p>${name}는 ${age}살이며, 청소년입니다.</p>`
}
$('#q1').append(temp_html)이렇게 출력하면 결과는
영희는 25이며, 성인입니다.
철수는 15이며, 청소년입니다.
로 나올 것임.
(코드 일부만 작성하여서 이것만 쓴다고 나오진 않는다..)
for 문은 반복문인데, Each가 붙으면서 각각을 반복하는 반복문이 되었다.
let people = [
{ 'name': '철수', 'age': 15 },
{ 'name': '영희', 'age': 25 }
]
people.forEach(('name') => {
let temp_html = `<p>${name}</p>`
$('#q1').append(temp_html)
}
forEach문, append를 통해 동작 수행시 이름을 순차 출력할 수 있도록 한다.
(이게 맞는 코드인지는 모르겠는데ㅋㅋ 나중에 연습문제 하면서 직접 실행해봐야겠다)
` `
Backtick 이라 하며, html로 변환해줌.
$(`#실행하고자하는 부분`).empty()
동작을 실행하면 그 부분이 empty! 비워지게 된다.
Fetch문은 어떤 데이터가 있었을 때 URL에서 데이터를 가져와 활용할 수 있도록 한다.
데이터에서 필요한 부분을 추리고 필요조건(if else)을 붙여 원하는 방식으로 자료를 출력해낼 수 있다.
서버 - 클라이언트 간 통신
서버는 가져오고자 하는 데이터가 위치한 곳
API 는 창구!
클라이언트 요청에 의해 API를 거쳐 code를 가져옴
// 이후 더 덧붙일 내용이 있으면 추가로 작성하기로 한다.
내일목표
- 오전 중 2주차 웹개발 클래스, 파이썬 1주차를 마무리하고, 숙제 제출하기
- 팀 프로젝트 진행하기
오늘 내용에 파이썬 1주차랑 비슷한 부분이 있어서 즐거웠다:)
갑작스레 AI웹개발반에 합격하게 되었다.
이번주는 미니 프로젝트를 진행해야하니 공부시간을 잘 조절해야할 것 같다.
각오하고 있었다해도 갑작스레 추가된 일정들에 압박을 받는 것도 사실이어서
일정으로 스트레스 받지 않게 조심하고,,, 잘 나아가 보면 좋겠다.
화이팅!
'AI 웹개발반 > 웹개발, 파이썬 기초' 카테고리의 다른 글
| [python] for-else문 사용하기 (0) | 2023.08.15 |
|---|---|
| 230329-0402 웹개발, 파이썬기초 4주차 (0) | 2023.04.02 |
| 230324 웹개발/파이썬 3주차 (1) | 2023.03.24 |
| 230308 웹개발 1주차 (0) | 2023.03.08 |
| 230306 개발 공부 시작 (0) | 2023.03.06 |
