GPT 활용 웹개발 기초 2주차 - javascript와 chatGPT 활용

JavaScript 코드 실행법 + Console.log 사용 방법

javascript 코드는 브라우저 → 개발자 도구(F12/ alt+command+i) 콘솔창에서 실행 가능
console.log()는 개발자가 코딩한 것이 맞게 출력되는지 확인하기 위한 도구

예시

// console.log(변수)는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
// 개발자가 결과값을 보기 편하도록!
let age = 25;
console.log(age);
// console.log(변수1,변수2)로 여러 변수를 한 번에 출력할 수도 있어요.
// 아래를 복사해서 붙여넣어 보세요.
let food = '짜장면'
console.log(age, food);

JQuery

javascript 코드를 쉽게 사용하기 위해 사용되는 라이브러리, 사용 전에 import 필요

예시

<!DOCTYPE html>
<html>

<head>
  <title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<style>
  .button-part {
    display: flex;
    height: 50px;
  }
</style>

<body>
  <div class="top-part">
    <h1>자바스크립트 문법 연습하기!</h1>
  </div>
  <hr />
  <br>
  <h2>1. 함수</h2>
  <div class="button-part">
    <button onclick="checkResult()">결과 확인하기!</button>
  </div>
  <div class="list-part">
    <h2>2. 리스트</h2>
    <div id="q1">테스트</div>
  </div>
  <div class="dict-part">
    <h2>3. 딕셔너리</h2>
    <div id="q2">테스트</div>
  </div>
  <div>
    <h2>4. 리스트 딕셔너리</h2>
    <div id="q3">테스트</div>
  </div>
  <script>
    function checkResult() {
      let a = ['사과', '배', '감', '귤']
      $('#q1').text(a[1])

      let b = { 'name': '영수', 'age': 30 }
      $('#q2').text(b['name'])

      let c = [
        { 'name': '영수', 'age': 30 },
        { 'name': '철수', 'age': 35 }
      ]
      $('#q3').text(c[1]['age'])
    }
  </script>
</body>

</html>

백틱(``)

문자와 변수를 함께 써줄 수 있도록 하는 특수기호

예시

/* 벡틱 연습 코드 */
/* 반복문에 넣기 */
function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((fruit)=>{
		let temp_html = `<p>${fruit}</p>`
		$('#q1').append(temp_html)
	})
}

/* 딕셔너리 값 불러오기 */
let nameDict = {'name':'서영', 'age':24}

let profile = `${}의 나이는 ${}살 입니다`

let nameDict = {'name':'지웅', 'age':20}
let profile = `${nameDict['name']}의 나이는 ${nameDict['age']}살 입니다`
console.log(profile)

/* 리스트 & 딕셔너리 값 반복문에 넣기 */
let people = [
	{'name':'서영','age':24},
	{'name':'현아','age':30},
	{'name':'영환','age':12},
	{'name':'서연','age':15},
	{'name':'지용','age':18},
	{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((person) => {
  let name = person['name']
  let age = person['age']
  let temp_html = `<p>${name}는 ${age}살</p>`
  $('#q2').append(temp_html)
});`

JavaScript 기초 문법

변수 & 기본 연산
리스트 & 딕셔너리

// 변수 및 기본 연산
// 변수 선언 및 출력
let num = 20
console.log(num);

let first_name = 'bob';
console.log(first_name);

console.log(num + first_name);

// 리스트 & 딕셔너리
names = [{'name':'bob','age':20},{'name':'carry','age':38}]

console.log(names[0]['name']) // 'bob'을 출력
console.log(names[1]['name']) // 'carry'을 출력 


new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
console.log(names[2]['name']) // 'john'을 출력

조건문

let ages = [12, 15, 20, 25, 17, 37, 24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

// 순서대로 [false, false, false, true, false, true, true] 이므로
// 청소년입니다
// 청소년입니다
// 청소년입니다
// 성인입니다
// 청소년입니다
// 성인입니다
// 성인입니다
// 를 결과값으로 출력합니다!

함수 & 반복문

// 기본 함수
// 또, 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

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

console.log(result[0]) // 'sparta'을 출력
console.log(result[1]) // 'gmail.com'을 출력

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

console.log(result2[0]) // gmail -> 우리가 알고 싶었던 것!
console.log(result2[1]) // com

console.log(myemail.split('@')[1].split('.')[0]) 
// gmail -> 간단하게 쓸 수도 있다!

// 함수 만들기
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
	console.log('숫자', num1, num2);
	return num1 + num2;
}

console.log(sum(3, 5)); // 8 출력
console.log(sum(4, -1)); // 3 출력

// 반복문
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
	console.log(a)
})

서버 - 클라이언트 통신

클라이언트가 요청할 때에도, "타입"이라는 것이 존재합니다.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 예) 회원가입, 회원 탈퇴, 비밀번호 수정

Fetch

fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!

← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!

.then() ← 응답을 받은 다음 이렇게 할 거야!(통신이 성공했다면)

res ⇒ res.json() ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)

← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!

.then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일 거야

예시

// 서울시 미세먼지 데이터 fetch 연습
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { 
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
		})
	})

2주차 학습 내용 활용 제작 웹페이지 파일

motto_js.html

0.00MB

'항해 99 > Web' 카테고리의 다른 글

GPT 활용 웹개발 - 카드 삭제 기능 추가 (1)	2024.01.30
GPT 활용 웹개발 기초 5주차 - 웹 배포하기 (0)	2024.01.09
GPT 활용 웹개발 기초 4주차 - DB, SQLite (0)	2024.01.09
GPT 활용 웹개발 기초 3주차 - Python & Flask (0)	2024.01.09
GPT 활용 웹개발 기초 1주차 HTML, CSS (0)	2024.01.09

개발 관련 공부방

GPT 활용 웹개발 기초 2주차 - javascript와 chatGPT 활용

'항해 99 > Web' 카테고리의 다른 글

티스토리툴바

GPT 활용 웹개발 기초 2주차 - javascript와 chatGPT 활용

'항해 99 > Web' 카테고리의 다른 글

'항해 99/Web' Related Articles

티스토리툴바