[JS]함수 만들기(JQuery)

다른 언어들과 마찬가지로 JavaScript 에도 함수선언이 가능하다

 

함수 기본 문법

function 변수명(){
	....
}

 

 

예를 들어 script 태그안에 이러한 코드가 있다면

<button class="form-button" type="button" onclick="hey()">영화 기록하기</button>

 

영화 기록하기 버튼을 누르면 hey()라는 함수를 가져올 수 있다.

 

또한,HTML 요소의 내용이나 스타일도 변경할 수 있다.

 

다음은 JQuery에 대해 배워 볼 것이다.

 

JQuery란?

- HTML의 요소들을 조작하는 Javascript를 미리 더 쉽게 작성해둔 라이브러리

 

 

위의 함수나 javaScript를 사용하면 

document.getElementById('hello').innerHTML = '안녕';

 

이와 같이 쓸수 있는데 대게 복잡하다. 그치만 JQuery를 사용하면

$('#hello').html('안녕');

$('#태그이름').html('메세지'); 의 형태

 

이렇게 직관적이고 짧게 작성할 수 있다.

 

---

function안에 사용할 수 있고 안에는 자료형,리스트형,리스트 딕셔너리형태 등 삽입이 가능하다.

 

자료형

function checkResult() {
	let a = '사과'
	$('#q1').text(a)
}

 

 

리스트형

function checkResult() {
	let a = ['사과', '배', '감', '귤']
	$('#q1').text(a[1])
}

 

 

리스트 딕셔너리형

function checkResult() {
	let c = [
	{'name':'영수', 'age':30},
	{'name':'철수', 'age':35}
]

   $('#q3').text(c[1]['age'])
}

 

 

 

실습

append 를 사용하여 태그명 q1에 반복문을 사용하여 적용시키기

 function checkResult() {
        let fruits = ['사과','배','감','귤','수박']
        $('#q1').empty();

        fruits.forEach(a => {
            let temp_html = `<p>${a}</p>`;
            $('#q1').append(temp_html);
        });
    }

 

코드해석

- 우선 리스트를 만들고 q1을 비운다. 다음 ForEach 반복문을 사용하여 temp_html 변수에 fruits 리스트값을 대입한다.

다음 q1에 temp_html 의 값을 순서대로 반복하여 삽입한다.

 

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)
	})
    }

 

코드해석q2의 값을 비우고 반복문을 이용해  name 을 a의 name값 age를 a의 age값으로 변수를 지정하고 temp_html 에 이 값을 대입하여 q2에 temp_html 의 값을 순서대로 반복하여 삽입한다.

 

$ = 값