[왕초보] 웹개발 종합반 2주차
자바 스크립트를 이용해서 반응형 버튼을 추가하였다.
버튼을 클릭했을 때, 경고문이 나왔으면 좋겠어!
스크립트 안에 넣을 것.
function a() {
alert('삑')
}
버튼 설정 건드릴 것.
<button class="form-button" type="button" onclick="a()">영화 기록하기</button>
버튼 클릭시 a라는 함수를 실행.
스크립트에 명시된 대로 a라는 함수가 실행되어, 클릭시 경고창과 함께 '삑'이 표시된다.
JQuery에 대해서 배웠다.
JQuery를 쓰는 이유?
기본 자바스크립트 문법을 통한 코드가 너무 길고 복잡해져서, 이를 단축시켜서 만들어놓은 일종의 코드 모음집.
제이퀴리를 쓰면 긴 코드를 쓸 필요 없이 문자 하나, 단어 하나로 지정이 가능하다.
매우 중요
제이퀴리를 쓰기 위해서는 먼저 헤드에 제이퀴리를 쓸 것을 명시하고, 불러와야한다.
<head>와 <head> 사이에
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
해당 코드를 입력해서 꼭 제이퀴리를 먼저 불러오도록 하자.
대상의 지정
CSS를 통해서 대상 지정을 할 때, class를 썼었다.
예시)<div class = "a"><div>
근데, 제이퀴리를 통한 대상 지정은 id를 사용한다.
예시<div id = "a"><div>
대상 지정을 통한 명령
앞선 a라는 아이디를 불러오고 싶을 때.
$('a') // a라는 아이디를 대상 지정
뒤에는 명령을 추가하면 된다.
1. a라는 아이디를 아예 비우고 싶다면?
$('a').empty()
2. 어떠한 텍스트를 표시하게 만들고 싶다면?
$('a').text('안녕!') // 안녕이라는 텍스트를 표시.
3. 중요! 어떠한 데이터를 부여하고 싶다면????
$('a').append(text_html) // text_html이라는 변수를 불러와 부여.
응용) 리스트, 딕셔너리, 반복문을 이용한 명령
리스트와 반복문의 결합
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty()
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
함수의 생성. 체크 리절트라는 함수를 생성하였다.
해당 함수는 여러 과일이 들어가 있는 리스트를 생성하고.
q1아이디의 항목을 비운다.
그리고 temp_html이라는 변수 안에, 리스트 내부를 반복시킨 걸 문단화한 데이터를 삽입한다.
마지막으로 q1아이디에 해당 변수를 삽입하여, 문단화한 데이터를 표시한다.
딕셔너리와 반복문의 결함
function checkResult() {
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 name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살</p>`
$('#q2').append(temp_html)
})
}
people이라는 이름의 리스트를 생성.
리스트 안에 인적 사항이 든 딕셔너리를 생성.
그 이후, q2라는 아이디를 지정하여, 해당 항목을 비운다.
반복문 생성. people을 반복시키며, 해당 반복을 a라고 칭한다.
name이라는 변수 생성. 해당 변수는 a의 이름을 불러온다.
age라는 변수 생성. 해당 변수는 a의 나이를 불러온다.
temp_html이라는 변수를 생성. 해당 변수는 name과 age를 불러와 xx는 xx살이라는 문단이란 데이터를 품고 있다.
마지막으로 이를 append를 이용하여 q2라는 아이디에 부여할 경우,
서영는 24살입니다.
현아는 30살입니다.
영환는 12살입니다.
서연는 15살입니다.
지용는 18살입니다.
예지는 36살입니다
이런 식으로 표시가 된다.