[ 웹 만들기 ]
Html은 뼈대, CSS는 꾸미기, JS는 움직이기
- Javascript 는 웹을 움직이게 하는 코드
- jQuery는 Html 뼈대를 선택해서 쉽게 조작할 수 있음
- Fetch는 짧은 코드로 요청을 보내고 받아올 수 있음
[ Javascript(JS) ]
▶ JS란?
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
JS는 브라우저한테 명령을 내리는 표준언어
브라우저는 기본적으로 JS를 알아듣게 설계되어있고 모든 웹서버는 Html + CSS + JS를 주게 되어있음
▶ JS 함수만들기
프로그래밍에서는 정해진 일을 반복하는 친구를 함수라고 함
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 JS 작성
function 함수명(){
내용
}
예시
<head>
<script>
function hi() {
alert("안녕!");
}
</script>
</head>
<body>
<button onclick="hi()">안녕버튼</button>
</body>위에 예시를 직독직해하면, 버튼을 클릭하면 hi()를 부름
hi함수 안에 코드 실행
안녕!이라는 내용이 담긴 경고창이 뜸
fuction hi()라는 규칙으로 hi라는 함수를 만들었고
alert("안녕!")이라는 작업을 원할때마다 반복적으로 수행하게 만듬
▶ console.log( )
코딩한 것이 맞게 출력되는지 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log
브라우저 화면에 오른쪽클릭 검사를 누르면 개발자도구가 뜸 혹은 F12를 눌러도 됨
개발자도구에 Console 탭을 누르면 console.log()에 입력한 값이 뜸
▶ 변수 & 기본연산
변수선언 변수명 = 값오른쪽에 있는 값을 왼쪽 변수에 넣는 것
예시로 let a = 2면 2를 a라는 변수에 넣는다고 생각하면 됨(let으로 변수를 선언함)
문자열은 작은따음표나 큰따옴표로 감싸줌
let a = 'Bob'
사칙연산, 문자열 더하기가 기본적으로 가능함
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국
리스트
순서를 지켜서 가지고 있는 형태
컴퓨터는 0부터 셈. 즉 우리가 생각한 첫번째를 원한다면 0으로 입력해야 하는 것
let a_list = [] // 빈 리스트를 선언
let a = ['사과','수박','딸기','감']
console.log(a[0]) // 사과
딕셔너리
키(key) - 밸류(value) 값의 묶음
let a_dict = {} //빈 딕셔너리
let a = {'name':'HE','age':19}
console.log(a) // {'name':'HE','age':19}
console.log(a['name']) //HE
- 리스트와 딕셔너리를 조합한 형태의 자료를 정말 많이 씀. 기초 문법
순서를 표시할 수 있고 정보를 묶을 수 있기 때문에 중요함
let a = [
{'name':'영수','age':27},
{'name':'철수','age':15},
{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15
▶ 기본함수들
사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재
나눗셈의 나머지
let a = 20
let b = 7
console.log(a % b) //6
특정 문자로 문자열 나누기
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 간단하게 쓸 수도 있음
[ JQuery ]
▶ JQuery란?
JQuery는 웹을 조작하려고 쓰는 것인데, JS만 사용하면 복잡하기 때문에 JQuery도 쓰는 것
JQuery는 HTML의 요소들을 조작하는, 편리한 JS를 미리 작성해둔 라이브러리
즉 JS로 모든 기능을 구현할 수 있지만 코드가 복잡하고 브라우저간 호환상 문제를 고려해 JQuery란 라이브러리 등장
라이브러리이기때문에 import 필수!!
▶ JQuery와 JS 코드 비교
document.getElementById("element").style.display = "none"; //JS
$('#element').hide(); //jQuery
▶ JQuery 사용하기
미리 작성된 코드를 가져오는 것을 import(임포트)라고 부름
JQuery사이트: https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
<head> 와 </head> 사이에 아래를 넣으면 끝
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
JQuery는 CSS클래스처럼 JS에서 Html을 움직이게 하기 위한 명찰, id값이 필요함
<div id="q1">테스트</div>
$(’#id값’) 으로 어떤 html 태그를 바꿀 것인지 지정해줌
지정했다면, 자신이 원하는 명령어 입력
function checkResult() {
let a = '사과'
$('#q1').text(a)
}
결과를 보면 id값이 q1인 태그의 내용이 변수 a의 값인 사과로 변경됨
같은 방식으로 리스트나 딕셔너리 자료형의 내용으로 변경해 넣을 수도 있음
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']) //35
결국 $(’#id값’) 으로 어떤 html 태그를 바꿀 것인지 지정해주고 자신이 원하는 명령을 해주는것이 중요함
▶ JS & JQuery 연습
반복문
반복을 시켜주는 것
let fruits = ['사과','배','감', ... ,'귤']
console.log('사과')
console.log('배')
console.log('감')
...
console.log('귤')한개한개 console로 찍을수 없으니 반복문으로 돌려 console을 찍을려면
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})fruits의 요소를 하나씩 확인하는데 이름은 a, a는 변수로 아무이름이나 상관없음
조건문
조건에 맞춰 실행을 다르게 해줌
if (조건) {
// 조건에 맞다면~
} else {
// 아니라면~
}
반복문과 조건문을 합쳐서 원하는 바를 이룰수 있음
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
▶ JQuery 연습
append
값을 추가할 수 있음
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
$("#q1").empty();
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});
let people = [
{ name: "서영", age: 24 },
{ name: "현아", age: 30 },
{ name: "영환", age: 12 },
{ name: "서연", age: 15 },
{ name: "지용", age: 18 },
{ name: "예지", age: 36 },
];
$("#q2").empty();
people.forEach((a) => {
let temp_html = `<p>${a["name"]}는 ${a["age"]}살</p>`;
$("#q2").append(temp_html);
});
}위에 예시를 보면 append를 이용하여 id값이 q1인 태그에 반복문으로 리스트 fruits의 내용을 하나씩 추가하고 있음
`은 백틱이라고 함
백틱을 사용하면 ${ }를 사용해서 문자열과 변수를 적절히 같이 사용할 수 있음
${ }안에 변수를 넣으면 ${변수}가 값으로 읽힘
[ 서버 클라이언트 통신 이해]
▶ JSON
서버에서 클라이언트로 데이터를 내려줄 때 dictionary 형태로 내려주는 것을 JSON이라고 함
JSON은, Key:Value로 이루어져 있음
- 크롬 익스텐션 JSONView를 설치하면 좀더 예쁘게 JSON을 볼 수 있음
http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99▶ 클라이언트 → 서버: GET 요청 이해하기
클라이언트가 요청 할 때 "타입"이라는 것이 존재함
- GET → 통상적으로 데이터 조회(Read)를 요청할 때
- 예) 영화 목록 조회
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
- 예) 회원가입, 회원탈퇴, 비밀번호 수정
▶ GET
GET 방식으로 데이터를 전달하는 방법
- ? : 여기서부터 전달할 데이터가 작성된다는 의미
- & : 전달할 데이터가 더 있다는 뜻
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967첫번째 예시로 위 주소는 크게 두 부분으로 쪼개짐("?"를 기준으로 쪼개짐)
- 앞부분이 <서버 주소>
- 뒷부분이 [영화 번호]
- 영화 정보: code=161967
- code번호로 영화번호를 주자라는 것은 프론트엔드와 백엔드 개발자가 미리 정해둔 약속
- 프론트엔드가 code로 영화번호 줄께요하면 백엔드가 okay code로 영화번호가 들어온다고 생각하고 코딩할께요하고 서로 약속을 하는 것
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
두번째 예시로 위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
- q=아이폰 (검색어)
- sourceid=chrome (브라우저 정보)
- ie=UTF-8 (인코딩 정보)
[ Fetch 시작하기 ]
▶ Fetch 기본 골격
fetch("여기에 URL을 입력")
.then(res => res.json())
.then(data => {
console.log(data)
})
- fetch("여기에 URL을 입력"): URL로 웹 통신 요청을 보냄
- 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
- GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감
- http://naver.com?param=value¶m2=value2
- POST 요청은, data : {} 에 넣어서 데이터를 가져감
- data: { param: 'value', param2: 'value2' },
- GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져감
- 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
- .then(): 통신 요청을 받은 다음 이렇게 할 것이다
- res ⇒ res.json()
- 통신 요청을 받은 데이터는 res 라는 이름을 붙임(변수명 변경 가능)
- res는 JSON 형태로 바꿔서 조작할 수 있게 함
- .then(data ⇒ {}): JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙여 사용
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행
예시
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_NM"]}`);
});
});
※ jQuery를 사용하고 있는데 jQuery를 임포트 하지 않았다면 개발자도구를 열면 에러가 뜸
Uncaught TypeError: $ is not a function이 개발자 도구에 떴다면 jQuery가 없다는 뜻으로
jQuery가 제대로 임포트 되어있는지 확인!!
'항해99' 카테고리의 다른 글
| JavaScript 문법 뽀개기 (0) | 2023.04.18 |
|---|---|
| 웹개발 종합반_5주차 (1) | 2023.04.16 |
| 웹개발 종합반_4주차 (0) | 2023.04.10 |
| 웹개발 종합반_3주차 (0) | 2023.04.07 |
| 웹개발 종합반_1주차 (4) | 2023.04.01 |
댓글