웹개발 종합반 2주차

Javascript 및 JQuery 기본

Javascript란 html을 동적으로 사용하기 위한 프로그래밍 언어

JQuery란 Javascript로 미리 작성된 라이브러리로 Javascript를 보다 쉽게 사용하기 위해 사용한다.

head에서 script안에 작성한다.

 

Javascript 기본 문법

// 변수 선언
let name = '철수'

let a = 5
let b = 2

// 사칙연산 가능
a + b = 7 
a - b = 3
a * b = 10
a / b = 2.5
a % b = 1 // 나눗셈의 나머지

// 리스트 및 딕셔너리
let a = ['사과', '배', '감', '귤'] // 리스트 - 배열과 동일
let b = {'name':'영수', 'age':30} // 딕셔너리 - 키-값 형태(JSON)
let c = [ // 리스트 속 딕셔너리 가능
     {'name':'영수', 'age':30},
     {'name':'철수', 'age':35}
]

// 반복문 ( 기본 문법을 사용가능 하지만 forEach로 편리하게 사용가능)
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
fruits.forEach((a) => {
    console.log(a)
})

// 조건문
if (a > 20) {
     console.log('성인입니다.')
} else {
     console.log('청소년입니다.')
}

// 특정 문자로 문자열을 나누고 싶은 경우
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를 사용하기 위해 추가

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

JQuery 사용

<script>
     function checkResult() {
          let a = ['사과', '배', '감', '귤']
          // $()를 통해 변수 사용가능
          $('#q1').text(a[0]) // #id를 통해 지정 가능
          $('#q1').css('color', 'red') //css도 변경이 가능
          // `` 통해 문자와 변수 사용가능
          let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
          // 자주 사용
          $('#names-q1').empty() // 삭제
          $('#names-q1').append(temp_html) // 추가
     }
</script>

부트스트랩을 사용 시 링크와 스크립트를 추가해주어야 한다. (부트스트랩 사이트에서 복사할 수 있음)

 

Fetch 기본

Fetch란 API를 통해 정보를 보내고 받아올 때 사용하는 코드

fetch("API URL" , POST형식 사용{method: "POST", body: 키-값 데이터} 없으면 GET형식).then(결과 변수 => 결과 정보를 json형식으로 변환).then(변환된 정보 키-값data 변수명 => {
    // 내용
})

fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
    let a = data['rows']['row'] // data의 정보를 타고 타고 가져올 수 있음.
})

 

단축키(윈도우 - 리눅스)

• 주석 : Ctrl + / = Command + /
• 줄정렬 : Shift + Alt + F = Shift + Option + F
• 줄복사 : Shift + Alt + 아래방향키 = Shift + Option + 아래방향키
• 줄이동 : Alt + 방향키 = Option + 방향키