Front-end
브라우저 - 서버에게 요청 , 서버로부터 결과물을 받아서 보여줌 , 즉 우리에게 인터넷을 보여주는 응용 프로그램
ex ) 크롬, 인터넷 익스플로러 등등
html - 뼈대 (문서형태기반)
css - 꾸미는거 (폰트,색상)
javascript - 클릭하면 이동하는 등의 움직임
Javascript
1. 변수지정 let
2. 리스트
요소 추가 let arr=[1,2,3]
arr.push(4) => arr=[1,2,3,4]
arr.length=4
3. 딕셔너리 => 순서 안중요
4. 문자열
-
let my_email='dltndudvldzm@naver.com'
-
my_email.split('@')[0]
=> dltndudvldzm -
my_email.split('@')[1].split('.')[0]
=> naver
5.함수
function sum(num1,num2)
{
alert('hi')
return num1+num2
}
let result=sum(2,3)
- alert 먼저 진행됨
- result=5
6. 콘솔에 출력
console.log()
7. 조건문
js는 if,else if,else
8. 반복문
Ajax 통신
웹은 클라이언트와 서버의 통신으로 데이터를 주고받게 된다.
클라이언트가 url을 쳐서 서버에게 데이터를 요청하는 순간 서버는 response를 해주고 그 둘의 연결은 끊기게 된다.
그래서 화면을 갱신할 때마다 서버와 클라이언트는 request 와 response를 반복하며 페이지전체를 갱신하게 되는데 페이지의 일부분만 갱신을 할 때에도 이와 같은 방법을 쓴다면 자원낭비 , 시간낭비를 초래한다.
따라서 위 문제점을 개선하기 위하여 ajax를 사용하는데,
Json 이나 Xml 형태로 필요한 데이터만 받아서 갱신하기 때문에 자원과 시간 절약 가능!
나는 jquery ajax에 대해서 배웠는데 jquery는 css의 부트스트랩처럼 미리 만들어둔 자바스크립트코드이기 때문에 즉 라이브러리이기 때문에 꼭 import를 해주고 사용해야함 !!
EX) 페이지가 새로고침 될 때마다 뜨는 문구
- $(document).ready(function(){
//로딩되자마자 실행시키는 함수
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate", //api
data: {},
success: function(response){ //응답이오면
let money = response['rate'];
$('#loading').append('달러-원 환율:',money) //내가 원하는 위치에 문구가 나오도록 할 수 있음
}
})
